/* ===========================================================================
   FlagRoster — Landing page
   Design tokens mirror the app's theme.css (navy + cyan athletic identity)
   =========================================================================== */

:root{
  --pw-navy:#010431; --pw-navy-2:#0A0F4A;
  --pw-cyan:#1FC4E0; --pw-cyan-bright:#4DDFF5; --pw-cyan-dim:#168AA0;
  --pw-yellow:#FFD23F; --pw-red:#FF4D5E; --pw-green:#2ECC71; --pw-orange:#FF7A2E; --pw-blue:#4A8FE8;

  --bg:#06082A; --bg-2:#0B0F38;
  --surface:#11163A; --surface-2:#1A2150; --surface-3:#232C5E;
  --border:#2A3470; --border-soft:rgba(255,255,255,0.07);
  --text:#FFFFFF; --text-2:#C7CDEC; --text-3:#7C86B5; --text-4:#51578A;
  --accent:var(--pw-cyan); --accent-2:var(--pw-cyan-bright); --on-accent:#001218;
  --field-grass:#0E5A3A; --field-grass-2:#0A4A30;

  --display:'Barlow Condensed',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --r-md:12px; --r-lg:18px; --r-xl:24px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img,svg{display:block}
::selection{background:var(--pw-cyan); color:var(--on-accent)}

/* deep background glow */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -10%, rgba(31,196,224,0.16), transparent 60%),
    radial-gradient(800px 700px at 8% 8%, rgba(74,143,232,0.10), transparent 55%),
    radial-gradient(1000px 800px at 50% 120%, rgba(31,196,224,0.10), transparent 60%);
}

.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin:0 0 18px;
}
.section-title{
  font-family:var(--display); font-weight:900; line-height:.95;
  text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(32px,5.2vw,60px); margin:0;
}
.section-lede{
  color:var(--text-2); font-size:clamp(15px,1.6vw,18px);
  max-width:60ch; margin:20px 0 0;
}
.section-head{margin-bottom:56px; max-width:760px}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  border:0; padding:13px 22px; border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .12s var(--ease), background .18s, box-shadow .25s, color .18s;
}
.btn:active{transform:scale(.97)}
.btn-lg{padding:16px 30px; font-size:15px}
.btn-primary{
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 8px 26px rgba(31,196,224,.35);
}
.btn-primary:hover{background:var(--accent-2); box-shadow:0 12px 36px rgba(31,196,224,.5); transform:translateY(-2px)}
.btn-ghost{background:var(--surface-2); color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface-3); border-color:var(--accent); color:#fff; transform:translateY(-2px)}

