/* ============================================================
   Digital Bridge Academy — Design System
   Premium, warm, accessible. Light + dark themes.
   ============================================================ */

:root{
  --brand-teal:#3FB8AC;
  --brand-amber:#F2B84B;
  --brand-navy:#1F4E6B;
  --grad-brand:linear-gradient(120deg, var(--brand-teal), var(--brand-amber));
  --radius:18px;
  --radius-lg:26px;
  --shadow-1:0 4px 14px rgba(6,16,24,.14);
  --shadow-2:0 18px 44px rgba(6,16,24,.22);
  --shadow-3:0 34px 80px rgba(6,16,24,.32);
  --ease-spring:cubic-bezier(.34,1.4,.4,1);
  --ease-out:cubic-bezier(.16,.84,.32,1);
}

/* ---------- Themes ---------- */
:root, [data-theme="dark"]{
  --bg:#0B141D;
  --bg-2:#0F1B26;
  --surface:#141F2B;
  --surface-2:#1A2836;
  --glass:rgba(20,31,43,.66);
  --glass-strong:rgba(20,31,43,.92);
  --text:#EAF0F5;
  --muted:#97A9B8;
  --line:rgba(151,169,184,.16);
  --line-strong:rgba(151,169,184,.30);
  --teal:#4CC4B8;
  --amber:#F6C15E;
  --on-accent:#0D1A24;
  --hero-glow-1:rgba(63,184,172,.16);
  --hero-glow-2:rgba(242,184,75,.10);
  --shadow-color:rgba(0,0,0,.5);
}
[data-theme="light"]{
  --bg:#F7F5F0;
  --bg-2:#F1EDE5;
  --surface:#FFFFFF;
  --surface-2:#FBFAF7;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.95);
  --text:#1B2B36;
  --muted:#5B6C79;
  --line:rgba(27,43,54,.12);
  --line-strong:rgba(27,43,54,.26);
  --teal:#1F8D82;
  --amber:#B87A14;
  --on-accent:#FFFFFF;
  --hero-glow-1:rgba(63,184,172,.22);
  --hero-glow-2:rgba(242,184,75,.20);
  --shadow-color:rgba(31,78,107,.18);
}

/* ---------- Base ---------- */
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{
  font-family:'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s ease, color .35s ease;
  overflow-x:hidden;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
::selection{background:rgba(63,184,172,.35);}
a{color:var(--teal);}
img, svg{max-width:100%;}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--text); padding:12px 18px; border-radius:0 0 12px 0; z-index:200;}
.skip-link:focus{left:0;}

/* Ambient background blobs */
.bg-blobs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
.bg-blobs::before, .bg-blobs::after{
  content:''; position:absolute; width:60vw; height:60vw; border-radius:50%;
  filter:blur(90px); opacity:.8;
}
.bg-blobs::before{background:radial-gradient(circle, var(--hero-glow-1), transparent 65%); top:-22vw; right:-18vw; animation:blob-a 26s ease-in-out infinite alternate;}
.bg-blobs::after{background:radial-gradient(circle, var(--hero-glow-2), transparent 65%); bottom:-25vw; left:-20vw; animation:blob-b 32s ease-in-out infinite alternate;}
@keyframes blob-a{from{transform:translate(0,0) scale(1);} to{transform:translate(-6vw,8vh) scale(1.15);}}
@keyframes blob-b{from{transform:translate(0,0) scale(1.1);} to{transform:translate(7vw,-6vh) scale(.95);}}

/* ---------- Progress bar ---------- */
.progress-bar{position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad-brand); z-index:120; border-radius:0 3px 3px 0;}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:transparent; transition:background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent;}
.site-header.scrolled{background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); box-shadow:0 10px 30px var(--shadow-color);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:12px; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--teal); font-weight:800; font-size:18px; letter-spacing:-.01em;}
.logo svg{width:34px; height:34px; transition:transform .45s var(--ease-spring);}
.logo:hover svg{transform:translateY(-3px) rotate(-5deg);}
.logo span{color:var(--text);}
.logo em{font-style:normal; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}
nav.main-nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap;}
nav.main-nav a{text-decoration:none; color:var(--muted); font-size:14.5px; font-weight:600; padding:9px 13px; border-radius:999px; transition:color .2s, background .2s;}
nav.main-nav a:hover{color:var(--text); background:rgba(127,127,127,.12);}
nav.main-nav a.active{color:var(--teal);}
.nav-cta{background:var(--grad-brand); color:var(--on-accent) !important; font-weight:800;}
.nav-cta:hover{filter:brightness(1.08); background:var(--grad-brand) !important;}
.theme-toggle{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease-spring), background .2s;}
.theme-toggle:hover{transform:rotate(18deg) scale(1.08);}

