/* ============================================================
   OptimityFX — Premium Creative Studio
   Design System / Global Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- Tokens ---------- */
:root {
  --black:      #07090C;
  --bg-2:       #0B0E13;
  --panel:      #10141B;
  --panel-2:    #141923;
  --line:       #1E2430;
  --line-soft:  #181D26;
  --white:      #FFFFFF;
  --text:       #E7EAF0;
  --muted:      #9AA3B2;
  --dim:        #5E6776;
  --faint:      #3A424F;

  --accent:     #00D4FF;   /* teal/cyan signature */
  --accent-2:   #1E90FF;
  --red:        #FF3B57;   /* FX red */
  --red-soft:   #CC2222;

  /* Soothing cool gradient (teal → blue → soft violet) — replaces the harsh rainbow.
     Loops seamlessly so it can animate gently. */
  --spectrum: linear-gradient(90deg,#00D4FF,#3AA0FF,#7C7BFF,#3AA0FF,#00D4FF);
  --spectrum-soft: linear-gradient(90deg,#00D4FF,#4D9FFF,#9B86FF);
  --grad-cool: linear-gradient(135deg,#00D4FF 0%,#1E90FF 100%);
  --grad-warm: linear-gradient(135deg,#FF8A3D 0%,#FF3B57 100%);
  --grad-hero: radial-gradient(ellipse 80% 60% at 75% 10%, rgba(255,60,87,0.10) 0%, transparent 55%),
               radial-gradient(ellipse 70% 70% at 10% 90%, rgba(0,212,255,0.12) 0%, transparent 55%);

  --shadow:   0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-sm:0 8px 30px -12px rgba(0,0,0,.6);
  --glow-c:   0 0 40px -8px rgba(0,212,255,.45);

  --radius:   18px;
  --radius-sm:12px;
  --maxw:     1240px;

  --head: 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle grain / vignette over whole page */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(255,60,87,.06), transparent 60%),
              radial-gradient(ellipse 90% 50% at 50% 110%, rgba(0,212,255,.07), transparent 60%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #00131a; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.section { padding: 110px 0; position: relative; z-index: 1; }
.section--tight { padding: 70px 0; }
.center { text-align: center; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family: var(--head); font-weight: 800; line-height: 1.02; letter-spacing: -.5px; }
.display {
  font-style: normal; font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: .95; letter-spacing: -2px; text-transform: uppercase;
}
h2.h-sec { font-size: clamp(2.1rem, 4.5vw, 3.5rem); font-weight: 800; font-style: normal; text-transform: uppercase; letter-spacing: -1px; }
h3 { font-size: 1.5rem; letter-spacing: -.3px; }
p { color: var(--muted); }
.lead { font-size: clamp(1.02rem,1.6vw,1.22rem); color: var(--muted); max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 600;
  font-size: .72rem; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content:""; width: 26px; height: 1px; background: var(--spectrum-soft); }
.eyebrow.center-eb { justify-content: center; }

.grad-text { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* soothing, slowly-drifting gradient text */
.spectrum-text {
  background: var(--spectrum); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientDrift 9s ease-in-out infinite;
}
@keyframes gradientDrift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@media (prefers-reduced-motion: reduce){ .spectrum-text { animation: none; } }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head p { margin-top: 14px; }

.spectrum-rule { height: 2px; width: 100%; background: var(--spectrum); border-radius: 2px; opacity: .85; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .92rem; letter-spacing: .2px;
  padding: 14px 26px; border-radius: 100px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--white); color: #0a0a0a; }
.btn-primary:hover { box-shadow: 0 12px 34px -10px rgba(255,255,255,.4); transform: translateY(-2px); }
.btn-accent { background: var(--grad-cool); color: #02151c; font-weight: 700; }
.btn-accent:hover { box-shadow: var(--glow-c); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--accent); color: var(--white); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 1rem; }
.btn-sm { padding: 10px 18px; font-size: .82rem; }

/* ---------- Brand logo ---------- */
.brand-img { height: 42px; width: auto; display: block; transition: opacity .25s, transform .35s var(--ease); }
.brand:hover .brand-img { opacity: .85; }
.brand-foot .brand-img { height: 56px; }
@media (max-width: 560px){ .brand-img { height: 36px; } }
/* legacy inline wordmark (kept as fallback) */
.brand { display: inline-flex; align-items: center; gap: 0; user-select: none; }
.brand-logo {
  font-family: var(--head); font-style: normal; font-weight: 800;
  font-size: 1.7rem; line-height: 1; letter-spacing: -1px;
  display: inline-flex; align-items: center;
}
.brand-logo .opt { color: var(--white); }
.brand-logo .fx {
  margin-left: 4px; padding: 1px 7px 2px;
  border: 2px solid; border-image: var(--grad-warm) 1;
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-foot .brand-logo { font-size: 2rem; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7,9,12,.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: 10px;
  font-size: .9rem; font-weight: 500; color: var(--muted);
  transition: color .25s, background .25s;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--white); background: rgba(255,255,255,.05); }
.nav-links a.active { color: var(--white); }
.caret { width: 9px; height: 9px; opacity: .6; transition: transform .3s; }

/* dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 660px; padding: 14px;
  background: rgba(13,16,22,.97); backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(3,1fr); gap: 4px;
  opacity: 0; visibility: hidden;
  /* lingers ~0.32s after the mouse leaves so you can travel into it */
  transition: opacity .25s var(--ease) .32s, transform .25s var(--ease) .32s, visibility 0s linear .6s;
}
/* invisible bridge fills the gap between the tab and the panel so hover never drops */
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.has-drop:hover .caret, .has-drop:focus-within .caret { transform: rotate(180deg); }
.drop a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 13px; border-radius: 11px; transition: background .22s;
}
.drop a:hover { background: rgba(255,255,255,.05); }
.drop .di { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center;
  background: rgba(0,212,255,.1); color: var(--accent); }
.drop .di svg { width: 17px; height: 17px; }
.drop a > span:last-child { display: flex; flex-direction: column; gap: 2px; }
/* AI badge */
.ai-tag { display:inline-block; vertical-align:middle; margin-left:6px; font-size:.56rem; font-weight:700; letter-spacing:.8px; padding:2px 6px; border-radius:5px; color:#03141b; background:var(--grad-cool); }
.ai-badge { position:absolute; top:16px; right:16px; font-size:.6rem; font-weight:700; letter-spacing:1px; padding:4px 9px; border-radius:100px; color:#03141b; background:var(--grad-cool); box-shadow:0 4px 14px -4px rgba(0,212,255,.5); }
.drop .dt { display: block; font-size: .88rem; font-weight: 600; color: var(--text); }
.drop .dd { display: block; font-size: .76rem; color: var(--dim); line-height: 1.35; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.burger { display: none; width: 26px; height: 18px; position: relative; }
.burger span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--white); border-radius: 2px; transition: .3s var(--ease); }
.burger span:nth-child(1){ top:0 } .burger span:nth-child(2){ top:8px } .burger span:nth-child(3){ top:16px }
body.menu-open .burger span:nth-child(1){ top:8px; transform: rotate(45deg) }
body.menu-open .burger span:nth-child(2){ opacity:0 }
body.menu-open .burger span:nth-child(3){ top:8px; transform: rotate(-45deg) }

/* mobile drawer */
.m-drawer {
  position: fixed; inset: 76px 0 0; z-index: 99;
  background: rgba(7,9,12,.98); backdrop-filter: blur(20px);
  transform: translateX(100%); transition: transform .4s var(--ease);
  padding: 24px 28px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
body.menu-open .m-drawer { transform: translateX(0); }
.m-drawer a { padding: 15px 10px; font-size: 1.15rem; font-weight: 700; font-family: var(--head); font-style: normal; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); color: var(--text); }
.m-drawer a:hover { color: var(--accent); }
.m-drawer .btn { margin-top: 18px; justify-content: center; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 168px 0 110px; overflow: hidden; }
.hero::before { content:""; position:absolute; inset:0; background: var(--grad-hero); z-index:0; }
.hero-beam {
  position: absolute; top: 8%; right: -8%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: conic-gradient(from 200deg, transparent, rgba(0,212,255,.12), rgba(255,60,87,.12), transparent 70%);
  filter: blur(50px); border-radius: 50%; z-index: 0; animation: float 14s ease-in-out infinite;
}
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-30px) rotate(8deg) } }
.hero .wrap { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px;
  border: 1px solid var(--line); border-radius: 100px; background: rgba(255,255,255,.03);
  font-size: .78rem; color: var(--muted); margin-bottom: 26px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #22e07a; box-shadow: 0 0 10px #22e07a; }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-strip { margin-top: 60px; display: flex; gap: 38px; flex-wrap: wrap; align-items: center; }
.hero-strip .hs { display: flex; flex-direction: column; }
.hero-strip .hs b { font-family: var(--head); font-style: normal; font-weight: 800; font-size: 2.1rem; color: var(--white); line-height: 1; }
.hero-strip .hs span { font-size: .78rem; color: var(--dim); letter-spacing: .5px; margin-top: 4px; }
.hero-strip .sep { width: 1px; height: 38px; background: var(--line); }

/* ---------- Marquee (client logos) ---------- */
.marquee { overflow: hidden; padding: 30px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: scroll 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.client-name { font-family: var(--head); font-style: normal; font-weight: 800; font-size: 1.55rem; color: var(--dim); white-space: nowrap; transition: color .3s; letter-spacing: -.5px; }
.client-name:hover { color: var(--text); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }

.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; position: relative; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.card::after { content:""; position:absolute; left:0; top:0; height:2px; width:100%; background: var(--spectrum); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.card:hover { transform: translateY(-6px); border-color: #2a3342; box-shadow: var(--shadow); }
.card:hover::after { transform: scaleX(1); }
.card .ic { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px;
  background: rgba(0,212,255,.09); border: 1px solid rgba(0,212,255,.18); color: var(--accent); }
.card .ic svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 10px; color: var(--white); }
.card p { font-size: .94rem; }
.card .card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: .85rem; font-weight: 600; color: var(--accent); }
.card .card-link svg { width: 14px; height: 14px; transition: transform .3s; }
.card:hover .card-link svg { transform: translateX(4px); }

/* service card accent variants */
.card.warm .ic { background: rgba(255,59,87,.09); border-color: rgba(255,59,87,.2); color: var(--red); }

/* ---------- Work / portfolio gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-btn { padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line); font-size: .85rem; font-weight: 500; color: var(--muted); transition: .25s; }
.filter-btn:hover { color: var(--white); border-color: var(--dim); }
.filter-btn.active { background: var(--white); color: #0a0a0a; border-color: var(--white); }

.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tile {
  position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3;
  border: 1px solid var(--line); cursor: pointer; background: var(--panel);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tile:hover img { transform: scale(1.08); }
.tile-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,7,10,.92)); opacity: .85; transition: opacity .4s; }
.tile-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; transform: translateY(8px); opacity: .9; transition: .4s var(--ease); }
.tile:hover .tile-meta { transform: translateY(0); opacity: 1; }
.tile-meta .cat { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.tile-meta h4 { font-family: var(--head); font-style: normal; font-weight: 700; font-size: 1.3rem; color: var(--white); margin-top: 4px; }
.tile .play { position:absolute; inset:0; display:grid; place-items:center; }
.tile .play span { width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; transition:.35s; }
.tile:hover .play span { background: var(--white); transform: scale(1.08); }
.tile .play svg { width:20px; height:20px; fill:#fff; margin-left:3px; transition:.35s; }
.tile:hover .play svg { fill:#0a0a0a; }

/* tall variant for masonry feel */
.tile.tall { aspect-ratio: 3/4; }
.tile.wide { aspect-ratio: 16/9; grid-column: span 2; }

/* ---------- Video embed ---------- */
.video-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background:#000; box-shadow: var(--shadow); }
.video-frame .ratio { position: relative; padding-top: 56.25%; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster { position:absolute; inset:0; cursor:pointer; background-size:cover; background-position:center; display:grid; place-items:center; }
.video-poster::before { content:""; position:absolute; inset:0; background:rgba(5,7,10,.35); }
.video-poster .pbtn { position:relative; width:80px; height:80px; border-radius:50%; background:rgba(255,59,87,.9); display:grid; place-items:center; box-shadow:0 0 0 0 rgba(255,59,87,.6); animation:pulse 2.4s infinite; transition:transform .3s; }
.video-poster:hover .pbtn { transform:scale(1.08); }
.video-poster .pbtn svg { width:26px; height:26px; fill:#fff; margin-left:4px; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(255,59,87,.5) } 70%{ box-shadow:0 0 0 22px rgba(255,59,87,0) } 100%{ box-shadow:0 0 0 0 rgba(255,59,87,0) } }

/* ---------- Before / After slider ---------- */
.ba { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); user-select: none; box-shadow: var(--shadow); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .after { clip-path: inset(0 0 0 50%); }
.ba .ba-label { position: absolute; top: 16px; padding: 5px 12px; border-radius: 6px; font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; background: rgba(7,9,12,.7); backdrop-filter: blur(6px); border: 1px solid var(--line); }
.ba .lbl-before { left: 16px; color: var(--muted); }
.ba .lbl-after { right: 16px; color: var(--accent); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--white); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 18px rgba(0,212,255,.5); }
.ba .handle .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.ba .handle .knob svg { width: 20px; height: 20px; fill: #0a0a0a; }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.stat { text-align: center; padding: 34px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg,var(--panel),transparent); }
.stat b { display: block; font-family: var(--head); font-style: normal; font-weight: 800; font-size: clamp(2.4rem,5vw,3.4rem); line-height: 1; }
.stat span { font-size: .82rem; color: var(--dim); letter-spacing: .8px; margin-top: 10px; display: block; }

/* ---------- Testimonials ---------- */
.quote { background: linear-gradient(180deg,var(--panel),var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; position: relative; transition: transform .4s var(--ease), border-color .4s; }
.quote:hover { transform: translateY(-5px); border-color: #2a3342; }
.quote .mark { font-family: var(--head); font-style: normal; font-weight: 800; font-size: 4rem; line-height: .6; color: var(--accent); opacity: .3; }
.quote p { color: var(--text); font-size: 1rem; margin: 6px 0 22px; }
.quote .stars { color: #FFC23D; font-size: .9rem; letter-spacing: 2px; margin-bottom: 14px; }
.who { display: flex; align-items: center; gap: 13px; }
.who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-cool); display: grid; place-items: center; font-weight: 700; color: #02151c; font-size: .95rem; }
.who b { font-size: .9rem; color: var(--white); }
.who span { font-size: .76rem; color: var(--dim); display: block; }

/* ---------- Pricing / product cards ---------- */
.price-card { background: linear-gradient(180deg,var(--panel),var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; transition: .4s var(--ease); position: relative; }
.price-card:hover { transform: translateY(-6px); border-color: #2a3342; box-shadow: var(--shadow); }
.price-card.featured { border-color: rgba(0,212,255,.4); box-shadow: var(--glow-c); }
.price-card .tag { position: absolute; top: 18px; right: 18px; font-size: .66rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--grad-cool); color: #02151c; font-weight: 700; }
.price-card h3 { color: var(--white); margin-bottom: 8px; }
.price-card .price { font-family: var(--head); font-style: normal; font-weight: 800; font-size: 2.8rem; color: var(--white); margin: 12px 0; }
.price-card .price small { font-size: .9rem; color: var(--dim); font-style: normal; font-weight: 500; }
.price-card ul { margin: 20px 0 26px; display: grid; gap: 11px; }
.price-card li { display: flex; gap: 10px; font-size: .9rem; color: var(--muted); }
.price-card li svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.price-card .btn { width: 100%; justify-content: center; }

/* product (store) card */
.product { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: .4s var(--ease); }
.product:hover { transform: translateY(-6px); border-color: #2a3342; box-shadow: var(--shadow); }
.product .thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.product .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product:hover .thumb img { transform: scale(1.07); }
.product .ptag { position: absolute; top: 12px; left: 12px; font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; background: rgba(7,9,12,.8); backdrop-filter: blur(6px); border: 1px solid var(--line); font-weight: 600; color: var(--accent); }
.product .pbody { padding: 18px; }
.product .pbody h4 { font-size: 1.05rem; color: var(--white); font-family: var(--body); font-weight: 600; letter-spacing: 0; }
.product .pbody .pmeta { font-size: .78rem; color: var(--dim); margin-top: 4px; }
.product .pfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.product .pprice { font-family: var(--head); font-style: normal; font-weight: 800; font-size: 1.5rem; color: var(--white); }
.product .pprice del { font-size: .9rem; color: var(--faint); margin-left: 6px; }
.product .prating { font-size: .78rem; color: #FFC23D; }

/* ---------- Course card ---------- */
.course { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .4s var(--ease); }
.course:hover { transform: translateY(-6px); border-color: #2a3342; box-shadow: var(--shadow); }
.course .ctop { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; overflow: hidden; }
.course .ctop img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .6s var(--ease); }
.course:hover .ctop img { transform: scale(1.06); }
.course .clevel { position: absolute; top: 12px; left: 12px; z-index:2; font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; background: rgba(7,9,12,.78); border: 1px solid var(--line); font-weight: 600; }
.course .cbody { padding: 22px; }
.course .cbody h4 { color: var(--white); font-size: 1.18rem; margin-bottom: 8px; }
.course .cmeta { display: flex; gap: 16px; font-size: .78rem; color: var(--dim); margin: 14px 0; flex-wrap: wrap; }
.course .cmeta span { display: inline-flex; align-items: center; gap: 6px; }
.course .cfoot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.course .cprice { font-family: var(--head); font-style: normal; font-weight: 800; font-size: 1.5rem; color: var(--white); }

/* ---------- Team ---------- */
.member {
  text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 22px 26px;
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
/* soft spotlight that fades in on hover */
.member::before {
  content: ""; position: absolute; left: 50%; top: -40%; width: 220px; height: 220px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,.16), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
.member::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--spectrum); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); }
.member:hover { transform: translateY(-8px); border-color: #2a3342; box-shadow: var(--shadow); }
.member:hover::before { opacity: 1; }
.member:hover::after { transform: scaleX(1); }

.member .photo {
  width: 128px; height: 128px; margin: 0 auto 18px; position: relative;
  border-radius: 50%; overflow: hidden; background: #0d1b2a;
  border: 2px solid var(--line);
  transition: transform .5s var(--ease), border-color .45s, box-shadow .45s;
}
.member:hover .photo { transform: scale(1.05) rotate(-1.5deg); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(0,212,255,.10), var(--glow-c); }
.member .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.member:hover .photo img { transform: scale(1.07); }

.member h4 { color: var(--white); font-size: 1.18rem; }
.member .role { color: var(--accent); font-size: .8rem; font-weight: 600; letter-spacing: .3px; margin-top: 4px; }
.member .bio { font-size: .84rem; margin-top: 8px; }
.member .cert {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: .68rem; font-weight: 600; letter-spacing: .3px; color: #cfeaff;
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.28);
  padding: 5px 11px; border-radius: 100px;
}
.member .cert svg { width: 13px; height: 13px; color: var(--accent); }
.member .socials { display: flex; gap: 10px; justify-content: center; margin-top: 16px; opacity: .55; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.member:hover .socials { opacity: 1; transform: translateY(0); }
.member .socials a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; color: var(--muted); transition: .25s; }
.member .socials a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.member .socials svg { width: 15px; height: 15px; }

/* onboarding / open-role card */
.member.open { border-style: dashed; background: rgba(255,255,255,.015); }
.member.open .photo { display: grid; place-items: center; border-style: dashed; background: rgba(255,255,255,.02); }
.member.open .photo svg { width: 46px; height: 46px; color: var(--faint); }
.member.open:hover .photo { transform: none; box-shadow: none; border-color: var(--dim); }
.member.open .role { color: var(--muted); }
.member.open .hiring { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.68rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color: var(--dim); border:1px solid var(--line); padding:5px 11px; border-radius:100px; }
.member.open .hiring .dot { width:6px; height:6px; border-radius:50%; background:#FFC23D; box-shadow:0 0 8px #FFC23D; }

/* ---------- Blog ---------- */
.post-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .4s var(--ease); display:flex; flex-direction:column; }
.post-card:hover { transform: translateY(-6px); border-color: #2a3342; box-shadow: var(--shadow); }
.post-card .pimg { aspect-ratio: 16/10; overflow: hidden; }
.post-card .pimg img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.post-card:hover .pimg img { transform: scale(1.06); }
.post-card .pc-body { padding: 24px; display:flex; flex-direction:column; flex:1; }
.post-card .pc-cat { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.post-card h3 { color: var(--white); font-size: 1.3rem; margin: 10px 0; font-family: var(--head); font-style: normal; font-weight: 700; }
.post-card .pc-ex { font-size: .9rem; flex:1; }
.post-card .pc-meta { display: flex; gap: 14px; font-size: .76rem; color: var(--dim); margin-top: 18px; }

/* article body */
.article { max-width: 760px; margin: 0 auto; }
.article h2 { font-size: 2rem; margin: 38px 0 16px; color: var(--white); }
.article h3 { font-size: 1.4rem; margin: 30px 0 12px; color: var(--white); }
.article p { color: var(--text); margin-bottom: 20px; line-height: 1.8; }
.article ul.dot { list-style: disc; padding-left: 22px; margin-bottom: 20px; color: var(--text); }
.article ul.dot li { margin-bottom: 8px; }
.article blockquote { border-left: 3px solid var(--accent); padding: 6px 22px; margin: 28px 0; font-size: 1.2rem; font-style: italic; color: var(--white); background: rgba(0,212,255,.04); border-radius: 0 12px 12px 0; }
.article img { border-radius: var(--radius); margin: 28px 0; border: 1px solid var(--line); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; letter-spacing: .3px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 11px; color: var(--text);
  font-family: inherit; font-size: .95rem; transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,212,255,.12); }
.field textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Accordion (FAQ) ---------- */
.acc-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; background: var(--panel); }
.acc-q { width: 100%; text-align: left; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; color: var(--white); font-size: 1.02rem; }
.acc-q .pm { width: 22px; height: 22px; flex-shrink: 0; position: relative; transition: transform .3s; }
.acc-q .pm::before,.acc-q .pm::after { content:""; position:absolute; background:var(--accent); border-radius:2px; }
.acc-q .pm::before { top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.acc-q .pm::after { left:50%; top:0; height:100%; width:2px; transform:translateX(-50%); transition:transform .3s; }
.acc-item.open .pm::after { transform: translateX(-50%) scaleY(0); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.acc-a p { padding: 0 24px 22px; font-size: .94rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; border-radius: 26px; overflow: hidden; padding: 70px 56px; border: 1px solid var(--line);
  background: radial-gradient(ellipse 80% 120% at 80% 10%, rgba(255,60,87,.16), transparent 55%),
              radial-gradient(ellipse 80% 120% at 10% 90%, rgba(0,212,255,.18), transparent 55%),
              linear-gradient(180deg,var(--panel),var(--bg-2)); }
.cta-band h2 { font-size: clamp(2rem,4vw,3.2rem); color: var(--white); margin-bottom: 16px; }
.cta-band p { max-width: 52ch; margin-bottom: 30px; }

/* ---------- Page hero (inner) ---------- */
.page-hero { padding: 150px 0 60px; position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background: var(--grad-hero); }
.page-hero .wrap { position: relative; }
.crumbs { font-size: .8rem; color: var(--dim); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--faint); }
.page-hero h1 { font-size: clamp(2.6rem,6vw,4.6rem); font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: -1.5px; margin-bottom: 18px; }
.page-hero p { max-width: 62ch; font-size: 1.1rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 70px 0 30px; position: relative; z-index: 1; background: var(--bg-2); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line-soft); }
.footer-brand p { font-size: .9rem; margin: 18px 0; max-width: 32ch; }
.foot-social { display: flex; gap: 10px; }
.foot-social a { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--muted); transition: .25s; }
.foot-social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.foot-social svg { width: 17px; height: 17px; }
.footer h5 { font-size: .76rem; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; font-family: var(--body); font-weight: 700; }
.footer ul li { margin-bottom: 11px; }
.footer ul a { font-size: .9rem; color: var(--muted); transition: color .2s, padding .2s; }
.footer ul a:hover { color: var(--white); padding-left: 4px; }
.app-badges { display: flex; flex-direction: column; gap: 10px; }
.app-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 12px; transition: .25s; background: rgba(255,255,255,.02); }
.app-badge:hover { border-color: var(--accent); transform: translateY(-2px); }
.app-badge svg { width: 22px; height: 22px; }
.app-badge .ab-s { font-size: .62rem; color: var(--dim); line-height: 1; }
.app-badge .ab-b { font-size: .92rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; flex-wrap: wrap; gap: 14px; }
.footer-bottom p { font-size: .82rem; color: var(--dim); }
.footer-bottom .legal-links { display: flex; gap: 20px; }
.footer-bottom .legal-links a { font-size: .82rem; color: var(--dim); }
.footer-bottom .legal-links a:hover { color: var(--text); }

/* trust badges */
.trust-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.trust-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 100px; font-size: .82rem; color: var(--muted); background: rgba(255,255,255,.02); }
.trust-badge svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4,5,8,.94); backdrop-filter: blur(10px); display: none; place-items: center; padding: 30px; }
.lightbox.open { display: grid; }
.lightbox .lb-frame { display: grid; place-items: center; }
.lightbox .lb-frame img { max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: var(--shadow); }
.lightbox .lb-frame iframe { width: min(92vw, 1120px); aspect-ratio: 16/9; max-height: 86vh; border: 0; border-radius: 12px; box-shadow: var(--shadow); background: #000; }
.lightbox img { max-width: 90vw; max-height: 86vh; border-radius: 12px; box-shadow: var(--shadow); }
.lightbox .lb-close { position: absolute; top: 24px; right: 30px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.4rem; background: rgba(255,255,255,.05); }
.lightbox .lb-close:hover { background: var(--red); border-color: var(--red); }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.05); }
.lightbox .lb-nav:hover { background: var(--accent); color: #02151c; }
.lightbox .lb-prev { left: 24px; } .lightbox .lb-next { right: 24px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s } .reveal.d2 { transition-delay: .16s } .reveal.d3 { transition-delay: .24s } .reveal.d4 { transition-delay: .32s }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none } *{ animation:none !important; scroll-behavior:auto } }

/* scroll progress bar */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--spectrum); z-index: 200; transition: width .1s linear; }

/* ---------- Misc ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.tag-pill { display:inline-block; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); border:1px solid rgba(0,212,255,.25); padding:5px 12px; border-radius:100px; background:rgba(0,212,255,.05); }
.check-list { display: grid; gap: 14px; margin-top: 24px; }
.check-list li { display: flex; gap: 12px; color: var(--text); font-size: .96rem; }
.check-list svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.note { font-size: .82rem; color: var(--dim); }

/* ============================================================
   OptimityFX — Phase 1 Extensions
   Auth · Dashboard · Checkout · Mouse Glow · Toasts · Cart
   ============================================================ */

/* ---------- Mouse-tracking glow ---------- */
#mouse-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  will-change: background;
}