/* ---------- scroll progress + cursor ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--pw-cyan),var(--pw-cyan-bright));
  box-shadow:0 0 14px var(--pw-cyan); z-index:200;
}
.cursor-glow{
  position:fixed; top:0; left:0; width:380px; height:380px; border-radius:50%;
  margin:-190px 0 0 -190px; pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(circle, rgba(31,196,224,.14), transparent 65%);
  transition:opacity .3s; mix-blend-mode:screen;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:18px 24px; max-width:var(--maxw); margin:0 auto;
  transition:padding .3s var(--ease);
}
.nav.scrolled{padding:11px 24px}
.nav.scrolled::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(6,8,42,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.brand{display:flex; align-items:center; gap:11px}
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--pw-cyan-dim),var(--pw-cyan));
  color:#021318; box-shadow:0 4px 16px rgba(31,196,224,.4);
}
.brand-name{font-family:var(--display); font-weight:900; font-size:19px; letter-spacing:.02em; text-transform:uppercase; line-height:1}
.brand-sub{display:block; font-family:var(--display); font-weight:700; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-top:2px}
.nav-links{display:flex; gap:28px; margin-left:auto}
.nav-links a{
  font-family:var(--display); font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-2);
  transition:color .15s; position:relative; padding:4px 0;
}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .25s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:10px 18px}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:96px 0 40px; overflow:hidden;
}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
/* CSS fallback if WebGL fails */
.no-webgl #hero-canvas{
  background:
    radial-gradient(600px 500px at 72% 38%, rgba(31,196,224,.22), transparent 60%),
    radial-gradient(circle at 72% 42%, rgba(122,67,34,.5), transparent 30%);
}
.hero-grid-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(rgba(31,196,224,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(31,196,224,.05) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
}
.hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%}
.hero-title{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(48px,9vw,118px); line-height:.86; letter-spacing:-.01em;
  margin:0 0 28px; text-shadow:0 6px 40px rgba(0,0,0,.45);
}
.hero-title .line{display:block; overflow:hidden}
.hero-title .line>span{display:block; transform:translateY(110%)}
.hero-title .accent>span{
  color:var(--pw-cyan);
  text-shadow:0 0 40px rgba(31,196,224,.55);
}
.hero-sub{max-width:56ch; color:var(--text-2); font-size:clamp(16px,1.9vw,20px); margin:0 0 36px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:54px}
.hero-stats{display:inline-block}
.hs-label{
  font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-bottom:12px;
}
.hs-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.hs{display:flex; align-items:baseline; gap:8px}
.hs-num{font-family:var(--display); font-weight:900; font-size:30px; color:#fff; line-height:1}
.hs-cap{font-size:13px; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; font-family:var(--display); font-weight:700}
.hs-dot{width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.6}
.reveal-hero{opacity:0}
.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-3);
}
.scroll-hint svg{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- HERO split + animated play card ---------- */
@media (min-width:760px){
  .hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.86fr);
    align-items:center; gap:40px;
  }
  .hero-title{font-size:clamp(40px,4.8vw,84px); margin-bottom:22px}
  .hero-sub{margin-bottom:26px}
  .hero-cta{margin-bottom:34px}
}
.hero-art{position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:40px}
@media (min-width:760px){ .hero-art{margin-top:0; align-items:flex-end} }
.hero-art::before{
  content:''; position:absolute; inset:-14% -8%; z-index:-1;
  background:radial-gradient(58% 52% at 55% 40%, rgba(31,196,224,.22), transparent 70%);
}
.playcard{
  width:min(290px, 38vh, 80vw);
  border-radius:20px; padding:12px;
  background:linear-gradient(180deg, rgba(20,26,64,.92), rgba(9,12,42,.94));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(31,196,224,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transform-style:preserve-3d;
  animation:pcFloat 7s ease-in-out infinite;
}
@keyframes pcFloat{
  0%,100%{transform:perspective(1300px) rotateY(-9deg) rotateX(5deg) translateY(0)}
  50%{transform:perspective(1300px) rotateY(-6deg) rotateX(3deg) translateY(-12px)}
}
.pc-head{display:flex; align-items:center; justify-content:space-between; padding:2px 6px 12px}
.pc-code{font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:17px; color:#fff}
.pc-code em{color:var(--pw-cyan); font-style:normal}
.pc-chip{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:10px;
  color:var(--pw-cyan); border:1px solid rgba(31,196,224,.4); background:rgba(31,196,224,.12); border-radius:999px; padding:4px 9px}
.pc-fieldwrap{border-radius:14px; overflow:hidden; position:relative}
.pc-field{display:block; width:100%; height:auto}
.pc-route{stroke-dasharray:340; stroke-dashoffset:340; filter:drop-shadow(0 0 4px rgba(31,196,224,.5))}
.pc-slide.is-active .pc-route{animation:pcDraw .9s cubic-bezier(.6,0,.2,1) forwards}
.pc-slide.is-active .pc-route.r1{animation-delay:.45s}
.pc-slide.is-active .pc-route.r2{animation-delay:.75s}
.pc-slide.is-active .pc-route.r3{animation-delay:1.05s}
.pc-slide.is-active .pc-route.r4{animation-delay:1.35s}
@keyframes pcDraw{to{stroke-dashoffset:0}}
.pc-p{opacity:0; transform-box:fill-box; transform-origin:center}
.pc-slide.is-active .pc-p{animation:pcPop .4s cubic-bezier(.2,1.5,.3,1) forwards; animation-delay:var(--d)}
@keyframes pcPop{from{opacity:0; transform:scale(.4)} to{opacity:1; transform:scale(1)}}
.pc-def rect{opacity:0}
.pc-slide.is-active .pc-def rect{animation:pcFade .5s ease forwards .2s}
@keyframes pcFade{to{opacity:1}}
.pc-ball{filter:drop-shadow(0 0 6px rgba(255,220,150,.55))}
.pc-foot{display:flex; align-items:center; gap:8px; padding:12px 8px 4px; font-family:var(--display)}
.pc-foot-team{display:flex; align-items:center; gap:6px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:#fff}
.pc-foot-team.dim{color:var(--text-3)}
.pc-foot-score{font-weight:900; font-size:20px; color:#fff; font-variant-numeric:tabular-nums}
.pc-foot-score.dim{color:var(--text-3)}
.pc-foot-vs{color:var(--text-3)}
.pc-dot{width:8px; height:8px; border-radius:2px; display:inline-block}
.pc-pwf{background:var(--pw-cyan)} .pc-krk{background:var(--pw-red)}
.pc-live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pw-red)}
.pc-live::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--pw-red);
  box-shadow:0 0 8px var(--pw-red); animation:pcBlink 1.4s ease-in-out infinite}