/* ---------- Buttons ---------- */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; border-radius:999px; text-decoration:none; font-size:15.5px; font-weight:800; font-family:inherit; border:none; cursor:pointer; transition:transform .22s var(--ease-out), box-shadow .22s, filter .2s; letter-spacing:.01em;}
.btn::after{content:''; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-20deg); transition:left .6s ease;}
.btn:hover::after{left:135%;}
.btn-primary{background:var(--grad-brand); color:var(--on-accent); box-shadow:0 10px 26px rgba(63,184,172,.3);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(63,184,172,.4);}
.btn-arrow{display:inline-block; transition:transform .25s ease;}
.btn:hover .btn-arrow{transform:translateX(5px);}
.btn-secondary{background:transparent; color:var(--teal); border:2px solid var(--teal);}
.btn-secondary:hover{background:rgba(63,184,172,.1); transform:translateY(-3px);}
.btn-ghost{background:transparent; color:var(--muted); border:2px solid var(--line-strong);}
.btn-ghost:hover{color:var(--text); border-color:var(--muted);}
.btn-lg{padding:18px 34px; font-size:17px;}
.btn-sm{padding:10px 20px; font-size:13.5px;}

/* ---------- Tooltips ---------- */
[data-tip]{position:relative;}
[data-tip]::before{content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--glass-strong); display:none; pointer-events:none; z-index:70;}
[data-tip]::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%); background:var(--glass-strong); backdrop-filter:blur(10px); color:var(--text); padding:10px 14px; border-radius:12px; font-size:12.5px; font-weight:500; font-style:normal; line-height:1.5; width:max-content; max-width:240px; text-align:left; display:none; pointer-events:none; border:1px solid var(--line); box-shadow:var(--shadow-2); z-index:70; white-space:normal;}
[data-tip]:hover::after, [data-tip]:focus-visible::after{display:block; animation:tip-in .22s ease;}
[data-tip]:hover::before, [data-tip]:focus-visible::before{display:block; animation:tip-in .22s ease;}
@keyframes tip-in{from{opacity:0; translate:0 6px;} to{opacity:1; translate:0 0;}}
.term{border-bottom:2px dotted var(--teal); cursor:help; font-weight:600;}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .75s ease var(--d,0s), transform .75s var(--ease-out) var(--d,0s);}
.js .reveal.in-view{opacity:1; transform:none;}
.js .reveal-scale{opacity:0; transform:scale(.92); transition:opacity .7s ease var(--d,0s), transform .7s var(--ease-spring) var(--d,0s);}
.js .reveal-scale.in-view{opacity:1; transform:none;}

