/* BigBusiness Creative Agency · v6 "simple luxury tech × urban culture" */
:root {
  --bg: #07060a; --bg2: #0d0b12; --card: #121018; --ink: #f5f2ff; --mute: #a39db3; --dim: #6d6880;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --violet: #9b6bff; --lav: #cbb8ff; --gold: #dcb872;
  --disp: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --gut: clamp(16px, 4vw, 56px);
  --max: 1320px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--violet); color: #fff; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* grain + progress */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 101; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--lav), var(--gold)); }

/* type */
.tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lav); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(155,107,255,.18), 0 0 18px var(--violet); animation: pulse 2.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(155,107,255,0), 0 0 18px var(--violet); } }
.h2 { margin: 0; font: 900 clamp(46px, 7.4vw, 112px)/.88 var(--disp); text-transform: uppercase; letter-spacing: -.005em; }
.h2 em, .h1 em { font: italic 400 1em/1 var(--serif); text-transform: none; letter-spacing: -.02em;
  background: linear-gradient(100deg, #fff 0%, var(--lav) 45%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.lede { max-width: 540px; margin: 22px 0 0; color: var(--mute); font-size: clamp(16px, 1.3vw, 18px); }
.mono { font-family: var(--mono); }

/* split reveal */
.split .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.split .ln > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.split.in .ln > span { transform: none; }
.split .ln:nth-child(2) > span { transition-delay: .09s; }
.split .ln:nth-child(3) > span { transition-delay: .18s; }
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* buttons */
.btn { --bg-b: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 99px;
  background: var(--bg-b); color: #0a0810; font: 600 15px/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s; }
.btn:hover { background: var(--lav); box-shadow: 0 10px 40px -10px rgba(155,107,255,.7); }
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid var(--line2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn--ghost:hover { background: rgba(255,255,255,.1); box-shadow: none; }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #0a0810; color: #fff; font: 600 12px/1 var(--mono); }
.btn .count:empty { display: none; }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; gap: 24px; height: 76px; padding: 0 var(--gut); transition: background .4s, height .4s, border-color .4s; border-bottom: 1px solid transparent; }
.nav.solid { height: 64px; background: rgba(7,6,10,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { width: 44px; height: auto; filter: drop-shadow(0 0 12px rgba(155,107,255,.45)); }
.brand b { font: 800 19px/1 var(--disp); letter-spacing: .08em; }
.brand small { display: block; margin-top: 3px; font: 500 9.5px/1 var(--mono); letter-spacing: .2em; color: var(--mute); text-transform: uppercase; }
.nav__links { display: flex; gap: 6px; }
.nav__links a { position: relative; padding: 9px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; color: #e9e5f5; transition: background .3s, color .3s; }
.nav__links a:hover, .nav__links a.on { background: rgba(255,255,255,.07); color: #fff; }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); position: relative; }
.nav__menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: #fff; transition: transform .4s var(--ease); }
.nav__menu span:first-child { top: 18px; } .nav__menu span:last-child { top: 25px; }
.menu-open .nav__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .nav__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mmenu { position: fixed; inset: 0; z-index: 79; background: rgba(7,6,10,.97); display: flex; flex-direction: column; justify-content: center; padding: 90px var(--gut) 40px; clip-path: circle(0 at calc(100% - 40px) 38px); transition: clip-path .7s var(--ease); }
.menu-open .mmenu { clip-path: circle(150% at calc(100% - 40px) 38px); }
.mmenu a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; font: 900 clamp(44px, 12vw, 72px)/1 var(--disp); text-transform: uppercase; }
.mmenu a small { font: 500 12px var(--mono); color: var(--violet); }
.mmenu p { margin-top: 30px; color: var(--mute); font: 13px var(--mono); }

/* HERO */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: -4%; z-index: -2; will-change: transform; }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(7,6,10,.75) 0%, rgba(7,6,10,.2) 24%, rgba(7,6,10,.35) 55%, rgba(7,6,10,.94) 88%, var(--bg) 100%),
  linear-gradient(90deg, rgba(7,6,10,.82) 0%, rgba(7,6,10,.25) 60%, transparent 100%),
  radial-gradient(60% 50% at 80% 30%, rgba(155,107,255,.22), transparent 70%); }
.hero__in { width: 100%; max-width: var(--max); margin: 0 auto; padding: 130px var(--gut) clamp(34px, 6vh, 64px); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.h1 { margin: 0; font: 900 clamp(60px, 10.6vw, 172px)/.84 var(--disp); text-transform: uppercase; letter-spacing: -.01em; }
.h1 .out { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.h1 em { font-size: .8em; }
.hero__sub { max-width: 520px; margin: 26px 0 0; font-size: clamp(16px, 1.35vw, 19px); color: #ddd8ea; }
.need { margin: 30px 0 0; }
.need p { margin: 0 0 12px; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(10,8,16,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 500; color: #ece8f7; transition: all .3s var(--ease); }
.chip::before { content: '+'; font: 500 15px/1 var(--mono); color: var(--lav); transition: transform .3s var(--ease); }
.chip:hover { border-color: rgba(203,184,255,.6); transform: translateY(-2px); }
.chip.on { background: #fff; color: #0a0810; border-color: #fff; }
.chip.on::before { content: '✓'; color: var(--violet); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__card { width: 280px; padding: 18px; border-radius: 22px; border: 1px solid var(--line2); background: rgba(14,11,20,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hero__card .faces { display: flex; margin-bottom: 14px; }
.hero__card .faces img { width: 64px; height: 44px; object-fit: cover; object-position: top; border-radius: 10px; border: 2px solid #120f19; margin-left: -14px; }
.hero__card .faces img:first-child { margin-left: 0; }
.hero__card b { display: block; font: 900 44px/1 var(--disp); }
.hero__card > span { font-size: 13.5px; color: var(--mute); }
.hero__card a { display: inline-flex; margin-top: 12px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lav); }
.scrollcue { position: absolute; left: 50%; bottom: 14px; width: 1px; height: 40px; background: linear-gradient(var(--lav), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* marquee */
.marq { position: relative; padding: 26px 0; border-block: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.marq__row { display: flex; width: max-content; will-change: transform; }
.marq__row span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font: 800 clamp(30px, 4vw, 54px)/1 var(--disp); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.marq__row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); }
.marq__row i { font-style: normal; color: var(--violet); font-size: .6em; }
.marq__label { position: absolute; left: var(--gut); top: 8px; font: 500 10px var(--mono); letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }

/* sections */
.sec { position: relative; padding: clamp(90px, 13vw, 170px) 0; }
.sec__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.sec__head .lede { margin: 0; justify-self: end; }

/* SERVICES list */
.svc { border-top: 1px solid var(--line); }
.svc__row { border-bottom: 1px solid var(--line); }
.svc__btn { width: 100%; display: grid; grid-template-columns: 70px 1fr auto 52px; align-items: center; gap: 20px; padding: 28px 0; text-align: left; transition: padding .5s var(--ease); }
.svc__btn:hover { padding-left: 14px; }
.svc__n { font: 500 13px var(--mono); color: var(--dim); }
.svc__t { font: 900 clamp(34px, 5.2vw, 76px)/.92 var(--disp); text-transform: uppercase; transition: color .4s; }
.svc__btn:hover .svc__t, .svc__row.open .svc__t { color: var(--lav); }
.svc__s { font-size: 14.5px; color: var(--mute); max-width: 280px; text-align: right; }
.svc__x { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; transition: transform .5s var(--ease), background .4s; }
.svc__x::before, .svc__x::after { content: ''; position: absolute; width: 16px; height: 1.5px; background: currentColor; }
.svc__x { position: relative; } .svc__x::after { transform: rotate(90deg); transition: transform .5s var(--ease); }
.svc__row.open .svc__x { background: #fff; color: #000; transform: rotate(180deg); }
.svc__row.open .svc__x::after { transform: rotate(0); }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.svc__row.open .svc__panel { grid-template-rows: 1fr; }
.svc__panel > div { overflow: hidden; }
.svc__body { display: grid; grid-template-columns: 70px 1.1fr 1fr; gap: 20px; padding: 0 0 36px; }
.svc__img { grid-column: 2; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.svc__row.open .svc__img img { transform: scale(1); }
.svc__list { display: flex; flex-direction: column; gap: 4px; }
.svc__list p { margin: 0 0 14px; color: #d9d4e6; }
.add { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); text-align: left; font-size: 15px; transition: all .3s var(--ease); }
.add::after { content: '+ Add'; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lav); white-space: nowrap; }
.add:hover { border-color: rgba(203,184,255,.45); background: rgba(155,107,255,.08); }
.add.on { border-color: rgba(203,184,255,.6); background: rgba(155,107,255,.14); }
.add.on::after { content: '✓ In plan'; color: #fff; }
.peek { position: fixed; z-index: 70; top: 0; left: 0; width: 300px; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.6) rotate(-6deg); transition: opacity .35s, transform .5s var(--ease); }
.peek.on { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-3deg); }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* BUILDER */
.build { background: radial-gradient(70% 60% at 50% 0%, rgba(155,107,255,.14), transparent 70%), var(--bg); }
.build__grid { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start; }
.panel { padding: 26px; border-radius: 26px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.f { display: block; margin-bottom: 18px; }
.f > span { display: block; margin-bottom: 8px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.inp { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0,0,0,.35); transition: border-color .3s, box-shadow .3s; }
.inp:focus-within { border-color: var(--lav); box-shadow: 0 0 0 4px rgba(155,107,255,.18); }
.inp input, .inp select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; }
.inp select option { background: #111; }
.inp i { width: 20px; height: 20px; color: var(--lav); flex: none; }
.inp i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 5px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.seg button { height: 40px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--mute); transition: all .3s; }
.seg button.on { background: #fff; color: #000; }
.sw { display: flex; flex-wrap: wrap; gap: 8px; }
.sw button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); transition: transform .25s; }
.sw button:hover { transform: scale(1.12); }
.sw button.on { border-color: #fff; }
.panel .btn { width: 100%; margin-top: 6px; }
.fine { margin: 12px 0 0; font-size: 12.5px; color: var(--dim); text-align: center; }
.stage { position: relative; }
.devices { position: relative; padding: 0 0 6% 0; }
.laptop { border-radius: 16px; border: 1px solid var(--line2); background: #0c0a10; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(155,107,255,.45); }
.laptop__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.laptop__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2731; }
.laptop__bar span { margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: rgba(255,255,255,.05); font: 12px var(--mono); color: var(--mute); }
.vp { position: relative; overflow: hidden; background: #000; }
.vp iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.vp--desk { aspect-ratio: 16/10; }
.handset { position: absolute; right: -2%; bottom: 0; width: 23%; padding: 7px; border-radius: 28px; background: #0c0a10; border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px #000; }
.vp--phone { aspect-ratio: 9/19; border-radius: 22px; }
.claim { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px 16px 22px; border-radius: 18px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); }
.claim p { margin: 0; color: var(--mute); font-size: 14.5px; }
.claim p b { color: #fff; }
.flash { animation: flash .9s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(203,184,255,.8); } 100% { box-shadow: 0 0 0 26px rgba(203,184,255,0); } }

/* BOX feature */
.box { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.box__bg { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.box__bg img { width: 100%; height: 100%; object-fit: cover; }
.box::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,6,10,.95) 0%, rgba(7,6,10,.7) 45%, rgba(7,6,10,.2) 100%), linear-gradient(180deg, var(--bg), transparent 22%, transparent 78%, var(--bg)); }
.box__in { width: 100%; }
.box .h2 { font-size: clamp(56px, 9vw, 150px); }
.box ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 10px 18px; margin: 30px 0 34px; padding: 0; }
.box li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(10,8,16,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 15px; }
.box li b { font: 500 11px var(--mono); color: var(--gold); }
.offers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.offers .chip { background: rgba(10,8,16,.6); }

/* WORK */
.work__track { --edge: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--edge) 26px; scroll-padding-inline: var(--edge); scrollbar-width: none; cursor: grab; }
.work__track::-webkit-scrollbar { display: none; }
.work__track.drag { cursor: grabbing; scroll-snap-type: none; }
.work__track.drag a { pointer-events: none; }
.wk { flex: none; width: min(78vw, 520px); scroll-snap-align: start; }
.wk__img { position: relative; aspect-ratio: 16/11; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); background: var(--card); transform-style: preserve-3d; transition: transform .5s var(--ease); }
.wk__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.wk:hover .wk__img img { transform: scale(1.05); }
.wk__badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: rgba(7,6,10,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.wk__badge i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.wk__badge.c i { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.wk__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 4px 0; }
.wk__meta b { font: 800 clamp(24px, 2.4vw, 32px)/1 var(--disp); text-transform: uppercase; letter-spacing: .01em; }
.wk__meta span { color: var(--mute); font-size: 14px; }
.work__nav { display: flex; gap: 10px; }
.arrow { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; transition: all .3s; }
.arrow:hover { background: #fff; color: #000; }
.arrow svg { width: 20px; height: 20px; }

/* PLAN builder */
.plan { background: linear-gradient(180deg, var(--bg), var(--bg2) 30%, var(--bg2) 70%, var(--bg)); }
.plan__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.q { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.02); margin-bottom: 14px; transition: border-color .4s; }
.q.done { border-color: rgba(203,184,255,.3); }
.q__h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; font: 800 clamp(24px, 2.6vw, 34px)/1 var(--disp); text-transform: uppercase; }
.q__h small { font: 500 12px var(--mono); color: var(--violet); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0,0,0,.25); font-size: 14.5px; font-weight: 500; transition: all .3s var(--ease); }
.opt:hover { border-color: rgba(203,184,255,.55); }
.opt.on { background: #fff; color: #000; border-color: #fff; }
.result { position: sticky; top: 90px; padding: 28px; border-radius: 28px; border: 1px solid rgba(203,184,255,.3); background:
  radial-gradient(120% 70% at 100% 0%, rgba(155,107,255,.25), transparent 60%), linear-gradient(180deg, #16121f, #0e0b14); overflow: hidden; }
.result::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); transform: translateX(-100%); }
.result.pop::after { animation: sheen 1.1s var(--ease); }
@keyframes sheen { to { transform: translateX(100%); } }
.result__k { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lav); }
.result__t { margin: 10px 0 6px; font: 900 clamp(36px, 4vw, 56px)/.9 var(--disp); text-transform: uppercase; }
.result__d { margin: 0 0 18px; color: var(--mute); font-size: 15px; }
.items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; margin-bottom: 20px; }
.items span { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 13px; }
.items span button { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 13px; line-height: 1; }
.items em { color: var(--dim); font-style: normal; font-size: 13.5px; }
.result .f { margin-bottom: 10px; }
.result .inp { height: 48px; }
.result__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.result__btns .btn { height: 50px; padding: 0 12px; }
.meter { display: flex; gap: 6px; margin: 0 0 20px; }
.meter i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); transition: background .5s; }
.meter i.on { background: linear-gradient(90deg, var(--violet), var(--lav)); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 70px; }
.step { position: relative; padding: 26px; border-radius: 22px; border: 1px solid var(--line); overflow: hidden; }
.step b { display: block; font: 900 64px/1 var(--disp); color: transparent; -webkit-text-stroke: 1px rgba(203,184,255,.55); margin-bottom: 14px; }
.step h3 { margin: 0 0 6px; font: 800 26px/1 var(--disp); text-transform: uppercase; }
.step p { margin: 0; color: var(--mute); font-size: 14.5px; }

/* spotlight */
.spot { --mx: 50%; --my: 50%; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(155,107,255,.16), transparent 60%); }
.spot:hover::before { opacity: 1; }

/* CTA + footer */
.cta { position: relative; padding: clamp(110px, 16vw, 210px) 0 clamp(70px, 9vw, 110px); text-align: center; overflow: hidden; }
.cta::before { content: ''; position: absolute; left: 50%; top: 40%; width: 900px; height: 500px; transform: translate(-50%,-50%); background: radial-gradient(closest-side, rgba(155,107,255,.3), transparent); pointer-events: none; }
.cta .h2 { position: relative; font-size: clamp(64px, 12vw, 200px); }
.cta__btns { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.contacts { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; margin-top: 46px; font: 14px var(--mono); color: var(--mute); }
.contacts a:hover { color: #fff; }
.foot { border-top: 1px solid var(--line); padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); }
.foot__big { overflow: hidden; padding: 30px 0 0; }
.foot__big div { font: 900 clamp(70px, 19vw, 300px)/.8 var(--disp); text-transform: uppercase; text-align: center; letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--dim); }
.foot__row a:hover { color: #fff; }

/* sticky mobile bar + plan pill + toast */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 75; display: none; gap: 8px; padding: 8px; border-radius: 22px; background: rgba(14,11,20,.82); border: 1px solid var(--line2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateY(140%); transition: transform .5s var(--ease); }
.dock.on { transform: none; }
.dock .btn { flex: 1; height: 48px; padding: 0 12px; }
.pill { position: fixed; right: 22px; bottom: 22px; z-index: 75; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 20px; border-radius: 99px; background: #fff; color: #000; font-weight: 600; font-size: 14.5px; box-shadow: 0 16px 50px -12px rgba(155,107,255,.8); transform: translateY(160%); transition: transform .5s var(--ease); }
.pill.on { transform: none; }
.pill b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0a0810; color: #fff; font: 600 13px var(--mono); }
.pill.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.1); } }
.toast { position: fixed; left: 50%; top: 86px; z-index: 120; padding: 12px 18px; border-radius: 99px; background: #fff; color: #000; font-size: 14px; font-weight: 500; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; transition: all .45s var(--ease); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* cursor */
.cur { position: fixed; top: 0; left: 0; z-index: 130; pointer-events: none; display: none; }
.has-cursor .cur { display: block; }
.cur__dot { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; }
.cur__ring { position: absolute; width: 38px; height: 38px; margin: -19px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s; }
.cur__ring b { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s; }
.cur.hover .cur__ring { width: 58px; height: 58px; margin: -29px; border-color: var(--lav); background: rgba(155,107,255,.12); }
.cur.label .cur__ring { width: 84px; height: 84px; margin: -42px; background: #fff; border-color: #fff; }
.cur.label .cur__ring b { opacity: 1; }
.cur.label .cur__dot { opacity: 0; }

/* responsive */
@media (max-width: 1080px) {
  .hero__card { display: none; }
  .hero__in { grid-template-columns: 1fr; }
  .build__grid, .plan__grid { grid-template-columns: 1fr; }
  .result { position: relative; top: 0; }
  .svc__s { display: none; }
  .svc__btn { grid-template-columns: 50px 1fr 52px; }
  .svc__body { grid-template-columns: 1fr; padding-bottom: 28px; }
  .svc__img { grid-column: auto; }
}
@media (max-width: 860px) {
  .nav__links, .nav .btn { display: none; }
  .nav__menu { display: block; }
  .sec__head { grid-template-columns: 1fr; gap: 16px; }
  .sec__head .lede { justify-self: start; }
  .steps { grid-template-columns: 1fr; }
  .dock { display: flex; }
  .pill { display: none; }
  .box ul { grid-template-columns: 1fr 1fr; }
  .box::before { background: linear-gradient(180deg, var(--bg), rgba(7,6,10,.75) 25%, rgba(7,6,10,.85) 75%, var(--bg)); }
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .hero__in { padding-top: 110px; }
  .h1 { font-size: clamp(54px, 17vw, 80px); }
  .chip { height: 38px; padding: 0 13px; font-size: 13.5px; }
  .hero__ctas .btn { flex: 1; }
  .svc__btn { grid-template-columns: 34px 1fr 44px; gap: 12px; padding: 22px 0; }
  .svc__x { width: 44px; height: 44px; }
  .svc__t { font-size: clamp(30px, 9vw, 40px); }
  .box ul { grid-template-columns: 1fr; }
  .result__btns { grid-template-columns: 1fr; }
  .panel, .q, .result { padding: 20px; }
  .handset { display: none; }
}
.shot *, .shot *::before, .shot *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .split .ln > span, .rv { transform: none; opacity: 1; }
}
.hero__more { display: block; margin-top: 12px; font: normal 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lav); }
@media (max-width: 1080px) { .build .stage { order: -1; } }

/* ===== v6.2 parallax layer: everything moves with the scroll ===== */
.sec, .say { overflow: clip; }
.orb { position: absolute; z-index: 0; width: 46vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .55; }
.orb--a { right: -12vw; top: 10%; background: radial-gradient(circle, rgba(155,107,255,.55), transparent 65%); z-index: -1; }
.orb--b { left: -14vw; top: 0; background: radial-gradient(circle, rgba(155,107,255,.4), transparent 65%); }
.orb--c { right: -18vw; top: 30%; background: radial-gradient(circle, rgba(220,184,114,.22), transparent 65%); }
.orb--d { left: -16vw; top: 20%; background: radial-gradient(circle, rgba(155,107,255,.35), transparent 65%); }
.sec > .wrap, .say > .wrap { position: relative; z-index: 1; }

/* hero scroll-out: content lifts + fades, headline lines split apart */
.hero { --p: 0; }
.hero__in > div:first-child { translate: 0 calc(var(--p) * -110px); opacity: calc(1 - var(--p) * 1.25); }
.hero__card { translate: 0 calc(var(--p) * -260px); opacity: calc(1 - var(--p) * 1.4); }
.h1 .ln { translate: calc(var(--p) * var(--hx, 0) * 14vw) 0; }
.hero__shade::after { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: calc(var(--p) * .85); }

/* statement: words light up as you scroll */
.say { position: relative; padding: clamp(90px, 12vw, 170px) 0; }
.say__t { max-width: 1100px; margin: 0; font: 800 clamp(34px, 5.2vw, 78px)/1.02 var(--disp); text-transform: uppercase; letter-spacing: .005em; }
.say__t .w { color: rgba(255,255,255,.13); transition: color .35s; }
.say__t .w.on { color: var(--ink); }
.say__t .w.hl.on { font: italic 400 1.08em/1 var(--serif); text-transform: none; background: linear-gradient(100deg, #fff, var(--lav) 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* kinetic word bands */
.kin { padding: clamp(30px, 5vw, 70px) 0; overflow: hidden; border-block: 1px solid var(--line); }
.kin__row { white-space: nowrap; font: 900 clamp(64px, 11vw, 180px)/.95 var(--disp); text-transform: uppercase; letter-spacing: -.005em; will-change: translate; }
.kin__row:first-child { margin-left: -20vw; }
.kin__row--out { color: transparent; -webkit-text-stroke: 1.5px rgba(203,184,255,.55); margin-left: -60vw; }

/* builder: laptop tilts up from flat as it scrolls in, phone floats in */
.devices { --p: 0; perspective: 1600px; }
.laptop { transform-origin: 50% 100%; transform: rotateX(calc((1 - min(1, var(--p) * 2.8)) * 26deg)) scale(calc(.88 + min(1, var(--p) * 2.8) * .12)); }
.handset { translate: 0 calc((1 - min(1, var(--p) * 2.8)) * 160px); rotate: calc((1 - min(1, var(--p) * 2.8)) * 8deg); }

/* box: photo opens from a rounded card, giant word slides behind */
.box { --p: 0; }
.box__bg { clip-path: inset(calc(max(0, .5 - var(--p)) * 22%) calc(max(0, .5 - var(--p)) * 14%) round calc(max(0, .5 - var(--p)) * 80px)); }
.box__word { position: absolute; z-index: -1; bottom: 4%; left: 0; white-space: nowrap; font: 900 clamp(90px, 16vw, 260px)/1 var(--disp); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.18); pointer-events: none; }
.box li { translate: calc((1 - min(1, var(--p) * 2.2)) * -40px) 0; }
.box li:nth-child(even) { translate: calc((1 - min(1, var(--p) * 2.2)) * -80px) 0; }

/* work: pinned horizontal reel on desktop */
.work__bar { display: none; }
html.pin .work { padding: 0; }
html.pin .work__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
html.pin .work .sec__head { margin-bottom: clamp(28px, 4vh, 50px); }
html.pin .work .h2 { font-size: clamp(46px, 6vw, 96px); }
html.pin .work__track { overflow: visible; scroll-snap-type: none; cursor: default; will-change: translate; }
html.pin .wk { width: min(46vw, 560px); transition: scale .2s linear, opacity .2s linear; }
html.pin .work__bar { display: block; margin: 8px auto 0; width: min(320px, 40vw); height: 2px; border-radius: 2px; background: var(--line2); overflow: hidden; }
html.pin .work__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--gold)); }

/* cta zooms in, footer word rises */
.cta { --p: 0; }
.cta .h2 { scale: calc(.72 + min(1, var(--p) * 1.6) * .28); }
.cta::before { scale: calc(.6 + var(--p) * .8); }
.foot__big { --p: 0; }
.foot__big div { translate: 0 calc((1 - var(--p)) * 40%); }

/* services: image drifts inside its frame */
.svc__img img { height: 120%; margin-top: -10%; }

@media (prefers-reduced-motion: reduce) {
  .hero__in > div:first-child, .hero__card, .h1 .ln, .handset, .box li, .foot__big div, .kin__row { translate: none !important; opacity: 1 !important; }
  .laptop, .box__bg { transform: none !important; clip-path: none !important; }
  .cta .h2 { scale: 1 !important; }
  .say__t .w { color: var(--ink); }
}
.shot .say__t .w { color: var(--ink); }
.shot .box__bg { clip-path: none; }

/* ===== v6.3 hero console: icon tiles that feed the plan ===== */
.hero__in > div:first-child { opacity: clamp(0, 1.5 - var(--p) * 2.4, 1); }
.console { max-width: 760px; margin-top: 30px; padding: 18px; border-radius: 26px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(20,16,30,.72), rgba(10,8,16,.6)); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.console__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 4px 14px; }
.console__top p { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 clamp(20px, 1.8vw, 24px)/1 var(--disp); text-transform: uppercase; letter-spacing: .03em; }
.console__top p i { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 14px var(--violet); animation: pulse 2.2s infinite; }
.console__top span { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); transition: color .3s; }
.console__top span.on { color: var(--lav); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border-radius: 16px; text-align: left;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); font-size: 14px; font-weight: 500; line-height: 1.2; color: #ece8f7; overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s, background .3s, color .3s, box-shadow .3s; }
.tile svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--lav); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, transform .4s var(--ease); }
.tile b { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); transition: all .3s var(--ease); }
.tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--tx, 50%) var(--ty, 50%), rgba(155,107,255,.28), transparent 70%); opacity: 0; transition: opacity .3s; }
.tile:hover { transform: translateY(-3px); border-color: rgba(203,184,255,.5); }
.tile:hover::before { opacity: 1; }
.tile:hover svg { transform: scale(1.12) rotate(-6deg); }
.tile.on { background: linear-gradient(135deg, #fff, #e6dcff); color: #0a0810; border-color: #fff; box-shadow: 0 12px 34px -12px rgba(155,107,255,.9); }
.tile.on svg { stroke: var(--violet); }
.tile.on b { background: var(--violet); border-color: var(--violet); }
.tile.on b::after { content: ''; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.tile.pop { animation: tpop .45s var(--ease); }
@keyframes tpop { 40% { transform: scale(.94); } 70% { transform: scale(1.04); } }
.console__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.console__ctas .btn { height: 56px; }
.btn--go { flex: 1 1 220px; font-size: 16px; }
.btn--go.ready { background: linear-gradient(100deg, #fff, var(--lav)); animation: ready 2.4s ease-in-out infinite; }
@keyframes ready { 0%,100% { box-shadow: 0 0 0 0 rgba(155,107,255,.55), 0 14px 40px -12px rgba(155,107,255,.8); } 50% { box-shadow: 0 0 0 10px rgba(155,107,255,0), 0 14px 40px -12px rgba(155,107,255,.8); } }
.btn .play { width: 14px; height: 14px; }
.btn:hover .play { transform: scale(1.15); }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } .console { padding: 14px; } }
@media (max-width: 560px) { .tile { min-height: 52px; font-size: 13.5px; } .console__ctas .btn { flex: 1 1 100%; } }

/* ===== v6.3 free preview pops ===== */
.build { padding-top: clamp(80px, 10vw, 130px); }
.build__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.build__fx .beam { position: absolute; left: 50%; top: -20%; width: 120vw; height: 90%; translate: -50% 0; background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(155,107,255,.32) 48%, rgba(220,184,114,.18) 50%, rgba(155,107,255,.32) 52%, transparent 58%); filter: blur(30px); animation: beam 8s ease-in-out infinite alternate; }
@keyframes beam { from { rotate: -6deg; } to { rotate: 6deg; } }
.build__fx .floor { position: absolute; left: -25%; right: -25%; bottom: 0; height: 55%; background-image: linear-gradient(rgba(155,107,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(155,107,255,.22) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); animation: floor 3s linear infinite; }
@keyframes floor { to { background-position: 0 64px; } }
.build .wrap { position: relative; z-index: 1; }
.build .h2 { font-size: clamp(56px, 9vw, 140px); }
.at { font-weight: 900; background: linear-gradient(100deg, var(--violet), var(--lav), var(--gold), var(--violet)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; }
@keyframes shimmer { to { background-position: 300% 0; } }
.sticker { position: absolute; right: var(--gut); top: -10px; width: 150px; height: 150px; display: grid; place-items: center; }
.sticker svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.sticker text { font: 600 14.5px var(--mono); letter-spacing: .18em; fill: var(--lav); }
.sticker b { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), #f5e3b5 50%, var(--gold)); color: #0a0810; font: 900 26px/1 var(--disp); letter-spacing: .04em; rotate: -12deg; box-shadow: 0 10px 40px -8px rgba(220,184,114,.7); }
@keyframes spin { to { rotate: 360deg; } }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.glow { position: relative; border: 1px solid transparent; background: linear-gradient(180deg, #15111e, #0e0b14) padding-box, conic-gradient(from var(--ang), rgba(155,107,255,.15), var(--violet), var(--lav), var(--gold), rgba(155,107,255,.15) 40%, rgba(155,107,255,.15)) border-box; animation: ang 5s linear infinite; box-shadow: 0 30px 90px -30px rgba(155,107,255,.55); }
@keyframes ang { to { --ang: 360deg; } }
.glow.live { animation-duration: 1.6s; }
.laptop { box-shadow: 0 50px 140px -30px rgba(155,107,255,.75), 0 0 0 1px rgba(203,184,255,.15); }
.float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; background: rgba(14,11,20,.78); border: 1px solid rgba(203,184,255,.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 14px 40px -12px rgba(0,0,0,.8); animation: bob 5s ease-in-out infinite; }
.float i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--violet); color: #fff; font-style: normal; font-size: 11px; }
.float--1 { left: -22px; top: 14%; }
.float--2 { right: 26%; top: -18px; animation-delay: -1.6s; }
.float--3 { left: 8%; bottom: 4%; animation-delay: -3.2s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.inp input.demo { color: var(--lav); }
.caret::after { content: '|'; margin-left: 1px; color: var(--lav); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 860px) { .sticker { width: 104px; height: 104px; top: -40px; } .sticker b { width: 58px; height: 58px; font-size: 18px; } .sticker text { font-size: 15px; } .float { font-size: 12px; padding: 8px 11px; } .float--2 { display: none; } }
.shot .sticker svg, .shot .beam, .shot .floor { animation: none; }

/* ===== v6.3 work reel: ambient color, giant name, glare, hover overlay ===== */
.work__pin { position: relative; isolation: isolate; }
.work__amb { --tone: 155,107,255; position: absolute; inset: 0; z-index: -2; pointer-events: none; transition: background 1s var(--ease);
  background: radial-gradient(55% 60% at 50% 62%, rgba(var(--tone), .32), transparent 70%); }
.work__name { position: absolute; z-index: -1; left: 0; right: 0; bottom: 6%; text-align: center; white-space: nowrap; overflow: hidden; pointer-events: none;
  font: 900 clamp(80px, 15vw, 240px)/1 var(--disp); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.1); }
.work__name.swap { animation: nameIn .8s var(--ease); }
@keyframes nameIn { from { opacity: 0; transform: translateY(30px); letter-spacing: .08em; } }
.work__foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; padding: 0 var(--gut); }
.work__count { font: 500 13px var(--mono); color: var(--mute); }
.work__count b { font: 800 22px var(--disp); color: #fff; }
.work__now { min-width: 180px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lav); }
.work__bar { display: block !important; width: min(320px, 40vw); height: 2px; margin: 0 !important; border-radius: 2px; background: var(--line2); overflow: hidden; }
.work__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--gold)); }
html:not(.pin) .work__bar i { transform: scaleX(calc(var(--wb, 0))); }
.wk__img { --gx: 50%; --gy: 50%; }
.wk__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.22), transparent 55%); opacity: 0; transition: opacity .4s; mix-blend-mode: overlay; }
.wk:hover .wk__glare { opacity: 1; }
.wk__over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 60px 18px 18px;
  background: linear-gradient(transparent, rgba(7,6,10,.92)); transform: translateY(101%); transition: transform .55s var(--ease); }