@keyframes pcBlink{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  .playcard{animation:none}
  .pc-route{stroke-dashoffset:0; animation:none}
  .pc-p,.pc-def rect{opacity:1; animation:none}
  .pc-live::before{animation:none}
  .pc-slide{transition:none}
  .std-row,.ros-row,.rsvp{opacity:1 !important; transform:none !important; animation:none !important}
}

/* ---------- HERO carousel ---------- */
.pc-carousel{position:relative; width:min(290px, 38vh, 80vw)}
.pc-slide{position:absolute; inset:0; opacity:0; transform:translateX(7%) scale(.985);
  transition:opacity .55s var(--ease), transform .55s var(--ease); pointer-events:none}
.pc-slide:first-child{position:relative}   /* defines carousel height */
.pc-slide.is-active{opacity:1; transform:none; pointer-events:auto; z-index:2}
.pc-slide .playcard{width:100%}
.pc-dots{display:flex; gap:8px}
.pc-dot-btn{width:8px; height:8px; padding:0; border:0; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.22); transition:width .3s var(--ease), background .3s}
.pc-dot-btn.is-on{width:22px; background:var(--pw-cyan)}
.pc-cap{font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-3); min-height:14px}

/* shared card body for non-field slides (matches the field's 300:360 ratio) */
.pc-body{aspect-ratio:300/360; border-radius:14px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(10,14,46,.6), rgba(6,8,30,.6))}
.pc-foot{min-height:30px}

/* Standings card */
.pc-body.std{padding:8px 5px; gap:1px; justify-content:flex-start}
.std-row{display:grid; grid-template-columns:18px 1fr 40px 28px; align-items:center; gap:6px;
  padding:7px 9px; border-radius:8px; font-family:var(--display); font-weight:700; font-size:13px; color:#fff}
.std-row.sh{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); padding:2px 9px 4px}
.std-row .rk{color:var(--text-3); font-size:12px}
.std-row .tm{display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.03em}
.std-row .td{width:8px; height:8px; border-radius:2px; flex-shrink:0}
.std-row .wl{text-align:center; color:var(--text-2); font-size:12px; font-variant-numeric:tabular-nums}
.std-row .pt{text-align:right; font-weight:900; font-variant-numeric:tabular-nums}
.std-row.pwf{background:color-mix(in srgb, var(--pw-cyan) 16%, transparent); box-shadow:inset 0 0 0 1px rgba(31,196,224,.35)}
.std-row.pwf .rk, .std-row.pwf .pt{color:var(--pw-cyan)}
.td.c{background:var(--pw-cyan)} .td.r{background:var(--pw-red)} .td.y{background:var(--pw-yellow)} .td.g{background:var(--pw-green)} .td.b{background:var(--pw-blue)}
.std-row:not(.sh){opacity:0; transform:translateY(9px)}
.pc-slide.is-active .std-row:not(.sh){animation:pcRowIn .5s var(--ease) forwards; animation-delay:calc(var(--i) * .09s)}
@keyframes pcRowIn{to{opacity:1; transform:none}}

