/* ============================================================ VAREKAI — DESIGN SYSTEM ============================================================ */ :root{ --ink:#04060b; --ink-2:#070a12; --ink-3:#0a0e18; --surface:rgba(255,255,255,.028); --surface-2:rgba(255,255,255,.05); --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.13); --blue:#2f6bff; --blue-2:#5b93ff; --blue-3:#8fb6ff; --cyan:#3ed9ff; --text:#eef2fa; --muted:#c6d0e3; --muted-2:#9ba7c0; /* accent spectrum */ --violet:#9268ff; --teal:#19dcae; --amber:#ffb547; --rose:#ff6b9d; --lime:#8ee34a; --coral:#ff7a59; --ac:var(--blue-2); --radius:18px; --radius-lg:26px; --ease:cubic-bezier(.22,1,.36,1); --font:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--ink); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} img,svg,canvas{display:block;max-width:100%} ::selection{background:rgba(47,107,255,.35);color:#fff} /* scrollbar */ ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--ink)} ::-webkit-scrollbar-thumb{background:#1b2230;border-radius:10px;border:3px solid var(--ink)} ::-webkit-scrollbar-thumb:hover{background:#2a3345} .wrap{max-width:1200px;margin:0 auto;padding:0 32px} .wrap-wide{max-width:1400px;margin:0 auto;padding:0 32px} /* ---------- ambient layers ---------- */ #grain{ position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.13;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #cursor-glow{ position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1; background:radial-gradient(circle,rgba(47,107,255,.10),transparent 62%); transform:translate(-50%,-50%);transition:opacity .4s;opacity:0; will-change:transform; } #progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:9999; background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 14px rgba(47,107,255,.7); } /* ---------- nav ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:1000; transition:all .5s var(--ease); border-bottom:1px solid transparent; } header.stuck{ background:rgba(4,6,11,.72); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border-bottom-color:var(--line); } nav{display:flex;align-items:center;justify-content:space-between;height:190px;transition:height .5s var(--ease)} header.stuck nav{height:108px} .logo{display:flex;flex-direction:column;align-items:flex-start;gap:9px} /* The artwork carries its own light. A blurred, slowly breathing copy of it sits behind the mark so the rays drift instead of sitting dead still. */ .logo{position:relative} .logo::before{ content:"";position:absolute;left:50%;top:50%;width:150%;height:200%; transform:translate(-50%,-50%);pointer-events:none;z-index:0; /* box is deliberately larger than the image so blur() has room to fall off inside it — a tight box clips the blur and shows a rectangle edge */ background:url("varekai-logo-master.webp") center center no-repeat; background-size:66.7% auto; filter:blur(16px) saturate(1.5) brightness(1.3); opacity:.42;will-change:transform,opacity; animation:logoBreathe 7.5s ease-in-out infinite; } @keyframes logoBreathe{ 0%,100%{opacity:.26;transform:translate(-50%,-50%) scale(.97) rotate(0deg)} 30% {opacity:.80;transform:translate(-50%,-50%) scale(1.11) rotate(3deg)} 62% {opacity:.44;transform:translate(-50%,-50%) scale(1.02) rotate(-2.4deg)} } header.stuck .logo::before{opacity:.3} /* ---- moving light ------------------------------------------------------- The artwork PNG now carries only the mark and a tight bloom; every beam is its own layer so they can travel independently. Three layers, each a pair of opposite beams, rotating about the base of the V at different speeds — two clockwise, one against them — which reads as a slow spiral rather than a sweep. Each pair is 180-deg symmetric, so a half turn loops seamlessly. Light lives in the sprites' ALPHA channel: a blend mode here would composite inside the fixed header's stacking context and paint a black box. */ .lbeams{position:absolute;inset:0;pointer-events:none;z-index:0} .logo::after,.lbeams::before,.lbeams::after{ content:"";position:absolute;left:50.3%;top:56.6%;width:104%;aspect-ratio:1; pointer-events:none;z-index:0;background:center/contain no-repeat; will-change:transform,opacity; } .logo::after {background-image:url("varekai-beam-pair.webp"); animation:spinA 38s linear infinite, pulseA 9s ease-in-out infinite} .lbeams::before{background-image:url("varekai-beam-pair.webp"); animation:spinB 52s linear infinite, pulseB 7s ease-in-out infinite} .lbeams::after {background-image:url("varekai-beam-thin.webp"); animation:spinC 27s linear infinite, pulseC 11s ease-in-out infinite} @keyframes spinA{from{transform:translate(-50%,-50%) rotate(34deg)} to{transform:translate(-50%,-50%) rotate(214deg)}} @keyframes spinB{from{transform:translate(-50%,-50%) rotate(146deg)} to{transform:translate(-50%,-50%) rotate(-34deg)}} @keyframes spinC{from{transform:translate(-50%,-50%) rotate(90deg)} to{transform:translate(-50%,-50%) rotate(270deg)}} @keyframes pulseA{0%,100%{opacity:.58} 50%{opacity:1}} @keyframes pulseB{0%,100%{opacity:.92} 45%{opacity:.48}} @keyframes pulseC{0%,100%{opacity:.42} 55%{opacity:.86}} header.stuck .logo::after,header.stuck .lbeams::before,header.stuck .lbeams::after{filter:brightness(.55)} .logo-mark{height:168px;width:auto;flex:none;position:relative;z-index:1;transition:height .5s var(--ease),transform .5s var(--ease); filter:drop-shadow(0 6px 24px rgba(4,6,11,.55))} header.stuck .logo-mark{height:92px} .logo:hover .logo-mark{transform:scale(1.04)} .logo-sub{ font-size:.63rem;font-weight:700;letter-spacing:.26em;white-space:nowrap; background:linear-gradient(95deg,#ffffff 0%,#cfe0ff 45%,var(--cyan) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; transition:font-size .5s var(--ease); } header.stuck .logo-sub{font-size:.55rem} .nav-links{display:flex;gap:6px;list-style:none} .nav-links a{ display:block;padding:9px 15px;border-radius:9px;font-size:.9rem;font-weight:500; color:var(--muted);transition:.28s var(--ease);position:relative; } .nav-links a:hover{color:var(--text);background:var(--surface-2)} .nav-links li:nth-child(1) a:hover{color:var(--teal)} .nav-links li:nth-child(2) a:hover{color:var(--cyan)} .nav-links li:nth-child(3) a:hover{color:var(--violet)} .nav-links li:nth-child(4) a:hover{color:var(--amber)} .nav-links li:nth-child(5) a:hover{color:var(--coral)} .nav-links li:nth-child(6) a:hover{color:var(--rose)} .nav-right{display:flex;align-items:center;gap:14px} /* ---------- buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 24px;border-radius:11px;font-size:.92rem;font-weight:600;letter-spacing:-.01em; border:1px solid transparent;cursor:pointer;overflow:hidden; transition:.35s var(--ease);white-space:nowrap; } .btn svg{width:16px;height:16px;flex:none} .btn-primary{ background:linear-gradient(135deg,var(--blue) 0%,#4a7fff 55%,var(--blue-2) 100%); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 26px -8px rgba(47,107,255,.75); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 16px 40px -10px rgba(47,107,255,.9)} .btn-primary::after{ content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 50%,transparent 75%); transform:translateX(-120%);transition:transform .8s var(--ease); } .btn-primary:hover::after{transform:translateX(120%)} .btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--text);backdrop-filter:blur(10px)} .btn-ghost:hover{background:var(--surface-2);border-color:rgba(91,147,255,.55);transform:translateY(-2px)} .btn-lg{padding:16px 30px;font-size:1rem;border-radius:13px} /* ---------- shared section chrome ---------- */ section{position:relative;z-index:2} .sec{padding:82px 0} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ac,var(--blue-3));margin-bottom:16px; } .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--ac,var(--blue-2)))} .sec-head{max-width:720px;margin-bottom:44px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head.center .eyebrow::before{display:none} h2{ font-size:clamp(2.1rem,4.4vw,3.35rem);font-weight:680;letter-spacing:-.035em;line-height:1.08; } .sec-head p{color:var(--muted);font-size:1.05rem;margin-top:14px;max-width:620px} .sec-head.center p{margin-left:auto;margin-right:auto} .grad-text{background:linear-gradient(100deg,var(--blue-2) 0%,var(--cyan) 45%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* tinted section surfaces */ .sec.tint{ background: radial-gradient(1100px 460px at 15% -5%,color-mix(in srgb,var(--ac) 13%,transparent),transparent 62%), radial-gradient(900px 420px at 88% 105%,color-mix(in srgb,var(--ac) 9%,transparent),transparent 60%), var(--ink-2); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .sec.wash::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 400px at 82% 0%,color-mix(in srgb,var(--ac) 9%,transparent),transparent 60%), radial-gradient(700px 360px at 8% 92%,color-mix(in srgb,var(--blue) 8%,transparent),transparent 62%); } .sec.wash{isolation:isolate} /* colored divider between sections */ .sec.tint::after{ content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px; width:min(520px,60%);height:1px; background:linear-gradient(90deg,transparent,var(--ac),transparent);opacity:.55; } /* reveal */ .rv{opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .rv.in{opacity:1;transform:none} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:186px 0 74px;overflow:hidden} #hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1} /* aurora layer */ .aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .aurora i{ position:absolute;display:block;border-radius:50%;filter:blur(110px);opacity:.30; mix-blend-mode:screen;will-change:transform; } .aurora i:nth-child(1){width:60vw;height:60vw;top:-22%;right:-12%; background:radial-gradient(circle,rgba(47,107,255,.75),transparent 68%);animation:au1 34s ease-in-out infinite} .aurora i:nth-child(2){width:48vw;height:48vw;top:12%;left:-14%; background:radial-gradient(circle,rgba(62,217,255,.42),transparent 68%);animation:au2 44s ease-in-out infinite} .aurora i:nth-child(3){width:52vw;height:52vw;bottom:-26%;left:26%; background:radial-gradient(circle,rgba(122,86,255,.34),transparent 70%);animation:au3 52s ease-in-out infinite} @keyframes au1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,5%) scale(1.08)}} @keyframes au2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.10)}} @keyframes au3{0%,100%{transform:translate(0,0) scale(1.03)}50%{transform:translate(-5%,-6%) scale(.95)}} /* fade mesh into next section + keep headline legible */ .hero-fade{position:absolute;inset:0;z-index:3;pointer-events:none; background: linear-gradient(to bottom,rgba(4,6,11,.30) 0%,transparent 22%,transparent 74%,var(--ink) 99%), linear-gradient(to right,rgba(4,6,11,.80) 0%,rgba(4,6,11,.30) 38%,transparent 62%);} .hero .wrap{position:relative;z-index:4} .pill{ display:inline-flex;align-items:center;gap:10px;padding:8px 17px 8px 11px;border-radius:100px; background:rgba(47,107,255,.09);border:1px solid rgba(91,147,255,.3); font-size:.82rem;font-weight:550;color:var(--blue-3);backdrop-filter:blur(10px); } .dot{width:7px;height:7px;border-radius:50%;background:#3ee88a;box-shadow:0 0 0 0 rgba(62,232,138,.7);animation:pulse 2.2s infinite} @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(62,232,138,0)}100%{box-shadow:0 0 0 0 rgba(62,232,138,0)}} .kicker{ display:inline-block;margin-left:14px;font-size:.72rem;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--muted-2);vertical-align:middle; } h1{ font-size:clamp(2.9rem,7.4vw,6rem);font-weight:700;letter-spacing:-.055em;line-height:.94; margin:24px 0 0; } /* the colour washes through the letters, left to right — one line at a time */ h1 .hl{ display:block;width:fit-content; background-image:linear-gradient(100deg, var(--ac) 0%, var(--ac) 30%, #ffffff 52%, #ffffff 100%); background-size:300% 100%; background-position:100% 0; -webkit-background-clip:text;background-clip:text;color:transparent; animation:wash 1.3s linear forwards; } /* delays are exactly cumulative — each line picks up the instant the last finishes */ h1 .hl:nth-child(1){animation-delay:.4s} h1 .hl:nth-child(2){animation-delay:1.7s} h1 .hl:nth-child(3){animation-delay:3.0s} @keyframes wash{to{background-position:0 0}} .hero-sub{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);max-width:600px;margin-top:24px;line-height:1.6} .hero-cta{display:flex;flex-wrap:wrap;gap:15px;margin-top:34px} .hero-note{margin-top:22px;font-size:.85rem;color:var(--muted-2);display:flex;align-items:center;gap:8px} .hero-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px} .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px} .hstat{ position:relative;padding:22px 24px;border-radius:16px;overflow:hidden; background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 12%,transparent),var(--surface)); border:1px solid color-mix(in srgb,var(--ac) 26%,transparent); backdrop-filter:blur(12px);transition:.4s var(--ease); } .hstat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ac);opacity:.75} .hstat:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-3px); box-shadow:0 14px 40px -18px color-mix(in srgb,var(--ac) 80%,transparent)} .hstat-ico{ width:34px;height:34px;border-radius:10px;margin-bottom:14px; display:flex;align-items:center;justify-content:center;color:var(--ac); background:color-mix(in srgb,var(--ac) 16%,transparent); border:1px solid color-mix(in srgb,var(--ac) 30%,transparent); } .hstat-ico svg{width:17px;height:17px} .hstat h4{font-size:.95rem;font-weight:640;letter-spacing:-.015em;color:var(--text);margin-bottom:2px} .hstat b{display:block;font-size:1.6rem;font-weight:660;letter-spacing:-.03em;margin-bottom:7px; background:linear-gradient(170deg,#fff 20%,var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent} .hstat span{font-size:.79rem;color:var(--muted);letter-spacing:.01em;line-height:1.5;display:block} .scroll-hint{ position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:5; display:flex;flex-direction:column;align-items:center;gap:9px; font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2); } .mouse{width:22px;height:36px;border:1px solid var(--line-2);border-radius:12px;position:relative} .mouse::after{content:"";position:absolute;top:7px;left:50%;width:3px;height:6px;border-radius:2px; background:var(--blue-2);transform:translateX(-50%);animation:wheel 1.9s infinite var(--ease)} @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}} /* ============================================================ MARQUEE ============================================================ */ .marquee{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:20px 0;overflow:hidden;position:relative;background:var(--ink-2); } .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:180px;z-index:2;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)} .marquee::after{right:0;background:linear-gradient(-90deg,var(--ink-2),transparent)} .mq-track{display:flex;gap:56px;width:max-content;animation:slide 42s linear infinite} .marquee:hover .mq-track{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .mq-item{display:flex;align-items:center;gap:11px;font-size:.92rem;font-weight:550;color:var(--muted);white-space:nowrap;transition:color .3s} .mq-item svg{width:18px;height:18px;color:var(--ac,var(--blue-2));opacity:.9} .mq-item:hover{color:var(--ac,var(--blue-2))} /* ============================================================ VOICE AGENT SPOTLIGHT ============================================================ */ .voice{position:relative;overflow:hidden;padding:76px 0} .voice-card{ position:relative;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--line-2); background: radial-gradient(900px 400px at 85% 20%,rgba(47,107,255,.18),transparent 62%), linear-gradient(150deg,#0b1220,#070a12 70%); padding:48px 52px; display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center; } .voice-card::before{ content:"";position:absolute;inset:0; background:radial-gradient(600px 300px at 20% 100%,rgba(62,217,255,.09),transparent 65%); } .voice-card > *{position:relative;z-index:2} .live-badge{ display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px; background:rgba(62,232,138,.11);border:1px solid rgba(62,232,138,.32); font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5df0a3; } .voice-card h3{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:670;letter-spacing:-.035em;line-height:1.1;margin:22px 0 18px} .voice-card p{color:var(--muted);font-size:1.05rem;max-width:460px} .voice-feats{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 32px} .chip{padding:7px 14px;border-radius:9px;font-size:.82rem;color:var(--text); background:color-mix(in srgb,var(--ac,var(--blue-2)) 13%,transparent); border:1px solid color-mix(in srgb,var(--ac,var(--blue-2)) 32%,transparent);transition:.3s var(--ease)} .chip:hover{background:color-mix(in srgb,var(--ac,var(--blue-2)) 24%,transparent);transform:translateY(-1px)} .phone{ position:relative;border-radius:22px;border:1px solid var(--line-2); background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01)); padding:32px 30px;backdrop-filter:blur(16px); } .phone-top{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--line)} .avatar{ width:52px;height:52px;border-radius:50%;flex:none; background:linear-gradient(135deg,var(--blue),var(--cyan)); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:#fff; box-shadow:0 0 0 6px rgba(47,107,255,.12); } .phone-top b{display:block;font-size:1.02rem;font-weight:600} .phone-top span{font-size:.8rem;color:var(--muted-2)} .wave{display:flex;align-items:center;justify-content:center;gap:4px;height:74px;margin:24px 0} .wave i{ display:block;width:3px;height:18px;border-radius:3px; background:linear-gradient(180deg,var(--cyan),var(--blue)); animation:bar 1.25s ease-in-out infinite; } @keyframes bar{0%,100%{height:9px;opacity:.45}50%{height:52px;opacity:1}} .transcript{font-size:.86rem;color:var(--muted);text-align:center;min-height:44px;line-height:1.5} .transcript b{color:var(--text);font-weight:500} /* ============================================================ SERVICES BENTO ============================================================ */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px} .card{ position:relative;border-radius:var(--radius);border:1px solid var(--line); background:linear-gradient(165deg,rgba(255,255,255,.042),rgba(255,255,255,.012)); padding:30px 28px;overflow:hidden; transition:transform .5s var(--ease),border-color .4s,background .4s; } .card::before{ content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s; background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--ac) 22%,transparent),transparent 46%); } /* colored top edge */ .card::after{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--ac),transparent); opacity:.32;transition:opacity .45s; } .card:hover::after{opacity:1} .card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 45%,transparent); box-shadow:0 18px 50px -22px color-mix(in srgb,var(--ac) 60%,transparent)} .card:hover::before{opacity:1} .card > *{position:relative;z-index:2} .card-ico{ width:48px;height:48px;border-radius:14px;margin-bottom:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 30%,transparent), color-mix(in srgb,var(--ac) 6%,transparent)); border:1px solid color-mix(in srgb,var(--ac) 34%,transparent); display:flex;align-items:center;justify-content:center;color:var(--ac); transition:.5s var(--ease); box-shadow:0 6px 20px -8px color-mix(in srgb,var(--ac) 55%,transparent); } .card:hover .card-ico{transform:scale(1.09) rotate(-5deg); border-color:color-mix(in srgb,var(--ac) 62%,transparent); box-shadow:0 10px 30px -8px color-mix(in srgb,var(--ac) 75%,transparent)} .card-ico svg{width:22px;height:22px} .card h3{font-size:1.16rem;font-weight:620;letter-spacing:-.02em;margin-bottom:11px} .card p{color:var(--muted);font-size:.93rem;line-height:1.62} .card .more{ display:inline-flex;align-items:center;gap:7px;margin-top:20px; font-size:.87rem;font-weight:600;color:var(--ac);transition:gap .3s var(--ease); } .card:hover .more{gap:12px} .c-3{grid-column:span 3} .c-2{grid-column:span 2} .c-6{grid-column:span 6} .card-feature{ grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center; background:linear-gradient(150deg,rgba(47,107,255,.10),rgba(255,255,255,.012)); } /* sms demo */ .sms{display:flex;flex-direction:column;gap:9px} .sms .hdr{font-size:.7rem;color:var(--muted-2);font-family:var(--mono);letter-spacing:.02em;margin-bottom:3px} .msg{ max-width:88%;padding:9px 13px;border-radius:14px;font-size:.79rem;line-height:1.45; opacity:0;transform:translateY(8px);animation:pop .5s var(--ease) forwards; } .msg.them{background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start;color:var(--muted)} .msg.us{background:linear-gradient(135deg,var(--blue),#4a7fff);border-bottom-right-radius:4px;align-self:flex-end;color:#fff} @keyframes pop{to{opacity:1;transform:none}} /* ============================================================ SERVICE DETAIL PANEL ============================================================ */ .card{cursor:pointer} .card .more{background:none;border:none;padding:0;font-family:inherit;cursor:pointer} #scrim{ position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center; padding:28px;background:rgba(2,4,9,.80);backdrop-filter:blur(14px); opacity:0;visibility:hidden;transition:opacity .38s var(--ease),visibility .38s; } #scrim.on{opacity:1;visibility:visible} .panel{ position:relative;width:min(880px,100%);max-height:88vh;overflow-y:auto; border-radius:24px;border:1px solid color-mix(in srgb,var(--ac) 34%,var(--line-2)); background: radial-gradient(900px 380px at 82% -8%,color-mix(in srgb,var(--ac) 17%,transparent),transparent 62%), linear-gradient(158deg,#0c1322,#06090f 72%); box-shadow:0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb,var(--ac) 12%,transparent); transform:translateY(26px) scale(.97);opacity:0; transition:transform .45s var(--ease),opacity .45s var(--ease); } #scrim.on .panel{transform:none;opacity:1} .panel::-webkit-scrollbar{width:8px} .panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px} .panel-hd{padding:38px 44px 26px;border-bottom:1px solid var(--line);position:relative} .panel-ico{ width:56px;height:56px;border-radius:16px;margin-bottom:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 32%,transparent), color-mix(in srgb,var(--ac) 7%,transparent)); border:1px solid color-mix(in srgb,var(--ac) 38%,transparent); display:flex;align-items:center;justify-content:center;color:var(--ac); box-shadow:0 8px 26px -10px color-mix(in srgb,var(--ac) 70%,transparent); } .panel-ico svg{width:26px;height:26px} .panel-hd h3{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:680;letter-spacing:-.032em;line-height:1.12} .panel-hd p{color:var(--muted);font-size:1.02rem;margin-top:14px;max-width:600px;line-height:1.65} .panel-close{ position:absolute;top:26px;right:26px;width:38px;height:38px;border-radius:11px; border:1px solid var(--line-2);background:var(--surface);color:var(--muted); cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s var(--ease); } .panel-close:hover{color:var(--text);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);transform:rotate(90deg)} .panel-close svg{width:16px;height:16px} .panel-bd{padding:32px 44px 40px;display:grid;grid-template-columns:1.25fr .75fr;gap:38px} .panel-bd h4{ font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ac); font-weight:700;margin-bottom:16px; } .incl{list-style:none;display:flex;flex-direction:column;gap:11px} .incl li{display:flex;gap:11px;font-size:.94rem;color:var(--muted);line-height:1.55} .incl li svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--ac)} .meta{display:flex;flex-direction:column;gap:16px} .meta-i{padding:16px 18px;border-radius:13px;background:var(--surface);border:1px solid var(--line)} .meta-i span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px;font-weight:700} .meta-i b{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;display:block;line-height:1.4} .meta-i.quote-cta{background:color-mix(in srgb,var(--ac) 9%,transparent);border-color:color-mix(in srgb,var(--ac) 26%,transparent)} .meta-i small{display:block;font-size:.74rem;color:var(--muted-2);margin-top:6px;line-height:1.45;font-weight:400} .panel-ft{ padding:24px 44px;border-top:1px solid var(--line);display:flex; align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; background:rgba(255,255,255,.016); } .panel-ft p{font-size:.88rem;color:var(--muted-2);max-width:420px} @media(max-width:760px){ #scrim{padding:0;align-items:flex-end} .panel{max-height:92vh;border-radius:22px 22px 0 0;width:100%} .panel-hd{padding:30px 24px 22px} .panel-bd{padding:26px 24px 30px;grid-template-columns:1fr;gap:28px} .panel-ft{padding:20px 24px;flex-direction:column;align-items:stretch} .panel-ft .btn{width:100%} } /* ============================================================ WORK TEASER (homepage) ============================================================ */ .tease{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .wk{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); transition:transform .5s var(--ease),border-color .4s,box-shadow .4s} .wk:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 45%,transparent); box-shadow:0 24px 56px -28px color-mix(in srgb,var(--ac) 80%,transparent)} .wk-shot{overflow:hidden;background:#0a0e16;border-bottom:1px solid var(--line)} .wk-shot img{width:100%;height:auto;display:block;transition:transform .7s var(--ease)} .wk:hover .wk-shot img{transform:scale(1.03)} .wk-body{padding:20px 22px 24px} .wk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .wk-tag{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)} .wk-badge{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:6px;color:var(--muted-2); background:rgba(255,255,255,.05);border:1px solid var(--line);white-space:nowrap} .wk h3{font-size:1.08rem;font-weight:640;letter-spacing:-.022em;margin-bottom:7px} .wk-angle{color:var(--muted);font-size:.9rem;line-height:1.55} .wk-more{display:flex;justify-content:center;margin-top:36px} .concept-line{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:7px 14px;border-radius:8px; background:color-mix(in srgb,var(--amber) 9%,transparent); border:1px solid color-mix(in srgb,var(--amber) 28%,transparent); font-size:.79rem;color:var(--muted)} .concept-line svg{width:15px;height:15px;color:var(--amber);flex:none} @media(max-width:1080px){.tease{grid-template-columns:1fr}} /* ============================================================ PROCESS TIMELINE ============================================================ */ .timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px} .timeline::before{ content:"";position:absolute;top:29px;left:6%;right:6%;height:1px;background:var(--line); } .tl-fill{position:absolute;top:29px;left:6%;height:1px;width:0; background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 12px rgba(47,107,255,.8); transition:width 1.6s var(--ease)} .step{position:relative;text-align:left} .step-node{ width:58px;height:58px;border-radius:50%;position:relative;z-index:3; background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 26%,var(--ink-2)),var(--ink-2)); border:1px solid color-mix(in srgb,var(--ac) 40%,transparent); display:flex;align-items:center;justify-content:center;color:var(--ac); margin-bottom:18px;transition:.5s var(--ease); box-shadow:0 8px 26px -12px color-mix(in srgb,var(--ac) 85%,transparent); } .step:hover .step-node{border-color:var(--ac);transform:scale(1.07); box-shadow:0 0 0 7px color-mix(in srgb,var(--ac) 12%,transparent), 0 12px 34px -12px color-mix(in srgb,var(--ac) 90%,transparent)} .step-node svg{width:22px;height:22px} .step-n{font-family:var(--mono);font-size:.72rem;color:var(--ac);letter-spacing:.1em} .step h3{font-size:1.22rem;font-weight:620;letter-spacing:-.02em;margin:8px 0 11px} .step p{color:var(--muted);font-size:.92rem;max-width:250px;line-height:1.6} /* ============================================================ ROI CALCULATOR ============================================================ */ .calc{ display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg); border:1px solid var(--line-2);overflow:hidden; background:linear-gradient(150deg,#0b1120,#070a12); } .calc-in{padding:42px 42px;border-right:1px solid var(--line)} .calc-out{ padding:42px 42px;position:relative; background:radial-gradient(700px 400px at 70% 15%,rgba(47,107,255,.15),transparent 65%); } .field{margin-bottom:26px} .field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;font-weight:550;margin-bottom:14px} .field .val{font-family:var(--mono);font-size:1rem;color:var(--blue-2);font-weight:600} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px; background:var(--line-2);outline:none;cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:19px;height:19px;border-radius:50%; background:linear-gradient(135deg,#fff,#cfe0ff);border:3px solid var(--blue); box-shadow:0 3px 14px rgba(47,107,255,.65);cursor:grab;transition:transform .2s; } input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)} input[type=range]::-moz-range-thumb{ width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--blue);cursor:grab; } .calc-group{ font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--muted-2);margin-bottom:22px;display:flex;align-items:center;gap:11px; } .calc-group::after{content:"";flex:1;height:1px;background:var(--line)} .calc-group:not(:first-child){margin-top:38px} .assump{font-size:.74rem;color:var(--muted-2);margin:-12px 0 20px;line-height:1.45; padding-left:11px;border-left:2px solid color-mix(in srgb,var(--amber) 45%,transparent)} .calc-out h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px} .permo{font-size:.32em;font-weight:600;letter-spacing:0;color:var(--muted)} .headline-sub{font-size:.8rem;color:var(--muted-2);margin-top:12px;line-height:1.5;max-width:400px} .split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px} .split-i span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:7px;line-height:1.35} .split-i b{font-size:1.32rem;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ac)} .deriv{display:block;font-style:normal;font-family:var(--mono);font-size:.72rem; color:var(--muted-2);margin-top:5px;letter-spacing:-.01em} .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.07);margin-top:10px;overflow:hidden} .bar i{display:block;height:100%;width:0;border-radius:4px;transition:width .55s var(--ease); background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 45%,transparent),var(--ac)); box-shadow:0 0 12px color-mix(in srgb,var(--ac) 70%,transparent)} .big-num{ font-size:clamp(2.8rem,5.2vw,4.1rem);font-weight:700;letter-spacing:-.05em;line-height:1; background:linear-gradient(115deg,#fff 8%,var(--amber) 42%,#ffd98a 62%,var(--cyan) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .calc-rows{margin-top:36px;border-top:1px solid var(--line);padding-top:26px} .calc-row{display:flex;justify-content:space-between;padding:13px 0;font-size:.93rem;border-bottom:1px solid rgba(255,255,255,.045)} .calc-row span{color:var(--muted)} .calc-row b{font-weight:600;font-family:var(--mono);font-size:.95rem} .calc-note{font-size:.76rem;color:var(--muted-2);margin-top:22px;line-height:1.55} /* ============================================================ TESTIMONIALS ============================================================ */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .quote{ border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px; background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); display:flex;flex-direction:column;transition:.5s var(--ease);position:relative;overflow:hidden; } .quote:hover{border-color:color-mix(in srgb,var(--ac) 45%,transparent);transform:translateY(-5px); box-shadow:0 18px 50px -24px color-mix(in srgb,var(--ac) 75%,transparent)} .quote::before{ content:"“";position:absolute;top:-22px;right:18px;font-size:9rem;line-height:1; color:color-mix(in srgb,var(--ac) 13%,transparent);font-family:Georgia,serif;pointer-events:none; } .quote::after{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--ac),transparent);opacity:.5} .stars{display:flex;gap:3px;margin-bottom:20px} .stars svg{width:15px;height:15px;color:#ffc861} .quote p{font-size:1.02rem;line-height:1.65;flex:1;letter-spacing:-.005em} .who{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .who .ini{ width:42px;height:42px;border-radius:11px;flex:none; background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 38%,transparent), color-mix(in srgb,var(--ac) 8%,transparent)); border:1px solid color-mix(in srgb,var(--ac) 34%,transparent); display:flex;align-items:center;justify-content:center;font-weight:650;font-size:.9rem;color:var(--ac); } .who b{display:block;font-size:.94rem;font-weight:600} .who span{font-size:.82rem;color:var(--muted-2)} /* ============================================================ FAQ ============================================================ */ .faq{max-width:840px;margin:0 auto} .q{border-bottom:1px solid var(--line)} .q button{ width:100%;background:none;border:none;cursor:pointer;text-align:left; padding:21px 46px 21px 0;font-size:1.08rem;font-weight:570;letter-spacing:-.015em; position:relative;transition:color .3s; } .q button:hover{color:var(--blue-2)} .q button::after{ content:"";position:absolute;right:8px;top:50%;width:11px;height:11px; border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted); transform:translateY(-70%) rotate(45deg);transition:.4s var(--ease); } .q.open button::after{transform:translateY(-20%) rotate(-135deg);border-color:var(--blue-2)} .q .a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)} .q .a p{color:var(--muted);padding:0 60px 22px 0;font-size:.97rem;line-height:1.7} /* ============================================================ CTA + FORM ============================================================ */ .cta-sec{padding:84px 0} .cta-box{ border-radius:var(--radius-lg);border:1px solid var(--line-2);overflow:hidden; background: radial-gradient(900px 420px at 20% 0%,rgba(47,107,255,.22),transparent 60%), radial-gradient(700px 400px at 90% 100%,rgba(62,217,255,.12),transparent 62%), linear-gradient(160deg,#0b1220,#06090f); display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:50px 52px;align-items:start; } .cta-box h2{font-size:clamp(1.9rem,3.4vw,2.7rem)} .cta-box > div > p{color:var(--muted);font-size:1.06rem;margin-top:18px;max-width:440px} .cta-contact{margin-top:34px;display:flex;flex-direction:column;gap:14px} .cline{display:flex;align-items:center;gap:12px;font-size:.98rem;color:var(--muted);transition:color .3s} .cline:hover{color:var(--blue-2)} .cline svg{width:17px;height:17px;color:var(--blue-2);flex:none} form{display:flex;flex-direction:column;gap:14px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} input[type=text],input[type=email],input[type=tel],textarea,select{ width:100%;padding:14px 16px;border-radius:11px; background:rgba(255,255,255,.035);border:1px solid var(--line); font-size:.93rem;transition:.3s var(--ease); } input:focus,textarea:focus,select:focus{ outline:none;border-color:var(--blue);background:rgba(47,107,255,.07); box-shadow:0 0 0 4px rgba(47,107,255,.11); } input::placeholder,textarea::placeholder{color:var(--muted-2)} textarea{resize:vertical;min-height:96px;font-family:var(--font)} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d97ad' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px} .form-note{font-size:.78rem;color:var(--muted-2);text-align:center;margin-top:4px} /* honeypot — off-screen, never seen by a human */ .hp{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;width:0!important} input:invalid.touched,textarea:invalid.touched{border-color:var(--rose);box-shadow:0 0 0 4px rgba(255,107,157,.10)} #frm-btn[disabled]{opacity:.65;cursor:wait} #frm-btn .spin{ width:15px;height:15px;border-radius:50%;flex:none; border:2px solid rgba(255,255,255,.35);border-top-color:#fff; animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .sent{ display:none;padding:26px 24px;border-radius:14px;text-align:center; background:rgba(62,232,138,.08);border:1px solid rgba(62,232,138,.30); } .sent svg{width:34px;height:34px;color:#5df0a3;margin:0 auto 14px} .sent b{display:block;font-size:1.08rem;font-weight:620;color:#5df0a3;margin-bottom:7px} .sent span{display:block;font-size:.9rem;color:var(--muted);line-height:1.55} .failed{ display:none;padding:18px 20px;border-radius:12px;font-size:.9rem;line-height:1.55; background:rgba(255,107,157,.08);border:1px solid rgba(255,107,157,.30);color:#ffa8c4; } .failed a{color:#fff;text-decoration:underline;text-underline-offset:2px} /* ============================================================ FOOTER ============================================================ */ footer{border-top:1px solid var(--line);padding:56px 0 28px;background:var(--ink-2)} .f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px} .f-about p{color:var(--muted);font-size:.92rem;margin:20px 0 24px;max-width:290px;line-height:1.65} .socials{display:flex;gap:10px} .socials a{ width:38px;height:38px;border-radius:10px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--muted-2);transition:.35s var(--ease); } .socials a:nth-child(1){--ac:var(--blue-2)}.socials a:nth-child(2){--ac:var(--cyan)} .socials a:nth-child(3){--ac:var(--violet)}.socials a:nth-child(4){--ac:var(--teal)} .socials a:hover{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-3px); background:color-mix(in srgb,var(--ac) 12%,transparent); box-shadow:0 8px 24px -10px color-mix(in srgb,var(--ac) 85%,transparent)} .socials svg{width:16px;height:16px} .f-col h5{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px;font-weight:700} .f-col ul{list-style:none;display:flex;flex-direction:column;gap:12px} .f-col a{color:var(--muted);font-size:.92rem;transition:.3s} .f-col a:hover{color:var(--ac)} .f-grid .f-col:nth-of-type(1){--ac:var(--teal)} .f-grid .f-col:nth-of-type(2){--ac:var(--violet)} .f-grid .f-col:nth-of-type(3){--ac:var(--amber)} .f-bot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid var(--line); font-size:.84rem;color:var(--muted-2);gap:20px;flex-wrap:wrap} .f-bot .lk{display:flex;gap:26px} /* ============================================================ RESPONSIVE ============================================================ */ .burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line); background:var(--surface);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px} .burger i{display:block;width:16px;height:1.5px;background:var(--text);border-radius:2px;transition:.35s var(--ease)} .burger.on i:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .burger.on i:nth-child(2){opacity:0} .burger.on i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .mobile-menu{ position:fixed;inset:0 0 0 auto;width:min(360px,86vw);z-index:999; background:rgba(6,9,16,.97);backdrop-filter:blur(24px);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .5s var(--ease); padding:110px 32px 40px;display:flex;flex-direction:column;gap:8px; } .mobile-menu.on{transform:none} .mobile-menu a{padding:15px 4px;font-size:1.1rem;font-weight:550;border-bottom:1px solid var(--line)} .mobile-menu .btn{margin-top:24px} @media(max-width:1080px){ .voice-card{grid-template-columns:1fr;padding:48px 38px;gap:40px} .calc{grid-template-columns:1fr} .calc-in{border-right:none;border-bottom:1px solid var(--line)} .cta-box{grid-template-columns:1fr;gap:44px;padding:48px 38px} .c-3,.card-feature{grid-column:span 6} .c-2{grid-column:span 3} .quotes{grid-template-columns:1fr} .timeline{grid-template-columns:1fr 1fr;gap:44px} .timeline::before,.tl-fill{display:none} .f-grid{grid-template-columns:1fr 1fr;gap:36px} .about-grid{grid-template-columns:1fr!important;gap:48px!important} .hero-stats{max-width:none} } @media(max-width:760px){ .wrap,.wrap-wide{padding:0 22px} .sec{padding:62px 0} .nav-links,.nav-right .btn{display:none} .burger{display:flex} h1{font-size:clamp(2.9rem,13vw,4.4rem)} .hero{min-height:auto;padding:130px 0 80px} .hero-stats{grid-template-columns:1fr;gap:10px} .hstat{padding:16px 18px} .hstat b{font-size:1.4rem} /* the logo lockup already shows the tagline on mobile — don't repeat it */ .kicker{display:none} .bento{grid-template-columns:1fr;gap:14px} .c-3,.c-2,.c-6,.card-feature{grid-column:span 1} .card-feature{grid-template-columns:1fr} .timeline{grid-template-columns:1fr;gap:34px} .calc-in,.calc-out{padding:36px 26px} .voice-card,.cta-box{padding:38px 26px} .row2{grid-template-columns:1fr} .f-grid{grid-template-columns:1fr} .f-bot{flex-direction:column;align-items:flex-start;gap:14px} .scroll-hint{display:none} #cursor-glow{display:none} .card{padding:28px 24px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} .rv{opacity:1;transform:none} } .filters{display:flex;flex-wrap:wrap;gap:9px} .filt{padding:9px 17px;border-radius:9px;font-size:.86rem;font-weight:550;cursor:pointer;background:var(--surface); border:1px solid var(--line);color:var(--muted);transition:.3s var(--ease)} .filt:hover{color:var(--text);border-color:var(--line-2)} .filt.on{background:color-mix(in srgb,var(--ac) 16%,transparent);border-color:color-mix(in srgb,var(--ac) 46%,transparent);color:var(--ac)} .nav-links a.here{color:var(--text);background:var(--surface-2)} .wk-hero{padding:222px 0 20px} .backlink{ display:inline-flex;align-items:center;gap:9px;margin-bottom:26px; padding:9px 17px 9px 13px;border-radius:999px; border:1px solid var(--line-2);background:var(--surface-2); font-size:.88rem;font-weight:560;color:var(--text); transition:.3s var(--ease);backdrop-filter:blur(10px); } .backlink:hover{border-color:var(--blue-2);background:rgba(47,107,255,.14);transform:translateX(-3px)} .backlink svg{width:16px;height:16px;color:var(--blue-2)} .wk-hero h1{font-size:clamp(2.5rem,5.6vw,4.4rem);letter-spacing:-.05em;line-height:1.02;margin:18px 0 0} .wk-hero .lead{color:var(--muted);font-size:1.08rem;max-width:640px;margin-top:20px;line-height:1.65} .disclosure{display:flex;gap:13px;align-items:flex-start;max-width:760px;margin-top:26px;padding:16px 20px;border-radius:13px; background:color-mix(in srgb,var(--amber) 9%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)} .disclosure svg{width:19px;height:19px;color:var(--amber);flex:none;margin-top:2px} .disclosure p{font-size:.92rem;color:var(--muted);line-height:1.6} .disclosure b{color:var(--text);font-weight:620} .wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:40px} .wk.hide{display:none} .wk-note{color:var(--muted);font-size:.93rem;line-height:1.66;margin-top:10px} .wk-angle{color:var(--ac);font-size:.95rem;font-weight:550} .wk h3{font-size:1.3rem} @media(max-width:1080px){.wk-grid{grid-template-columns:1fr}} @media(max-width:760px){.wk-hero{padding:178px 0 10px}nav{height:156px}header.stuck nav{height:92px}.logo-mark{height:138px}header.stuck .logo-mark{height:84px}} /* ===== mobile/tablet fixes ===== */ /* Logo beam pseudo-elements (104-150% of the logo box, rotating) were sticking out past the right edge on phones and widening the page. Clip horizontally so the glow still shows but adds no page width. */ html,body{overflow-x:clip} @supports not (overflow:clip){html,body{overflow-x:hidden}} /* keep the logo art from distorting when its box gets squeezed */ .logo-mark{object-fit:contain} /* tablet / small laptop: links+CTA+full logo don't fit, which was crushing the logo to a sliver — go to the hamburger earlier */ @media(max-width:1080px){ .nav-links,.nav-right .btn{display:none} .burger{display:flex} nav{height:140px} header.stuck nav{height:96px} .logo-mark{height:120px} header.stuck .logo-mark{height:76px} } @media(max-width:1080px){ .wk-hero{padding:170px 0 10px} } @media(max-width:760px){ .wk-hero{padding:142px 0 10px} /* the desktop line break lands badly at phone width */ .wk-hero h1 br{display:none} nav{height:116px} header.stuck nav{height:84px} .logo-mark{height:96px} header.stuck .logo-mark{height:64px} footer .f-about .logo-mark{height:153.7px!important;width:280px} .f-bot{font-size:.82rem;color:var(--muted)} } /* ----- logo beam alignment ----- */ /* The footer logo's