/* ---------- Hero ---------- */
.hero{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:84px 0 70px;}
@media(max-width:880px){.hero{grid-template-columns:1fr; padding-top:44px;}}
#particles{position:absolute; inset:0; z-index:-1; opacity:.55;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--amber); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; margin-bottom:18px; background:var(--surface); border:1px solid var(--line); padding:8px 16px; border-radius:999px; box-shadow:var(--shadow-1);}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--teal); animation:pulse-dot 2s ease infinite;}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(63,184,172,.5);} 60%{box-shadow:0 0 0 7px rgba(63,184,172,0);}}
.hero h1{font-size:clamp(36px, 5.6vw, 62px); line-height:1.06; letter-spacing:-.03em; font-weight:800; margin-bottom:22px;}
.hero h1 .grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .lede{font-size:19px; color:var(--muted); max-width:520px; margin-bottom:30px;}
.rotator-box{display:inline-block; color:var(--teal); font-weight:800;}
.rotator{display:inline-block; border-bottom:3px solid var(--amber);}
.rotator.swap{animation:rotate-word .5s ease;}
@keyframes rotate-word{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.hero .cta-row{margin-bottom:44px;}
.hero-trust{display:flex; gap:14px 24px; flex-wrap:wrap; list-style:none;}
.hero-trust li{font-size:13.5px; color:var(--muted); font-weight:600; cursor:help; display:flex; align-items:center; gap:7px;}
.hero-trust li::before{content:'✓'; color:var(--on-accent); background:var(--teal); width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;}

/* Floating device cards */
.hero-stage{position:relative; min-height:420px;}
@media(max-width:880px){.hero-stage{min-height:360px;}}
.float-card{position:absolute; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-2); will-change:transform; transition:box-shadow .3s;}
.float-card:hover{box-shadow:var(--shadow-3);}
.float-card .fc-icon{font-size:26px; display:block; margin-bottom:8px;}
.float-card .fc-title{font-weight:800; font-size:14.5px;}
.float-card .fc-sub{font-size:12.5px; color:var(--muted);}
.fc-1{top:4%; left:6%; animation:floaty 7s ease-in-out infinite;}
.fc-2{top:26%; right:2%; animation:floaty 8s ease-in-out infinite 1.2s;}
.fc-3{bottom:22%; left:0%; animation:floaty 9s ease-in-out infinite 2.1s;}
.fc-4{bottom:2%; right:12%; animation:floaty 7.5s ease-in-out infinite .6s;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-.6deg);} 50%{transform:translateY(-14px) rotate(.6deg);}}
.hero-orb{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:290px; height:290px; border-radius:50%; background:conic-gradient(from 120deg, var(--brand-teal), var(--brand-amber), var(--brand-navy), var(--brand-teal)); filter:blur(46px); opacity:.34; animation:spin-slow 22s linear infinite;}
@keyframes spin-slow{to{transform:translate(-50%,-50%) rotate(360deg);}}
.hero-bridge{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:74%;}
.bridge-path{stroke-dasharray:520; stroke-dashoffset:520; animation:draw 2.2s ease forwards .4s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.traveler{offset-path:path('M20 210 C120 90, 280 90, 380 210'); animation:travel 8s ease-in-out infinite 2.6s; opacity:0;}
@keyframes travel{0%{offset-distance:0%; opacity:0;} 6%{opacity:1;} 94%{opacity:1;} 100%{offset-distance:100%; opacity:0;}}

/* ---------- Sections ---------- */
.section{padding:84px 0; position:relative;}
.section + .section{border-top:1px solid var(--line);}
.section-head{text-align:center; max-width:680px; margin:0 auto 52px;}
.section-head h2{font-size:clamp(28px,3.6vw,40px); letter-spacing:-.02em; font-weight:800; margin-bottom:12px;}
.section-head h2 .grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}
.section-head .sub{color:var(--muted); font-size:16.5px;}
.section-head .sub strong{color:var(--amber);}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; padding:30px; background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); margin-top:-8px;}
.stat{text-align:center; padding:12px 8px; border-radius:14px; transition:background .25s, transform .25s; cursor:help;}
.stat:hover{background:rgba(127,127,127,.08); transform:translateY(-3px);}
.stat-num{font-size:38px; font-weight:800; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.02em; line-height:1.1;}
.stat-label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:4px; font-weight:700;}

/* ---------- Audience ---------- */
.aud-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px;}
.aud-chip{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 16px; text-align:center; transition:transform .3s var(--ease-spring), border-color .3s, box-shadow .3s; cursor:help;}
.aud-chip:hover{transform:translateY(-6px) scale(1.03); border-color:var(--teal); box-shadow:var(--shadow-2);}
.aud-chip .a-icon{font-size:28px; display:block; margin-bottom:10px; transition:transform .3s var(--ease-spring);}
.aud-chip:hover .a-icon{transform:scale(1.25);}
.aud-chip .a-name{font-weight:800; font-size:14.5px;}