/* Roster card */
.pc-body.roster{padding:9px 7px; gap:7px; justify-content:center}
.ros-row{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--border-soft); opacity:0; transform:translateX(10px)}
.pc-slide.is-active .ros-row{animation:pcRowIn .5s var(--ease) forwards; animation-delay:calc(var(--i) * .1s)}
.ros-row .av{width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:12px; color:#04263b; background:linear-gradient(135deg,var(--pw-cyan),var(--pw-cyan-dim))}
.ros-row .ri{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.18}
.ros-row .ri b{font-family:var(--body); font-weight:700; font-size:12.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ros-row .ri i{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); font-style:normal}
.rsvp{font-family:var(--display); font-weight:800; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; flex-shrink:0; opacity:0; transform:scale(.6)}
.pc-slide.is-active .rsvp{animation:pcRsvp .42s cubic-bezier(.2,1.5,.3,1) forwards; animation-delay:calc(var(--i) * .1s + .22s)}
@keyframes pcRsvp{to{opacity:1; transform:scale(1)}}
.rsvp.in{color:var(--pw-green); background:color-mix(in srgb, var(--pw-green) 16%, transparent); border:1px solid color-mix(in srgb, var(--pw-green) 40%, transparent)}
.rsvp.out{color:var(--pw-red); background:color-mix(in srgb, var(--pw-red) 14%, transparent); border:1px solid color-mix(in srgb, var(--pw-red) 36%, transparent)}

/* ---------- MARQUEE ---------- */
.marquee{
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  background:var(--bg-2); overflow:hidden; padding:18px 0;
}
.marquee-track{
  display:flex; gap:34px; align-items:center; white-space:nowrap; width:max-content;
  animation:scroll-x 32s linear infinite;
}
.marquee-track span{
  font-family:var(--display); font-weight:800; font-size:22px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text-2);
}
.marquee-track .m-dot{color:var(--accent); font-size:9px}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTION base ---------- */
.section{padding:clamp(80px,11vw,150px) 0; position:relative}

/* reveal animation base (GSAP toggles .in) */
.reveal{opacity:0; transform:translateY(38px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- AS IS -> TO BE ---------- */
.shift-rows{display:flex; flex-direction:column; gap:14px}
.shift-row{
  display:grid; grid-template-columns:150px 1fr 48px 1fr; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); padding:22px 26px;
  transition:border-color .3s, transform .3s var(--ease);
}
.shift-row:hover{border-color:var(--border); transform:translateX(4px)}
.shift-role{font-family:var(--display); font-weight:900; font-size:20px; text-transform:uppercase; color:var(--accent)}
.shift-from{color:var(--text-3); text-decoration:line-through; text-decoration-color:var(--pw-red); text-decoration-thickness:2px}
.shift-arrow{color:var(--accent); display:flex; justify-content:center}
.shift-to{color:var(--text); font-weight:600}

/* ---------- ROLES ---------- */
.role-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.role-card{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-xl); padding:34px 30px; position:relative;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.role-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg, color-mix(in srgb,var(--rc,var(--pw-cyan)) 55%,transparent), transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s;
}
.role-card[data-accent="cyan"]{--rc:var(--pw-cyan)}
.role-card[data-accent="yellow"]{--rc:var(--pw-yellow)}
.role-card[data-accent="green"]{--rc:var(--pw-green)}
.role-card:hover{transform:translateY(-8px); border-color:transparent; box-shadow:0 30px 60px rgba(0,0,0,.4)}
.role-card:hover::before{opacity:1}
.role-card.featured{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.role-flag{
  position:absolute; top:18px; right:18px;
  font-family:var(--display); font-weight:800; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pw-yellow);
  background:color-mix(in srgb,var(--pw-yellow) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--pw-yellow) 35%,transparent);
  padding:5px 10px; border-radius:999px;
}
.role-top{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.role-icon{
  width:48px; height:48px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--rc) 16%,transparent); color:var(--rc);
}
.role-name{font-family:var(--display); font-weight:900; font-size:26px; text-transform:uppercase; margin:0}
.role-quote{color:var(--text-2); font-size:16px; font-style:italic; margin:0 0 24px; flex:1}
.role-feats{list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:11px}
.role-feats li{
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text); display:flex; align-items:center; gap:10px;
}
.role-feats li::before{
  content:''; width:7px; height:7px; border-radius:2px; background:var(--rc); flex-shrink:0;
  box-shadow:0 0 8px var(--rc);
}