/* ---------- Toast notifications ---------- */
.toast-wrap {
  position: fixed; bottom: 28px; right: 28px; z-index: 9000;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px; max-width: 360px;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--text); font-size: .9rem;
  opacity: 0; transform: translateX(20px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast--success { border-color: rgba(34,224,122,.35); }
.toast--success .toast-icon { color: #22e07a; }
.toast--error   { border-color: rgba(255,59,87,.35); }
.toast--error .toast-icon { color: var(--red); }
.toast--reward  { border-color: rgba(255,194,61,.35); background: linear-gradient(135deg,var(--panel-2),rgba(255,194,61,.06)); }
.toast--reward .toast-icon { color: #FFC23D; }
.toast-icon { width: 18px; height: 18px; flex-shrink: 0; }
.toast-icon svg { width: 100%; height: 100%; }
.toast-close { margin-left: 6px; color: var(--dim); font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.toast-close:hover { color: var(--white); }

/* ---------- Cart badge ---------- */
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: .62rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--black);
  transition: transform .25s var(--ease);
}
.cart-badge.pop { transform: scale(1.4); }
.nav-cart { position: relative; display: inline-flex; align-items: center; }

/* ---------- Auth pages ---------- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 100px 20px 60px; position: relative;
}
.auth-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(0,212,255,.09), transparent 55%),
              radial-gradient(ellipse 60% 60% at 80% 80%, rgba(255,60,87,.07), transparent 55%);
}
.auth-card {
  width: 100%; max-width: 480px; position: relative; z-index: 1;
  background: rgba(16,20,27,.9); backdrop-filter: blur(24px);
  border: 1px solid var(--line); border-radius: 26px;
  padding: 48px 44px; box-shadow: 0 32px 80px -20px rgba(0,0,0,.8);
}
@media (max-width: 540px) { .auth-card { padding: 36px 24px; } }
.auth-logo { display: flex; justify-content: center; margin-bottom: 32px; }
.auth-logo img { height: 40px; width: auto; }
.auth-title { font-size: 1.65rem; font-weight: 800; color: var(--white); text-align: center; margin-bottom: 6px; }
.auth-sub   { text-align: center; font-size: .9rem; color: var(--muted); margin-bottom: 32px; }
.auth-sub a { color: var(--accent); }

.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; letter-spacing: .4px; text-transform: uppercase; }
.form-input {
  width: 100%; padding: 14px 18px;
  background: rgba(11,14,19,.7); border: 1px solid var(--line);
  border-radius: 13px; color: var(--text);
  font-family: var(--body); font-size: .95rem;
  transition: border-color .25s, box-shadow .25s; outline: none;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,212,255,.13); }
.form-input::placeholder { color: var(--faint); }
.form-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,59,87,.12); }
.form-hint { font-size: .76rem; color: var(--dim); margin-top: 6px; }
.form-error { font-size: .76rem; color: var(--red); margin-top: 6px; display: none; }
.form-error.show { display: block; }

.input-wrap { position: relative; }
.input-wrap .form-input { padding-right: 48px; }
.input-icon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--dim); cursor: pointer; transition: color .2s;
  width: 20px; height: 20px;
}
.input-icon:hover { color: var(--text); }
.input-icon svg { width: 100%; height: 100%; }

.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--dim); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 20px; border-radius: 13px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--text);
  font-family: var(--body); font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: background .25s, border-color .25s, transform .25s;
}
.btn-google:hover { background: rgba(255,255,255,.08); border-color: var(--dim); transform: translateY(-1px); }
.btn-google svg { width: 20px; height: 20px; }

.btn-full { width: 100%; justify-content: center; border-radius: 13px; padding: 15px 20px; font-size: .96rem; }
.btn-loading { opacity: .7; pointer-events: none; }
.btn-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-footer { margin-top: 24px; text-align: center; font-size: .87rem; color: var(--muted); }
.auth-footer a { color: var(--accent); font-weight: 600; }

.form-check { display: flex; align-items: flex-start; gap: 11px; margin-top: 4px; }
.form-check input[type=checkbox] { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.form-check label { font-size: .84rem; color: var(--muted); line-height: 1.4; cursor: pointer; }
.form-check label a { color: var(--accent); }

/* password strength */
.pwd-strength { margin-top: 8px; display: flex; gap: 4px; }
.pwd-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--line); transition: background .3s; }
.pwd-bar.weak   { background: var(--red); }
.pwd-bar.fair   { background: #FFC23D; }
.pwd-bar.strong { background: #22e07a; }

/* ---------- Dashboard ---------- */
.dash-wrap { padding-top: 100px; min-height: 100vh; }

.dash-hero {
  padding: 40px 0 0; position: relative;
  background: radial-gradient(ellipse 80% 60% at 20% -10%, rgba(0,212,255,.09), transparent 55%);
}
.dash-hero-inner { display: flex; align-items: center; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.dash-avatar { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--accent); overflow: hidden; flex-shrink: 0; background: var(--panel); display: grid; place-items: center; color: var(--accent); font-size: 1.8rem; font-weight: 800; }
.dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-info { flex: 1; min-width: 0; }
.dash-info h2 { font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 4px; }
.dash-info p { font-size: .86rem; color: var(--muted); }
.dash-wallet {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  border: 1px solid rgba(255,194,61,.3); border-radius: 100px;
  background: rgba(255,194,61,.06);
}
.dash-wallet .w-icon { color: #FFC23D; }
.dash-wallet .w-icon svg { width: 20px; height: 20px; }
.dash-wallet .w-val { font-size: 1.2rem; font-weight: 800; color: var(--white); }
.dash-wallet .w-label { font-size: .72rem; color: var(--dim); }

/* Stats row */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 28px 0; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr 1fr; } }

.stat-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; display: flex; align-items: center; gap: 14px;
  transition: border-color .3s, transform .3s var(--ease);
}
.stat-card:hover { border-color: rgba(0,212,255,.3); transform: translateY(-3px); }
.stat-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.stat-icon svg { width: 20px; height: 20px; }
.stat-icon.cyan { background: rgba(0,212,255,.1); color: var(--accent); }
.stat-icon.gold { background: rgba(255,194,61,.1); color: #FFC23D; }
.stat-icon.green{ background: rgba(34,224,122,.1); color: #22e07a; }
.stat-icon.red  { background: rgba(255,59,87,.1);  color: var(--red); }
.stat-val { font-size: 1.6rem; font-weight: 800; color: var(--white); line-height: 1; }
.stat-lbl { font-size: .72rem; color: var(--dim); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

/* Dash tabs */
.dash-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-tab {
  padding: 12px 22px; font-size: .88rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .25s, border-color .25s; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--body);
}
.dash-tab:hover { color: var(--text); }
.dash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.dash-panel { display: none; }
.dash-panel.active { display: block; }

/* Purchase items */
.purchase-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 12px;
  transition: border-color .25s;
}
.purchase-row:hover { border-color: rgba(0,212,255,.25); }
.purchase-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--panel-2); flex-shrink: 0; }
.purchase-info { flex: 1; min-width: 0; }
.purchase-info h4 { color: var(--white); font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.purchase-info p { font-size: .78rem; color: var(--dim); margin-top: 2px; }
.purchase-date { font-size: .76rem; color: var(--faint); white-space: nowrap; }
.btn-download { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 100px; background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25); color: var(--accent); font-size: .8rem; font-weight: 600; transition: .25s; white-space: nowrap; }
.btn-download:hover { background: rgba(0,212,255,.2); transform: translateY(-1px); }
.btn-download svg { width: 14px; height: 14px; }

