/* ────────────────────────────────────────────────────────────────────── УправДом — bold orange, energetic, modern startup Display: Unbounded · Body: Manrope · Mono: JetBrains Mono ────────────────────────────────────────────────────────────────────── */ :root{ /* Brand — orange */ --orange-50: #FEF1E7; --orange-100: #FBDFC8; --orange-200: #F8C39B; --orange-300: #F4A268; --orange-400: #F0813C; --orange-500: #E96514; /* primary */ --orange-600: #CB530C; --orange-700: #9E3F08; --orange-900: #4A1D06; --cream: #FBF7F2; /* warm institutional paper */ --cream-2: #F4EDE3; --peach: #F8EEE2; /* faint warm tint */ --sand: #F1E7D8; /* warm sand */ --bone: #F4EDE2; /* warm neutral */ --plum: #15140F; /* deep contrast */ --ink: #1B1A16; --ink-2: #393631; --muted: #6A665E; --line: rgba(27,26,22,.10); --line-2: rgba(27,26,22,.16); --paper: #FFFFFF; /* Stay-stable orange used inside phone screens (independent of theme) */ --p-orange: #E96514; --p-orange-2: #CB530C; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --shadow-sm: 0 1px 2px rgba(27,26,22,.06), 0 1px 3px rgba(27,26,22,.05); --shadow-md: 0 6px 16px rgba(27,26,22,.07), 0 2px 4px rgba(27,26,22,.04); --shadow-lg: 0 18px 40px rgba(27,26,22,.13), 0 4px 12px rgba(27,26,22,.06); --shadow-phone: 0 30px 64px rgba(27,26,22,.20), 0 12px 28px rgba(27,26,22,.12), 0 1px 0 rgba(255,255,255,.4) inset; --max: 1320px; --pad: clamp(16px, 4vw, 56px); --font-display: 'Libre Franklin', system-ui, sans-serif; --font-body: 'Public Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* Dark theme overrides — applied when */ body.theme-dark{ --cream: #15110D; --cream-2: #1F1812; --peach: #241712; --sand: #2A1C14; --bone: #1C160F; --plum: #0B0805; --ink: #FFF6EC; --ink-2: #E8DDD0; --muted: #A89887; --line: rgba(255,246,236,.10); --line-2: rgba(255,246,236,.16); --paper: #1F1812; } *{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} .section,#lead-form{scroll-margin-top:90px} .lead-modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center} .lead-modal.is-open{display:flex;animation:leadFade .2s ease} .lead-modal-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .lead-modal-sheet{ position:relative;z-index:1;width:100%;max-width:560px;max-height:92vh; background:var(--paper);border-radius:20px 20px 0 0; padding:26px 20px 22px;overflow-y:auto; box-shadow:0 -20px 60px rgba(20,16,12,.25); animation:leadSheetUp .3s cubic-bezier(.16,1,.3,1); } .lead-modal-close{ position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%; background:var(--cream-2);color:var(--ink);border:0;font-size:22px;line-height:1; cursor:pointer;display:grid;place-items:center;z-index:2; transition:background .2s ease, color .2s ease; } .lead-modal-close:hover{background:var(--orange-500);color:#fff} .lead-modal-slot h3{margin-top:0} body.lead-modal-open{overflow:hidden} @keyframes leadFade{from{opacity:0}to{opacity:1}} @keyframes leadSheetUp{from{transform:translateY(24px)}to{transform:translateY(0)}} @media (min-width:821px){.lead-modal.is-open{display:none}} .to-top{ position:fixed;right:24px;bottom:24px;z-index:60; width:46px;height:46px;border-radius:50%; display:grid;place-items:center; background:var(--orange-500);color:#fff; box-shadow:0 8px 24px rgba(255,107,31,.35); transform:translateY(12px) rotate(-90deg);opacity:0;pointer-events:none; transition:opacity .25s ease, transform .25s ease, background .2s ease; } .to-top.is-visible{opacity:1;transform:translateY(0) rotate(-90deg);pointer-events:auto} .to-top:hover{background:var(--orange-600)} .to-top:focus-visible{outline:2px solid var(--orange-600);outline-offset:3px} @media (max-width:640px){.to-top{right:16px;bottom:16px;width:42px;height:42px}} body{ font-family: var(--font-body); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none} img{max-width:100%;display:block} /* ───── Typography ───── */ .h-display{font-family:var(--font-display);font-weight:800;letter-spacing:-0.015em;line-height:1.0} .h-display em{font-style:normal;color:var(--orange-600)} .h-display .strike{position:relative;display:inline-block;color:var(--orange-600)} .eyebrow{ font-family:var(--font-mono);font-size:12px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--orange-600); display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:18px;height:1px;background:currentColor;display:inline-block} .lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:56ch} .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* ───── Layout ───── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .section{padding:clamp(72px, 9vw, 140px) 0;position:relative} .section-tight{padding:clamp(48px, 6vw, 90px) 0;position:relative} /* ───── Buttons ───── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 22px;border-radius:var(--r-sm);font-weight:600;font-size:15px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space:nowrap; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--ink);color:var(--cream)} .btn-primary:hover{background:var(--orange-600);color:#fff} .btn-orange{background:var(--orange-500);color:#fff;box-shadow:var(--shadow-sm)} .btn-orange:hover{background:var(--orange-600);box-shadow:var(--shadow-md)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)} .btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)} .btn-white{background:#fff;color:var(--ink)} .btn-white:hover{background:var(--orange-500);color:#fff} .btn-lg{padding:18px 28px;font-size:16px} .btn-sm{padding:10px 16px;font-size:13px} .store-badge{ display:inline-flex;align-items:center;gap:10px; background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-sm); transition:transform .15s ease, background .2s ease; } .store-badge:hover{transform:translateY(-1px);background:var(--orange-500)} .store-badge .sb-sm{font-size:9px;opacity:.75;letter-spacing:.1em;text-transform:uppercase;line-height:1;font-family:var(--font-mono)} .store-badge .sb-lg{font-size:16px;font-weight:600;line-height:1.1;letter-spacing:-.01em} /* ───── Header ───── */ .hdr{ position:fixed;top:0;left:0;right:0;z-index:50; transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease; border-bottom:1px solid transparent; } .hdr.scrolled{ background:color-mix(in oklab, var(--cream) 85%, transparent); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom-color:var(--line); } /* When hero is dark, give the unscrolled header light text */ body.hero-on-dark .hdr:not(.scrolled) .logo-text b{color:#FFF6EC} body.hero-on-dark .hdr:not(.scrolled) .logo-text small{color:rgba(255,246,236,.55)} body.hero-on-dark .hdr:not(.scrolled) .hdr-nav a{color:rgba(255,246,236,.78)} body.hero-on-dark .hdr:not(.scrolled) .hdr-nav a:hover{color:#FFF} body.hero-on-dark .hdr:not(.scrolled) .hdr-phone{color:#FFF6EC} .hdr-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;padding:18px 0} .hdr-nav{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--ink-2);justify-self:center} .hdr-nav a{position:relative;padding:6px 0;transition:color .15s ease} .hdr-nav a:hover{color:var(--orange-600)} .hdr-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--orange-500);transition:left .2s ease,right .2s ease;border-radius:2px} .hdr-nav a:hover::after{left:0;right:0} .hdr-right{display:flex;align-items:center;gap:14px;justify-self:end} .hdr-phone{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;white-space:nowrap} .hdr-phone .ph-ic{width:32px;height:32px;border-radius:50%;background:var(--orange-500);color:#fff;display:grid;place-items:center;flex-shrink:0} /* Hamburger + mobile menu */ .hdr-burger{display:none;width:44px;height:44px;border:0;background:transparent;padding:10px;cursor:pointer;border-radius:12px;position:relative;z-index:70} .hdr-burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .2s ease, background .2s ease} .hdr-burger span + span{margin-top:5px} body.hero-on-dark .hdr:not(.scrolled) .hdr-burger span{background:#FFF6EC} body.menu-open .hdr-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .hdr-burger span:nth-child(2){opacity:0} body.menu-open .hdr-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} body.menu-open{overflow:hidden} .mobile-menu{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;transition:opacity .25s ease} body.menu-open .mobile-menu{pointer-events:auto;opacity:1} .mobile-menu-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .mobile-menu-panel{ position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw); background:var(--cream);border-left:1px solid var(--line); display:flex;flex-direction:column;gap:24px; padding:88px 28px 28px; transform:translateX(100%);transition:transform .3s ease; box-shadow:-24px 0 60px rgba(20,16,12,.15); overflow-y:auto; } body.menu-open .mobile-menu-panel{transform:translateX(0)} .mobile-menu-close{ position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%; background:var(--cream-2);color:var(--ink);border:0;font-size:26px;line-height:1; cursor:pointer;display:grid;place-items:center; transition:background .2s ease, color .2s ease; } .mobile-menu-close:hover{background:var(--orange-500);color:#fff} .mobile-nav{display:flex;flex-direction:column;gap:4px} .mobile-nav a{ display:flex;align-items:center;justify-content:space-between; padding:14px 4px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em; border-bottom:1px solid var(--line);transition:color .15s ease, padding .2s ease; } .mobile-nav a:hover{color:var(--orange-600);padding-left:8px} .mobile-menu-cta{ margin-top:auto;display:inline-flex;align-items:center;gap:12px; background:var(--ink);color:#FFF6EC; padding:14px 18px;border-radius:14px;font-weight:600;font-size:15px; transition:background .2s ease; } .mobile-menu-cta:hover{background:var(--orange-500);color:#fff} .mobile-menu-cta .ph-ic{width:36px;height:36px;border-radius:50%;background:var(--orange-500);color:#fff;display:grid;place-items:center;flex-shrink:0} .logo{display:inline-flex;align-items:center;gap:12px;padding-left:8px} @media (min-width:1024px){.logo{padding-left:20px}} .logo-mark{ width:38px;height:38px;border-radius:var(--r-sm); background:var(--orange-600); display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm); flex-shrink:0; } .logo-text{display:flex;flex-direction:column;line-height:1} .logo-text b{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em} .logo-text small{font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-top:3px;font-family:var(--font-mono)} /* ───── Hero ───── */ .hero{ position:relative; padding-top:140px; padding-bottom:0; overflow:hidden; /* Default (data-bg="warm") */ background: radial-gradient(1200px 600px at 110% -10%, color-mix(in oklab, var(--orange-500) 35%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 80%, color-mix(in oklab, var(--orange-300) 30%, transparent), transparent 60%), var(--cream); --hero-fg: var(--ink); --hero-muted: var(--muted); --hero-line: var(--line-2); } /* Variant: bone — calm warm neutral with dotted texture + soft orange wash */ .hero[data-bg="bone"]{ background: radial-gradient(900px 460px at 100% 0%, color-mix(in oklab, var(--orange-300) 28%, transparent), transparent 60%), radial-gradient(700px 400px at 0% 100%, color-mix(in oklab, var(--orange-200) 22%, transparent), transparent 60%), var(--bone); } .hero[data-bg="bone"]::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image: radial-gradient(circle, color-mix(in oklab, var(--ink) 10%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); } /* Variant: ink — dark editorial */ .hero[data-bg="ink"]{ background: radial-gradient(1200px 600px at 100% 0%, color-mix(in oklab, var(--orange-500) 35%, transparent), transparent 60%), radial-gradient(800px 500px at -10% 100%, color-mix(in oklab, var(--orange-700) 30%, transparent), transparent 60%), #14100C; --hero-fg:#FFF6EC; --hero-muted: rgba(255,246,236,.62); --hero-line: rgba(255,246,236,.16); color: var(--hero-fg); } .hero[data-bg="ink"] .hero-eyebrow-pill{ background:rgba(255,246,236,.06); border-color:rgba(255,246,236,.16); color:var(--hero-fg); backdrop-filter:blur(8px); } .hero[data-bg="ink"] .hero-eyebrow-pill .hpx-flag{color:var(--hero-fg)} .hero[data-bg="ink"] .hero-headline{color:var(--hero-fg)} .hero[data-bg="ink"] .hero-headline .hl-strike::before{background:var(--orange-400)} .hero[data-bg="ink"] .hero-sub{color:var(--hero-muted)} .hero[data-bg="ink"] .hm-rating{color:var(--hero-muted)} .hero[data-bg="ink"] .btn-ghost{ border-color:rgba(255,246,236,.22);color:var(--hero-fg);background:transparent; } .hero[data-bg="ink"] .btn-ghost:hover{background:var(--hero-fg);color:#14100C;border-color:var(--hero-fg)} .hero[data-bg="ink"] .store-badge{background:rgba(255,246,236,.08);border:1px solid rgba(255,246,236,.14)} .hero[data-bg="ink"] .store-badge:hover{background:var(--orange-500);border-color:transparent} .hero[data-bg="ink"] .hero-trust{border-top-color:var(--hero-line)} .hero[data-bg="ink"] .hero-trust .num{color:var(--hero-fg)} .hero[data-bg="ink"] .hero-trust .lbl{color:var(--hero-muted)} .hero[data-bg="ink"] .hero-trust .divider{background:var(--hero-line)} .hero[data-bg="ink"] .hero-deco .ring{border-color:rgba(255,138,61,.22) !important} .hero[data-bg="ink"] .hero-deco .orb-glow{ background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 38%, transparent), transparent 70%); } /* Variant: photo — full-bleed background image with dark overlay */ .hero[data-bg="photo"]{ background:#14100C; --hero-fg:#FFF6EC; --hero-muted: rgba(255,246,236,.74); --hero-line: rgba(255,246,236,.18); color: var(--hero-fg); } .hero[data-bg="photo"] .hero-deco{display:none} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg image-slot{--is-placeholder-bg:linear-gradient(135deg,#2A2018,#14100C);--is-placeholder-color:rgba(255,255,255,.7)} .hero-bg-overlay{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg, rgba(20,14,9,.42) 0%, rgba(18,13,9,.5) 50%, rgba(14,10,7,.82) 100%), radial-gradient(120% 95% at 50% 36%, transparent 38%, rgba(14,10,7,.34) 100%); } .hero[data-bg="photo"] .hero-eyebrow-pill{ background:rgba(255,246,236,.08); border-color:rgba(255,246,236,.18); color:var(--hero-fg); backdrop-filter:blur(8px); } .hero[data-bg="photo"] .hero-eyebrow-pill .hpx-flag{color:var(--hero-fg)} .hero[data-bg="photo"] .hero-headline{color:var(--hero-fg)} .hero[data-bg="photo"] .hero-headline .hl-em, .hero[data-bg="photo"] .hero-headline .hl-strike{color:var(--orange-400)} .hero[data-bg="photo"] .hero-headline .hl-em::after{background:var(--orange-400)} .hero[data-bg="photo"] .hero-sub{color:var(--hero-muted)} .hero[data-bg="photo"] .hm-rating{color:var(--hero-muted)} .hero[data-bg="photo"] .btn-ghost{ border-color:rgba(255,246,236,.28);color:var(--hero-fg);background:transparent; } .hero[data-bg="photo"] .btn-ghost:hover{background:var(--hero-fg);color:#14100C;border-color:var(--hero-fg)} .hero[data-bg="photo"] .store-badge{background:rgba(255,246,236,.10);border:1px solid rgba(255,246,236,.16)} .hero[data-bg="photo"] .store-badge:hover{background:var(--orange-500);border-color:transparent} .hero[data-bg="photo"] .hero-trust{border-top-color:var(--hero-line)} .hero[data-bg="photo"] .hero-trust .num{color:var(--hero-fg)} .hero[data-bg="photo"] .hero-trust .lbl{color:var(--hero-muted)} .hero[data-bg="photo"] .hero-trust .divider{background:var(--hero-line)} /* Variant: split — half cream / half orange block */ .hero[data-bg="split"]{ background: linear-gradient(to right, var(--cream) 0%, var(--cream) 58%, var(--orange-500) 58%, var(--orange-500) 100%); } @media (max-width: 1180px){ .hero[data-bg="split"]{ background: linear-gradient(to bottom, var(--cream) 0%, var(--cream) 55%, var(--orange-500) 55%, var(--orange-500) 100%); } } /* Variant: startup — bright vibrant peach with bold orange blooms, grid, glow */ .hero[data-bg="startup"]{ background: radial-gradient(900px 600px at 92% -10%, color-mix(in oklab, var(--orange-500) 16%, transparent), transparent 58%), radial-gradient(700px 500px at -5% 110%, color-mix(in oklab, var(--orange-400) 12%, transparent), transparent 62%), linear-gradient(180deg, var(--orange-50) 0%, var(--cream) 100%); } .hero[data-bg="startup"]::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image: linear-gradient(to right, color-mix(in oklab, var(--ink) 5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--ink) 5%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(900px 600px at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(900px 600px at 50% 30%, #000 30%, transparent 80%); } .hero[data-bg="startup"]::after{ content:none; } .hero[data-bg="startup"] .hero-headline .hl-em{ color:var(--orange-600); } .hero[data-bg="startup"] .hero-eyebrow-pill{ background:#fff;border-color:transparent; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(193,63,0,.18), 0 2px 6px rgba(193,63,0,.10); } .hero-deco{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden} .hero-deco .ring{position:absolute;border-radius:50%;border:1px solid color-mix(in oklab, var(--orange-500) 22%, transparent)} .hero-deco .ring.r1{width:680px;height:680px;left:-220px;top:-100px;border-color:color-mix(in oklab, var(--orange-500) 18%, transparent)} .hero-deco .ring.r2{width:380px;height:380px;left:-80px;top:60px;border-color:color-mix(in oklab, var(--orange-500) 14%, transparent);border-style:dashed} .hero-deco .ring.r3{width:900px;height:900px;right:-300px;bottom:-380px;border-color:color-mix(in oklab, var(--orange-500) 18%, transparent)} .hero-deco .orb-glow{ position:absolute;right:-40px;top:140px;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 12%, transparent), transparent 70%); opacity:.4; } /* ───── Hero V2 — editorial typography + UI scene ───── */ .hero-shell{position:relative;z-index:2;display:flex;flex-direction:column;gap:32px;padding-bottom:56px} .hero-head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .hero-eyebrow-pill{ display:inline-flex;align-items:center;gap:10px; padding:8px 16px;border-radius:var(--r-sm); background:var(--paper);border:1px solid var(--line-2); box-shadow:var(--shadow-sm); font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2); font-weight:500; } .hero-eyebrow-pill .hpx-dot{ width:8px;height:8px;border-radius:50%;background:var(--orange-500); box-shadow:0 0 0 4px color-mix(in oklab, var(--orange-500) 22%, transparent); animation:pulse 2s ease-in-out infinite; } .hero-eyebrow-pill .hpx-sep{opacity:.4} .hero-eyebrow-pill .hpx-flag{font-weight:600;color:var(--ink)} @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}} .hero-meta{display:flex;align-items:center;gap:14px} .hm-rating{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.04em} .hm-stars{color:var(--orange-500);letter-spacing:1px;font-size:13px} .hero-headline{ font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.0; font-size:clamp(48px, 7vw, 104px); display:flex;flex-direction:column;gap:0; margin:0; color:var(--ink); } .hero-headline .hl-row{display:block;position:relative} .hero-headline .hl-row-1{padding-left:0} .hero-headline .hl-row-2{padding-left:8%} .hero-headline .hl-row-3{padding-left:24%} .hero-headline .hl-em{ font-style:normal;color:var(--orange-600); position:relative;display:inline-block; } .hero-headline .hl-em::after{ content:"";position:absolute;left:0;right:0;bottom:2%;height:3px; background:var(--orange-500); border-radius:1px; } .hero-headline .hl-strike{ position:relative;display:inline-block;color:var(--orange-600); } .hero-main{ display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center; margin-top:24px; } /* Layout: inverted — phone on left, text on right */ .hero[data-layout="inverted"] .hero-main{grid-template-columns:1.05fr .95fr} .hero[data-layout="inverted"] .hero-lede-col{order:2} .hero[data-layout="inverted"] .hero-scene{order:1} .hero[data-layout="inverted"] .hs-phone{transform:translateX(-50%) rotate(4deg)} /* Layout: centered — headline centered, single phone + cards below, lede + CTA below the headline */ .hero[data-layout="centered"]{padding-top:110px} .hero[data-layout="centered"] .hero-shell{gap:22px;padding-bottom:36px} .hero[data-layout="centered"] .hero-head-row{justify-content:center} .hero[data-layout="centered"] .hero-headline{ text-align:center; font-size:clamp(34px, 5vw, 68px); line-height:1.04; max-width:22ch; margin-inline:auto; text-wrap:balance; hyphens:manual; } .hero[data-layout="centered"] .hero-headline .hl-row{ text-wrap:balance; overflow-wrap:normal; word-break:normal; } .hero[data-layout="centered"] .hero-headline .hl-row-1, .hero[data-layout="centered"] .hero-headline .hl-row-2, .hero[data-layout="centered"] .hero-headline .hl-row-3{padding-left:0} .hero[data-layout="centered"] .hero-main{ grid-template-columns:1fr;gap:48px;text-align:center; margin-top:8px; } .hero[data-layout="centered"] .hero-lede-col{ max-width:62ch;margin:0 auto;align-items:center;text-align:center;gap:18px; } .hero[data-layout="centered"] .hero-lede-col .hero-sub{font-size:17px} .hero[data-layout="centered"] .hero-lede-col .hero-cta, .hero[data-layout="centered"] .hero-lede-col .hero-stores{justify-content:center} .hero[data-layout="centered"] .hero-scene{ height:440px;max-width:820px;margin:0 auto;width:100%; } .hero[data-layout="centered"] .hs-phone{ transform:translateX(-50%) rotate(-3deg) scale(.78);transform-origin:top center; } .hero[data-layout="centered"] .hs-c1{top:40px} .hero[data-layout="centered"] .hs-c2{top:10px} .hero[data-layout="centered"] .hs-c3{bottom:30px} .hero[data-layout="centered"] .hs-c4{bottom:50px} /* Trio: three phones, fanned, in centered layout */ .hero[data-layout="centered"] .hero-scene[data-variant="trio"]{ height:580px;max-width:980px;margin-top:24px; } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone{ position:absolute;left:50%;top:30px; transform-origin:bottom center; } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone-main{ z-index:3;transform:translateX(-50%) translateY(-20px); filter:drop-shadow(0 30px 60px rgba(193,63,0,.22)); } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone-left{ z-index:2;transform:translateX(calc(-50% - 220px)) translateY(30px) rotate(-9deg); filter:drop-shadow(0 20px 40px rgba(20,16,12,.14)); } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone-right{ z-index:2;transform:translateX(calc(-50% + 220px)) translateY(30px) rotate(9deg); filter:drop-shadow(0 20px 40px rgba(20,16,12,.14)); } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-c1{ top:60px;left:auto;right:6%; } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-c4{ bottom:30px;left:5%;right:auto;max-width:300px; } @media (max-width: 1180px){ .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone-left{ transform:translateX(calc(-50% - 170px)) translateY(40px) rotate(-9deg) scale(.85); } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone-right{ transform:translateX(calc(-50% + 170px)) translateY(40px) rotate(9deg) scale(.85); } .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-c1, .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-c4{display:none} } @media (max-width: 760px){ .hero[data-layout="centered"] .hero-scene[data-variant="trio"]{height:480px} .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone-left, .hero[data-layout="centered"] .hero-scene[data-variant="trio"] .hs-phone-right{display:none} } .hero[data-layout="centered"] .hero-trust{ justify-content:center;padding-top:24px;gap:28px; } .hero[data-layout="centered"] .hero-trust .num{font-size:clamp(24px,2.4vw,32px)} .hero[data-layout="centered"] .hero-trust .divider{height:32px} .hero-lede-col{display:flex;flex-direction:column;gap:24px;max-width:46ch} .hero-lede-col .hero-sub{margin:0;max-width:none;font-size:18px;line-height:1.55} .hero-lede-col .hero-cta{margin:0;display:flex;gap:14px;flex-wrap:wrap} .hero-lede-col .hero-stores{margin:0;display:flex;gap:12px;flex-wrap:wrap} /* Scene — phone + floating cards */ .hero-scene{ position:relative;height:580px; transition:transform .15s linear; } .hs-phone{ position:absolute;left:50%;top:0; transform:translateX(-50%) rotate(-4deg); filter:drop-shadow(0 30px 50px rgba(92,30,0,.22)); } .hs-card{ position:absolute; display:flex;align-items:flex-start;gap:12px; padding:14px 18px;border-radius:18px; background:var(--paper);border:1px solid var(--line); box-shadow:0 18px 40px rgba(26,20,16,.10), 0 4px 10px rgba(26,20,16,.04); min-width:200px;max-width:280px; transition:transform .15s linear; z-index:5; } .hs-card .hsc-ic{ flex-shrink:0;width:32px;height:32px;border-radius:10px; display:grid;place-items:center; } .hs-card .hsc-ic.green{background:#DEF1E5;color:#2A8D5C} .hs-card .hsc-ic.orange{background:var(--orange-500);color:#fff} .hs-card .hsc-ic.ink{background:var(--ink);color:#fff} .hs-card .hsc-avatar{ flex-shrink:0;width:32px;height:32px;border-radius:50%; display:grid;place-items:center; background:linear-gradient(135deg, var(--orange-400), var(--orange-700)); color:#fff;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:0; } .hs-card .hsc-t{font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--ink);line-height:1.25} .hs-card .hsc-s{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:3px;letter-spacing:.02em} .hs-card .hsc-bar{ height:5px;border-radius:3px;background:var(--orange-100);overflow:hidden;margin:6px 0 4px;width:140px; } .hs-card .hsc-bar span{display:block;height:100%;background:var(--orange-500);border-radius:3px} .hs-c1{left:-2%;top:80px;transform:rotate(-2deg)} .hs-c2{right:-4%;top:30px;transform:rotate(2deg);max-width:240px} .hs-c3{left:-6%;bottom:60px;transform:rotate(2deg)} .hs-c4{right:-2%;bottom:80px;transform:rotate(-2deg);max-width:260px} /* Trust row */ .hero-trust{ display:flex;flex-wrap:wrap;gap:32px;align-items:center; padding-top:36px;border-top:1px solid var(--line-2); } .hero-trust .ht-item{display:flex;flex-direction:column;gap:4px} .hero-trust .num{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;color:var(--ink);line-height:1} .hero-trust .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)} .hero-trust .divider{width:1px;height:44px;background:var(--line-2)} @media (max-width: 1180px){ .hero-main{grid-template-columns:1fr;gap:48px} .hero-headline .hl-row-2{padding-left:4%} .hero-headline .hl-row-3{padding-left:12%} } @media (max-width: 780px){ .hero-head-row{gap:14px} .hero-meta{display:none} .hero-scene{height:520px;transform:scale(.82);transform-origin:top center} .hero-headline{font-size:clamp(36px, 10vw, 60px)} .hero-headline .hl-row-1,.hero-headline .hl-row-2,.hero-headline .hl-row-3{padding-left:0} .hero-trust{gap:18px;padding-top:24px} .hero-trust .divider{display:none} .hs-c1,.hs-c3{left:-4%;max-width:200px} .hs-c2,.hs-c4{right:-4%;max-width:200px} } /* marquee strip below hero */ .marquee{ background:var(--ink);color:var(--cream);padding:22px 0;overflow:hidden; border-top:1px solid var(--ink-2); } .marquee-track{display:flex;gap:48px;white-space:nowrap;animation:scroll-x 40s linear infinite;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.01em} .marquee-track .dot{color:var(--orange-500);font-size:18px;display:inline-flex;align-items:center} @keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ───── Reusable background textures ───── */ .bg-dots{ background-image: radial-gradient(circle, color-mix(in oklab, var(--ink) 14%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; background-position: 0 0; } .bg-grid{ background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 56px 56px; } .bg-diag{ background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 14px, color-mix(in oklab, var(--orange-500) 10%, transparent) 14px, color-mix(in oklab, var(--orange-500) 10%, transparent) 15px ); } .bg-noise{ background-image: url("data:image/svg+xml;utf8,"); background-size:200px 200px; mix-blend-mode:multiply; opacity:.5; } .sec-blob{ position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0; } .sec-rings{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} .sec-rings .ring{position:absolute;border-radius:50%;border:1px solid color-mix(in oklab, var(--orange-500) 22%, transparent)} .section > .wrap, .section-tight > .wrap, .press-strip > .wrap{position:relative;z-index:1} /* ───── About — clean paper white with single orange wash ───── */ .about{ background: radial-gradient(900px 600px at 100% 30%, color-mix(in oklab, var(--orange-400) 14%, transparent), transparent 60%), var(--paper); position:relative;overflow:hidden; } .about::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: radial-gradient(circle, color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1.4px); background-size: 28px 28px; mask-image: linear-gradient(135deg, #000 0%, transparent 55%); -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%); } .about::after{ content:"";position:absolute;right:8%;bottom:-100px;width:280px;height:280px;border-radius:50%; border:1px dashed color-mix(in oklab, var(--orange-500) 35%, transparent); pointer-events:none; } body.theme-dark .about::before{ background-image: radial-gradient(circle, rgba(255,246,236,.07) 1px, transparent 1.4px); } .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .about-head{font-size:clamp(36px,4.5vw,60px)} .about-points{display:flex;flex-direction:column;gap:18px;margin-top:32px} .about-point{display:flex;gap:16px;align-items:flex-start} .about-point .ic{width:44px;height:44px;border-radius:12px;background:var(--orange-100);color:var(--orange-600);display:grid;place-items:center;flex-shrink:0} .about-point .ttl{font-weight:700;font-size:18px} .about-point .desc{color:var(--muted);font-size:16px;line-height:1.55;margin-top:4px} .about-visual{ position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden; background: radial-gradient(circle at 30% 30%, var(--orange-300), var(--orange-600)); box-shadow:var(--shadow-lg); } .about-visual image-slot{ --is-placeholder-bg: linear-gradient(135deg, var(--orange-300), var(--orange-700)); --is-placeholder-color: rgba(255,255,255,.85); } .about-overlay-grad{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(26,20,16,0) 40%, rgba(26,20,16,.5) 100%); z-index:1; } .about-tag{ position:absolute;top:24px;left:24px;z-index:2; display:inline-flex;align-items:center;gap:10px; padding:10px 16px;border-radius:var(--r-sm); background:rgba(255,255,255,.92);backdrop-filter:blur(8px); font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--ink); } .about-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 0 4px rgba(255,107,31,.2)} .about-phone-float{ position:absolute;right:24px;bottom:24px;z-index:3; transform:rotate(4deg); filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); } .about-callout{ position:absolute;left:24px;bottom:120px;z-index:3; display:flex;align-items:center;gap:12px; padding:14px 18px;border-radius:16px; background:rgba(255,255,255,.96);backdrop-filter:blur(12px); box-shadow:0 12px 32px rgba(0,0,0,.18); animation:floaty 4s ease-in-out infinite; } .about-callout .ic{ width:36px;height:36px;border-radius:10px; background:#DEF1E5;color:#2A8D5C;display:grid;place-items:center;flex-shrink:0; } .about-callout .t{font-weight:700;font-size:14px;color:var(--ink);letter-spacing:-.01em} .about-callout .s{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--font-mono)} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @media (max-width: 780px){ .about-phone-float{transform:rotate(4deg) scale(.7);transform-origin:bottom right;right:8px;bottom:8px} .about-callout{left:12px;bottom:80px;padding:10px 14px} } /* ───── Stats Bento — sand with diagonal warmth ───── */ .stats{ background: radial-gradient(700px 500px at 0% 100%, color-mix(in oklab, var(--orange-400) 14%, transparent), transparent 60%), var(--sand); position:relative;overflow:hidden; } .stats::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image: repeating-linear-gradient( 45deg, transparent 0 24px, color-mix(in oklab, var(--ink) 5%, transparent) 24px 25px ); mask-image: linear-gradient(135deg, transparent 0%, #000 25%, #000 75%, transparent 100%); -webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 25%, #000 75%, transparent 100%); } .stats::after{ content:"";position:absolute;right:-100px;top:-100px;width:300px;height:300px;border-radius:50%; border:1px solid color-mix(in oklab, var(--orange-600) 25%, transparent); pointer-events:none; } .stats-grid{ display:grid;gap:18px; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(180px, auto); } .stat-card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:28px;display:flex;flex-direction:column;justify-content:space-between; position:relative;overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .stat-card.dark{background:var(--ink);color:var(--cream);border-color:transparent} .stat-card.orange{background:var(--orange-500);color:#fff;border-color:transparent} .stat-card .num{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,72px);letter-spacing:-.03em;line-height:1} .stat-card .lbl{font-size:16px;color:inherit;opacity:.7;margin-top:8px} .stat-card.dark .lbl, .stat-card.orange .lbl{opacity:.85} .stat-card .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;align-self:flex-start} .stat-card .arrow{align-self:flex-end;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;transition:transform .2s ease} .stat-card.orange .arrow{background:rgba(255,255,255,.22)} .stat-card:hover .arrow{transform:rotate(-45deg)} .bento-1{grid-column:span 5;grid-row:span 2} .bento-2{grid-column:span 4} .bento-3{grid-column:span 3} .bento-4{grid-column:span 4} .bento-5{grid-column:span 3} .bento-6{grid-column:span 7;grid-row:span 1} .bento-7{grid-column:span 5} /* stats featured (bento-1) gets a decorative graphic */ .stat-card.featured{padding:36px} .stat-card.featured .ring-deco{position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;border:1px dashed rgba(255,255,255,.3)} .stat-card.featured .ring-deco::before{content:"";position:absolute;inset:30px;border-radius:50%;border:1px dashed rgba(255,255,255,.2)} /* ───── Services — light cream with subtle gradient ───── */ .services{ background: radial-gradient(900px 500px at 100% 50%, color-mix(in oklab, var(--orange-300) 14%, transparent), transparent 60%), var(--cream-2); position:relative;overflow:clip; } .services::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 0%, transparent 75%); } .services::after{ content:"";position:absolute;left:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 22%, transparent), transparent 70%); filter:blur(40px);pointer-events:none; } .services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(32px,4vw,60px);flex-wrap:wrap} /* ───── Services (segmented tabs + horizontal process) ───── */ .svc-tabs{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px; } .svc-tab{ display:flex;align-items:center;gap:14px;text-align:left; padding:16px 18px;border-radius:var(--r-md); background:var(--paper);border:1px solid var(--line);color:var(--ink); transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; position:relative;overflow:hidden;cursor:pointer; } .svc-tab:hover{border-color:var(--orange-300)} .svc-tab-num{ font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.03em; color:var(--orange-200);font-variant-numeric:tabular-nums;flex-shrink:0;line-height:1; transition:color .2s ease; } .svc-tab-text{display:flex;flex-direction:column;gap:4px;min-width:0} .svc-tab-name{ font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--orange-600);font-weight:600; } .svc-tab-sub{ font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:-.01em; color:var(--ink);line-height:1.25; } .svc-tab.active{ background:var(--ink);border-color:var(--ink); box-shadow:var(--shadow-md); } .svc-tab.active::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange-500); } .svc-tab.active .svc-tab-num{color:var(--orange-400)} .svc-tab.active .svc-tab-name{color:var(--orange-300)} .svc-tab.active .svc-tab-sub{color:#fff} .svc-panel{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(20px,3.5vw,40px);position:relative;overflow:hidden; } .svc-panel-inner{animation:svcFade .5s cubic-bezier(.16,1,.3,1)} @keyframes svcFade{from{transform:translateY(10px)}to{transform:translateY(0)}} .svc-panel-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:28px; padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:28px;flex-wrap:wrap; } .svc-panel-intro{max-width:54ch;min-width:min(280px,100%)} .svc-panel-intro .eyebrow{display:block;margin-bottom:10px} .svc-panel-intro p{color:var(--ink-2);font-size:15px;line-height:1.55;margin:0} .svc-panel-meta{display:flex;gap:10px;flex-shrink:0} .svc-panel-meta > div{ display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--r-sm); background:var(--cream-2);border:1px solid var(--line);text-align:center; } .svc-panel-meta b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap} .svc-panel-meta span{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* horizontal connected process flow */ .svc-process{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:12px; } .svc-proc-step{ display:flex;flex-direction:row;gap:14px;align-items:flex-start; padding:16px;position:relative; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .svc-proc-step:last-child:nth-child(odd){grid-column:span 2} .svc-process-3{grid-template-columns:repeat(3,1fr)} .svc-process-3 .svc-proc-step:last-child:nth-child(odd){grid-column:auto} .svc-process-3 .svc-proc-step:last-child:nth-child(3n-2){grid-column:span 3} .svc-proc-step:hover{transform:translateY(-3px);border-color:var(--orange-400);box-shadow:var(--shadow-sm)} .svc-proc-rail{position:relative;display:flex;align-items:center} .svc-proc-num{ width:38px;height:38px;border-radius:var(--r-sm);flex-shrink:0; background:var(--ink);color:var(--orange-300); display:grid;place-items:center;position:relative;z-index:1; font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.02em; font-variant-numeric:tabular-nums; transition:transform .2s ease; } .svc-proc-connector{display:none} .svc-proc-body{ padding-top:2px;flex:1;min-width:0; } .svc-proc-time{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--orange-600);font-weight:600;margin-bottom:6px; } .svc-proc-body h4{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;margin:0 0 6px;line-height:1.25} .svc-proc-body p{margin:0;font-size:14px;color:var(--muted);line-height:1.5} .svc-detail-foot{ display:flex;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap; } @media (max-width: 1024px){ .svc-process-3{grid-template-columns:repeat(2,1fr)} .svc-process-3 .svc-proc-step:last-child:nth-child(3n-2){grid-column:auto} .svc-process-3 .svc-proc-step:last-child:nth-child(odd){grid-column:span 2} } @media (max-width: 820px){ /* Sticky, horizontally-scrolling tab strip so the 3 services stay reachable */ .svc-tabs{ display:flex;grid-template-columns:none;gap:8px; overflow-x:auto;scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1) 20px;padding:10px var(--pad); scrollbar-width:none; position:sticky;top:72px;z-index:20; background:color-mix(in oklab, var(--cream-2) 92%, transparent); backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%); border-bottom:1px solid var(--line); } .svc-tabs::-webkit-scrollbar{display:none} .svc-tab{flex:0 0 auto;min-width:220px;padding:12px 14px;gap:12px;scroll-snap-align:start} .svc-tab-num{font-size:20px} .svc-tab-sub{font-size:13px} .svc-panel-head{gap:18px;padding-bottom:18px;margin-bottom:22px} .svc-panel-meta{width:100%;gap:8px} .svc-panel-meta > div{flex:1;padding:8px 10px} .svc-panel-meta b{font-size:14px} .svc-detail-foot{margin-top:22px;padding-top:18px} .svc-detail-foot .btn{flex:1 1 auto;justify-content:center} } @media (max-width: 780px){ .svc-process,.svc-process-3{grid-template-columns:1fr;gap:10px} .svc-proc-step{padding:14px;gap:12px} .svc-proc-step, .svc-process .svc-proc-step:last-child:nth-child(odd), .svc-process-3 .svc-proc-step:last-child:nth-child(odd), .svc-process-3 .svc-proc-step:last-child:nth-child(3n-2){grid-column:auto} .svc-proc-num{width:34px;height:34px;font-size:14px} } /* ───── Features × app screens (interactive) ───── */ .cap-layout{ display:grid;grid-template-columns:1fr 440px;gap:32px;align-items:start; } .cap-list{display:flex;flex-direction:column;gap:12px} .cap-item{ display:block;width:100%;text-align:left;cursor:pointer; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:0;overflow:hidden;position:relative; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } .cap-item:hover{border-color:var(--orange-300)} .cap-item-head{ display:flex;align-items:center;gap:16px;padding:18px 22px; } .cap-ic{ width:44px;height:44px;border-radius:var(--r-sm);flex-shrink:0; background:var(--orange-50);color:var(--orange-700); display:grid;place-items:center; transition:background .2s ease, color .2s ease; } .cap-titles{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .cap-label{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.15} .cap-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-600);font-weight:600} .cap-num{ font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.03em; color:var(--orange-200);font-variant-numeric:tabular-nums;flex-shrink:0;line-height:1; transition:color .2s ease; } /* expanded feature list — only on active */ .cap-features{display:none;flex-direction:column} .cap-item.active .cap-features{display:flex} .cap-feat{ display:flex;align-items:flex-start;gap:14px; padding:14px 22px 14px 24px;border-top:1px solid var(--line); } .cap-feat:first-child{border-top:1px solid var(--line)} .cap-feat-ic{ width:30px;height:30px;border-radius:8px;flex-shrink:0;margin-top:1px; background:var(--cream-2);color:var(--orange-600);display:grid;place-items:center; } .cap-feat-body{display:flex;flex-direction:column;gap:3px;min-width:0} .cap-feat-t{font-family:var(--font-body);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink)} .cap-feat-d{font-size:15px;line-height:1.5;color:var(--muted)} /* active state */ .cap-item.active{ background:var(--ink);border-color:var(--ink);box-shadow:var(--shadow-md); } .cap-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange-500);z-index:1} .cap-item.active .cap-ic{background:var(--orange-500);color:#fff} .cap-item.active .cap-label{color:#fff} .cap-item.active .cap-num{color:var(--orange-400)} .cap-item.active .cap-feat{border-top-color:rgba(255,246,236,.1)} .cap-item.active .cap-feat-ic{background:rgba(255,246,236,.08);color:var(--orange-300)} .cap-item.active .cap-feat-t{color:var(--cream)} .cap-item.active .cap-feat-d{color:rgba(255,246,236,.62)} /* phone preview */ .cap-preview{ position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:24px; background: radial-gradient(120% 80% at 50% 18%, var(--orange-50), transparent 70%), var(--cream); border:1px solid var(--line);border-radius:var(--r-lg); padding:40px 32px 32px;overflow:hidden; } .cap-phone-stage{position:relative;display:grid;place-items:center} .cap-phone-stage::before{ content:"";position:absolute;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 16%, transparent), transparent 68%); top:50%;left:50%;transform:translate(-50%,-46%); } .cap-phone{position:relative;animation:capPhoneIn .5s cubic-bezier(.16,1,.3,1)} @keyframes capPhoneIn{from{transform:translateY(14px) scale(.98)}to{transform:translateY(0) scale(1)}} .cap-preview-cap{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; animation:capPhoneIn .5s cubic-bezier(.16,1,.3,1); } .cap-preview-tag{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink); } .cap-preview-desc{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-600);font-weight:600} @media (max-width: 1040px){ .cap-layout{grid-template-columns:1fr;gap:24px} .cap-preview{order:-1;position:static;flex-direction:row;justify-content:center;gap:32px;padding:32px 24px} .cap-preview-cap{align-items:flex-start;text-align:left} } @media (max-width: 560px){ .cap-preview{flex-direction:column} .cap-preview-cap{align-items:center;text-align:center} } .features{ background: radial-gradient(700px 500px at 90% 100%, color-mix(in oklab, var(--orange-200) 30%, transparent), transparent 65%), var(--paper); position:relative;overflow:hidden; } .features::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%); } body.theme-dark .features::before{ background-image: linear-gradient(to right, rgba(255,246,236,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,246,236,.05) 1px, transparent 1px); } .features-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px;flex-wrap:wrap} .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .feat-card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:28px;transition:all .25s ease;position:relative;overflow:hidden; } .feat-card:hover{transform:translateY(-4px);border-color:var(--orange-300);box-shadow:var(--shadow-md)} .feat-card .ic{width:52px;height:52px;border-radius:14px;background:var(--orange-100);color:var(--orange-600);display:grid;place-items:center;margin-bottom:20px;transition:all .25s ease} .feat-card:hover .ic{background:var(--orange-500);color:#fff;transform:rotate(-6deg)} .feat-card h3{font-weight:700;font-size:19px;margin:0 0 8px;letter-spacing:-.01em} .feat-card p{font-size:16px;color:var(--muted);line-height:1.55;margin:0} .feat-card .num{position:absolute;top:18px;right:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);opacity:.5} /* ───── FAQ ───── */ .faq{ background: radial-gradient(700px 500px at 0% 50%, color-mix(in oklab, var(--orange-300) 18%, transparent), transparent 60%), var(--peach); position:relative;overflow:hidden; } .faq::before{ content:"";position:absolute;right:-200px;top:40px;width:520px;height:520px;border-radius:50%; border:1px solid color-mix(in oklab, var(--orange-600) 18%, transparent); pointer-events:none; } .faq::after{ content:"";position:absolute;right:-100px;top:140px;width:320px;height:320px;border-radius:50%; border:1px dashed color-mix(in oklab, var(--orange-600) 22%, transparent); pointer-events:none; } .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:flex-start} .faq-list{display:flex;flex-direction:column;gap:14px} .faq-item{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:24px 28px;transition:all .25s ease; } .faq-item.open{border-color:var(--orange-400);box-shadow:var(--shadow-md)} .faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;width:100%;text-align:left} .faq-q h4{font-weight:600;font-size:19px;margin:0;letter-spacing:-.01em} .faq-q .toggle{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;transition:all .25s ease} .faq-item.open .faq-q .toggle{background:var(--orange-500);color:#fff;transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease, margin .35s ease} .faq-a-inner{color:var(--muted);font-size:16px;line-height:1.6;padding-top:16px} .faq-item.open .faq-a{max-height:300px} .faq-side .card{ background:var(--ink);color:var(--cream);border-radius:var(--r-lg);padding:36px; position:relative;overflow:hidden; } .faq-side .card::before{ content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%; background:radial-gradient(circle, var(--orange-500), transparent 70%);opacity:.6; } /* ───── News ───── */ .news{ background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); position:relative;overflow:hidden; } .news::before{ content:"";position:absolute;left:50%;top:-80px;width:480px;height:480px;border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--orange-300) 22%, transparent), transparent 70%); transform:translateX(-50%);filter:blur(40px);pointer-events:none; } .news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px;flex-wrap:wrap} .news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .news-card{ display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line); border-radius:var(--r-md);overflow:hidden;transition:all .25s ease;cursor:pointer; } .news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .news-img{aspect-ratio:4/3;position:relative;overflow:hidden} .news-img .ph{position:absolute;inset:0;display:grid;place-items:center} .news-card .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1} .news-card .meta{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .news-card .meta .tag{padding:4px 10px;border-radius:var(--r-sm);background:var(--orange-100);color:var(--orange-700)} .news-card h3{font-weight:700;font-size:19px;margin:0;letter-spacing:-.01em;line-height:1.3} .news-card .more{margin-top:auto;font-weight:600;font-size:14px;color:var(--orange-600);display:inline-flex;align-items:center;gap:8px} /* ───── Contacts ───── */ .contacts{ background: radial-gradient(900px 600px at 100% 100%, color-mix(in oklab, var(--orange-400) 18%, transparent), transparent 60%), var(--bone); position:relative;overflow:hidden; } .contacts::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: radial-gradient(circle, color-mix(in oklab, var(--ink) 8%, transparent) 1px, transparent 1.4px); background-size: 24px 24px; mask-image: linear-gradient(135deg, #000 0%, transparent 60%); -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 60%); } .contacts-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:flex-start} .contacts-form{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px; } .contacts-form h3{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.02em;margin:0 0 8px} .contacts-form p{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 28px} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field label{font-size:13px;font-weight:600;color:var(--ink-2)} .field input, .field textarea, .field select{ font-family:inherit;font-size:16px;color:var(--ink);background:var(--cream); border:1px solid var(--line);border-radius:12px;padding:14px 16px;outline:none; transition:all .2s ease;width:100%; } .field input:focus, .field textarea:focus{border-color:var(--orange-500);background:var(--paper);box-shadow:0 0 0 3px rgba(149,87,47,.16)} .field textarea{resize:vertical;min-height:100px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .contacts-info{display:flex;flex-direction:column;gap:18px} .contact-card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:24px; display:flex;gap:16px;align-items:flex-start;transition:all .2s ease; } .contact-card:hover{border-color:var(--orange-300);transform:translateY(-2px)} .contact-card .ic{width:44px;height:44px;border-radius:12px;background:var(--orange-100);color:var(--orange-600);display:grid;place-items:center;flex-shrink:0} .contact-card .ttl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono)} .contact-card .val{font-weight:600;font-size:18px;margin-top:4px;letter-spacing:-.01em} .contact-card .sub{font-size:13px;color:var(--muted);margin-top:4px} .socials{display:flex;gap:10px;margin-top:8px} .socials a{width:44px;height:44px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;transition:all .2s ease;color:var(--ink)} .socials a:hover{background:var(--orange-500);color:#fff;border-color:var(--orange-500);transform:translateY(-2px)} /* ───── CTA banner ───── */ .cta-banner{ background:var(--orange-500);color:#fff;border-radius:var(--r-lg); padding:48px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px; position:relative;overflow:hidden; } .cta-banner::before{ content:"";position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%; border:1px solid rgba(255,255,255,.2); } .cta-banner::after{ content:"";position:absolute;right:-40px;top:-40px;width:280px;height:280px;border-radius:50%; border:1px solid rgba(255,255,255,.18); } .cta-banner h3{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.2vw,42px);margin:0;letter-spacing:-.02em;line-height:1.1;position:relative;z-index:1} .cta-banner p{margin:10px 0 0;opacity:.9;font-size:16px;max-width:48ch;position:relative;z-index:1} .cta-banner .cta-actions{display:flex;gap:12px;flex-shrink:0;position:relative;z-index:1;flex-wrap:wrap} /* ───── Footer ───── */ .footer{background:var(--ink);color:var(--cream);padding:80px 0 32px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,246,236,.1)} .footer h5{font-family:var(--font-display);font-weight:600;font-size:14px;margin:0 0 18px;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-300)} .footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px} .footer ul a{color:rgba(255,246,236,.7);font-size:15px;transition:color .2s ease} .footer ul a:hover{color:var(--orange-400)} .footer .desc{color:rgba(255,246,236,.6);font-size:15px;line-height:1.6;margin-top:18px;max-width:36ch} .footer .footer-logo .logo-mark{box-shadow:0 6px 14px rgba(255,107,31,.4)} .footer .footer-logo .logo-text b{color:#fff} .footer .footer-logo .logo-text small{color:rgba(255,246,236,.5)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;font-size:13px;color:rgba(255,246,236,.5);flex-wrap:wrap;gap:16px} .footer-cta{display:inline-flex;align-items:center;gap:10px;background:var(--orange-500);color:#fff;padding:10px 18px;border-radius:var(--r-sm);font-weight:600;font-size:14px;transition:all .2s ease} .footer-cta:hover{background:#fff;color:var(--orange-600)} /* ───── Press strip — dark ink band ───── */ .press-strip{padding:36px 0;background:var(--ink);position:relative;overflow:hidden;border:0} .press-strip::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.4; background-image: repeating-linear-gradient( 45deg, transparent 0 20px, rgba(255,246,236,.04) 20px 21px ); } .press-strip::after{ content:"";position:absolute;right:-80px;top:50%;width:240px;height:240px;border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 30%, transparent), transparent 70%); transform:translateY(-50%);filter:blur(30px);pointer-events:none; } .press-strip .press-lbl .kicker{color:var(--orange-300)} .press-strip .press-lbl .eyebrow{color:var(--orange-300) !important} .press-strip .press-logo{color:#fff;opacity:.7} .press-strip .press-logo:hover{opacity:1;color:var(--orange-300)} .press-strip .press-logo .pl-suf{color:rgba(255,246,236,.5)} .press-inner{display:flex;align-items:center;gap:clamp(24px,4vw,48px);flex-wrap:wrap} .press-lbl{flex-shrink:0} .press-logos{display:flex;align-items:center;gap:clamp(20px,4vw,40px);flex-wrap:wrap;flex:1;justify-content:space-around;min-width:0} .press-logo{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,2.2vw,22px);letter-spacing:-.02em;color:var(--ink);opacity:.55;transition:opacity .2s ease, color .2s ease;white-space:nowrap} .press-logo:hover{opacity:1;color:var(--orange-600)} .press-logo .pl-suf{font-family:var(--font-mono);font-weight:500;font-size:clamp(11px,1.2vw,13px);letter-spacing:0;color:var(--muted);text-transform:lowercase} @media (max-width:820px){ .press-strip{padding:28px 0} .press-inner{flex-direction:column;text-align:center;gap:18px} .press-logos{justify-content:center;gap:24px 32px;width:100%} } @media (max-width:480px){ .press-strip{padding:22px 0} .press-logos{gap:16px 24px} } /* ───── For Whom — clean white section ───── */ .for-whom{ background:#fff; color:var(--ink); padding:clamp(72px,9vw,140px) 0;position:relative;overflow:hidden; } .for-whom::before{ content:"";position:absolute;left:-180px;top:80px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 10%, transparent), transparent 70%); filter:blur(40px);pointer-events:none; } .for-whom::after{ content:"";position:absolute;right:-120px;bottom:-120px;width:380px;height:380px;border-radius:50%; border:1px dashed rgba(20,16,12,.10); pointer-events:none; } .for-whom .sec-head h2{color:var(--ink)} .for-whom .sec-head p{color:var(--ink-2)} .for-whom .eyebrow{color:var(--orange-600)} .for-whom .btn-ghost{color:var(--ink);border-color:rgba(20,16,12,.18)} .for-whom .btn-ghost:hover{background:var(--orange-500);color:#fff;border-color:var(--orange-500)} .for-whom-grid{display:grid;grid-template-columns:1fr;gap:28px} /* Zigzag persona cards */ .fw-card{ --fw-accent:var(--orange-500); position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease; display:grid;grid-template-columns:minmax(240px, 42%) 1fr;gap:28px;align-items:center; } .fw-card::before{ content:"";position:absolute;inset:auto -80px -80px auto;width:260px;height:260px;border-radius:50%; background:color-mix(in oklab, var(--fw-accent) 12%, transparent); filter:blur(30px);pointer-events:none;z-index:0; } .for-whom-grid > .fw-card:nth-child(1){background:var(--orange-50);border-color:color-mix(in oklab, var(--orange-500) 22%, transparent)} .for-whom-grid > .fw-card:nth-child(2){background:#ECEFF2;border-color:rgba(63,95,140,.22)} .for-whom-grid > .fw-card:nth-child(3){background:#EBEFEA;border-color:rgba(74,114,86,.22)} .for-whom-grid > .fw-card:nth-child(even){grid-template-columns:1fr minmax(240px, 42%)} .for-whom-grid > .fw-card:nth-child(even) .fw-photo{order:2} .fw-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .fw-photo{position:relative;aspect-ratio:5/4;border-radius:calc(var(--r-lg) - 8px);overflow:hidden;background:color-mix(in oklab, var(--fw-accent) 8%, transparent);z-index:1} .fw-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .fw-photo::after{ content:"";position:absolute;inset:auto 14px 14px auto;width:56px;height:56px;border-radius:16px; background:var(--fw-accent);opacity:.85; } .fw-dot{position:absolute;top:14px;left:14px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in oklab, var(--fw-accent) 55%, transparent)} .fw-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;padding:4px 8px} .fw-num{ position:absolute;top:-14px;right:0;font-family:var(--font-display);font-weight:700;font-size:110px; line-height:1;letter-spacing:-.04em;color:var(--fw-accent);opacity:.10;pointer-events:none; } .fw-tag{align-self:flex-start;color:var(--fw-accent);background:color-mix(in oklab, var(--fw-accent) 14%, transparent); font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:6px 12px;border-radius:999px} .fw-body h3{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0;line-height:1.1} .fw-body p{color:var(--muted);font-size:15px;line-height:1.55;margin:0} .fw-body ul{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px} .fw-body ul li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink-2);font-weight:500;line-height:1.4} .fw-body ul li .ck{margin-top:2px;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;flex-shrink:0; background:color-mix(in oklab, var(--fw-accent) 14%, transparent);color:var(--fw-accent)} .fw-more{margin-top:6px;font-weight:600;font-size:14px;color:var(--fw-accent);display:inline-flex;align-items:center;gap:6px;padding-top:12px;border-top:1px solid color-mix(in oklab, var(--fw-accent) 22%, transparent)} .fw-more:hover{filter:brightness(.85)} @media (max-width: 820px){ .fw-card, .for-whom-grid > .fw-card:nth-child(even){grid-template-columns:1fr;gap:18px} .for-whom-grid > .fw-card:nth-child(even) .fw-photo{order:0} .fw-photo{aspect-ratio:16/9} .fw-body ul{grid-template-columns:1fr} .fw-num{font-size:80px;top:-8px} } /* ───── App Showcase ───── */ .app-showcase{ background: radial-gradient(900px 600px at 80% 100%, color-mix(in oklab, var(--orange-300) 22%, transparent), transparent 60%), var(--sand); position:relative;overflow:hidden;padding-bottom:clamp(72px,9vw,140px); } .app-showcase::before{content:"";position:absolute;left:-200px;top:80px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 22%, transparent), transparent 70%);pointer-events:none} .showcase-rail{position:relative;overflow-x:auto;overflow-y:hidden;margin:0 calc(var(--pad) * -1);padding:20px var(--pad) 40px;scrollbar-width:thin;scrollbar-color:var(--orange-300) transparent} .showcase-rail::-webkit-scrollbar{height:8px} .showcase-rail::-webkit-scrollbar-thumb{background:var(--orange-300);border-radius:4px} .showcase-track{display:flex;gap:32px;align-items:flex-start;width:max-content} .showcase-item{display:flex;flex-direction:column;align-items:center;gap:18px;width:260px;flex-shrink:0;position:relative} .showcase-num{font-family:var(--font-display);font-weight:700;font-size:48px;letter-spacing:-.04em;color:var(--orange-500);opacity:.25;line-height:1} .showcase-phone-wrap{transition:transform .3s ease} .showcase-item:hover .showcase-phone-wrap{transform:translateY(-8px)} .showcase-meta{text-align:center;max-width:240px} .showcase-tag{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)} .showcase-desc{color:var(--muted);font-size:14px;line-height:1.5;margin-top:6px} /* ───── Cities ───── */ .cities{background:var(--ink);color:var(--cream);padding:clamp(72px,9vw,120px) 0;position:relative;overflow:hidden} .cities::before{content:"";position:absolute;right:-120px;bottom:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle, color-mix(in oklab, var(--orange-500) 30%, transparent), transparent 70%);pointer-events:none} .cities-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;position:relative;z-index:1;margin-bottom:40px} .cities-head-cta{align-self:end;white-space:nowrap} .kz-map-wrap{position:relative;z-index:1;padding:24px 12px;border-radius:24px;background:rgba(255,246,236,.03);border:1px solid rgba(255,246,236,.08);margin-bottom:40px} .kz-map{width:100%;height:auto;display:block;max-height:520px;overflow:visible} .kz-outline-fill{fill:rgba(255,246,236,.04)} .kz-outline{fill:none;stroke:rgba(255,246,236,.22);stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:kzDraw 2.2s ease .1s forwards} @keyframes kzDraw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion: reduce){.kz-outline{animation:none;stroke-dashoffset:0}} .kz-pin{cursor:pointer;outline:none} .kz-pin-core{r:var(--r);fill:var(--orange-500);stroke:#FFF6EC;stroke-width:1.5;transition:r .25s cubic-bezier(.16,1,.3,1),fill .2s ease} .kz-pin-ring{r:calc(var(--r) + 4px);fill:none;stroke:rgba(255,138,63,.6);stroke-width:1.5;opacity:0;transition:opacity .25s ease,r .25s cubic-bezier(.16,1,.3,1)} .kz-pin-halo{opacity:0;transition:opacity .25s ease;pointer-events:none} .kz-pin:hover .kz-pin-core,.kz-pin:focus-visible .kz-pin-core,.kz-pin.is-active .kz-pin-core{r:calc(var(--r) * 1.5);fill:var(--orange-300)} .kz-pin:hover .kz-pin-ring,.kz-pin:focus-visible .kz-pin-ring,.kz-pin.is-active .kz-pin-ring{r:calc(var(--r) * 1.5 + 5px);opacity:1} .kz-pin:hover .kz-pin-halo,.kz-pin:focus-visible .kz-pin-halo,.kz-pin.is-active .kz-pin-halo{opacity:1} .kz-tooltip{position:absolute;pointer-events:none;background:#FFF6EC;color:var(--ink);padding:8px 14px;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px;white-space:nowrap;transform:translate(-50%,calc(-100% - 14px));z-index:3;font-weight:600;font-size:14px;line-height:1.2} .kz-tooltip::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#FFF6EC} .kz-tooltip-count{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.03em} .cities-cloud{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;position:relative;z-index:1} .city-chip{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--r-sm);background:rgba(255,246,236,.06);border:1px solid rgba(255,246,236,.12);font-weight:600;font-size:16px;color:#fff;transition:all .2s ease;opacity:1;animation:chipIn .6s cubic-bezier(.16,1,.3,1) both;cursor:pointer;font-family:inherit} .city-chip:hover,.city-chip.is-active{background:var(--orange-500);border-color:var(--orange-500);transform:translateY(-2px)} .city-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--orange-300);flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.18)} .city-chip .ct{font-family:var(--font-mono);font-size:11px;color:rgba(255,246,236,.5);font-weight:500} .city-chip:hover .ct,.city-chip.is-active .ct{color:rgba(255,255,255,.8)} .city-chip:hover .dot,.city-chip.is-active .dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)} @keyframes chipIn{from{transform:translateY(8px)}to{transform:translateY(0)}} /* ───── Testimonials ───── */ .testimonials{ background: radial-gradient(800px 500px at 10% 0%, color-mix(in oklab, var(--orange-200) 28%, transparent), transparent 60%), radial-gradient(700px 500px at 100% 100%, color-mix(in oklab, var(--orange-300) 16%, transparent), transparent 60%), var(--cream); position:relative;overflow:hidden; } .testimonials::before{ content:"";position:absolute;right:6%;top:80px;width:140px;height:140px;border-radius:50%; border:1px dashed color-mix(in oklab, var(--orange-500) 28%, transparent); pointer-events:none; } .testimonials-slider{position:relative} .testimonials-grid{ display:flex;gap:20px; overflow-x:auto;scroll-snap-type:x mandatory; scroll-padding-left:0;padding:4px 0 20px; margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad); scrollbar-width:none; scroll-behavior:smooth; } .testimonials-grid::-webkit-scrollbar{display:none} .t-nav-row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} .t-nav{ width:44px;height:44px;border-radius:50%; background:var(--paper);border:1px solid var(--line);color:var(--ink); display:grid;place-items:center;cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; } .t-nav:hover:not(:disabled){background:var(--orange-500);color:#fff;border-color:var(--orange-500)} .t-nav:disabled{opacity:.35;cursor:default} .t-nav[data-t-prev] svg{transform:rotate(180deg)} .t-card{flex:0 0 clamp(280px, 82vw, 380px);scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;position:relative;display:flex;flex-direction:column;gap:16px;transition:all .25s ease} .t-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .t-quote-mark{position:absolute;top:14px;right:24px;font-family:var(--font-display);font-weight:700;font-size:100px;line-height:1;color:var(--orange-200);pointer-events:none;user-select:none} .t-stars{color:var(--orange-500);letter-spacing:2px;font-size:16px;position:relative;z-index:1} .t-body{font-size:16px;line-height:1.55;color:var(--ink);margin:0;flex:1;position:relative;z-index:1;letter-spacing:-.005em} .t-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} .t-toggle{align-self:flex-start;background:none;border:0;padding:0;margin:-6px 0 0;font:inherit;font-size:14px;font-weight:600;color:var(--orange-600);cursor:pointer;letter-spacing:-.005em} .t-toggle:hover{text-decoration:underline} .t-toggle:focus-visible{outline:2px solid var(--orange-600);outline-offset:3px;border-radius:4px} .t-meta{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line)} .t-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:15px;flex-shrink:0} .t-name{font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em} .t-role{font-size:12px;color:var(--ink-2);margin-top:2px;font-family:var(--font-mono)} @media (max-width: 1100px){ .testimonials-grid{gap:14px} .cities-head{grid-template-columns:1fr;gap:24px;align-items:start} .cities-head-cta{justify-self:start} } @media (max-width: 640px){ .t-nav-row{display:none} } /* ───── Reveal animation (slide only — never hides content if a transition stalls) ───── */ .reveal{opacity:1;transform:translateY(14px);transition:transform .7s cubic-bezier(.16,1,.3,1)} .reveal.in{transform:translateY(0)} @media (prefers-reduced-motion: reduce){ .reveal,.reveal.in{transform:none;transition:none} } .reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s} /* ───── Section header ───── */ .sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:48px;max-width:72ch} .sec-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,4.5vw,60px);letter-spacing:-.02em;line-height:1.02;margin:0} .sec-head p{color:var(--muted);font-size:17px;line-height:1.55;margin:0;max-width:54ch} /* ───── Responsive ───── */ @media (max-width: 1100px){ .about-grid,.faq-grid,.contacts-grid{grid-template-columns:1fr;gap:40px} .features-grid,.news-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .cta-banner{flex-direction:column;align-items:flex-start;padding:36px} .stats-grid{grid-template-columns:repeat(6,1fr)} .bento-1{grid-column:span 6} .bento-2,.bento-4{grid-column:span 3} .bento-3,.bento-5{grid-column:span 3} .bento-6,.bento-7{grid-column:span 6} } @media (max-width: 1180px){ .hdr-nav{gap:18px} .hdr-nav a{font-size:13px} } @media (max-width: 1024px){ .hdr-inner{grid-template-columns:auto 1fr auto;gap:16px} .hdr-nav{display:none} .hdr-phone{display:none} .hdr-right .btn{display:none} .hdr-burger{display:block} } @media (max-width: 780px){ .features-grid,.news-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .field-row{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr} .bento-1,.bento-2,.bento-3,.bento-4,.bento-5,.bento-6,.bento-7{grid-column:span 1} } /* hero QR download code */ .hero-qr{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:10px 14px 10px 10px;box-shadow:var(--shadow-sm)} .hero-qr img{display:block;border-radius:8px} .hero-qr-txt{font-size:12px;line-height:1.45;color:#1B1A16;font-weight:500} @media (max-width:768px){.hero-qr{display:none}} /* solid light CTA (replaces glassy ghost in hero) */ .btn-cream{background:#FFF6EC;color:#1B1A16;border:1px solid #FFF6EC} .btn-cream:hover{background:#fff;border-color:#fff;color:#14100C} /* QR download modal */ .qr-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center} .qr-modal[hidden]{display:none} .qr-modal-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.55);backdrop-filter:blur(4px)} .qr-modal-card{position:relative;background:#fff;border-radius:24px;padding:36px 44px 32px;text-align:center;box-shadow:0 24px 64px rgba(20,16,12,.35);max-width:90vw;animation:qrPop .25s cubic-bezier(.16,1,.3,1)} @keyframes qrPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} .qr-modal-card h3{font-family:var(--font-display);font-size:24px;margin:0 0 8px;color:#1B1A16} .qr-modal-card p{font-size:14px;line-height:1.5;color:#6B5F53;margin:0 0 20px} .qr-modal-card img{display:block;margin:0 auto;border-radius:12px} .qr-modal-note{margin-top:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#A89887} .qr-modal-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:28px;line-height:1;color:#A89887;cursor:pointer;padding:4px} .qr-modal-close:hover{color:#1B1A16} /* language switcher */ .lang-switch{display:inline-flex;gap:2px;background:rgba(20,16,12,.06);border-radius:999px;padding:3px} .lang-switch a{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:999px;color:var(--muted);transition:all .15s ease;text-decoration:none} .lang-switch a:hover{color:var(--ink)} .lang-switch a.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,16,12,.15)} body.hero-on-dark .hdr:not(.scrolled) .lang-switch{background:rgba(255,246,236,.14)} body.hero-on-dark .hdr:not(.scrolled) .lang-switch a{color:rgba(255,246,236,.75)} body.hero-on-dark .hdr:not(.scrolled) .lang-switch a.active{background:#fff;color:#14100C} @media (max-width:1100px){.hdr-right .lang-switch{display:none}} /* news article body: inline images and typography */ .article-body img{max-width:100%;height:auto;border-radius:14px;margin:20px 0;display:block} .article-body h2,.article-body h3{font-family:var(--font-display);letter-spacing:-.01em;margin:28px 0 12px} .article-body p{margin:0 0 16px} .article-body ul,.article-body ol{margin:0 0 16px;padding-left:24px} .article-body a{color:var(--orange-600);text-decoration:underline}