/* ---------- Cards (courses) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; align-items:start;}
.course-card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s; overflow:hidden;}
.course-card::before{content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--grad-brand); opacity:0; transition:opacity .3s;}
.course-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-3); border-color:var(--line-strong);}
.course-card:hover::before{opacity:1;}
.course-card.featured{border-color:var(--amber); background:linear-gradient(175deg, rgba(242,184,75,.07), transparent 45%), var(--surface);}
.course-card.pulse{animation:card-pulse 1.6s ease 2;}
@keyframes card-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,184,75,0);} 50%{box-shadow:0 0 0 12px rgba(242,184,75,.16); border-color:var(--amber);}}
.badge{display:inline-flex; align-self:flex-start; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--teal); background:rgba(63,184,172,.13); border-radius:999px; padding:6px 13px; margin-bottom:16px;}
.badge-hot{color:var(--on-accent); background:var(--grad-brand);}
.course-card h3{font-size:21px; margin-bottom:10px; font-weight:800; letter-spacing:-.01em;}
.course-card > p{font-size:14.5px; color:var(--muted); margin-bottom:16px;}
.course-meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.meta-chip{font-size:11.5px; font-weight:700; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px;}
.course-card ul{list-style:none;}
.course-card li{font-size:13.5px; padding:9px 0; border-top:1px solid var(--line); cursor:help; transition:padding-left .2s, color .2s;}
.course-card li:hover{padding-left:6px; color:var(--amber);}
.course-card li::before{content:'✓ '; color:var(--teal); font-weight:800;}
.card-links{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}

/* ---------- Journey timeline ---------- */
.journey{position:relative; max-width:760px; margin:0 auto; padding-left:34px;}
.journey::before{content:''; position:absolute; left:10px; top:6px; bottom:6px; width:3px; background:var(--line-strong); border-radius:2px;}
.j-line{position:absolute; left:10px; top:6px; width:3px; height:0; background:var(--grad-brand); border-radius:2px; transition:height .25s linear;}
.j-step{position:relative; padding:0 0 40px 22px;}
.j-step::before{content:''; position:absolute; left:-31px; top:5px; width:19px; height:19px; border-radius:50%; background:var(--surface); border:3px solid var(--line-strong); transition:border-color .3s, background .3s, transform .3s var(--ease-spring); z-index:2;}
.j-step.lit::before{border-color:var(--teal); background:var(--teal); transform:scale(1.15);}
.j-step h3{font-size:18px; font-weight:800; margin-bottom:6px;}
.j-step p{font-size:14.5px; color:var(--muted); max-width:560px;}
.j-step .j-tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-bottom:6px;}

