*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ═══ GLOBAL FONT TOKENS (V7 DEFINITIVE) ═══ */
:root{
  --display:'Urbanist',sans-serif;
  --magic:'Playfair Display',serif;
  --sans:'DM Sans',sans-serif;
  --bg:#050505;
  --bg2:#0a0a0f;
  --card-bg:rgba(255,255,255,0.015);
  --card-bg-hover:rgba(255,255,255,0.035);
  --border:rgba(255,255,255,0.06);
  --border-hi:rgba(255,255,255,0.16);
  
  --text:#F3F3F5;
  --dim:rgb(155, 155, 165);
  --muted:rgb(98, 98, 115);
  --faint:rgba(255,255,255,0.25);
  --ghost:rgba(255,255,255,0.4);
  
  --purple:#b8a0ff;
  --blue:#7ecaff;
  --indigo:#a78bff;
  --pink:#ffb7d5;
  --peach:#ffd8be;
  --yellow:#ffe0a0;
  --green:#b4ffda;

  /* Seamless, Liquid Tech Gradient looping perfectly */
  --gradient:linear-gradient(90deg, #7ecaff, #a78bff, #ffb7d5, #a78bff, #7ecaff);
  --gradient-subtle:linear-gradient(90deg, rgba(126,202,255,0.15), rgba(188,161,255,0.12), rgba(255,183,213,0.08), rgba(188,161,255,0.12), rgba(126,202,255,0.15));
  
  /* Holographic Shimmer Gradient for 3D metallic feel */
  --gradient-holo:linear-gradient(100deg, #7ecaff 0%, #ffffff 12%, #a78bff 30%, #ffb7d5 50%, #ffffff 62%, #a78bff 80%, #7ecaff 100%);
  
  --hero:'Urbanist',sans-serif;
  --body:'DM Sans',sans-serif;
  --mono:'JetBrains Mono',monospace;
  
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(195,166,255,0.3);color:var(--text)}
a{text-decoration:none;color:inherit}

/* ── BLOBS ── */
/* ── AMBIENT LIGHTING (Breathing & Drifting) ── */
.blob{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;animation:blobDrift 20s infinite alternate cubic-bezier(0.4,0,0.2,1);will-change:transform,opacity;}
@keyframes blobDrift{0%{transform:translate(0,0) scale(1);opacity:0.08}50%{transform:translate(60px,-40px) scale(1.15);opacity:0.12}100%{transform:translate(-30px,30px) scale(0.9);opacity:0.06}}
.blob-1{width:500px;height:500px;background:var(--purple);opacity:0.08;top:-10%;right:-10%;animation-delay:-2s;animation-duration:24s}
.blob-2{width:450px;height:450px;background:var(--indigo);opacity:0.06;top:40%;left:-200px;animation-delay:-8s;animation-duration:28s}
.blob-3{width:400px;height:400px;background:var(--blue);opacity:0.06;bottom:15%;left:-120px;animation-delay:-12s;animation-duration:22s}
.blob-4{width:380px;height:380px;background:var(--pink);opacity:0.05;bottom:-120px;right:5%;animation-delay:-5s;animation-duration:32s}

.grad{background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ── NOISE ── */
body::before{content:'';position:fixed;inset:-50%;z-index:0;pointer-events:none;opacity:.035;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px;animation:filmGrain 0.4s steps(2) infinite;will-change:transform;}
@keyframes filmGrain{0%,100%{transform:translate(0,0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(-1%,-1%)}}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeWide{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes shine{0%{background-position:0% center}100%{background-position:200% center}}

/* ── UTILS ── */
.rv {
  opacity: 0;
  transform: translateY(80px) scale(0.92) rotateX(8deg);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.rv.on {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0);
}
.rv-d1 { transition-delay: .15s; }
.rv-d2 { transition-delay: .3s; }
.rv-d3 { transition-delay: .45s; }

.container{max-width:1100px;margin:0 auto;padding:0 40px;position:relative;z-index:10}

/* ── SECTION LABELS (Eyebrow: DM Sans 500, 0.56rem) ── */
.section-label{font-family:var(--body);font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:#c3a6ff;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 8s linear infinite;text-align:center;margin-bottom:16px}
/* Section H2: Match .st-h size — Urbanist 800, clamp(2.2rem,6.5vw,4.5rem) */
.section-h2{font-family:var(--hero);font-size:clamp(2.2rem,6.5vw,4.5rem);font-weight:800;font-style:normal;text-align:center;letter-spacing:-0.05em;margin-bottom:48px;line-height:0.95;color:#FFFFFF;text-shadow:none;text-transform:uppercase;}
.section-h2 em{font-style:italic;background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 6s linear infinite;}

/* ── NAV - Glossy Transparency, No Line ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:56px;display:flex;align-items:center;padding:0 32px;background:rgba(5,5,5,0.9);border-bottom:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);transition:all .4s}
nav.scrolled{height:52px;background:rgba(5,5,5,0.95);box-shadow:0 4px 30px rgba(0,0,0,0.5)}
.nav-in{display:flex;align-items:center;width:100%;max-width:1400px;margin:0 auto}
/* Logo: Urbanist 800, 1.05rem */
.nav-logo{font-family:var(--hero);font-size:1.05rem;font-weight:800;letter-spacing:-0.02em;text-shadow:0 2px 10px rgba(0,0,0,0.5)}
.nav-logo span{color:#808080;font-weight:400}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:32px}
/* Nav: Urbanist 400, 0.82rem, #808080 */
.nav-r a{font-family:var(--hero);font-size:.82rem;color:#808080;font-weight:400;transition:color .3s;letter-spacing:0;text-transform:none}
.nav-r a:hover{color:#F0F0F0}
.nav-r a:hover{opacity:0.75}

/* Remove nav button border, use pure glossy glass */
/* Buttons: Urbanist 500-600, 0.76-0.82rem, uppercase, ls 0.04em */
.nav-cta{font-family:var(--hero)!important;padding:6px 18px!important;border-radius:8px!important;font-size:.76rem!important;font-weight:600!important;color:#0a0a0a!important;background:var(--gradient)!important;letter-spacing:.04em!important;text-transform:uppercase!important;box-shadow:none!important;background-size:200% auto!important;animation:shine 8s linear infinite!important;}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(225,183,255,0.3), inset 0 1px 1px rgba(255,255,255,0.7)!important}

/* ── HERO ── */
.hero{min-height:96vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 70px;position:relative;z-index:1;overflow:hidden}
.hero::before{content:'';position:absolute;top:20%;left:50%;transform:translateX(-50%);width:800px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(195,166,255,0.06) 0%,rgba(150,230,255,0.03) 40%,transparent 70%);pointer-events:none;z-index:0}
.hero-content{position:relative;z-index:2;max-width:760px}

/* Redesigned Eyebrow - Elegant Text without a boxed border */
.h-eyebrow-redesigned{display:inline-flex;align-items:center;gap:12px;margin-bottom:34px;}
.h-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 2s ease-in-out infinite}
/* Eyebrow: DM Sans 500, 0.56rem, uppercase, ls 0.14em, #c3a6ff */
.h-eyebrow-text{font-family:var(--body);font-size:.56rem;font-weight:500;color:#c3a6ff;letter-spacing:0.14em;text-transform:uppercase;}
.h-eyebrow-text strong{color:var(--text);font-weight:800;background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 6s linear infinite;transition:opacity 0.3s;}
.h-eyebrow-text strong:hover { opacity: 0.8; }

/* Hero H1: Urbanist 800, clamp(2.6rem,7.5vw,5rem), ls -0.03em */
.h-title{font-family:var(--hero);font-weight:800;font-size:clamp(2.6rem,7.5vw,5rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:14px;text-transform:uppercase;}
.h-title .g{background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 6s linear infinite;transition:opacity 0.3s;}
.h-title .g:hover { opacity: 0.8; }

/* Subtitle: Urbanist 300, clamp(0.86rem,1.3vw,1rem), lh 1.75 */
.h-sub{font-family:var(--hero);font-size:clamp(0.86rem,1.3vw,1rem);font-weight:300;line-height:1.75;color:var(--dim);max-width:520px;margin:0 auto 20px;}
.h-sub strong{color:var(--text);font-weight:500;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Hero Input - More precision glass */
.h-form-w{width:100%;max-width:440px;margin:0 auto;}
.h-form{display:flex;gap:0;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:5px;transition:all .4s;box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05)}
.h-form:focus-within{border-color:rgba(195,166,255,0.3);background:rgba(255,255,255,0.04);box-shadow:0 0 40px rgba(195,166,255,0.1), inset 0 1px 1px rgba(255,255,255,0.1)}
/* Input: DM Sans 300, 0.82rem */
.h-form input{flex:1;background:0 0;border:none;color:#F0F0F0;font-family:var(--body);font-size:.82rem;font-weight:300;padding:0 24px;outline:0}
.h-form input::placeholder{color:#505050}
/* Button: Urbanist 600, 0.82rem, uppercase, ls 0.04em */
.h-form button{background:rgba(255,255,255,0.08);color:var(--text);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:12px 28px;font-family:var(--hero);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;transition:all .4s cubic-bezier(0.16,1,0.3,1);box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);position:relative;overflow:hidden;}
.h-form button::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transform:skewX(-20deg);transition:0.6s ease;pointer-events:none;}
.h-form button:hover{background:var(--text);color:var(--bg);box-shadow:0 0 20px rgba(255,255,255,0.3);transform:scale(1.02);}
.h-form button:hover::after{left:150%;}

/* Micro: DM Sans 300, 0.62-0.66rem, #606060 */
.h-meta{font-family:var(--body);font-size:.62rem;font-weight:300;color:#606060;text-transform:uppercase;letter-spacing:.14em;margin-top:20px;}

.ok-msg{display:none;text-align:center}
.ok-msg.show{display:block;opacity:0;animation:fadeUp .6s ease forwards}
.ok-t{font-family:var(--hero);font-size:1.3rem;font-weight:800;margin-bottom:8px}
.ok-t span{background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 6s linear infinite;}
.ok-s{font-family:var(--body);font-size:.84rem;color:#A0A0A0;font-weight:300;line-height:1.7}

/* ── MODELS STRIP ── */
.models{padding:24px 0;position:relative;z-index:1;overflow:hidden;background:transparent;border-top:1px solid rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.03);}
.models::before{content:'';position:absolute;top:0;left:0;bottom:0;width:150px;background:linear-gradient(90deg,var(--bg),transparent);z-index:2}
.models::after{content:'';position:absolute;top:0;right:0;bottom:0;width:150px;background:linear-gradient(-90deg,var(--bg),transparent);z-index:2}
.models-track{display:flex;align-items:center;gap:56px;animation:scroll 28s linear infinite;width:max-content}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Marquee: DM Sans 400, 0.72rem, uppercase, ls 0.12em, #404040 */
.models-track span{font-family:var(--body);font-size:.72rem;font-weight:400;letter-spacing:.12em;white-space:nowrap;color:#404040;text-transform:uppercase;transition:color 0.4s}
.models-track span:hover{color:var(--text)}

/* ── SHOWCASE GRID ── */
.showcase{padding:120px 0;position:relative;z-index:1}
.sc-hero{width:100%;aspect-ratio:16/9;border-radius:12px;background:var(--card-bg);border:1px solid var(--border);overflow:hidden;position:relative;cursor:pointer;transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.5)}
.sc-hero:hover{border-color:rgba(195,166,255,0.25);transform:translateY(-4px);box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(195,166,255,0.08)}
.sc-hero-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.sc-hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#150a25,#1a1a25,#0a1525,#050505);background-size:400% 400%;animation:gm 14s ease infinite;opacity:.8}

.sc-play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;transition:all .4s;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sc-hero:hover .sc-play{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.4);transform:scale(1.1);box-shadow:0 0 40px rgba(255,255,255,0.15)}
.sc-play svg{margin-left:4px}
.sc-hero-ph{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.sc-hero-ph span{font-family:var(--body);font-size:.56rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,0.4);font-weight:500}

.sc-hero-overlay{position:absolute;bottom:0;left:0;right:0;padding:32px 36px;background:linear-gradient(transparent,rgba(5,5,5,0.95));z-index:2;display:flex;justify-content:space-between;align-items:flex-end}
.sc-hero-tag{font-family:var(--body);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#c3a6ff;font-weight:500;margin-bottom:6px;display:block}
.sc-hero-title{font-family:var(--hero);font-size:1.1rem;font-weight:600}
.sc-hero-sub{font-family:var(--body);font-size:.82rem;color:#A0A0A0;font-weight:300}

.sc-refs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.sc-ref{aspect-ratio:16/10;border-radius:8px;background:var(--card-bg);border:1px solid var(--border);overflow:hidden;position:relative;cursor:pointer;transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02)}
.sc-ref:hover{border-color:rgba(150,230,255,0.25);transform:translateY(-3px);box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 16px 32px rgba(0,0,0,0.6)}
.sc-ref-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.sc-ref-inner::before{content:'';position:absolute;inset:0;background-size:400% 400%;animation:gm 18s ease infinite;opacity:.5}
.sc-ref:nth-child(1) .sc-ref-inner::before{background:linear-gradient(135deg,#0a1525,#1a1a25,#150a25,#050505)}
.sc-ref:nth-child(2) .sc-ref-inner::before{background:linear-gradient(135deg,#150a25,#050505,#0a1525,#1a1a25)}
.sc-ref:nth-child(3) .sc-ref-inner::before{background:linear-gradient(135deg,#1a1a25,#150a25,#050505,#0a1525)}

.sc-ref-ph{font-family:var(--body);font-size:.56rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,0.3);font-weight:500;position:relative;z-index:1}
.sc-ref-overlay{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(5,5,5,0.85));opacity:0;transition:opacity .4s;z-index:2;display:flex;align-items:flex-end;padding:16px}
.sc-ref:hover .sc-ref-overlay{opacity:1}
.sc-ref-overlay span{font-family:var(--hero);font-size:.76rem;letter-spacing:.04em;color:var(--text);font-weight:600;text-transform:uppercase}


/* ═══ WORKFLOW — THE WIDE ELEGANT ZIGZAG ═══ */
.workflow{padding:140px 0 100px;position:relative;z-index:1;overflow:hidden}
.workflow::before{content:'';position:absolute;top:20%;left:50%;transform:translateX(-50%);width:800px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(195,166,255,0.025) 0%,transparent 70%);pointer-events:none}
.wf-header{text-align:center;margin-bottom:100px}

/* Extra wide layout container per user request */
.wf-container{max-width:1400px;margin:0 auto;padding:0 40px;}

.wf-step{display:grid;grid-template-columns:5fr 7fr;gap:90px;align-items:center;margin-bottom:140px;}
.wf-step:last-child{margin-bottom:0}
.wf-step.reverse .wf-text{order:2}
.wf-step.reverse .wf-visual{order:1}

.wf-text{display:flex;flex-direction:column;gap:0;padding:20px 0;}
/* Eyebrow: DM Sans 500, 0.56rem */
.wf-num{font-family:var(--body);font-size:.56rem;font-weight:500;color:#c3a6ff;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:16px}
.wf-num::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(195,166,255,0.25),transparent);max-width:80px}
/* Section H2: Urbanist 700, clamp(1.4rem,3vw,2rem) */
.wf-step-title{font-family:var(--hero);font-size:clamp(1.4rem,3vw,2rem);font-weight:700;font-style:normal;line-height:1.1;letter-spacing:-.02em;margin-bottom:24px;color:var(--text)}
/* Body: DM Sans 300, 0.82-0.84rem, lh 1.7, #A0A0A0 */
.wf-step-desc{font-family:var(--body);font-size:.84rem;font-weight:300;color:#A0A0A0;line-height:1.7;margin-bottom:24px;}
.wf-tag{display:inline-flex;padding:7px 18px;border-radius:6px;font-family:var(--body);font-size:.56rem;font-weight:500;letter-spacing:.14em;color:#c3a6ff;text-transform:uppercase;background:rgba(150,230,255,0.05);border:1px solid rgba(150,230,255,0.15);align-self:flex-start;transition:all .3s}
.wf-tag:hover{border-color:rgba(150,230,255,0.4);background:rgba(150,230,255,0.1)}

/* Extravagant 3D Glossy Visuals */
.wf-visual{position:relative}
.wf-img{width:100%;aspect-ratio:16/9;border-radius:12px;background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.05);overflow:hidden;position:relative;transition:all .6s cubic-bezier(.16,1,.3,1);box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px rgba(0,0,0,0.6); backdrop-filter:blur(20px);}
.wf-img:hover{border-color:rgba(255,255,255,0.15);box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 40px 80px rgba(0,0,0,0.8), 0 0 60px rgba(195,166,255,0.1);transform:translateY(-8px) scale(1.02)}
.wf-img-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;}

.wf-img-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#050505,rgba(25,25,35,0.5),#050505);background-size:200% 200%;animation:shine 12s linear infinite;opacity:0.8;z-index:0}

/* Glare effect on card */
.wf-img::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,0.05),transparent);transform:skewX(-25deg);animation:glare 8s infinite;z-index:10;pointer-events:none;}
@keyframes glare{0%{left:-100%}20%{left:200%}100%{left:200%}}

.wf-img-ph{font-family:var(--hero);font-size:.82rem;letter-spacing:.04em;color:rgba(255,255,255,0.6);font-weight:600;text-transform:uppercase;position:relative;z-index:5}

/* Real images inside workflow — full color, no overlays */
.wf-img:has(img)::before,.wf-img:has(img)::after{display:none!important}
.wf-img:has(img) .wf-img-inner::before{display:none!important}
.wf-img:has(img){background:transparent!important;border-color:rgba(255,255,255,0.1)!important}
.wf-img img{border-radius:12px}

/* Glowing orbs around images */
.wf-img::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(80px);opacity:.15;pointer-events:none;transition:opacity .6s;z-index:0}
.wf-img:hover::after{opacity:.3}
.wf-step:nth-child(1) .wf-img::after{background:var(--indigo);bottom:-50px;right:-50px}
.wf-step:nth-child(3) .wf-img::after{background:var(--green);top:-50px;left:-50px}
.wf-step:nth-child(5) .wf-img::after{background:var(--pink);bottom:-50px;left:-50px}
.wf-step:nth-child(7) .wf-img::after{background:var(--blue);top:-50px;right:-50px}
.wf-step:nth-child(9) .wf-img::after{background:var(--peach);bottom:-50px;right:-50px}

/* No visible connector line anymore as per new parallax layout */
.wf-connector{display:none;}


/* ── BE THE DIRECTOR ── */
.contrast{padding:80px 0 120px;position:relative;z-index:1}
.contrast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contrast-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:42px 36px;transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}
.contrast-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 80%,rgba(195,166,255,0.04) 0%,transparent 50%);pointer-events:none;transition:opacity .5s;opacity:0}
.contrast-card:hover::before{opacity:1}
.contrast-card:hover{border-color:rgba(195,166,255,0.25);transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0 24px 48px rgba(0,0,0,0.5), 0 0 40px rgba(195,166,255,0.05)}
/* Body: DM Sans 300, 0.82rem, #A0A0A0 */
.cc-dim{font-family:var(--body);font-size:.82rem;font-weight:300;color:#A0A0A0;line-height:1.65;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,0.06);position:relative}
.cc-dim::before{content:'';position:absolute;bottom:-1px;left:0;width:40px;height:1px;background:linear-gradient(90deg,var(--purple),transparent)}
.cc-bright{flex:1;display:flex;flex-direction:column}
/* Card title: Urbanist 600, 1.05-1.2rem */
.cc-bright-title{font-family:var(--hero);font-size:1.15rem;font-weight:600;font-style:normal;margin-bottom:12px;line-height:1.2;color:var(--text)}
.cc-bright-title span{background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 6s linear infinite;font-style:normal}
/* Body: DM Sans 300, 0.82rem, #A0A0A0 */
.cc-bright-desc{font-family:var(--body);font-size:.82rem;font-weight:300;color:#A0A0A0;line-height:1.7}
/* Eyebrow: DM Sans 500, 0.56rem */
.cc-bright-kicker{margin-top:auto;padding-top:24px;font-family:var(--body);font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:#c3a6ff}

/* ── TEASE SECTION (Holographic Wide Panel) ── */
.tease{margin-top: 80px; position:relative; z-index:1; width:100%;}
.tease-card{padding:50px 60px; background:linear-gradient(135deg, rgba(200,210,240,0.03), rgba(220,180,240,0.015)); border:1px solid rgba(255,255,255,0.08); border-radius:18px; text-align:center; position:relative; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 20px 40px rgba(180,200,255,0.04), 0 0 40px rgba(167,139,255,0.04); backdrop-filter:blur(30px);}
.tease-card::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent 20%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 50%, transparent 60%); background-size: 200% 200%; animation: shine 12s infinite; pointer-events:none; z-index:0;}
/* Magic moment: Playfair Display 400 italic */
.tease-text{font-family:'Playfair Display',serif; font-size:clamp(1rem,2vw,1.6rem); font-weight:400; font-style:italic; color:#FFFFFF; line-height:1.5; position:relative; z-index:1; text-shadow:none}
.tease-text .g{background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 6s linear infinite;transition:opacity 0.3s;}
.tease-text .g:hover{opacity:0.85;}

/* ── CTA2 ── */
.cta2{padding:140px 24px;position:relative;z-index:1;text-align:center;overflow:hidden}
.cta2::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;border-radius:50%;background:radial-gradient(ellipse,rgba(167,139,255,0.04) 0%,transparent 50%);pointer-events:none}
/* Subtitle: Urbanist 300 */
.c2-s{font-family:var(--hero);font-size:clamp(0.86rem,1.3vw,1rem);font-weight:300;color:var(--dim);line-height:1.75;margin-bottom:32px;position:relative;z-index:1}

.c2-form{display:flex;gap:0;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:5px;transition:all .4s;box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);max-width:440px;margin:0 auto 20px;position:relative;z-index:1;}
.c2-form:focus-within{border-color:rgba(195,166,255,0.3);background:rgba(255,255,255,0.04);box-shadow:0 0 40px rgba(195,166,255,0.1), inset 0 1px 1px rgba(255,255,255,0.1)}
/* Input: DM Sans 300, 0.82rem */
.c2-form input{flex:1;background:transparent;border:none;outline:none;color:#F0F0F0;font-family:var(--body);font-size:.82rem;font-weight:300;padding:14px 22px;}
.c2-form input::placeholder{color:#505050}
/* Button: Urbanist 600, 0.76rem, uppercase */
.c2-form button{background:var(--gradient);color:#000;border:none;padding:14px 30px;border-radius:6px;font-family:var(--hero);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;cursor:pointer;transition:all .3s;}
.c2-form button:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(225,183,255,0.35)}

/* Micro: DM Sans 300, 0.62rem, #606060 */
.c2-note{font-family:var(--body);font-size:.62rem;font-weight:300;color:#606060;text-transform:uppercase;letter-spacing:.14em;position:relative;z-index:1;margin-top:24px;}

/* ── COMMUNITY ── */
.community{padding:60px 40px;position:relative;z-index:1;display:flex;justify-content:center}
.comm-card{position:relative;max-width:680px;width:100%;border-radius:20px;padding:3px;background:linear-gradient(135deg,rgba(195,166,255,0.15) 0%,rgba(150,230,255,0.08) 40%,rgba(255,255,255,0.06) 70%,rgba(195,166,255,0.1) 100%);overflow:hidden}
.comm-inner{background:rgba(8,8,12,0.85);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:18px;padding:48px 40px;text-align:center;position:relative;z-index:1}
.comm-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.comm-glow-1{width:300px;height:300px;background:#c3a6ff;opacity:0.08;top:-80px;left:-60px}
.comm-glow-2{width:250px;height:250px;background:#96e6ff;opacity:0.05;bottom:-60px;right:-40px}
.comm-eyebrow{font-family:var(--hero);font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.18em;color:#c3a6ff;margin-bottom:16px}
.comm-title{font-family:var(--hero);font-size:1.5rem;font-weight:800;letter-spacing:-0.02em;color:#F0F0F0;margin-bottom:14px}
.comm-body{font-family:var(--body);font-size:0.88rem;font-weight:300;color:#A0A0A0;line-height:1.7;max-width:520px;margin:0 auto 28px}
.comm-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.comm-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;font-family:var(--hero);font-size:0.88rem;font-weight:500;color:#F0F0F0;text-decoration:none;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);transition:all .35s cubic-bezier(.16,1,.3,1);cursor:pointer}
.comm-btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
.comm-btn svg{opacity:0.7;transition:opacity .3s}
.comm-btn:hover svg{opacity:1}
.comm-note{font-family:var(--body);font-size:0.72rem;font-weight:300;color:#606060;letter-spacing:0.02em}
@media(max-width:768px){
  .community{padding:40px 22px}
  .comm-inner{padding:36px 24px}
  .comm-buttons{flex-direction:column;align-items:center}
  .comm-btn{width:100%;max-width:280px;justify-content:center}
}

/* ── FOOTER ── */
footer{padding:60px 40px;border-top:1px solid var(--border);position:relative;z-index:1;background:var(--bg)}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:60px;max-width:1400px;margin-left:auto;margin-right:auto}
/* Logo: Urbanist 800 */
.ft-brand{font-family:var(--hero);font-size:1.05rem;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.ft-brand span{color:#808080;font-weight:400}
/* Body: DM Sans 300 */
.ft-desc{font-family:var(--body);font-size:.82rem;font-weight:300;color:#A0A0A0;max-width:300px;line-height:1.7}
.ft-cols{display:flex;gap:80px}
.ft-col{display:flex;flex-direction:column;gap:12px}
/* Eyebrow: DM Sans 500 */
.ft-col-h{font-family:var(--body);font-size:.56rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:#c3a6ff;margin-bottom:6px}
.ft-col a{font-family:var(--body);font-size:.82rem;color:#A0A0A0;font-weight:300;transition:color .3s}
.ft-col a:hover{color:var(--text)}
.ft-btm{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--border);max-width:1400px;margin:0 auto}
.ft-btm span{font-family:var(--body);font-size:.62rem;font-weight:300;color:#606060;letter-spacing:.14em;text-transform:uppercase;}

.section-divider{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--border-hi),transparent);margin:0 auto 60px}

/* ═══ BENTO GRID — "What we're ending." ═══ */
.bento-section{padding:100px 0 80px;position:relative;z-index:1}
.bento-ey{font-family:var(--sans);font-weight:500;font-size:0.58rem;text-transform:uppercase;letter-spacing:0.18em;color:#c3a6ff;text-align:center;margin-bottom:12px}
.bento-title{font-family:var(--hero);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-0.02em;color:#F0F0F0;text-align:center;margin-bottom:48px}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bento-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;cursor:default;opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1)}
.bento-card.vis{opacity:1;transform:translateY(0)}
.bento-card:nth-child(2){transition-delay:.08s}
.bento-card:nth-child(3){transition-delay:.16s}
.bento-card:nth-child(4){transition-delay:.24s}
.bento-card:hover{border-color:rgba(255,255,255,0.16)}
.bento-card[style*="span 7"]{min-height:300px}
.bento-card[style*="span 5"]{min-height:280px}

/* Layer 1 — Background image */
.bento-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(0.15) brightness(0.35);transform:scale(1);transition:filter .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.bento-card:hover .bg{filter:saturate(1) brightness(0.85);transform:scale(1.08)}

/* Layer 2 — Dark overlay */
.bento-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,0.0) 0%,rgba(5,5,5,0.4) 55%,rgba(5,5,5,0.85) 100%);pointer-events:none;transition:background .5s cubic-bezier(.16,1,.3,1)}
.bento-card:hover .overlay{background:linear-gradient(180deg,rgba(5,5,5,0.0) 0%,rgba(5,5,5,0.2) 50%,rgba(5,5,5,0.75) 100%)}

/* Layer 3 — Text content */
.bento-card .content{position:relative;z-index:2;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}
.bento-card:hover .content{transform:translateY(4px)}
.bento-card h3{transition:font-size .5s cubic-bezier(.16,1,.3,1)}
.bento-card:hover h3{font-size:1rem}
.bento-card:hover p{font-size:0.7rem}
.bento-tag{display:inline-block;font-family:var(--sans);font-weight:500;font-size:0.5rem;text-transform:uppercase;letter-spacing:0.14em;color:#c3a6ff;background:rgba(195,166,255,0.08);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:3px 10px;border-radius:6px;margin-bottom:10px}
.bento-card h3{font-family:var(--hero);font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:-0.01em;color:#F0F0F0;line-height:1.15;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,0.5)}
.bento-card p{font-family:var(--sans);font-weight:300;font-size:0.76rem;color:#A0A0A0;line-height:1.65;max-width:380px;text-shadow:0 1px 8px rgba(0,0,0,0.4);transition:font-size .5s cubic-bezier(.16,1,.3,1)}

/* Placeholder images */
.img-prompting .bg{background:linear-gradient(135deg,rgba(195,166,255,0.15) 0%,rgba(5,5,5,0.9) 60%),linear-gradient(45deg,#1a1a2e 0%,#0a0a15 100%)}
.img-toolhopping .bg{background:linear-gradient(135deg,rgba(150,230,255,0.12) 0%,rgba(5,5,5,0.9) 60%),linear-gradient(45deg,#0a1a2e 0%,#050510 100%)}
.img-learning .bg{background:linear-gradient(135deg,rgba(180,255,218,0.1) 0%,rgba(5,5,5,0.9) 60%),linear-gradient(45deg,#0a2e1a 0%,#050f0a 100%)}
.img-characters .bg{background:linear-gradient(135deg,rgba(255,183,183,0.12) 0%,rgba(5,5,5,0.9) 60%),linear-gradient(45deg,#2e1a1a 0%,#150a0a 100%)}

/* ═══ V7 DEFINITIVE FONT TOKEN CLASSES ═══ */
/* Hero H1 */
.hero-h1{font-family:var(--hero);font-weight:800;font-size:clamp(2.6rem,7.5vw,5rem);text-transform:uppercase;letter-spacing:-0.03em;line-height:0.92}
/* Statement H2 */
.st-h{font-family:var(--hero);font-weight:800;font-size:clamp(2.2rem,6.5vw,4.5rem);text-transform:uppercase;letter-spacing:-0.05em;line-height:0.95}
/* Section H2 */
.pl-title,.wf-title,.con-power,.fcta-h{font-family:var(--hero);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-0.02em}
/* Pillar H3 */
.pillar-h{font-family:var(--hero);font-weight:800;font-size:1.3rem;text-transform:uppercase}
/* Card title */
.card-title{font-family:var(--hero);font-weight:600;font-size:1.1rem}
/* Subtitle */
.hero-sub-v7,.st-sub,.fcta-sub{font-family:var(--hero);font-weight:300;font-size:clamp(0.86rem,1.3vw,1rem);line-height:1.75;color:#A0A0A0}
/* Magic Moments — Playfair Display italic + gradient */
.hero-magic,.st-magic,.sc-magic,.con-magic,.fcta-magic{font-family:var(--magic);font-style:italic;font-weight:400;font-size:clamp(1rem,2vw,1.6rem);background:var(--gradient-holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200%;animation:shine 6s linear infinite}
/* Eyebrow Labels */
.pl-ey,.wf-ey,.pillar-ey,.comm-ey{font-family:var(--sans);font-weight:500;font-size:0.56rem;text-transform:uppercase;letter-spacing:0.14em;color:#c3a6ff}
/* Micro / Trust lines */
.hero-trust,.fcta-trust,.ft-copy,.comm-note{font-family:var(--sans);font-weight:300;font-size:0.64rem;color:#606060}
/* Marquee */
.mq-track span{font-family:var(--sans);font-weight:400;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em;color:#404040}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .wf-step{grid-template-columns:1fr 1fr; gap:40px;}
}
@media(max-width:900px){
  .container, .wf-container{padding:0 24px}
  .sc-refs{grid-template-columns:1fr 1fr;gap:12px}
  .contrast-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento-card{grid-column:span 1!important;min-height:240px!important;padding:24px}
  
  .wf-step{grid-template-columns:1fr;gap:40px;margin-bottom:80px;}
  .wf-step.reverse .wf-text{order:1}
  .wf-step.reverse .wf-visual{order:2}
  
  .wf-connector{display:none}
  .ft-top{flex-direction:column;gap:40px}
  .ft-cols{gap:40px}
  .ft-btm{flex-direction:column;gap:12px;text-align:center}
  nav .nav-r a:not(.nav-cta){display:none}
}
@media(max-width:600px){
  .h-title{font-size:2.4rem}
  .sc-refs{grid-template-columns:1fr}
  .tease{padding:40px 24px 80px}
  .tease-text{font-size:2.2rem;}
  .blob{opacity:0.04!important;filter:blur(120px)!important}
  .blob-1{width:300px!important;height:300px!important}
  .blob-2,.blob-3,.blob-4{width:250px!important;height:250px!important}
  .hero::before{opacity:0.3!important;width:400px!important;height:300px!important}
  .workflow::before{opacity:0.5!important}
  .cta2::before{opacity:0.5!important}
}