/* ---------- PLAY DESIGNER ---------- */
.designer{background:linear-gradient(180deg,transparent, rgba(11,15,56,.5), transparent)}
.designer-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.designer-points{list-style:none; margin:28px 0 30px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.designer-points li{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-2)}
.dp-key{width:18px; height:4px; border-radius:99px; background:var(--c); box-shadow:0 0 10px var(--c); flex-shrink:0}

.field-frame{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:18px; box-shadow:0 40px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(31,196,224,.1);
  position:relative;
}
.field-chrome{display:flex; align-items:center; justify-content:space-between; padding:2px 6px 14px}
.fc-code{font-family:var(--display); font-weight:900; font-size:20px; letter-spacing:.06em; text-transform:uppercase}
.fc-tag{font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); padding:5px 11px; border-radius:999px}
.field-svg{width:100%; height:auto; border-radius:14px; display:block}
.field-svg .player circle{stroke:rgba(0,0,0,.35); stroke-width:1.5}
.field-svg .player[data-c="cyan"] circle{fill:var(--pw-cyan)}
.field-svg .player[data-c="yellow"] circle{fill:var(--pw-yellow)}
.field-svg .player[data-c="white"] circle{fill:#fff}
.field-svg .player text{
  font-family:var(--display); font-weight:900; font-size:12px; fill:#021318;
  text-anchor:middle; dominant-baseline:central;
}
.field-svg .route[data-c="cyan"]{stroke:var(--pw-cyan)}
.field-svg .route[data-c="yellow"]{stroke:var(--pw-yellow)}
.field-svg .route[data-c="white"]{stroke:#fff}
.field-scrub{display:flex; align-items:center; gap:12px; padding:14px 6px 4px}
.fs-bar{flex:1; height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.fs-bar>i{display:block; height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--pw-cyan),var(--pw-cyan-bright)); box-shadow:0 0 12px var(--pw-cyan)}
.fs-time{font-family:var(--mono); font-size:12px; color:var(--text-3); min-width:38px; text-align:right}

/* ---------- FEATURES ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg);
  padding:26px 24px; transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.feature-card:hover{transform:translateY(-6px); border-color:var(--border); background:var(--surface-2)}
.f-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); margin-bottom:18px;
}
.f-icon svg{width:23px; height:23px}
.feature-card h3{font-family:var(--display); font-weight:800; font-size:20px; text-transform:uppercase; margin:0 0 9px; letter-spacing:.02em}
.feature-card p{color:var(--text-3); font-size:14.5px; margin:0; line-height:1.55}

/* ---------- NUMBERS ---------- */
.num-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.num-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:30px 26px}
.num-val{font-family:var(--display); font-weight:900; font-size:clamp(40px,5vw,64px); line-height:1; color:var(--pw-cyan); display:flex; align-items:baseline; gap:8px; text-shadow:0 0 30px rgba(31,196,224,.4)}
.num-val em{font-style:normal; font-size:18px; color:var(--text-3); letter-spacing:.05em; text-transform:uppercase}
.num-card p{color:var(--text-2); font-size:14.5px; margin:16px 0 0; line-height:1.55}