/* ---------- Quiz ---------- */
.quiz-box{background:linear-gradient(160deg, rgba(31,78,107,.32), rgba(63,184,172,.10)), var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:54px 32px; box-shadow:var(--shadow-3); position:relative; overflow:hidden;}
[data-theme="light"] .quiz-box{background:linear-gradient(160deg, rgba(63,184,172,.12), rgba(242,184,75,.10)), var(--surface);}
.quiz-inner{max-width:600px; margin:0 auto; position:relative;}
.quiz-progress{height:6px; background:var(--line); border-radius:99px; margin-bottom:30px; overflow:hidden;}
.quiz-progress span{display:block; height:100%; width:0; background:var(--grad-brand); border-radius:99px; transition:width .5s var(--ease-out);}
.quiz-step{display:none; animation:quiz-in .45s ease;}
.quiz-step.active{display:block;}
@keyframes quiz-in{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.quiz-q{font-size:21px; font-weight:800; margin-bottom:20px; text-align:center; letter-spacing:-.01em;}
.quiz-opts{display:flex; flex-direction:column; gap:12px;}
.quiz-opts button{background:var(--surface-2); border:1.5px solid var(--line); color:var(--text); font-family:inherit; font-size:15px; font-weight:600; padding:16px 20px; border-radius:14px; cursor:pointer; text-align:left; transition:border-color .2s, background .2s, transform .2s;}
.quiz-opts button:hover{border-color:var(--amber); background:rgba(242,184,75,.09); transform:translateX(5px);}
.quiz-result{text-align:center;}
.score-ring{width:150px; height:150px; margin:0 auto 18px; position:relative;}
.score-ring svg{transform:rotate(-90deg); display:block;}
.score-ring .ring-bg{stroke:var(--line-strong); fill:none; stroke-width:11;}
.score-ring .ring-val{stroke:url(#scoreGrad); fill:none; stroke-width:11; stroke-linecap:round; stroke-dasharray:408; stroke-dashoffset:408; transition:stroke-dashoffset 1.4s var(--ease-out);}
.score-num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:36px; font-weight:800; letter-spacing:-.02em;}
.score-num small{font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.1em;}
.quiz-result-title{font-size:26px; font-weight:800; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px;}
.quiz-result-text{color:var(--muted); font-size:15.5px; max-width:440px; margin:0 auto 24px;}
.quiz-roadmap{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:26px;}
.quiz-roadmap span{font-size:12.5px; font-weight:700; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:8px 15px;}
.quiz-roadmap span b{color:var(--teal);}

/* ---------- Testimonials ---------- */
.testi-shell{position:relative; overflow:hidden; border-radius:var(--radius-lg);}
.testi-track{display:flex; transition:transform .6s var(--ease-out);}
.testi{flex:0 0 100%; padding:44px clamp(22px,6vw,70px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); text-align:center;}
.testi blockquote{font-size:clamp(17px,2.2vw,21px); line-height:1.6; font-weight:600; max-width:640px; margin:0 auto 22px; position:relative;}
.testi blockquote::before{content:'“'; display:block; font-size:56px; line-height:.6; color:var(--amber); margin-bottom:14px;}
.testi cite{font-style:normal; font-size:14px; color:var(--muted); font-weight:700;}
.testi cite b{color:var(--text);}
.testi .stars{color:var(--amber); letter-spacing:3px; margin-bottom:10px; font-size:15px;}
.testi-nav{display:flex; gap:12px; justify-content:center; align-items:center; margin-top:22px;}
.testi-dot{width:9px; height:9px; border-radius:50%; background:var(--line-strong); border:none; cursor:pointer; padding:0; transition:.3s;}
.testi-dot.active{background:var(--amber); transform:scale(1.35);}
.testi-arrow{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; font-size:17px; transition:.25s;}
.testi-arrow:hover{border-color:var(--teal); color:var(--teal); transform:scale(1.08);}

/* ---------- AI section ---------- */
.ai-band{background:linear-gradient(135deg, rgba(31,78,107,.5), rgba(63,184,172,.14)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:50px clamp(24px,5vw,60px); position:relative; overflow:hidden;}
[data-theme="light"] .ai-band{background:linear-gradient(135deg, rgba(31,78,107,.10), rgba(63,184,172,.12));}
.ai-band .grid2{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
@media(max-width:880px){.ai-band .grid2{grid-template-columns:1fr;}}
.tab-btns{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.tab-btns button{font-family:inherit; font-size:13px; font-weight:800; padding:9px 17px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; transition:.2s;}
.tab-btns button:hover{color:var(--text); border-color:var(--muted);}
.tab-btns button.active{background:var(--grad-brand); color:var(--on-accent); border-color:transparent;}
.tab-panel{display:none; animation:quiz-in .4s ease;}
.tab-panel.active{display:block;}
.chat-demo{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-2);}
.chat-line{margin-bottom:14px; font-size:14px;}
.chat-line:last-child{margin-bottom:0;}
.chat-line .who{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); display:block; margin-bottom:5px;}
.chat-line.user p{background:rgba(63,184,172,.12); border:1px solid rgba(63,184,172,.3); padding:12px 15px; border-radius:14px 14px 14px 4px; display:inline-block;}
.chat-line.ai p{background:var(--surface-2); border:1px solid var(--line); padding:12px 15px; border-radius:14px 14px 4px 14px;}

/* ---------- Before / After ---------- */
.ba{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-1);}
.ba-toggle{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:16px;}
.ba-toggle button{font-family:inherit; font-size:12.5px; font-weight:800; padding:8px 18px; border-radius:999px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:.25s;}
.ba-toggle button.active{background:var(--grad-brand); color:var(--on-accent);}
.ba-pane{display:none; font-size:14px; color:var(--muted); white-space:pre-line;}
.ba-pane.active{display:block; animation:quiz-in .35s ease;}
.ba-pane strong{color:var(--text);}

/* ---------- FAQ ---------- */
.faq-list{max-width:720px; margin:0 auto;}
.faq-item{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; background:var(--surface); overflow:hidden; transition:border-color .25s, box-shadow .25s;}
.faq-item.open{border-color:var(--teal); box-shadow:var(--shadow-1);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 22px; font-size:15.5px; font-weight:800; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:inherit; transition:color .2s;}
.faq-q:hover{color:var(--teal);}
.faq-icon{flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--muted); transition:transform .35s var(--ease-spring), background .25s, color .25s, border-color .25s;}
.faq-item.open .faq-icon{transform:rotate(45deg); background:var(--grad-brand); color:var(--on-accent); border-color:transparent;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out);}
.faq-item.open .faq-a{max-height:260px;}
.faq-a p{font-size:14.5px; color:var(--muted); padding:0 22px 20px; max-width:640px;}

