/* ============================================================ VECTOR STUDIOS — design system v3 One identity on every page: near-black ground, white type, a single cobalt accent. Every colour is painted explicitly. Markup is authored in its final, readable state; the "js" class on enables motion on top of it. ============================================================ */ :root{ color-scheme:dark; /* ground */ --bg:#070709; --bg-2:#0D0E12; --bg-3:#14161C; --bg-4:#1B1E26; /* lines */ --line:#1E2129; --line-2:#2A2E38; --line-3:#3B4150; /* type */ --ink:#F4F5F8; --ink-2:#A6ADBA; --ink-3:#7E8799; /* the one accent */ --accent:#1E56FF; --accent-2:#6E97FF; /* readable accent on dark for small text */ --accent-deep:#0F3ED9; --accent-soft:rgba(30,86,255,.14); --accent-rgb:30,86,255; /* light surfaces used inside the "website" scenes */ --lt-bg:#FFFFFF; --lt-bg-2:#F4F6FA; --lt-line:#E6EAF1; --lt-ink:#0E1420; --lt-ink-2:#5B6577; --lt-ink-3:#8A94A7; /* rhythm */ --gut:clamp(20px,4vw,40px); --max:1240px; --sec:clamp(80px,10vw,152px); --r:8px; --r-lg:14px; --nav-h:72px; --sh-md:0 24px 60px -30px rgba(0,0,0,.8); --sh-accent:0 18px 44px -16px rgba(var(--accent-rgb),.45); /* motion */ --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);background:var(--bg)} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif; font-size:17px; font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.menu-open{overflow:hidden} img{max-width:100%;display:block} figure{margin:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:3px} ::selection{background:rgba(var(--accent-rgb),.35);color:#fff} [hidden]{display:none !important} .skip{ position:fixed;top:12px;left:12px;z-index:10000; padding:10px 14px;border-radius:var(--r); background:var(--accent);color:#fff;font-weight:600;font-size:.9rem; transform:translateY(-200%);transition:transform .2s ease; } .skip:focus{transform:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- type ---------- */ h1,h2,h3,h4{ font-family:Archivo,Helvetica,Arial,sans-serif; font-weight:800; font-stretch:112%; line-height:1; letter-spacing:-.028em; margin:0; text-wrap:balance; color:var(--ink); } .h1{font-size:clamp(2.5rem,6vw,4.75rem)} .h2{font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.02} .h3{font-size:clamp(1.3rem,2vw,1.7rem);font-stretch:106%;letter-spacing:-.02em;line-height:1.12} .h4{font-size:1.0625rem;font-stretch:104%;letter-spacing:-.012em;font-weight:700;line-height:1.25} p{margin:0} .lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink-2);max-width:60ch;font-weight:300} .body{color:var(--ink-2);max-width:64ch} .small{font-size:.9375rem;line-height:1.6;color:var(--ink-2)} .muted{color:var(--ink-3)} .mono{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3); } .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ink-3)} .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-2);flex:none} /* ---------- layout ---------- */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .sec{padding-block:var(--sec);position:relative} .sec--top{padding-top:calc(var(--nav-h) + clamp(56px,9vw,120px))} .sec--tight{padding-block:clamp(56px,7vw,96px)} .sec--flush{padding-top:0} .hero-copy .h1{max-width:18ch} .hero-copy .lede{max-width:56ch} .hero-copy .row{padding-top:8px} .rule{height:1px;background:var(--line);border:0;margin:0} .stack{display:flex;flex-direction:column} .g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px} .g32{gap:32px}.g40{gap:40px}.g56{gap:clamp(40px,5vw,56px)} .row{display:flex;flex-wrap:wrap;gap:12px} .row--center{align-items:center} .row--between{justify-content:space-between} .row--end{align-items:flex-end} .grid{display:grid;gap:clamp(18px,2.4vw,28px)} .g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end} .head .lede{max-width:48ch} @media (max-width:900px){ .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))} .head{grid-template-columns:1fr;align-items:start;gap:18px} } @media (max-width:600px){ .g-2,.g-3,.g-4{grid-template-columns:1fr} } /* ---------- atmosphere ---------- */ .glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .glow::before{ content:"";position:absolute;left:50%;top:-30%;width:120vw;max-width:1500px;height:80%; transform:translateX(-50%); background:radial-gradient(60% 55% at 50% 30%,rgba(var(--accent-rgb),.22),transparent 70%); } .glow--low::before{top:auto;bottom:-40%} .rel{position:relative;z-index:1} /* ---------- buttons ---------- */ .btn{ position:relative; display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:13px 24px; border:0;border-radius:var(--r); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:.9375rem;font-weight:600;letter-spacing:-.005em;line-height:1.2; color:#FFFFFF; background:var(--accent); cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),background .35s ease,color .35s ease,opacity .3s ease; text-align:center; } .btn:hover{background:var(--accent-deep);box-shadow:var(--sh-accent)} .btn:active{transform:scale(.975)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.6;cursor:progress;transform:none;box-shadow:none} .btn svg{width:18px;height:18px;flex:none} .btn--ghost{ background:transparent;color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-3); } .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);background:rgba(255,255,255,.05)} .btn--white{background:#FFFFFF;color:var(--accent-deep)} .btn--white:hover{background:#EEF3FF;box-shadow:0 18px 44px -16px rgba(0,0,0,.6)} .btn--sm{min-height:42px;padding:10px 18px;font-size:.875rem} .btn--wide{width:100%} .ripple{ position:absolute;border-radius:50%; background:rgba(255,255,255,.45); transform:scale(0);opacity:.85;pointer-events:none; animation:ripple .62s var(--e-out) forwards; } .btn--ghost .ripple{background:rgba(var(--accent-rgb),.25)} @keyframes ripple{to{transform:scale(2.6);opacity:0}} .tlink{ position:relative;display:inline-flex;align-items:center;gap:9px; font-weight:500;font-size:.9375rem;color:var(--ink); padding-bottom:3px;min-height:44px; } .tlink::after{ content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px; background:var(--accent-2); transform:scaleX(0);transform-origin:right; transition:transform .5s var(--e-out); } .tlink:hover::after{transform:scaleX(1);transform-origin:left} .tlink svg{width:18px;height:18px;transition:transform .45s var(--e-out)} .tlink--btn{background:none;border:0;padding:0 0 3px;cursor:pointer;font:inherit;font-weight:500;font-size:.9375rem;color:var(--accent-2)} .stat__more{margin-top:12px;min-height:36px;font-size:.875rem} .beat .tlink--btn{width:fit-content;pointer-events:auto} .tlink:hover svg{transform:translateX(4px)} /* ---------- scroll progress ---------- */ .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9997;pointer-events:none} .progress i{ display:block;height:100%;width:100%; background:var(--accent); transform:scaleX(0);transform-origin:0 50%; } /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:900; padding-top:env(safe-area-inset-top); transition:background .4s ease,border-color .4s ease; border-bottom:1px solid transparent; } .nav.is-stuck{ background:rgba(7,7,9,.78); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom-color:var(--line); } body.menu-open .nav{transform:none;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .nav__in{ display:flex;align-items:center;justify-content:space-between;gap:24px; width:100%;max-width:var(--max);margin-inline:auto; padding:16px var(--gut); transition:padding .5s var(--e-out); } .nav.is-stuck .nav__in{padding-block:11px} .brand{display:inline-flex;align-items:center;flex:none;min-height:44px;transition:opacity .3s ease} .brand img{height:34px;width:auto;display:block} .brand:hover{opacity:.85} .foot .brand img{height:40px} @media (max-width:600px){.brand img{height:30px}} .nav__links{display:flex;align-items:center;gap:2px} .nav__links a{ position:relative;padding:10px 14px;font-size:.9375rem;font-weight:450;min-height:44px;display:inline-flex;align-items:center; color:var(--ink-2);transition:color .3s ease; } .nav__links a::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px; background:var(--accent-2);transform:scaleX(0);transform-origin:right; transition:transform .45s var(--e-out); } .nav__links a:hover{color:var(--ink)} .nav__links a:hover::after{transform:scaleX(1);transform-origin:left} .nav__links a[aria-current="page"]{color:var(--ink)} .nav__links a[aria-current="page"]::after{transform:scaleX(1)} .nav__cta{display:flex;align-items:center;gap:12px;flex:none} .burger{ display:none;width:44px;height:44px;padding:0; background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r); cursor:pointer;position:relative; } .burger i{ position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink); transition:transform .5s var(--e-out),opacity .3s ease; } .burger i:nth-child(1){top:16px} .burger i:nth-child(2){top:21px} .burger i:nth-child(3){top:26px} body.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)} body.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.4)} body.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} @media (max-width:1000px){ .nav__links{display:none} .nav__cta .btn{display:none} .burger{display:block} } /* mobile menu */ .menu{ position:fixed;inset:0;z-index:880; background:var(--bg); display:flex;flex-direction:column;justify-content:center; padding:calc(var(--nav-h) + env(safe-area-inset-top) + 16px) var(--gut) calc(32px + env(safe-area-inset-bottom)); overflow-y:auto; clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--e-out); } .menu.is-open{clip-path:inset(0 0 0 0)} .menu__links{display:flex;flex-direction:column;border-top:1px solid var(--line)} .menu__links a{ display:flex;align-items:baseline;gap:16px; padding:16px 0;border-bottom:1px solid var(--line); font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%; font-size:clamp(1.9rem,8vw,3rem);letter-spacing:-.035em;line-height:1; color:var(--ink); opacity:0;transform:translateY(24px); transition:opacity .55s var(--e-out),transform .55s var(--e-out),color .3s ease; } .menu__links a:hover,.menu__links a[aria-current="page"]{color:var(--accent-2)} .menu__links a em{ font-family:"IBM Plex Mono",monospace;font-style:normal; font-size:.6875rem;letter-spacing:.16em;color:var(--accent-2); } .menu.is-open .menu__links a{opacity:1;transform:none} .menu.is-open .menu__links a:nth-child(1){transition-delay:.14s} .menu.is-open .menu__links a:nth-child(2){transition-delay:.19s} .menu.is-open .menu__links a:nth-child(3){transition-delay:.24s} .menu.is-open .menu__links a:nth-child(4){transition-delay:.29s} .menu.is-open .menu__links a:nth-child(5){transition-delay:.34s} .menu__foot{ margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:14px; opacity:0;transform:translateY(20px); transition:opacity .55s var(--e-out) .4s,transform .55s var(--e-out) .4s; } .menu.is-open .menu__foot{opacity:1;transform:none} /* ---------- reveal (enabled by JS only) ---------- */ .js [data-reveal]{ opacity:0;transform:translateY(22px); transition:opacity .8s var(--e-out),transform .8s var(--e-out); transition-delay:var(--d,0ms); } .js [data-reveal].on{opacity:1;transform:none} .js [data-reveal="fade"]{transform:none} .js [data-reveal="scale"]{transform:scale(.97)} /* ============================================================ SEQUENCE — the hero and the six-beat process share one pinned stage. The markup's default class (seq--flow) is the flowing, fully readable layout; JS removes it when pinning fits. ============================================================ */ .seq{position:relative;z-index:1;background:var(--bg)} .seq__track{position:relative} .seq__stage{position:sticky;top:0;height:100svh;overflow:hidden} .seq__stage > .hero,.seq__stage > .story{position:absolute;inset:0} /* hero */ .hero{ display:flex;align-items:center;justify-content:center;text-align:center; padding:calc(var(--nav-h) + env(safe-area-inset-top) + 24px) 0 96px; overflow:hidden; } .hero__horizon{ position:absolute;left:50%;top:76%;z-index:0; width:230vw;max-width:3000px;aspect-ratio:1/1;border-radius:50%; transform:translate3d(-50%,0,0); background:#050506; box-shadow: inset 0 60px 140px -40px rgba(30,86,255,.22), 0 -1px 0 0 rgba(150,180,255,.38), 0 -14px 60px -6px rgba(30,86,255,.6), 0 -50px 180px -20px rgba(30,86,255,.42), 0 -120px 360px -60px rgba(30,86,255,.25); } .hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,26px);max-width:980px} .hero__h1{ font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%; font-size:clamp(2.2rem,6.2vw,4.9rem);letter-spacing:-.035em;line-height:1.02;color:#fff; } .hero__h1 .dim{color:#A9B7D9} .hero__lede{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;max-width:52ch} .hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .hero__cue{ position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%); z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px; color:rgba(255,255,255,.6); } .hero__cue i{ display:block;width:1px;height:40px; background:linear-gradient(to bottom,transparent,var(--line-3) 30%,transparent); position:relative;overflow:hidden; } .hero__cue i::after{ content:"";position:absolute;left:0;width:1px;height:14px; background:linear-gradient(to bottom,transparent,#fff); animation:cue 2.2s var(--e-io) infinite; } @keyframes cue{0%{top:-16px}60%,100%{top:42px}} @media (max-width:600px){ .hero__cta{flex-direction:column;align-items:stretch;width:min(100%,320px)} } /* story */ .story{padding-top:calc(var(--nav-h) + env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)} .story .wrap{max-width:1380px} .story__grid{ height:100%;display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(24px,4vw,64px);align-items:center; } .story__copy{display:flex;flex-direction:column;gap:22px;min-width:0} .story__beats{position:relative;height:var(--slot-h,auto)} .beat{position:absolute;inset:0 0 auto 0;display:flex;flex-direction:column;gap:12px} .beat__n{font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.16em;color:var(--accent-2)} .beat__n i{font-style:normal;color:var(--ink-3)} .beat__t{font-size:clamp(1.55rem,2.6vw,2.35rem);line-height:1.04;letter-spacing:-.03em} .beat__p{color:var(--ink-2);font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.55;max-width:44ch} .story__dots{list-style:none;margin:0;padding:0;display:flex;gap:6px} .story__dots li{ flex:1;display:flex;flex-direction:column;gap:8px; font-family:"IBM Plex Mono",monospace;font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); transition:color .3s ease; } .story__dots li::before{content:"";display:block;height:2px;background:var(--line-2);border-radius:2px;transition:background .3s ease} .story__dots li.is-done::before{background:var(--accent-deep)} .story__dots li.is-on{color:var(--ink)} .story__dots li.is-on::before{background:var(--accent-2)} .story__visual{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center} .story__box{position:relative;width:100%;height:100%;min-height:0} .story__visual.is-sized{align-items:center} /* the scene: a fixed design canvas, centred and scaled to fit its box */ .stage{ --sw:760;--sh:520;--k:1; position:absolute;left:50%;top:50%; width:calc(var(--sw) * 1px);height:calc(var(--sh) * 1px); transform:translate(-50%,-50%) scale(var(--k)); transform-origin:center; pointer-events:none; } .stage [data-el]{position:absolute;will-change:transform,opacity;transform-origin:center} /* the site being built */ .win{left:0;top:60px;width:600px;height:400px; background:var(--lt-bg);border-radius:12px;overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4); } .win__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--lt-bg-2);border-bottom:1px solid var(--lt-line)} .win__bar i{width:8px;height:8px;border-radius:50%;background:#D5DAE3;flex:none} .win__bar span{ flex:1;margin-inline:auto;max-width:220px;text-align:center; font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.04em;color:var(--lt-ink-3); background:#fff;border:1px solid var(--lt-line);border-radius:20px;padding:2px 10px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .win__view{position:relative;height:calc(100% - 30px);overflow:hidden;background:#fff} .win__view img{width:100%;height:100%;object-fit:cover;object-position:top} .win__blue{ position:absolute;inset:0; background: linear-gradient(rgba(30,86,255,.12) 1px,transparent 1px) 0 0/24px 24px, linear-gradient(90deg,rgba(30,86,255,.12) 1px,transparent 1px) 0 0/24px 24px, #FAFBFE; } .win__blue::after{ content:"";position:absolute;left:24px;top:24px;right:24px;height:60%; border:1px dashed rgba(30,86,255,.45);border-radius:6px; } .win__blue i{ position:absolute;left:48px;top:64px;display:block;height:10px;border-radius:3px;background:rgba(30,86,255,.18); } .win__blue i:nth-child(1){width:220px} .win__blue i:nth-child(2){top:84px;width:150px} .win__blue i:nth-child(3){top:112px;width:90px;height:22px;background:rgba(30,86,255,.35)} /* scene cards share a light surface so they read as parts of the same product */ .sc{ background:var(--lt-bg);color:var(--lt-ink);border:1px solid var(--lt-line);border-radius:10px; box-shadow:0 22px 48px -22px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.25); padding:14px 16px;display:flex;flex-direction:column;gap:9px; font-size:12px;line-height:1.4; } .sc__k{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-ink-3);display:flex;justify-content:space-between;gap:10px} .sc__k em{font-style:normal;color:var(--accent-deep);border:1px solid rgba(var(--accent-rgb),.35);border-radius:20px;padding:1px 7px;white-space:nowrap} .sc__t{font-family:Archivo,sans-serif;font-weight:700;font-size:14px;letter-spacing:-.02em;line-height:1.15;color:var(--lt-ink)} .sc__row{display:flex;align-items:center;gap:9px;color:var(--lt-ink-2);font-size:11.5px} .sc__row i{width:14px;height:14px;border-radius:4px;border:1px solid #C9D2E2;flex:none;position:relative;background:#fff;transition:background .3s ease,border-color .3s ease} .sc__row i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:0} .sc__row.is-on i{background:var(--accent);border-color:var(--accent)} .sc__row.is-on i::after{opacity:1} .sc__row b{font-weight:600;color:var(--lt-ink)} .sc__row.sc__row--dot i{border-radius:50%;width:8px;height:8px;border:0;background:var(--accent)} .sc--notes{left:430px;top:110px;width:300px} .sc--goals{left:430px;top:100px;width:310px} .sc--chips{left:16px;top:470px;width:420px;flex-direction:row;flex-wrap:wrap;gap:6px;padding:0;background:transparent;border:0;box-shadow:none} .sc--chips span{ font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;color:#fff; background:var(--bg-3);border:1px solid var(--line-3);border-radius:6px;padding:6px 9px; } .sc--chips span b{color:var(--accent-2);font-weight:500} .sc--search{left:300px;top:22px;width:440px;padding:10px 12px;flex-direction:row;align-items:center;gap:10px;border-radius:30px} .sc--search svg{width:14px;height:14px;flex:none;color:var(--lt-ink-3)} .sc--search .q{font-size:12.5px;color:var(--lt-ink);white-space:nowrap;overflow:hidden;position:relative} .sc--search .q::after{content:"";display:inline-block;width:1px;height:13px;background:var(--lt-ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite} @keyframes blink{50%{opacity:0}} .sc--listing{left:300px;top:84px;width:440px} .sc--listing .url{font-size:10.5px;color:var(--lt-ink-2);display:flex;align-items:center;gap:6px} .sc--listing .url i{width:14px;height:14px;border-radius:50%;background:#0A0A0B;flex:none;display:inline-grid;place-items:center;color:#C8A951;font-family:Georgia,serif;font-size:8px;font-style:normal} .sc--listing .tt{color:#1A0DAB;font-size:14px;line-height:1.25;font-weight:500} .sc--listing .ds{font-size:11px;color:var(--lt-ink-2)} .sc--ads{left:470px;top:84px;width:280px} .sc--ads2{left:470px;top:184px;width:280px} .sc__stat{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--lt-ink-2)} .sc__stat b{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#0C7A3E;background:#E7F6EE;border-radius:20px;padding:2px 8px;font-weight:600} .sc--toast{left:440px;top:296px;width:300px;flex-direction:row;align-items:flex-start;gap:10px;padding:11px 13px} .sc--toast2{top:366px} .sc--toast i{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none} .sc--toast b{display:block;font-size:12px;font-weight:700;color:var(--lt-ink);line-height:1.3} .sc--toast span{font-size:10.5px;color:var(--lt-ink-2)} .sc--toast em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--lt-ink-3);margin-left:auto;white-space:nowrap;padding-top:2px} .sc--report{left:380px;top:70px;width:360px} .sc__bars{display:flex;align-items:flex-end;gap:8px;height:74px;padding-top:6px;border-bottom:1px solid var(--lt-line)} .sc__bars i{flex:1;border-radius:3px 3px 0 0;background:var(--accent);height:var(--bh,40%);transform:scaleY(0);transform-origin:bottom;opacity:.9} .sc__bars i:nth-child(odd){background:var(--accent-2)} .sc__legend{display:flex;flex-direction:column;gap:6px} .sc__legend div{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--lt-ink-2)} .sc__legend div span:last-child{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--lt-ink-3)} .sc__note{font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--lt-ink-3);border-top:1px solid var(--lt-line);padding-top:8px} /* phone composition for narrow screens */ @media (max-width:900px){ .story{padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 8px)} .story__grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:18px;align-items:start;padding-bottom:8px} .story__visual{align-items:flex-start} .story__copy{gap:14px} .beat{gap:8px} .beat__t{font-size:clamp(1.35rem,5.6vw,1.9rem)} .beat__p{font-size:.9375rem;line-height:1.5;max-width:none} .story__dots li{font-size:0} .story__dots li::before{height:3px} .stage{--sw:400;--sh:520} .win{left:0;top:16px;width:224px;height:484px;border-radius:30px;border:1px solid rgba(255,255,255,.18);background:#0B0B0D;padding:10px} .win__bar{height:22px;border-radius:14px;background:var(--lt-bg-2);margin:0;padding:0 8px} .win__bar i{display:none} .win__bar span{font-size:8px;max-width:150px} .win__view{height:calc(100% - 22px);border-radius:0 0 20px 20px} .win__blue::after{left:16px;top:20px;right:16px;height:36%} .win__blue i{left:28px;top:44px} .win__blue i:nth-child(1){width:140px}.win__blue i:nth-child(2){top:62px;width:100px}.win__blue i:nth-child(3){top:88px;width:70px} .sc--notes{left:176px;top:96px;width:222px} .sc--goals{left:176px;top:82px;width:222px} .sc--chips{left:176px;top:410px;width:222px} .sc--search{left:150px;top:44px;width:248px} .sc--listing{left:150px;top:100px;width:248px} .sc--ads{left:170px;top:76px;width:228px} .sc--ads2{left:170px;top:172px;width:228px} .sc--toast{left:160px;top:292px;width:238px} .sc--toast2{top:366px} .sc--report{left:150px;top:74px;width:248px} } /* flowing layout: default markup state, no-JS, reduced motion, short viewports */ .seq--flow .seq__track{height:auto !important} .seq--flow .seq__stage{position:static;height:auto;overflow:visible} .seq--flow .seq__stage > .hero,.seq--flow .seq__stage > .story{position:relative;inset:auto} .seq--flow .hero{min-height:100svh;padding-bottom:110px} .seq--flow .hero__horizon{transform:translate3d(-50%,-10%,0)} .seq--flow .hero__in,.seq--flow .hero__cue{opacity:1 !important;transform:none !important} .seq--flow .story{padding-top:clamp(64px,8vw,110px);padding-bottom:var(--sec)} .seq--flow .story__grid{display:block;height:auto} .seq--flow .story__beats{height:auto;display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)} .seq--flow .beat{position:relative;inset:auto;opacity:1 !important;transform:none !important;max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:center} .seq--flow .beat > .beat__n{grid-column:1} .seq--flow .beat > .beat__t,.seq--flow .beat > .beat__p{grid-column:1} .seq--flow .beat__fig{grid-column:2;grid-row:1/span 3;position:relative;width:100%;aspect-ratio:760/520;min-height:0} .seq--flow .beat__fig .stage{pointer-events:none} .seq--flow .story__dots{display:none} .seq--flow .story__visual{height:auto;margin-top:clamp(40px,6vw,72px)} .seq--flow .story__box{aspect-ratio:760/520;height:auto} .seq--flow.seq--figs .story__visual{display:none} .no-js .stage [data-el]:not(.win),.seq--flow:not(.seq--figs) .stage [data-el]:not(.win){display:none} /* without JS the scene is a fluid, static frame around the real screenshot */ .seq--flow:not(.seq--figs) .stage{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none} .seq--flow:not(.seq--figs) .win{position:relative;left:auto;top:auto;width:100%;height:auto;opacity:1;visibility:visible;transform:none} .seq--flow:not(.seq--figs) .win__view{height:auto} .seq--flow:not(.seq--figs) .win__view img{height:auto;clip-path:none} .seq--flow:not(.seq--figs) .story__box{aspect-ratio:auto;height:auto} .no-js .win__blue,.seq--flow:not(.seq--figs) .win__blue{display:none} @media (max-width:900px){ .seq--flow .beat{grid-template-columns:1fr} .seq--flow .beat > .beat__n,.seq--flow .beat > .beat__t,.seq--flow .beat > .beat__p{grid-column:1} .seq--flow .beat__fig{grid-column:1;grid-row:auto;aspect-ratio:400/520;max-width:400px;margin-top:8px} .seq--flow .story__box{aspect-ratio:400/520;max-width:400px;margin-inline:auto} .seq--flow:not(.seq--figs) .win{max-width:280px;margin-inline:auto;padding:8px} } @media (max-height:520px) and (orientation:landscape){ .seq--flow .hero{min-height:0;padding-top:calc(var(--nav-h) + 40px);padding-bottom:80px} } /* ---------- stat strip ---------- */ .stats{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line);border-radius:var(--r-lg); background:var(--bg-2);overflow:hidden; } .stat{padding:clamp(22px,2.6vw,32px);border-right:1px solid var(--line)} .stat:last-child{border-right:0} .stat b{ display:block; font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%; font-size:clamp(2.1rem,3.6vw,3rem);line-height:1;letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin-bottom:10px;color:var(--accent-2); } .stat p{font-size:.9rem;color:var(--ink-2);line-height:1.5} @media (max-width:900px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat:nth-child(2){border-right:0} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)} } @media (max-width:480px){ .stats{grid-template-columns:1fr} .stat{border-right:0;border-bottom:1px solid var(--line)} .stat:last-child{border-bottom:0} } /* ---------- cards ---------- */ .card{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.6vw,32px); overflow:hidden; transition:transform .6s var(--e-out),border-color .5s ease,box-shadow .5s ease; } .card:hover{border-color:var(--line-3);box-shadow:var(--sh-md)} .card__glow{ position:absolute;width:340px;height:340px;border-radius:50%; left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 66%); opacity:0;transition:opacity .5s ease;pointer-events:none; } .card:hover .card__glow{opacity:1} .card > *:not(.card__glow){position:relative} .card__k{color:var(--ink-3)} /* ---------- showcase (real screenshots) ---------- */ .shot{ position:relative;border-radius:12px;overflow:hidden; background:#0A0A0B;border:1px solid var(--line-2); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); } .shot__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-3)} .shot__bar i{width:9px;height:9px;border-radius:50%;background:var(--line-3)} .shot__bar span{ flex:1;min-width:0;text-align:center; font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.04em; color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:4px 12px; max-width:300px;margin-inline:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .shot img{width:100%;height:auto;display:block} .shot--phone{border-radius:26px;padding:8px;background:#111216;max-width:280px;margin-inline:auto} .shot--phone img{border-radius:18px} .shot__cap{font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:12px} .case{ position:relative;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--bg-2);overflow:hidden; } .case__media{ position:relative;padding:clamp(24px,5vw,56px) clamp(20px,5vw,56px) 0; background:radial-gradient(90% 120% at 70% 0%,rgba(var(--accent-rgb),.42),transparent 62%),var(--bg-3); overflow:hidden; } .case__media .shot{border-bottom:0;border-radius:12px 12px 0 0} .case__body{padding:clamp(24px,3.4vw,44px)} .case__cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:start} @media (max-width:900px){.case__cols{grid-template-columns:1fr}} .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)} .fact{display:flex;flex-direction:column;gap:8px} .fact p{font-family:Archivo,sans-serif;font-weight:700;font-size:1.0625rem;letter-spacing:-.012em;line-height:1.25;color:var(--ink)} @media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-2); border:1px solid var(--line-2);border-radius:20px;padding:6px 12px; background:var(--bg-3); } .gallery{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.7fr);gap:clamp(16px,2.4vw,28px);align-items:start} .gallery > *{min-width:0} @media (max-width:900px){.gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gallery > :first-child{grid-column:1/-1}} @media (max-width:600px){.gallery{grid-template-columns:1fr}} /* ---------- steps (contact "what happens next") ---------- */ .steps{display:flex;flex-direction:column} .step{ padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid var(--line); display:grid;grid-template-columns:48px minmax(0,1fr);gap:clamp(12px,2vw,24px); } .step:last-child{border-bottom:1px solid var(--line)} .step__n{font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.1em;color:var(--accent-2);padding-top:4px;font-weight:600} /* ---------- packages ---------- */ .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch} .plan{ display:flex;flex-direction:column;gap:22px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(24px,2.6vw,34px); position:relative;overflow:hidden; transition:transform .6s var(--e-out),border-color .5s ease,box-shadow .5s ease; } .plan:hover{border-color:var(--line-3);box-shadow:var(--sh-md)} .plan--hot{border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5),var(--sh-accent)} .plan__tag{ position:absolute;top:0;right:clamp(24px,2.6vw,34px); font-family:"IBM Plex Mono",monospace;font-size:.5625rem;letter-spacing:.16em; text-transform:uppercase;color:#fff;font-weight:600; padding:6px 12px;border-radius:0 0 var(--r) var(--r); background:var(--accent); } .plan__head{display:flex;flex-direction:column;gap:10px} .plan__head .small{min-height:0} .plan__best{display:flex;flex-direction:column;gap:4px;color:var(--ink);font-weight:500;line-height:1.4} .plan__best .mono{color:var(--accent-2)} .plan__fees{display:grid;gap:10px} .fee{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line)} .fee--build{background:var(--bg-3)} .fee--month{background:rgba(var(--accent-rgb),.09);border-color:rgba(var(--accent-rgb),.3)} .fee__k{font-family:"IBM Plex Mono",monospace;font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .fee--month .fee__k{color:var(--accent-2)} .fee__v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .fee__v b{font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%;font-size:clamp(1.9rem,2.8vw,2.4rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)} .fee--month .fee__v b{font-size:1.5rem;color:var(--accent-2)} .fee__v span{font-size:.8125rem;color:var(--ink-2)} .plan__cols{display:grid;gap:22px} .plan__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .plan__list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:11px;font-size:.9375rem;line-height:1.5;color:var(--ink-2)} .plan__list svg{width:16px;height:16px;margin-top:4px;color:var(--accent-2)} .plan__list li b{color:var(--ink);font-weight:600} .plan__foot{margin-top:auto;padding-top:4px;display:flex;flex-direction:column;gap:12px} @media (max-width:1000px){ .plans{grid-template-columns:1fr} .plan__cols{grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px)} .plan__fees{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .plan__cols{grid-template-columns:1fr} .plan__fees{grid-template-columns:1fr} } .alt{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center; border:1px dashed var(--line-3);border-radius:var(--r-lg); padding:clamp(20px,2.4vw,26px) clamp(20px,2.6vw,30px); background:var(--bg-2); transition:border-color .4s ease,background .4s ease; } .alt:hover{border-color:var(--accent-2)} .alt__price{ font-family:Archivo,sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.03em; color:var(--accent-2);white-space:nowrap;font-variant-numeric:tabular-nums; } @media (max-width:620px){.alt{grid-template-columns:1fr}} .addon{display:flex;flex-direction:column;gap:10px} .addon__top{display:flex;justify-content:space-between;gap:16px;align-items:baseline} .addon__price{font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.06em;color:var(--accent-2);white-space:nowrap} /* ---------- FAQ (native details) ---------- */ .faqs{border-top:1px solid var(--line)} .faq{border-bottom:1px solid var(--line);interpolate-size:allow-keywords} .faq summary{ list-style:none;cursor:pointer;position:relative; padding:22px 44px 22px 0; font-family:Archivo,sans-serif;font-weight:700;font-stretch:106%; font-size:clamp(1.0625rem,1.7vw,1.25rem);letter-spacing:-.018em;line-height:1.3; color:var(--ink);transition:color .35s ease; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--accent-2)} .faq summary::before,.faq summary::after{ content:"";position:absolute;right:6px;top:50%;background:var(--ink-2); transition:transform .45s var(--e-out),background .35s ease; } .faq summary::before{width:14px;height:1.5px;margin-top:-.75px} .faq summary::after{width:1.5px;height:14px;margin-top:-7px;right:12.25px} .faq[open] summary::after{transform:rotate(90deg) scaleX(0)} .faq[open] summary::before{background:var(--accent-2)} .faq__a{padding:0 0 26px;color:var(--ink-2);max-width:70ch;font-size:.9375rem;line-height:1.7} .faq::details-content{ height:0;overflow:clip; transition:height .45s var(--e-out),content-visibility .45s allow-discrete; } .faq[open]::details-content{height:auto} /* ---------- founders ---------- */ .person{ position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:var(--bg-2);display:flex;flex-direction:column; transition:border-color .5s ease,box-shadow .5s ease; } .person:hover{border-color:var(--line-3);box-shadow:var(--sh-md)} .person__mono{ position:relative;aspect-ratio:16/8;display:flex;align-items:flex-end;justify-content:space-between; padding:clamp(18px,2.4vw,26px); background: radial-gradient(70% 90% at 80% 0%,rgba(var(--accent-rgb),.38),transparent 62%), linear-gradient(180deg,var(--bg-3),var(--bg-2)); border-bottom:1px solid var(--line); } .person__mono b{ font-family:Archivo,sans-serif;font-weight:800;font-stretch:120%; font-size:clamp(3.2rem,7vw,5.2rem);letter-spacing:-.06em;line-height:.9; color:var(--ink); } .person__mono .mono{color:var(--accent-2);text-align:right} .person__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:12px} .person__focus{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .loc{ position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:var(--bg-2);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:26px; min-height:360px;justify-content:space-between; } .loc::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(var(--line) 1px,transparent 1px) 0 0/36px 36px, linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/36px 36px; -webkit-mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent 80%); mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent 80%); } .loc > *{position:relative} .loc__pin{display:flex;align-items:center;gap:12px} .loc__pin i{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.25);flex:none} .loc__big{font-family:Archivo,sans-serif;font-weight:800;font-stretch:112%;font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.035em;line-height:1;color:var(--ink)} .loc__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .loc__grid p{color:var(--ink-2);font-size:.9375rem} /* ---------- contact form ---------- */ .split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:start} @media (max-width:900px){.split{grid-template-columns:1fr}} .form{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))} .field{display:flex;flex-direction:column;gap:8px} .field--full{grid-column:1/-1} .field label{font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .field label i{font-style:normal;color:var(--ink-3);text-transform:none;letter-spacing:.04em} .field input,.field select,.field textarea{ width:100%;min-height:50px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r); padding:13px 16px; color:var(--ink); font-family:"IBM Plex Sans",sans-serif;font-size:1rem; transition:border-color .35s ease,background .35s ease,box-shadow .35s ease; } .field textarea{min-height:150px;resize:vertical;line-height:1.6} .field input::placeholder,.field textarea::placeholder{color:var(--ink-3)} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:var(--accent-2);background:var(--bg-3); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18); } .field select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A6ADBA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:42px; } .field select option{background:var(--bg-3);color:var(--ink)} .field [aria-invalid="true"]{border-color:#FF6B6B;box-shadow:0 0 0 4px rgba(255,107,107,.14)} .field__err{font-size:.8125rem;color:#FF8A8A;line-height:1.4} .field__err:empty{display:none} .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} @media (max-width:700px){.form{grid-template-columns:1fr}} .form__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px} .formnote{ display:flex;gap:12px;align-items:flex-start; padding:16px 18px;border-radius:var(--r); background:var(--bg-2);border:1px solid var(--line-2); font-size:.9rem;color:var(--ink-2);line-height:1.6; } .formnote svg{flex:none;margin-top:3px;color:var(--accent-2);width:20px;height:20px} .formnote--ok{border-color:rgba(46,204,113,.4);background:rgba(46,204,113,.08)} .formnote--ok svg{color:#5BE39A} .formnote--err{border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.07)} .formnote--err svg{color:#FF8A8A} .formnote .row{margin-top:10px} .picked{ display:flex;gap:10px;align-items:center;flex-wrap:wrap; padding:12px 14px;border-radius:var(--r); background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.35); font-size:.9rem;color:var(--ink-2); } .picked b{color:var(--ink)} .done{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3vw,40px);border:1px solid rgba(46,204,113,.35);border-radius:var(--r-lg);background:var(--bg-2)} .direct{display:flex;flex-direction:column;gap:14px} .direct a,.direct p{display:flex;align-items:center;gap:12px;color:var(--ink);min-height:44px} .direct p{color:var(--ink-2)} .direct svg{width:20px;height:20px;color:var(--accent-2);flex:none} /* ---------- modal ---------- */ .modal{ border:1px solid var(--line-2);border-radius:var(--r-lg);padding:0; background:var(--bg-2);color:var(--ink); width:min(92vw,640px);max-height:88svh;overflow:auto; } .modal::backdrop{background:rgba(3,3,5,.72);backdrop-filter:blur(6px)} .modal__in{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px} .modal__head{display:flex;justify-content:space-between;align-items:center;gap:16px} .modal__x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-3);cursor:pointer;display:grid;place-items:center;flex:none} .modal__x svg{width:18px;height:18px} .modal__x:hover{border-color:var(--ink)} .modal__grid{display:grid;gap:12px} .modal__item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 16px;padding:14px 0;border-top:1px solid var(--line)} .modal__item .h4{grid-column:2} .modal__item .small{grid-column:2} .modal__k{grid-row:1/span 2;font-family:Archivo,sans-serif;font-weight:800;font-stretch:112%;font-size:1.35rem;letter-spacing:-.03em;color:var(--accent-2);padding-top:2px} .rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:8px 0} .ring{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .ring__c{position:relative;width:84px;height:84px} .ring svg{width:84px;height:84px;transform:rotate(-90deg);display:block} .ring circle{fill:none;stroke-width:8;stroke:var(--line-2)} .ring .ring__v{stroke:var(--accent-2);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:calc(264 * (1 - var(--v,0)))} .ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:Archivo,sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.03em;color:var(--ink);line-height:1} .ring span{font-family:"IBM Plex Mono",monospace;font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} @media (max-width:520px){.rings{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- package cards (home) ---------- */ .pk{ display:flex;flex-direction:column;gap:18px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(22px,2.6vw,30px); transition:border-color .5s ease,box-shadow .5s ease,transform .5s var(--e-out); } .pk:hover{border-color:var(--line-3);box-shadow:var(--sh-md);transform:translateY(-3px)} .pk--hot{border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4)} .pk__top{display:flex;justify-content:space-between;align-items:center;gap:12px} .pk__top .mono{color:var(--accent-2)} .pk__meter{display:flex;gap:4px} .pk__meter i{width:18px;height:4px;border-radius:2px;background:var(--line-2)} .pk__meter i.is-on{background:var(--accent-2)} .pk__t{font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.025em;line-height:1.1;color:var(--ink)} .pk__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .pk__list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;font-size:.9375rem;color:var(--ink-2);line-height:1.45} .pk__list svg{width:16px;height:16px;margin-top:3px;color:var(--accent-2)} .pk .tlink{margin-top:auto} /* ---------- studio strip ---------- */ .strip{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px; padding:clamp(22px,3vw,32px) clamp(22px,3vw,36px); border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2); } /* ---------- CTA band ---------- */ .band{position:relative;overflow:hidden;background:var(--accent);color:#fff} .band::before{ content:"";position:absolute;inset:0; background:radial-gradient(80% 90% at 85% 10%,rgba(255,255,255,.16),transparent 58%), radial-gradient(70% 80% at 10% 100%,rgba(6,18,80,.4),transparent 60%); pointer-events:none; } .band__in{position:relative;z-index:2;padding-block:var(--sec)} .band__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center} .band .h2{color:#fff} .band .lede{color:rgba(255,255,255,.82)} .band__obj{display:flex;justify-content:center} .band__obj .poly{width:min(100%,440px);aspect-ratio:1/1;display:block} .band .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} .band .btn--ghost:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.12)} @media (max-width:900px){ .band__grid{grid-template-columns:1fr} .band__obj .poly{width:min(70vw,320px);margin-inline:auto} } .ctacard{ position:relative;overflow:hidden;border-radius:22px; background:var(--bg-2);border:1px solid var(--line-2); padding:clamp(32px,5vw,72px); } .ctacard__glow{ position:absolute;right:-10%;top:-30%;width:70%;height:160%;pointer-events:none; background: radial-gradient(closest-side at 60% 50%,rgba(30,86,255,.45),transparent 70%), radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.6px) 0 0/14px 14px; -webkit-mask-image:radial-gradient(closest-side at 60% 50%,#000 20%,transparent 80%); mask-image:radial-gradient(closest-side at 60% 50%,#000 20%,transparent 80%); } .ctacard__body{position:relative;z-index:1;max-width:62ch;display:flex;flex-direction:column;gap:20px} /* ---------- footer ---------- */ .foot{background:var(--bg);border-top:1px solid var(--line);padding-block:clamp(52px,6vw,80px) calc(28px + env(safe-area-inset-bottom))} .foot__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,48px)} .foot__col{display:flex;flex-direction:column;gap:10px} .foot__col--brand{gap:16px} .foot__col--brand .small{max-width:34ch} .foot__h{margin-bottom:6px} .foot__col a:not(.brand){color:var(--ink-2);font-size:.9375rem;transition:color .3s ease,transform .4s var(--e-out);width:fit-content;min-height:32px;display:inline-flex;align-items:center} .foot__col a:not(.brand):hover{color:var(--ink);transform:translateX(3px)} .foot__bot{ margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center; } @media (max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot__grid{grid-template-columns:1fr}} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .js [data-reveal]{opacity:1;transform:none} .hero__cue i::after{animation:none;top:12px} .faq::details-content{transition:none} }