/* ---------- COMPARE ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border-soft)}
.cmp-table{width:100%; border-collapse:collapse; min-width:560px; background:var(--surface)}
.cmp-table th,.cmp-table td{padding:18px 22px; text-align:left}
.cmp-table thead th{
  font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); border-bottom:1px solid var(--border-soft);
}
.cmp-table tbody td{border-bottom:1px solid var(--border-soft); font-weight:600}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table tbody td:first-child{font-family:var(--display); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.03em}
.cmp-us{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.cmp-us td:first-child{color:var(--accent)}
.mark{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; display:inline-block}
.mark.yes{background:color-mix(in srgb,var(--pw-green) 18%,transparent); color:var(--pw-green); border:1px solid color-mix(in srgb,var(--pw-green) 35%,transparent)}
.mark.warn{background:color-mix(in srgb,var(--pw-yellow) 16%,transparent); color:var(--pw-yellow); border:1px solid color-mix(in srgb,var(--pw-yellow) 32%,transparent)}
.mark.no{background:color-mix(in srgb,var(--pw-red) 14%,transparent); color:var(--pw-red); border:1px solid color-mix(in srgb,var(--pw-red) 30%,transparent)}

/* ---------- PRICING ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.price-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-xl);
  padding:30px 26px; display:flex; flex-direction:column; position:relative;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.price-card:hover{transform:translateY(-6px); border-color:var(--border)}
.price-card.popular{border-color:var(--accent); box-shadow:0 24px 60px rgba(31,196,224,.18)}
.pc-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--display); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); padding:6px 14px; border-radius:999px; box-shadow:0 6px 18px rgba(31,196,224,.4);
}
.pc-name{font-family:var(--display); font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2)}
.pc-price{font-family:var(--display); font-weight:900; font-size:42px; line-height:1.1; margin:8px 0 2px}
.pc-price span{font-size:15px; color:var(--text-3); font-weight:700}
.pc-was{font-size:20px; color:var(--text-4); font-weight:700; text-decoration:line-through; margin-right:10px}
.pc-mo{font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.04em; color:var(--accent); margin-bottom:14px}
.pc-target{color:var(--text-3); font-size:13px; min-height:38px; margin-bottom:18px}
.pc-foot-note{text-align:center; color:var(--text-3); font-size:13px; margin-top:26px}
.pc-list{list-style:none; margin:0 0 24px; padding:18px 0 0; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:11px; flex:1}
.pc-list li{font-size:14.5px; color:var(--text-2); display:flex; align-items:center; gap:10px}
.pc-list li::before{content:''; width:16px; height:16px; flex-shrink:0; border-radius:50%; background:color-mix(in srgb,var(--accent) 18%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231FC4E0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center}
.pc-cta{width:100%}

/* ---------- FINAL CTA ---------- */
.final-cta{position:relative; overflow:hidden; text-align:center; padding:clamp(90px,13vw,170px) 0}
#cta-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.7}
.no-webgl #cta-canvas{background:radial-gradient(700px 400px at 50% 40%, rgba(31,196,224,.16), transparent 65%)}
.final-inner{position:relative; z-index:2}
.final-title{
  font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.9;
  font-size:clamp(40px,8vw,96px); margin:0 0 38px; letter-spacing:-.01em;
}
.final-title .accent{color:var(--pw-cyan); text-shadow:0 0 44px rgba(31,196,224,.55)}
.final-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--border-soft); background:var(--bg-2); padding:60px 0 30px}
.footer-grid{display:grid; grid-template-columns:1.3fr 2fr; gap:40px; margin-bottom:44px}
.foot-brand{display:flex; gap:14px; align-items:flex-start}
.foot-tag{color:var(--text-3); font-size:14px; margin:8px 0 0; max-width:34ch}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.foot-col h4{font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin:0 0 16px}
.foot-col a{display:block; color:var(--text-2); font-size:14.5px; padding:6px 0; transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-base{display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border-soft); color:var(--text-4); font-size:13px; font-family:var(--display); font-weight:600; letter-spacing:.06em; text-transform:uppercase}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .designer-grid{grid-template-columns:1fr; gap:44px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .num-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .role-cards{grid-template-columns:1fr; max-width:520px; margin:0 auto}
}
@media (max-width:720px){
  .nav-links{display:none}
  .footer-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
  .shift-row{grid-template-columns:1fr; gap:10px; text-align:left}
  .shift-arrow{transform:rotate(90deg); justify-content:flex-start}
  .shift-from{text-align:left}
  .cursor-glow{display:none}
}
@media (max-width:520px){
  .feature-grid,.num-grid,.price-grid,.foot-cols{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}