/* ---------- Workshop countdown ---------- */
.countdown{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cd-cell{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; min-width:86px; text-align:center; box-shadow:var(--shadow-1);}
.cd-num{font-size:30px; font-weight:800; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums;}
.cd-label{font-size:10.5px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-top:2px;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad-brand); border-radius:var(--radius-lg); padding:56px clamp(24px,5vw,64px); text-align:center; color:var(--on-accent); position:relative; overflow:hidden;}
.cta-band::before{content:''; position:absolute; inset:0; background:radial-gradient(600px 300px at 20% 0%, rgba(255,255,255,.25), transparent 60%);}
.cta-band h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.02em; margin-bottom:12px; position:relative;}
.cta-band p{font-size:16px; opacity:.92; max-width:520px; margin:0 auto 28px; position:relative;}
.cta-band .btn{background:#10202C; color:#fff; position:relative;}
[data-theme="light"] .cta-band .btn{background:#173447;}
.cta-band .btn:hover{transform:translateY(-3px); filter:brightness(1.15);}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;}}
.contact h2{font-size:32px; font-weight:800; margin-bottom:12px; letter-spacing:-.02em;}
.contact p{color:var(--muted); font-size:15.5px; margin-bottom:8px; max-width:440px;}
.detail{font-size:14.5px; margin-top:22px; display:inline-block; margin-right:26px;}
.detail strong{display:block; color:var(--teal); margin-bottom:2px; font-weight:800;}
form{display:flex; flex-direction:column; gap:15px;}
label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:7px; display:block; font-weight:800;}
input, textarea, select{width:100%; padding:14px 16px; border-radius:13px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); font-family:inherit; font-size:14.5px; transition:border-color .2s, box-shadow .2s;}
input::placeholder, textarea::placeholder{color:var(--muted); opacity:.7;}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(63,184,172,.16);}
textarea{resize:vertical; min-height:130px;}
.form-msg{font-size:14.5px; color:var(--teal); display:none; font-weight:700;}
.form-msg.show{display:block; animation:quiz-in .4s ease;}
form .btn{align-self:flex-start;}
.newsletter-row{display:flex; gap:10px; max-width:460px; margin:0 auto;}
.newsletter-row input{flex:1;}
@media(max-width:560px){.newsletter-row{flex-direction:column;}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:40px; padding:56px 0 40px; background:var(--bg-2);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px;}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:14px; font-weight:800;}
.site-footer a{display:block; color:var(--muted); text-decoration:none; font-size:14px; padding:5px 0; transition:color .2s, padding-left .2s;}
.site-footer a:hover{color:var(--teal); padding-left:4px;}
.footer-brand p{color:var(--muted); font-size:14px; max-width:280px; margin-top:12px;}
.footer-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px;}