/* Course progress cards */
.course-prog-card {
  display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 20px;
  padding: 20px 22px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 12px; transition: border-color .25s;
}
.course-prog-card:hover { border-color: rgba(0,212,255,.25); }
@media (max-width: 560px) { .course-prog-card { grid-template-columns: 1fr; } }
.course-prog-thumb { width: 100px; height: 68px; border-radius: 10px; object-fit: cover; background: var(--panel-2); }
.course-prog-info h4 { color: var(--white); font-size: .96rem; font-weight: 700; margin-bottom: 8px; }
.prog-bar-wrap { background: var(--line); border-radius: 4px; height: 6px; }
.prog-bar-fill { height: 100%; border-radius: 4px; background: var(--grad-cool); transition: width .6s var(--ease); }
.prog-text { font-size: .75rem; color: var(--dim); margin-top: 6px; }
.course-prog-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* Streak / reward display */
.streak-display { display: flex; gap: 8px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.streak-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line);
  min-width: 72px; background: var(--panel);
  transition: border-color .3s, transform .3s var(--ease);
}
.streak-day.done { border-color: rgba(255,194,61,.4); background: rgba(255,194,61,.06); }
.streak-day.today { border-color: var(--accent); background: rgba(0,212,255,.08); transform: scale(1.05); box-shadow: 0 0 20px -6px rgba(0,212,255,.3); }
.streak-day .sd-icon { font-size: 1.4rem; }
.streak-day .sd-day { font-size: .65rem; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.streak-day .sd-credits { font-size: .72rem; color: #FFC23D; font-weight: 700; }

.reward-history { display: flex; flex-direction: column; gap: 10px; }
.reward-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.reward-row .rr-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,194,61,.1); color: #FFC23D; flex-shrink: 0; }
.reward-row .rr-icon svg { width: 16px; height: 16px; }
.reward-row .rr-info { flex: 1; }
.reward-row .rr-info span { font-size: .82rem; color: var(--text); }
.reward-row .rr-info small { display: block; font-size: .72rem; color: var(--dim); margin-top: 2px; }
.reward-row .rr-credits { font-size: 1rem; font-weight: 800; color: #FFC23D; }

/* Profile form */
.profile-section { max-width: 520px; }
.profile-section h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }

/* Empty states */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .es-icon { width: 64px; height: 64px; margin: 0 auto 16px; color: var(--faint); }
.empty-state .es-icon svg { width: 100%; height: 100%; }
.empty-state h4 { color: var(--text); font-size: 1.1rem; margin-bottom: 8px; }
.empty-state p { font-size: .9rem; }

/* ---------- Checkout ---------- */
.checkout-wrap { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .checkout-wrap { grid-template-columns: 1fr; } }

.checkout-items { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.checkout-items h3 { color: var(--white); font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; }
.cart-item-row { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.cart-item-row:last-child { border-bottom: none; }
.cart-item-thumb { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: var(--panel-2); flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h4 { color: var(--white); font-size: .9rem; font-weight: 700; }
.cart-item-info span { font-size: .76rem; color: var(--dim); }
.cart-item-price { font-weight: 800; color: var(--white); white-space: nowrap; }
.cart-item-remove { color: var(--faint); transition: color .2s; cursor: pointer; }
.cart-item-remove:hover { color: var(--red); }
.cart-item-remove svg { width: 16px; height: 16px; }

.order-summary { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; position: sticky; top: 100px; }
.order-summary h3 { color: var(--white); font-size: 1.1rem; font-weight: 700; margin-bottom: 24px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.summary-row.total { color: var(--white); font-weight: 800; font-size: 1.1rem; border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 8px; }
.summary-row.discount { color: #22e07a; }
.credits-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(255,194,61,.06); border: 1px solid rgba(255,194,61,.25); border-radius: 10px; margin: 14px 0; }
.credits-row label { font-size: .84rem; color: var(--text); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.credits-row .credits-val { font-size: .84rem; color: #FFC23D; font-weight: 700; }

.coupon-row { display: flex; gap: 10px; margin: 18px 0; }
.coupon-input { flex: 1; padding: 12px 16px; background: rgba(11,14,19,.7); border: 1px solid var(--line); border-radius: 11px; color: var(--text); font-family: var(--body); font-size: .88rem; outline: none; transition: border-color .25s; }
.coupon-input:focus { border-color: var(--accent); }
.coupon-input::placeholder { color: var(--faint); }
.btn-coupon { padding: 12px 18px; border-radius: 11px; background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25); color: var(--accent); font-size: .84rem; font-weight: 600; cursor: pointer; transition: .25s; white-space: nowrap; }
.btn-coupon:hover { background: rgba(0,212,255,.2); }
.coupon-msg { font-size: .78rem; margin-top: 6px; }
.coupon-msg.ok  { color: #22e07a; }
.coupon-msg.err { color: var(--red); }

.btn-pay {
  width: 100%; padding: 16px; border-radius: 13px; margin-top: 20px;
  background: var(--grad-cool); color: #02151c;
  font-family: var(--body); font-size: 1rem; font-weight: 800;
  cursor: pointer; border: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.btn-pay:hover { transform: translateY(-2px); box-shadow: var(--glow-c); }
.btn-pay:disabled { opacity: .5; pointer-events: none; }
.btn-pay svg { width: 18px; height: 18px; }
.secure-note { text-align: center; font-size: .72rem; color: var(--faint); margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.secure-note svg { width: 12px; height: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: repeat(2,1fr); }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: span 3; }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta .btn { display: none; }
  .burger { display: block; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .g-3, .g-2, .gallery { grid-template-columns: 1fr 1fr; }
  .tile.wide { grid-column: span 1; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  .section { padding: 80px 0; }
  .cta-band { padding: 48px 28px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .g-3, .g-2, .g-4, .gallery, .stats, .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .hero-strip { gap: 22px; } .hero-strip .sep { display: none; }
  .filters { gap: 8px; }
}

/* ============================================================
   Phase 2/3 — Admin · Team · Course · Quiz · Certificate
   ============================================================ */

/* ---------- Shared panel sidebar layout ---------- */
.panel-layout { display:grid; grid-template-columns:240px 1fr; min-height:100vh; padding-top:76px; }
.panel-sidebar {
  background:var(--panel); border-right:1px solid var(--line);
  padding:20px 0; position:fixed; top:76px; left:0;
  width:240px; height:calc(100vh - 76px); overflow-y:auto;
  display:flex; flex-direction:column; z-index:10;
}
.panel-main { padding:28px 32px; grid-column:2; min-width:0; }
.sidebar-logo { padding:0 18px 18px; border-bottom:1px solid var(--line-soft); margin-bottom:6px; }
.sidebar-logo .brand-img { height:30px; }
.sidebar-nav { flex:1; }
.sidebar-link {
  display:flex; align-items:center; gap:11px;
  padding:10px 18px; font-size:.86rem; font-weight:500; color:var(--muted);
  transition:.2s; cursor:pointer; border:none; background:none;
  width:100%; font-family:var(--body); text-align:left;
  border-left:3px solid transparent;
}
.sidebar-link:hover { color:var(--text); background:rgba(255,255,255,.04); }
.sidebar-link.active { color:var(--accent); background:rgba(0,212,255,.07); border-left-color:var(--accent); }
.sidebar-link svg { width:16px; height:16px; flex-shrink:0; }
.sidebar-link .sl-badge { margin-left:auto; background:var(--red); color:#fff; font-size:.6rem; font-weight:700; padding:2px 6px; border-radius:100px; }
.sidebar-sep { height:1px; background:var(--line-soft); margin:8px 18px; }
.sidebar-footer { padding:10px 0; }

/* Panel sections */
.panel-section { display:none; }
.panel-section.active { display:block; }
.panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.panel-header h2 { font-size:1.3rem; font-weight:800; color:var(--white); }

/* Data table */
.data-table-wrap { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:12px 18px; font-size:.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--dim); background:var(--panel-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.data-table td { padding:12px 18px; font-size:.86rem; color:var(--text); border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,.02); }
.td-thumb { width:42px; height:42px; border-radius:8px; object-fit:cover; background:var(--panel-2); flex-shrink:0; display:block; }
.td-name { font-weight:600; color:var(--white); }
.td-muted { color:var(--muted); font-size:.8rem; }

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:100px; font-size:.68rem; font-weight:700; letter-spacing:.3px; white-space:nowrap; }
.badge-active    { background:rgba(34,224,122,.12);  color:#22e07a; border:1px solid rgba(34,224,122,.3); }
.badge-pending   { background:rgba(255,194,61,.12);  color:#FFC23D; border:1px solid rgba(255,194,61,.3); }
.badge-completed { background:rgba(0,212,255,.12);   color:var(--accent); border:1px solid rgba(0,212,255,.3); }
.badge-failed    { background:rgba(255,59,87,.12);   color:var(--red); border:1px solid rgba(255,59,87,.3); }
.badge-hold      { background:rgba(94,103,118,.12);  color:var(--muted); border:1px solid var(--line); }
.badge-paid      { background:rgba(34,224,122,.12);  color:#22e07a; border:1px solid rgba(34,224,122,.3); }
.badge-admin     { background:rgba(124,123,255,.12); color:#7C7BFF; border:1px solid rgba(124,123,255,.3); }
.badge-super     { background:rgba(255,60,87,.12);   color:var(--red); border:1px solid rgba(255,59,87,.3); }

/* Table action buttons */
.tbl-actions { display:flex; gap:6px; flex-shrink:0; }
.btn-tbl { padding:5px 11px; border-radius:7px; font-size:.74rem; font-weight:600; cursor:pointer; transition:.2s; white-space:nowrap; font-family:var(--body); border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
.btn-tbl:hover { color:var(--white); border-color:var(--dim); }
.btn-tbl.edit:hover { color:var(--accent); border-color:rgba(0,212,255,.4); }
.btn-tbl.del:hover  { color:var(--red);    border-color:rgba(255,59,87,.4); }
.btn-tbl svg { width:12px; height:12px; }

/* Filter bar */
.filter-bar { display:flex; gap:10px; align-items:center; padding:14px 18px; background:var(--panel-2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.search-input { flex:1; min-width:180px; padding:9px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:9px; color:var(--text); font-family:var(--body); font-size:.86rem; outline:none; transition:.25s; }
.search-input:focus { border-color:var(--accent); }
.search-input::placeholder { color:var(--faint); }
.filter-select { padding:9px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:9px; color:var(--text); font-family:var(--body); font-size:.84rem; outline:none; cursor:pointer; }

/* Modal */
.modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(4,5,8,.88); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow); position:relative; }
.modal-box h3 { color:var(--white); font-size:1.1rem; margin-bottom:22px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
.modal-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:.9rem; transition:.2s; }
.modal-close:hover { color:#fff; background:var(--red); border-color:var(--red); }

/* Table empty state */
.table-empty { text-align:center; padding:44px 20px; color:var(--muted); }
.table-empty svg { width:36px; height:36px; margin:0 auto 12px; color:var(--faint); display:block; }

/* Admin overview stats */
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
@media(max-width:900px){ .admin-stats { grid-template-columns:repeat(2,1fr); } }
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
@media(max-width:860px){ .chart-grid { grid-template-columns:1fr; } }
.chart-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.chart-card h4 { color:var(--white); font-size:.9rem; font-weight:700; margin-bottom:14px; }
.chart-wrap { position:relative; height:180px; }

/* Team project cards */
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:900px){ .project-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .project-grid { grid-template-columns:1fr; } }
.project-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; transition:.3s var(--ease); cursor:pointer; }
.project-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-3px); box-shadow:var(--shadow); }
.project-card h4 { color:var(--white); font-size:.92rem; font-weight:700; margin-bottom:6px; }
.pc-client { font-size:.76rem; color:var(--muted); margin-bottom:10px; }
.pc-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.pc-deadline { font-size:.72rem; color:var(--faint); margin-left:auto; }
.pm-avatars { display:flex; }
.pm-av { width:24px; height:24px; border-radius:50%; background:var(--panel-2); border:2px solid var(--panel); display:grid; place-items:center; font-size:.58rem; font-weight:700; color:var(--accent); margin-left:-5px; }
.pm-av:first-child { margin-left:0; }

/* Tasks */
.task-row { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-bottom:7px; transition:.2s; }
.task-row:hover { border-color:rgba(0,212,255,.2); }
.task-check { width:18px; height:18px; border:2px solid var(--line); border-radius:5px; flex-shrink:0; cursor:pointer; transition:.2s; display:grid; place-items:center; }
.task-check.done { background:var(--accent); border-color:var(--accent); }
.task-check svg { width:10px; height:10px; color:#02151c; display:none; }
.task-check.done svg { display:block; }
.task-title { flex:1; font-size:.86rem; color:var(--text); }
.task-title.struck { text-decoration:line-through; color:var(--dim); }
.task-due { font-size:.72rem; color:var(--faint); white-space:nowrap; }

/* Time tracker */
.timer-display { text-align:center; padding:36px 20px; background:var(--panel); border:1px solid var(--line); border-radius:18px; margin-bottom:18px; }
.timer-clock { font-size:3.2rem; font-weight:800; color:var(--white); font-family:var(--head); letter-spacing:4px; margin-bottom:12px; }
.timer-project-label { font-size:.86rem; color:var(--muted); margin-bottom:18px; }
.timer-btns { display:flex; gap:10px; justify-content:center; }
.btn-timer { padding:11px 26px; border-radius:100px; font-size:.88rem; font-weight:700; cursor:pointer; transition:.25s; font-family:var(--body); border:none; }
.btn-timer.start { background:var(--grad-cool); color:#02151c; }
.btn-timer.stop  { background:var(--grad-warm); color:#fff; }
.btn-timer:hover { transform:translateY(-2px); }
.btn-timer:disabled { opacity:.5; pointer-events:none; }
.time-log-row { display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--panel); border:1px solid var(--line); border-radius:9px; margin-bottom:7px; }
.tl-info { flex:1; }
.tl-project { font-size:.84rem; color:var(--text); font-weight:500; }
.tl-note { font-size:.74rem; color:var(--muted); }
.tl-duration { font-weight:700; color:var(--white); font-size:.86rem; }
.tl-date { font-size:.72rem; color:var(--faint); white-space:nowrap; }

/* Screenshots */
.screenshot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:860px){ .screenshot-grid { grid-template-columns:repeat(2,1fr); } }
.ss-tile { position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--panel-2); }
.ss-tile img { width:100%; height:100%; object-fit:cover; }
.ss-overlay { position:absolute; inset:0; background:rgba(4,5,8,.75); display:flex; align-items:center; justify-content:center; gap:8px; opacity:0; transition:.25s; }
.ss-tile:hover .ss-overlay { opacity:1; }
.ss-meta { position:absolute; bottom:0; left:0; right:0; padding:7px 10px; background:rgba(4,5,8,.82); font-size:.66rem; color:var(--muted); }

/* Course player */
.course-layout { display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 76px); margin-top:76px; overflow:hidden; }
@media(max-width:860px){ .course-layout { grid-template-columns:1fr; height:auto; } }
.lesson-sidebar { background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; }
.lesson-sidebar-head { padding:18px 18px 14px; border-bottom:1px solid var(--line-soft); }
.lesson-sidebar-head h3 { font-size:.9rem; color:var(--white); font-weight:700; margin-bottom:8px; }
.cp-progress-bar { height:4px; background:var(--line); border-radius:4px; }
.cp-progress-fill { height:100%; background:var(--grad-cool); border-radius:4px; transition:width .5s var(--ease); }
.cp-pct { font-size:.72rem; color:var(--dim); margin-top:5px; }
.module-item { border-bottom:1px solid var(--line-soft); }
.module-label { padding:12px 18px; font-size:.76rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.module-label:hover { color:var(--text); }
.module-lessons { }
.lesson-item { display:flex; align-items:center; gap:10px; padding:10px 18px; cursor:pointer; transition:.2s; border-left:3px solid transparent; }
.lesson-item:hover { background:rgba(255,255,255,.04); }
.lesson-item.active { background:rgba(0,212,255,.07); border-left-color:var(--accent); }
.li-icon { width:18px; height:18px; flex-shrink:0; color:var(--faint); }
.li-icon svg { width:100%; height:100%; }
.lesson-item.done .li-icon { color:#22e07a; }
.li-title { flex:1; font-size:.83rem; color:var(--text); line-height:1.3; }
.lesson-item.active .li-title { color:var(--white); font-weight:600; }
.li-dur { font-size:.7rem; color:var(--faint); white-space:nowrap; }
.course-player-area { overflow-y:auto; display:flex; flex-direction:column; }
.player-top { padding:18px 24px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.player-top h2 { font-size:1.05rem; font-weight:700; color:var(--white); }
.video-ratio { position:relative; padding-bottom:56.25%; background:#000; }
.video-ratio iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.player-body { padding:22px 24px; flex:1; }
.player-desc { font-size:.9rem; color:var(--muted); line-height:1.7; margin-bottom:20px; }
.player-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Quiz */
.quiz-wrap { max-width:700px; margin:0 auto; padding:40px 20px 80px; }
.quiz-head { margin-bottom:28px; }
.quiz-head h2 { color:var(--white); font-size:1.3rem; margin-bottom:10px; }
.quiz-prog-bar { height:5px; background:var(--line); border-radius:5px; overflow:hidden; }
.quiz-prog-fill { height:100%; background:var(--grad-cool); border-radius:5px; transition:width .4s; }
.quiz-meta-row { display:flex; justify-content:space-between; margin-top:7px; font-size:.76rem; color:var(--dim); }
.question-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:18px; }
.q-num { font-size:.7rem; color:var(--accent); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.q-text { color:var(--white); font-size:1rem; font-weight:600; line-height:1.55; }
.q-img { width:100%; max-height:240px; object-fit:contain; border-radius:10px; margin:12px 0; border:1px solid var(--line); }
.options-list { display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.option-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; transition:.22s; background:rgba(255,255,255,.02); }
.option-item:hover { border-color:var(--accent); background:rgba(0,212,255,.05); }
.option-item.selected { border-color:var(--accent); background:rgba(0,212,255,.1); }
.option-item.correct  { border-color:#22e07a; background:rgba(34,224,122,.1); pointer-events:none; }
.option-item.wrong    { border-color:var(--red); background:rgba(255,59,87,.1); pointer-events:none; }
.opt-dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; transition:.22s; }
.option-item.selected .opt-dot { border-color:var(--accent); background:var(--accent); }
.option-item.correct  .opt-dot { border-color:#22e07a; background:#22e07a; }
.option-item.wrong    .opt-dot { border-color:var(--red); background:var(--red); }
.opt-text { font-size:.88rem; color:var(--text); flex:1; }
.quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:22px; }
.quiz-result { text-align:center; padding:44px 20px; }
.result-icon { width:76px; height:76px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; }
.result-icon.pass { background:rgba(34,224,122,.15); color:#22e07a; border:1px solid rgba(34,224,122,.3); }
.result-icon.fail { background:rgba(255,59,87,.15); color:var(--red); border:1px solid rgba(255,59,87,.3); }
.result-icon svg { width:34px; height:34px; }
.result-score { font-size:3.5rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:6px; }
.result-sub { color:var(--muted); margin-bottom:24px; }

/* Certificate */
.cert-page { padding:60px 20px; display:flex; align-items:center; justify-content:center; min-height:100vh; }
.cert-box { width:100%; max-width:800px; background:linear-gradient(135deg,var(--panel),var(--panel-2)); border:2px solid var(--accent); border-radius:22px; padding:56px 68px; position:relative; overflow:hidden; box-shadow:0 0 60px -20px rgba(0,212,255,.35); text-align:center; }
@media(max-width:600px){ .cert-box { padding:32px 20px; } }
.cert-box::before { content:""; position:absolute; inset:8px; border:1px solid rgba(0,212,255,.2); border-radius:16px; pointer-events:none; }
.cert-box::after { content:""; position:absolute; top:-60px; right:-60px; width:220px; height:220px; background:radial-gradient(circle,rgba(0,212,255,.13),transparent 70%); border-radius:50%; pointer-events:none; }
.cert-corner { position:absolute; top:20px; left:20px; width:32px; height:32px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); border-radius:3px 0 0 0; }
.cert-corner.br { top:auto; left:auto; bottom:20px; right:20px; border-top:none; border-left:none; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); border-radius:0 0 3px 0; }
.cert-logo { height:40px; margin:0 auto 24px; display:block; }
.cert-eyebrow { font-size:.68rem; letter-spacing:4px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:14px; }
.cert-title { font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; color:var(--white); margin-bottom:6px; }
.cert-sub { font-size:.88rem; color:var(--muted); margin-bottom:28px; }
.cert-name { font-size:clamp(1.7rem,5vw,2.8rem); font-weight:800; background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px; }
.cert-course { font-size:1rem; color:var(--text); margin-bottom:28px; }
.cert-rule { height:2px; background:var(--spectrum); border-radius:2px; margin:24px 0; opacity:.7; }
.cert-meta { display:flex; justify-content:center; gap:36px; flex-wrap:wrap; margin-bottom:28px; }
.cert-meta-item { display:flex; flex-direction:column; gap:3px; }
.cmi-label { font-size:.66rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); }
.cmi-value { font-size:.88rem; color:var(--white); font-weight:600; }
.cert-number { font-size:.68rem; color:var(--faint); margin-top:16px; }

/* Responsive panel */
@media(max-width:768px){
  .panel-layout { grid-template-columns:1fr; }
  .panel-sidebar { display:none; }
  .panel-main { padding:20px; grid-column:1; }
  .admin-stats { grid-template-columns:repeat(2,1fr); }
}