.wk:hover .wk__over, .wk.act .wk__over { transform: none; }
.wk__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wk__tags span { padding: 6px 11px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wk__visit { flex: none; padding: 10px 16px; border-radius: 99px; background: #fff; color: #000; font-size: 13.5px; font-weight: 600; transition: background .3s; }
.wk:hover .wk__visit { background: var(--lav); }
.wk.act .wk__img { border-color: rgba(203,184,255,.45); box-shadow: 0 30px 90px -30px rgba(155,107,255,.6); }
.wk__meta b { transition: color .3s; }
.wk.act .wk__meta b, .wk:hover .wk__meta b { color: var(--lav); }
@media (max-width: 560px) { .work__now { display: none; } .wk__over { padding: 40px 12px 12px; } .wk__visit { padding: 8px 12px; font-size: 12.5px; } }

/* ===== v6.3 footer ===== */
.foot { position: relative; overflow: hidden; padding-top: clamp(60px, 8vw, 100px); }
.foot::before { content: ''; position: absolute; left: 50%; bottom: -30%; width: 120vw; height: 70%; translate: -50% 0; background: radial-gradient(closest-side, rgba(155,107,255,.22), transparent); pointer-events: none; }
.foot__grid { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 40px; align-items: start; }
.foot__cta h3 { margin: 0; max-width: 520px; font: 900 clamp(36px, 4.4vw, 64px)/.92 var(--disp); text-transform: uppercase; }
.foot__cta h3 em { font: italic 400 1em/1 var(--serif); text-transform: none; background: linear-gradient(100deg, #fff, var(--lav) 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.foot__nav { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.foot__nav p { margin: 0 0 6px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.foot__nav a, .foot__nav span { position: relative; width: fit-content; font-size: 15.5px; color: #d9d4e6; }
.foot__nav span { color: var(--mute); font-size: 14px; }
.foot__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--lav); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.foot__nav a:hover { color: #fff; }
.foot__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.totop { position: relative; display: grid; place-items: center; width: 130px; height: 130px; }
.totop svg { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.totop text { font: 600 13px var(--mono); letter-spacing: .2em; fill: var(--mute); transition: fill .3s; }
.totop b { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; color: #000; font-size: 24px; transition: background .3s, transform .4s var(--ease); }
.totop:hover b { background: var(--lav); transform: translateY(-4px); }
.totop:hover text { fill: var(--lav); }
.foot__big { position: relative; padding: clamp(40px, 6vw, 80px) 0 0; overflow: hidden; }
.foot__big div { display: flex; justify-content: center; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.foot__big span { --h: 0; display: inline-block; color: rgba(203,184,255, calc(var(--h) * .95)); -webkit-text-stroke: 1.5px rgba(255,255,255, calc(.14 + var(--h) * .5));
  translate: 0 calc(var(--h) * -16%); text-shadow: 0 0 calc(var(--h) * 60px) rgba(155,107,255, calc(var(--h) * .8)); will-change: translate; }
.foot__row { position: relative; padding: 22px var(--gut) 0; margin-top: 0; border-top: 1px solid var(--line); }
@media (max-width: 1080px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__cta { grid-column: 1 / -1; } .totop { position: absolute; right: var(--gut); top: 0; width: 100px; height: 100px; } .totop b { width: 48px; height: 48px; } .totop text { font-size: 15px; } }
@media (max-width: 560px) { .totop { display: none; } }
.shot .totop svg { animation: none; }

.build .sec__head { grid-template-columns: 1fr; gap: 18px; }
.build .sec__head .lede { justify-self: start; }
.build .h2 { font-size: clamp(54px, 9.4vw, 150px); }
@media (min-width: 700px) { .build .h2 .ln > span { white-space: nowrap; } }
.float--1 { left: -30px; top: 18%; } .float--2 { right: 18%; top: -22px; } .float--3 { left: 6%; bottom: 10%; }

.shot .laptop { transform: none; } .shot .handset { translate: none; rotate: none; }
@media (max-width: 860px) {
  .sticker { top: auto; bottom: -84px; right: 10px; width: 96px; height: 96px; }
  .build .sec__head { position: relative; }
  .float--1 { left: 6px; top: -14px; } .float--3 { left: 6px; bottom: 14%; }
}
@media (max-width: 560px) { .console__top span { display: none; } .console__top p { font-size: 19px; } }

/* ===== v6.4 builder: build from their Instagram + bigger palette ===== */
.ig { margin: -4px 0 18px; padding: 14px; border-radius: 18px; border: 1px solid rgba(203,184,255,.22);
  background: linear-gradient(135deg, rgba(131,58,180,.16), rgba(253,29,29,.08) 55%, rgba(252,176,69,.1)); }
.ig__h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ig__h b { display: block; font-size: 14.5px; }
.ig__h small { display: block; font-size: 12.5px; color: var(--mute); }
.ig__logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.ig__logo svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; }
.ig__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 62px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.22); background: rgba(0,0,0,.3);
  font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .3s var(--ease); }
.ig__btn svg { width: 19px; height: 19px; fill: none; stroke: var(--lav); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ig__btn:hover { border-color: var(--lav); background: rgba(155,107,255,.14); transform: translateY(-2px); }
.ig__btn.done { border-style: solid; border-color: var(--lav); background: rgba(155,107,255,.2); }
.ig__btn.done svg { stroke: #fff; }
.ig__thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ig__thumbs span { position: relative; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2); animation: tpop .45s var(--ease); }
.ig__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ig__thumbs em { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.65); font: normal 600 8.5px/1.6 var(--mono); text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.ig__thumbs button { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.7); font-size: 11px; line-height: 1; }
.ig__thumbs small { font-size: 12px; color: var(--lav); margin-left: 4px; }
.inp--area { height: auto; margin-top: 10px; padding: 10px 14px; }
.inp--area textarea { width: 100%; border: 0; outline: 0; background: none; resize: vertical; font-size: 15px; line-height: 1.5; }
.ig__tip { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.sw { gap: 7px; }
.sw button { width: 26px; height: 26px; }
.sw--mine { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); align-items: center; }
.sw--mine small { width: 100%; font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lav); }
.sw--mine button { width: 32px; height: 32px; }
.sw__custom { position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  background: conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444); transition: transform .25s; }
.sw__custom:hover { transform: scale(1.12); }
.sw__custom.on { border-color: #fff; }
.sw__custom::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sw__custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ===== v6.5 preview sits higher: tighter hero exit + paste bar in the headline ===== */
.hero__in { padding-bottom: clamp(26px, 4vh, 44px); }
.scrollcue { display: none; }
.build { padding-top: clamp(28px, 4vw, 56px); }
.build .sec__head.build__head { grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: end; margin-bottom: clamp(30px, 4vw, 52px); }
.build .h2 { font-size: clamp(52px, 7.6vw, 124px); }
.hop .ch { display: inline-block; transition: transform .45s cubic-bezier(.3,1.8,.4,1), color .3s; }
.hop .ch:hover { transform: translateY(-16%) rotate(-5deg) scale(1.06); color: var(--lav); transition-duration: .2s; }
.at { display: inline-block; transition: transform .8s var(--ease); cursor: default; }
.at:hover { transform: rotate(360deg) scale(1.1); }
.paste { position: relative; }
.paste .sticker { right: 0; top: -150px; }
.paste__bar { position: relative; display: flex; align-items: center; gap: 10px; height: 68px; padding: 6px 6px 6px 18px; border-radius: 99px;
  background: linear-gradient(#120e1a, #120e1a) padding-box, conic-gradient(from var(--ang), rgba(155,107,255,.25), var(--violet), var(--lav), var(--gold), rgba(155,107,255,.25) 45%, rgba(155,107,255,.25)) border-box;
  border: 1.5px solid transparent; animation: ang 4s linear infinite; box-shadow: 0 20px 60px -20px rgba(155,107,255,.7); transition: transform .3s var(--ease); }
.paste__bar:focus-within { transform: scale(1.015); box-shadow: 0 0 0 6px rgba(155,107,255,.18), 0 24px 70px -18px rgba(155,107,255,.9); }
.paste__ico { flex: none; width: 24px; height: 24px; color: var(--lav); }
.paste__ico svg, .paste__plats svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.paste__bar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 17px; }
.paste__bar input::placeholder { color: #8d87a0; }
.paste__bar .btn { height: 56px; padding: 0 24px; }
.paste__plats { display: flex; align-items: center; gap: 12px; margin: 14px 0 0 6px; color: var(--mute); }
.paste__plats span { width: 18px; height: 18px; transition: color .3s, transform .3s; }
.paste__plats span:hover { color: var(--lav); transform: translateY(-2px); }
.paste__plats em { font: normal 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-left: 4px; }
.paste__note { margin: 10px 0 0 6px; color: var(--mute); font-size: 14.5px; }

/* scan overlay over the devices */
.stage { position: relative; }
.scan { position: absolute; inset: -10px; z-index: 6; display: grid; place-items: center; border-radius: 22px; background: rgba(7,6,10,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s; }
.scan.on { opacity: 1; }
.scan__box { position: relative; width: min(380px, 86%); padding: 26px; border-radius: 24px; border: 1px solid rgba(203,184,255,.35); background: linear-gradient(180deg, #17121f, #0d0a12); overflow: hidden; box-shadow: 0 30px 90px -20px rgba(155,107,255,.6); }
.scan__laser { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--lav), var(--gold), transparent); box-shadow: 0 0 20px var(--lav); animation: laser 1.6s ease-in-out infinite; }
@keyframes laser { 0%,100% { top: 0; } 50% { top: calc(100% - 2px); } }
.scan__pic { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 50%; padding: 3px; color: #fff; background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.scan__pic svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.scan__pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #0d0a12; animation: tpop .6s var(--ease); }
.scan__k { margin: 0 0 12px; font: 800 26px/1 var(--disp); text-transform: uppercase; }
.scan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.scan li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #ddd8ea; animation: rowIn .4s var(--ease); }
.scan li::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(203,184,255,.3); border-top-color: var(--lav); animation: spin .7s linear infinite; }
.scan li.ok::before { content: '✓'; display: grid; place-items: center; border: 0; background: var(--violet); color: #fff; font-size: 10px; animation: none; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
.scan__cols { display: flex; gap: 6px; margin-top: 14px; }
.scan__cols i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); animation: tpop .5s var(--ease) both; }
.ig.nudge { animation: nudge 1.4s var(--ease); }
@keyframes nudge { 0%,100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px rgba(203,184,255,.55), 0 0 40px rgba(155,107,255,.6); } }
.claim__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }

/* plan form: attached site + success */
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.btn--wide { width: 100%; margin-top: 6px; }
.btn.busy { opacity: .75; pointer-events: none; }
.result .fine a { color: var(--lav); text-decoration: underline; }
.site-att { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: 16px; border: 1px solid rgba(203,184,255,.35); background: rgba(155,107,255,.12); }
.site-att__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px #4ade80; }
.site-att div { flex: 1; min-width: 0; }
.site-att b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-att small { color: var(--mute); font-size: 12.5px; }
.site-att button { flex: none; padding: 8px 14px; border-radius: 99px; background: #fff; color: #000; font-size: 13px; font-weight: 600; }
.result.is-done > :not(.done):not(.confetti) { display: none; }
.done { position: relative; }
.done__link { margin: 4px 0 14px; padding: 16px; border-radius: 16px; border: 1px solid rgba(203,184,255,.35); background: rgba(0,0,0,.3); }
.done__link small { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lav); }
.done__link > a { display: block; margin: 6px 0 12px; font: 500 14px var(--mono); word-break: break-all; color: #fff; }
.done__btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1080px) { .build .sec__head.build__head { grid-template-columns: 1fr; } .paste .sticker { top: auto; bottom: auto; right: 0; top: -120px; } }
@media (max-width: 560px) {
  .paste__bar { height: 60px; padding-left: 14px; } .paste__bar input { font-size: 16px; } .paste__bar .btn { height: 48px; padding: 0 16px; }
  .paste .sticker { display: none; } .f2 { grid-template-columns: 1fr; }
}

/* back-to-top button */
.up { position: fixed; right: 22px; bottom: 88px; z-index: 76; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(14,11,20,.8); border: 1px solid var(--line2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; transition: opacity .4s, transform .4s var(--ease), background .3s; }
.up.on { opacity: 1; transform: none; pointer-events: auto; }
.up:hover { background: var(--violet); }
.up > svg:first-child { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.up:hover > svg:first-child { transform: translateY(-3px); }
.up__ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); fill: none; stroke-width: 2; pointer-events: none; }
.up__ring circle:first-child { stroke: transparent; }
.up__ring circle + circle { stroke: var(--lav); stroke-dasharray: 138.2; stroke-dashoffset: 138.2; stroke-linecap: round; }
@media (max-width: 860px) { .up { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }

/* ===== v6.6 work cards: 3D device scenes ===== */
.wk { --tone: 155,107,255; }
.wk__stage { --rx: 0deg; --ry: 0deg; aspect-ratio: 16/11; perspective: 1400px; transform-style: preserve-3d; isolation: isolate;
  background: radial-gradient(60% 65% at 50% 42%, rgba(var(--tone), .8), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(var(--tone), .35), transparent 60%), linear-gradient(160deg, #15111d, #08070b);
  transform: none !important; }
.wk__stage::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); }
.wk__floor { position: absolute; left: 10%; right: 10%; bottom: 7%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(8px); z-index: 0; transition: transform .7s var(--ease); }
.wk__scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(8deg + var(--rx))) rotateY(calc(-16deg + var(--ry) + var(--sy, 0deg))); transition: transform .7s var(--ease); }
.wk:hover .wk__scene { transform: rotateX(calc(3deg + var(--rx))) rotateY(calc(-6deg + var(--ry) + var(--sy, 0deg))); transition-duration: .25s; }
.wk__browser { position: absolute; left: 8%; top: 11%; width: 72%; border-radius: 10px; overflow: hidden; background: #0d0b12; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 70px -25px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4), 0 0 60px -10px rgba(var(--tone), .5); transform: translateZ(0); }
.wk__bar { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px; background: #17141e; border-bottom: 1px solid rgba(255,255,255,.08); }
.wk__bar i { width: 6px; height: 6px; border-radius: 50%; background: #3a3644; }
.wk__bar i:first-child { background: #ff5f57; } .wk__bar i:nth-child(2) { background: #febc2e; } .wk__bar i:nth-child(3) { background: #28c840; }
.wk__bar span { flex: 1; margin: 0 18px; padding: 1px 8px; border-radius: 4px; background: rgba(255,255,255,.06); font: 8.5px/1.6 var(--mono); color: #9a94ab; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wk__stage .wk__browser img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.wk__phone { position: absolute; right: 7%; bottom: 9%; width: 21%; aspect-ratio: 9/19.5; padding: 4px; border-radius: 18px; background: linear-gradient(145deg, #2c2833, #0c0a10); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 30px 50px -15px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.6); transform: translateZ(70px) rotateY(6deg); transition: transform .7s var(--ease); }
.wk__phone::before { content: ''; position: absolute; top: 7px; left: 50%; width: 30%; height: 5px; margin-left: -15%; border-radius: 4px; background: #000; z-index: 2; }
.wk__stage .wk__phone img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; object-position: top; }
.wk:hover .wk__phone { transform: translateZ(130px) rotateY(0deg) translateY(-6px); }
.wk:hover .wk__browser img { transform: scale(1.04); }
.wk:hover .wk__floor { transform: scale(.92); }
.wk__stage .wk__glare { z-index: 3; }
.wk__stage .wk__badge, .wk__stage .wk__over { z-index: 4; }
.wk:hover .wk__stage img, .wk__stage img { transform-origin: top center; }
.wk:hover .wk__img img { transform: none; }
.wk:hover .wk__browser img { transform: scale(1.04); }
@media (max-width: 560px) { .wk__bar { height: 14px; } .wk__bar span { font-size: 7px; } .wk__phone { border-radius: 12px; padding: 3px; } .wk__stage .wk__phone img { border-radius: 9px; } }
@media (prefers-reduced-motion: reduce) { .wk__scene { transform: rotateY(-10deg) rotateX(5deg) !important; } }

@media (max-width: 560px) { .wk__tags { display: none; } .wk__over { padding: 30px 10px 10px; justify-content: flex-end; background: none; } }
html.pin .wk__scene { transition: transform .5s var(--ease); }

/* one-screenshot import */
.magic { position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px; margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; cursor: pointer; overflow: hidden;
  border: 1px solid rgba(203,184,255,.35); background: linear-gradient(120deg, rgba(155,107,255,.22), rgba(220,184,114,.12)); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.magic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); transform: translateX(-100%); animation: mshine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes mshine { 60%,100% { transform: translateX(100%); } }
.magic:hover { transform: translateY(-2px); border-color: var(--lav); box-shadow: 0 10px 40px -12px rgba(155,107,255,.8); }
.magic__ph { position: relative; width: 44px; height: 72px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.7); background: #0d0a12; overflow: hidden; display: block; justify-self: center; }
.magic__av { position: absolute; left: 6px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.magic__ln { position: absolute; left: 22px; right: 6px; top: 12px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); box-shadow: 0 5px 0 rgba(255,255,255,.25); }
.magic__gr { position: absolute; left: 3px; right: 3px; top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.magic__gr b { aspect-ratio: 3/4; background: linear-gradient(135deg, #9b6bff, #dcb872); opacity: .75; }
.magic__gr b:nth-child(2n) { background: linear-gradient(135deg, #ec4899, #9b6bff); }
.magic__scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: #fff; box-shadow: 0 0 10px 2px var(--lav); animation: mscan 2.2s ease-in-out infinite; }
@keyframes mscan { 0%,100% { top: 4%; } 50% { top: 92%; } }
.magic__t b { display: block; font-size: 14.5px; color: #fff; }
.magic__t small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--mute); }
.magic__go { font-size: 20px; }
.magic.busy { pointer-events: none; }
.magic.busy .magic__scan { animation-duration: .7s; }
.magic.busy .magic__t b::after { content: " Reading…"; color: var(--lav); }
.magic.done { border-color: var(--lav); background: linear-gradient(120deg, rgba(155,107,255,.32), rgba(155,107,255,.14)); }
.magic.done .magic__go::before { content: "✓ "; color: var(--lav); font-weight: 700; }
.build.drop .build__grid { outline: 2px dashed var(--lav); outline-offset: 10px; border-radius: 24px; }
.build.drop .magic { box-shadow: 0 0 0 4px rgba(203,184,255,.5), 0 0 50px rgba(155,107,255,.6); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--lav); font: inherit; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .magic::before, .magic__scan { animation: none; } }

/* builder sells itself: readiness meter + claim sheet */
.sell { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; margin-top: 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line2); background: linear-gradient(120deg, rgba(155,107,255,.12), rgba(220,184,114,.06)); }
.sell__ring { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.sell__ring svg { position: absolute; inset: 0; rotate: -90deg; }
.sell__ring circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 4; }
.sell__ring .sell__arc { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 * (1 - var(--k))); transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 6px rgba(220,184,114,.6)); }
.sell__ring b { font: 600 13px var(--mono); color: #fff; }
.sell__txt b { display: block; font-size: 15px; color: #fff; }
.sell__txt b span { color: var(--gold); }
.sell__next { padding: 0; margin-top: 2px; font-size: 13.5px; color: var(--lav); text-decoration: underline; text-underline-offset: 3px; }
.sell__list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sell__list button { padding: 6px 11px; border-radius: 99px; border: 1px dashed var(--line2); font: 500 12px var(--mono); color: var(--mute); transition: .2s; }
.sell__list button:hover { color: #fff; border-color: var(--lav); }
.sell__list .ok button { border: 1px solid rgba(220,184,114,.45); background: rgba(220,184,114,.1); color: var(--gold); cursor: default; }
.sell.is-full { border-color: rgba(220,184,114,.55); box-shadow: 0 0 40px -12px rgba(220,184,114,.5); }
.sell.is-full .sell__next { color: var(--gold); }

.csheet { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.csheet__bg { position: absolute; inset: 0; background: rgba(5,4,8,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.csheet__card { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border-radius: 26px; opacity: 0; transform: translateY(24px) scale(.97); transition: .35s var(--ease); }
.csheet.on .csheet__bg { opacity: 1; }
.csheet.on .csheet__card { opacity: 1; transform: none; }
.csheet__x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; color: var(--mute); }
.csheet__x:hover { color: #fff; background: rgba(255,255,255,.06); }
.csheet__site { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-right: 34px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.csheet__site small { display: block; font: 500 10.5px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.csheet__site b { font: 500 14px var(--mono); color: #fff; word-break: break-all; }
.csheet__av { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; }
.csheet__av img, .csheet__av b { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; color: #fff; font-weight: 700; }
.csheet__live { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 500 11px var(--mono); color: #7ee0a1; white-space: nowrap; }
.csheet__live i { width: 7px; height: 7px; border-radius: 50%; background: #7ee0a1; box-shadow: 0 0 10px #7ee0a1; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.csheet__t { margin: 18px 0 6px; font: 800 clamp(30px, 6vw, 40px)/1 var(--disp); text-transform: uppercase; }
.csheet__t em { font: italic 400 1em/1 var(--serif); text-transform: none; background: linear-gradient(100deg, #fff, var(--lav) 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csheet__d { margin: 0 0 14px; color: var(--mute); font-size: 14.5px; }
.csheet__inc { display: grid; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; }
.csheet__inc li { display: flex; gap: 10px; }
.csheet__inc li::before { content: '✓'; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #0a0810; background: var(--gold); }
.csheet__inc b { color: #fff; font-family: var(--mono); font-weight: 500; }
.csheet form .f { margin-bottom: 10px; }
.csheet .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.csheet__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 14px 0 8px; padding: 0; list-style: none; font: 500 11.5px var(--mono); color: var(--mute); }
.csheet__trust li::before { content: '✦ '; color: var(--gold); }
.csheet__proof { margin: 0; text-align: center; font-size: 12.5px; color: var(--dim); }
.csheet__proof a { color: var(--lav); text-decoration: underline; text-underline-offset: 2px; }
.csheet__done { text-align: center; padding: 18px 0 4px; display: grid; gap: 10px; }
.csheet__done h3 { margin: 0; font: 800 34px/1 var(--disp); text-transform: uppercase; }
.csheet__done p { margin: 0 0 8px; color: var(--mute); }
@media (max-width: 560px) { .csheet { place-items: end center; padding: 0; } .csheet__card { border-radius: 24px 24px 0 0; max-height: 92dvh; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); } .csheet .f2 { grid-template-columns: 1fr; } .csheet__live { display: none; } }
@media (prefers-reduced-motion: reduce) { .csheet__card, .csheet__bg, .sell__arc { transition: none; } .csheet__live i { animation: none; } }
.csheet .f2 > *, .csheet .f { min-width: 0; }
.csheet .inp input { min-width: 0; width: 100%; }
.csheet__card { box-sizing: border-box; }
@media (max-width: 560px) { .csheet__card { width: 100%; } }
.csheet__price { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(220,184,114,.35); background: rgba(220,184,114,.07); }
.csheet__from small { display: block; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.csheet__from b { font: 800 34px/1 var(--disp); color: #fff; }
.csheet__price p { margin: 0; font-size: 13.5px; color: var(--mute); }
.csheet__price p b { color: #fff; }
.csheet__alt { display: block; margin: 10px auto 0; padding: 4px; font-size: 13.5px; color: var(--lav); text-decoration: underline; text-underline-offset: 3px; }
.csheet__from { flex: none; } .csheet__from small { white-space: nowrap; }

/* ===== multi-page (2026-10-27): nav build button, home teaser + explore cards, page tops ===== */
.nav__links a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
.nav__links .nav__build { display: inline-flex; align-items: center; gap: 7px; color: #fff; border: 1px solid transparent;
  background: linear-gradient(#15111e, #15111e) padding-box, conic-gradient(from var(--ang), rgba(155,107,255,.25), var(--violet), var(--lav), var(--gold), rgba(155,107,255,.25) 45%, rgba(155,107,255,.25)) border-box; animation: ang 5s linear infinite; }
.nav__build i { font-style: normal; color: var(--gold); }
.nav__build b, .mmenu .free { padding: 2px 6px; border-radius: 99px; background: var(--gold); color: #0a0810; font: 700 9.5px/1.3 var(--mono); letter-spacing: .06em; }
.mmenu .free { vertical-align: middle; font-size: 11px; }
body:not(.pg-home) main > section:first-child { padding-top: clamp(120px, 14vw, 170px); }
.pg-build .build { padding-top: clamp(110px, 12vw, 150px); }

.teaser__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.teaser .lede { margin: 18px 0 26px; max-width: 520px; }
.teaser__bar { max-width: 560px; }
.mini { position: relative; display: block; border-radius: 18px; border: 1px solid var(--line2); background: #0e0b14; overflow: hidden; box-shadow: 0 40px 100px -40px rgba(155,107,255,.7); transform: rotate(-1.5deg); transition: transform .5s var(--ease), box-shadow .5s; }
.mini:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 50px 120px -40px rgba(155,107,255,.9); }
.mini__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.mini__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); }
.mini__bar b { margin: 0 auto; padding: 3px 12px; border-radius: 99px; background: rgba(255,255,255,.05); font: 500 11px var(--mono); color: var(--mute); }
.mini__site { position: relative; display: block; aspect-ratio: 16 / 10; }
.mini__site img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.mini__site::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.75)); }
.mini__nav { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 12px; }
.mini__nav i, .mini__hero i { font-style: normal; padding: 5px 10px; background: var(--mc, #c9a35b); color: #0a0810; font-size: 10.5px; font-weight: 600; transition: background .5s; }
.mini__hero { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 20px; }
.mini__hero small { font: 500 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #ddd; }
.mini__hero strong { font: 400 clamp(26px, 3.4vw, 42px)/1 var(--serif); color: #fff; }
.mini__site.swap img, .mini__site.swap .mini__hero { opacity: 0; }
.mini__hero { transition: opacity .4s; }
.mini__handle { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 7px 12px; border-radius: 99px; background: rgba(10,8,16,.8); backdrop-filter: blur(8px); font: 500 12px var(--mono); color: var(--lav); border: 1px solid var(--line2); }
.mini__cta { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 8px 14px; border-radius: 99px; background: #fff; color: #0a0810; font-size: 13px; font-weight: 600; }

.ex { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ex__c { position: relative; grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 300px; padding: 22px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); isolation: isolate; }
.ex__c--build { grid-column: span 4; grid-row: span 2; min-height: 460px; }
.ex__c:nth-child(4), .ex__c:nth-child(5) { grid-column: span 3; }
.ex__c img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ex__c::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,6,10,.1) 20%, rgba(7,6,10,.92)); }
.ex__c:hover img { transform: scale(1.06); }
.ex__k { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ex__c h3 { margin: 0; font: 900 clamp(30px, 3.4vw, 46px)/.95 var(--disp); text-transform: uppercase; }
.ex__c--build h3 { font-size: clamp(42px, 5.6vw, 78px); }
.ex__c p { margin: 0; color: #d8d3e6; font-size: 14.5px; max-width: 420px; }
.ex__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ex__chips i { font-style: normal; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(0,0,0,.35); font-size: 12px; }
.ex__go { margin-top: 8px; font-weight: 600; font-size: 14px; color: #fff; }
.ex__c:hover .ex__go { color: var(--gold); }
@media (max-width: 900px) {
  .teaser__in { grid-template-columns: 1fr; }
  .mini { transform: none; }
  .ex { grid-template-columns: 1fr 1fr; }
  .ex__c, .ex__c:nth-child(4), .ex__c:nth-child(5) { grid-column: span 1; min-height: 230px; }
  .ex__c--build { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
}
@media (max-width: 560px) { .ex { grid-template-columns: 1fr; } .ex__c { min-height: 200px !important; } .mini__cta { display: none; } }
.teaser, .explore { padding: clamp(60px, 8vw, 110px) 0; }
.explore .sec__head { margin-bottom: 36px; }
.ex__c--build img { object-position: top; }
.teaser__in > * { min-width: 0; }

/* ===== AI command center (#ai) ===== */
.aiz { overflow: clip; }
.aiz__glow { position: absolute; inset: 10% -10% auto; height: 70%; background: radial-gradient(50% 50% at 50% 50%, rgba(155,107,255,.28), transparent 70%); filter: blur(30px); pointer-events: none; }
.aiz__head { max-width: 860px; margin-bottom: clamp(30px, 4vw, 54px); }
.aiz__head .lede { margin-top: 18px; max-width: 620px; }
.aiz__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(18px, 3vw, 36px); align-items: start; }
.cc { position: relative; border-radius: 22px; border: 1px solid rgba(155,107,255,.4); background: linear-gradient(180deg, #120e1c, #0b0911); box-shadow: 0 50px 120px -50px rgba(155,107,255,.8), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
.cc__top { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.cc__dots { display: flex; gap: 6px; } .cc__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.cc__top b { font: 600 13px var(--mono); letter-spacing: .02em; }
.cc__on { margin-left: auto; display: flex; align-items: center; gap: 7px; font: 500 11.5px var(--mono); color: #7ee0a1; }
.cc__on i, .cc__agents li > i { width: 7px; height: 7px; border-radius: 50%; background: #7ee0a1; box-shadow: 0 0 10px #7ee0a1; animation: blink 1.6s infinite; }
.cc__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.cc__stats div { padding: 14px 16px; border-right: 1px solid var(--line); }
.cc__stats div:last-child { border-right: 0; }
.cc__stats small { display: block; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cc__stats b { display: inline-block; margin-top: 4px; font: 800 30px/1 var(--disp); color: #fff; }
.cc__stats b.bump { animation: ccBump .6s var(--ease); }
@keyframes ccBump { 0% { color: var(--gold); transform: translateY(-4px) scale(1.12); } 100% { color: #fff; transform: none; } }
.cc__body { display: grid; grid-template-columns: 1fr 1fr; }
.cc__agents { margin: 0; padding: 10px; list-style: none; display: grid; gap: 6px; border-right: 1px solid var(--line); }
.cc__agents li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; transition: .4s; }
.cc__agents li.busy { border-color: rgba(155,107,255,.45); background: rgba(155,107,255,.1); }
.cc__agents li > i { margin-left: auto; flex: none; opacity: .5; }
.cc__agents li.busy > i { opacity: 1; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.cc__av { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); font-size: 16px; }
.cc__agents b { display: block; font-size: 13px; }
.cc__agents small { display: block; font-size: 11.5px; color: var(--mute); line-height: 1.35; }
.cc__feed { padding: 12px 14px; min-width: 0; }
.cc__feed > p { margin: 0 0 8px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cc__feed ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cc__feed li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; animation: feedIn .5s var(--ease); }
.cc__feed li p { margin: 0; flex: 1; color: var(--mute); line-height: 1.4; } .cc__feed li b { color: #fff; font-weight: 600; }
.cc__feed li small { font: 500 10px var(--mono); color: var(--dim); white-space: nowrap; }
.cc__feed li:first-child small { color: #7ee0a1; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } }
.cc__demo { position: absolute; right: 12px; bottom: 10px; font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.aiz__list { display: grid; gap: 10px; }
.aip { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line2); background: rgba(255,255,255,.025); text-align: left; transition: .3s var(--ease); position: relative; }
.aip:hover { border-color: rgba(203,184,255,.5); background: rgba(155,107,255,.08); transform: translateX(4px); }
.aip.on { border-color: var(--lav); background: rgba(155,107,255,.15); }
.aip::after { content: '+'; position: absolute; right: 16px; top: 14px; font: 500 18px var(--mono); color: var(--lav); }
.aip.on::after { content: '✓'; color: var(--gold); }
.aip__i { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, rgba(155,107,255,.35), rgba(220,184,114,.2)); }
.aip b { display: block; font-size: 17px; padding-right: 20px; }
.aip small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--mute); line-height: 1.45; }
.aiz__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.aiz__hint { font: 500 11.5px var(--mono); color: var(--dim); }

/* ===== all-in-one journey (#all) ===== */
.all__nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 18px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line2); background: var(--line); }
.all__nums div { padding: 18px 20px; background: var(--bg); }
.all__nums b { display: block; font: 900 clamp(34px, 4vw, 54px)/1 var(--disp); background: linear-gradient(100deg, #fff, var(--lav) 60%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.all__nums small { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.jr { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.jr__c { position: relative; padding: 20px 16px 16px; border-radius: 20px; border: 1px solid var(--line2); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(255,255,255,.015) 45%); transition: .4s var(--ease); }
.jr__c::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 2px; background: var(--c); box-shadow: 0 0 16px var(--c); }
.jr__c:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.jr__n { font: 500 11px var(--mono); color: var(--c); }
.jr__c h3 { margin: 4px 0 2px; font: 900 34px/1 var(--disp); text-transform: uppercase; }
.jr__c > p { margin: 0 0 14px; font-size: 13.5px; color: var(--mute); }
.jr__c > div { display: grid; gap: 6px; }
.jr__i { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: rgba(0,0,0,.25); text-align: left; font-size: 13.5px; transition: .25s; }
.jr__i::after { content: '+'; font: 500 14px var(--mono); color: var(--c); }
.jr__i:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.jr__i.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
.jr__i.on::after { content: '✓'; }
.jr__c--hot { border-color: rgba(155,107,255,.55); box-shadow: 0 30px 80px -40px rgba(155,107,255,.9); }
.jr__hot { position: absolute; right: 14px; top: 16px; padding: 3px 9px; border-radius: 99px; background: linear-gradient(90deg, var(--violet), #ff7ab6); font: 700 10.5px var(--mono); color: #fff; }
.all__foot { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.all__foot .count:empty { display: none; }
.ex--4 .ex__c--build { grid-column: span 4; grid-row: span 2; }
.ex--4 .ex__c:nth-child(2) { grid-column: span 2; }
.ex--4 .ex__c:nth-child(3), .ex--4 .ex__c:nth-child(4) { grid-column: span 1; min-height: 220px; }
.ex--4 .ex__c:nth-child(3) h3, .ex--4 .ex__c:nth-child(4) h3 { font-size: 30px; }
@media (max-width: 1100px) { .jr { grid-template-columns: repeat(3, 1fr); } .aiz__grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ex--4 .ex__c, .ex--4 .ex__c:nth-child(n) { grid-column: span 1; grid-row: auto; min-height: 220px; }
  .ex--4 .ex__c--build { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .jr { grid-template-columns: 1fr 1fr; } .jr__c--hot { grid-column: 1 / -1; order: -1; }
  .all__nums { grid-template-columns: 1fr 1fr; }
  .cc__stats { grid-template-columns: 1fr 1fr; } .cc__stats div:nth-child(2) { border-right: 0; } .cc__stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cc__body { grid-template-columns: 1fr; } .cc__agents { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) { .jr { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .jr { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut) 14px; scrollbar-width: none; }
  .jr::-webkit-scrollbar { display: none; }
  .jr__c { flex: 0 0 82%; scroll-snap-align: center; }
  .jr__c--hot { order: 0; }
  .jr__c:hover { transform: none; }
}
/* tighter gaps between the home sections */
.pg-home .aiz { padding-bottom: clamp(30px, 4vw, 50px); }
.pg-home .all { padding-top: clamp(40px, 5vw, 70px); }
.pg-home .all .sec__head { margin-bottom: 28px; }
.pg-home .explore { padding-bottom: clamp(20px, 3vw, 40px); }
.pg-home .work { padding-top: clamp(50px, 6vw, 90px); }