/* ---------- Course pages ---------- */
.course-hero{padding:72px 0 56px; display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center;}
@media(max-width:880px){.course-hero{grid-template-columns:1fr;}}
.course-hero h1{font-size:clamp(32px,4.6vw,50px); font-weight:800; letter-spacing:-.025em; line-height:1.1; margin:14px 0 16px;}
.course-hero .lede{font-size:17.5px; color:var(--muted); max-width:520px; margin-bottom:26px;}
.course-hero-art{background:var(--glass); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; text-align:center; font-size:84px; box-shadow:var(--shadow-2); position:relative; overflow:hidden;}
.course-hero-art::before{content:''; position:absolute; inset:0; background:radial-gradient(400px 220px at 30% 0%, var(--hero-glow-1), transparent 70%);}
.skill-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;}
.skill-pill{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:14px; font-weight:700; display:flex; gap:10px; align-items:flex-start; transition:transform .25s, border-color .25s;}
.skill-pill:hover{transform:translateY(-3px); border-color:var(--teal);}
.skill-pill::before{content:'✓'; color:var(--on-accent); background:var(--teal); width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; margin-top:2px;}
.module{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; background:var(--surface); overflow:hidden; transition:border-color .25s;}
.module.open{border-color:var(--teal);}
.module-q{width:100%; text-align:left; background:none; border:none; padding:20px 22px; font-size:15.5px; font-weight:800; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:inherit;}
.module-q .m-num{color:var(--amber); margin-right:6px;}
.module-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out);}
.module.open .module-a{max-height:300px;}
.module-a ul{list-style:none; padding:0 22px 20px;}
.module-a li{font-size:14px; color:var(--muted); padding:6px 0;}
.module-a li::before{content:'→ '; color:var(--teal); font-weight:800;}
.instructor{display:flex; gap:22px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; max-width:640px; margin:0 auto; box-shadow:var(--shadow-1); flex-wrap:wrap;}
.instructor .avatar{width:84px; height:84px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; font-size:34px; flex-shrink:0; color:var(--on-accent); font-weight:800;}
.instructor h3{font-size:18px; font-weight:800;}
.instructor .role{color:var(--amber); font-size:13px; font-weight:800; margin-bottom:8px;}
.instructor p{color:var(--muted); font-size:14px;}
.cert-card{max-width:560px; margin:0 auto; background:var(--surface); border:2px dashed var(--line-strong); border-radius:var(--radius-lg); padding:38px; text-align:center; transition:border-color .3s, transform .3s;}
.cert-card:hover{border-color:var(--amber); transform:scale(1.02);}
.cert-card .cert-seal{font-size:44px; margin-bottom:12px;}
.cert-card h3{font-weight:800; font-size:20px; margin-bottom:6px;}
.cert-card p{color:var(--muted); font-size:14px;}
.related{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.related a{text-decoration:none; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:12px 22px; font-size:14px; font-weight:800; transition:.25s;}
.related a:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-3px);}

/* ---------- Back to top ---------- */
#backToTop{position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(10px); color:var(--amber); font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px); transition:.3s; z-index:90; box-shadow:var(--shadow-2);}
#backToTop.show{opacity:1; pointer-events:auto; transform:none;}
#backToTop:hover{transform:translateY(-3px);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .js .reveal, .js .reveal-scale{opacity:1; transform:none;}
  html{scroll-behavior:auto;}
  #particles{display:none;}
}

/* ---------- Booking ---------- */
.booking-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start;}
@media(max-width:880px){.booking-grid{grid-template-columns:1fr;}}
.booking-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-2);}
.slot-label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; margin:18px 0 10px;}
.slot-label:first-child{margin-top:0;}
.slot-row{display:flex; gap:10px; flex-wrap:wrap;}
.slot{font-family:inherit; font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface-2); color:var(--text); cursor:pointer; transition:border-color .2s, background .2s, transform .2s;}
.slot:hover:not(:disabled){border-color:var(--teal); transform:translateY(-2px);}
.slot.selected{background:var(--grad-brand); color:var(--on-accent); border-color:transparent;}
.slot:disabled{opacity:.35; cursor:not-allowed;}
.booking-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px;}
@media(max-width:560px){.booking-fields{grid-template-columns:1fr;}}
.booking-note{font-size:12.5px; color:var(--muted); margin-top:14px;}
.form-err{font-size:14px; color:#FF7A7F; display:none; font-weight:700;}
[data-theme="light"] .form-err{color:#C62828;}
.form-err.show{display:block; animation:quiz-in .35s ease;}