/* ============================================================ Kira — Landing Page Redesign Modern, clean, premium SaaS · Light · RTL Arabic ============================================================ */ /* ---------- Fonts ---------- */ /* Cairo is loaded via in (parallel, non-blocking) — not @import here. */ /* ---------- Tokens ---------- */ :root{ /* brand — refined sky/cyan from the Kira mark */ --brand-50: oklch(0.97 0.018 233); --brand-100: oklch(0.93 0.04 233); --brand-200: oklch(0.86 0.07 233); --brand-400: oklch(0.70 0.13 233); --brand-500: oklch(0.64 0.14 233); --brand-600: oklch(0.56 0.13 235); --brand-700: oklch(0.47 0.11 237); --brand: var(--brand-600); /* warm complementary accent — for CTA */ --accent-300: oklch(0.82 0.10 48); --accent-500: oklch(0.70 0.175 42); --accent-600: oklch(0.64 0.175 40); --accent-700: oklch(0.57 0.16 38); --accent: var(--accent-500); /* neutrals — cool slate */ --ink: oklch(0.24 0.028 248); --ink-2: oklch(0.37 0.024 248); --muted: oklch(0.53 0.02 248); --faint: oklch(0.66 0.014 248); --line: oklch(0.91 0.008 244); --line-2: oklch(0.95 0.006 244); --bg: oklch(0.995 0.002 240); --surface: #ffffff; --soft: oklch(0.975 0.006 240); --soft-2: oklch(0.965 0.009 238); --ink-bg: oklch(0.21 0.026 255); --ink-bg-2:oklch(0.26 0.03 255); /* type */ --display: "Cairo", sans-serif; --body: "Cairo", sans-serif; --mono: "Cairo", sans-serif; --radius: 18px; --radius-sm: 12px; --radius-lg: 28px; --shadow-sm: 0 1px 2px rgba(16,32,55,.05), 0 2px 8px rgba(16,32,55,.04); --shadow: 0 10px 30px -12px rgba(16,40,70,.18), 0 4px 12px -6px rgba(16,40,70,.08); --shadow-lg: 0 40px 90px -30px rgba(15,45,80,.30), 0 12px 30px -12px rgba(15,45,80,.12); --shadow-brand: 0 22px 48px -18px oklch(0.56 0.13 235 / .45); --shadow-accent: 0 18px 40px -16px oklch(0.64 0.175 40 / .55); --maxw: 1200px; --gutter: clamp(20px, 5vw, 56px); } /* ---------- Reset ---------- */ *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } /* ---------- Accessibility ---------- */ .skip-link{ position:absolute; inset-inline-start:16px; top:-60px; z-index:1000; background:var(--brand-600); color:#fff; padding:10px 18px; border-radius:10px; font-weight:600; font-size:14px; transition:top .2s ease; } .skip-link:focus{ top:16px; } :focus-visible{ outline:2px solid var(--brand-600); outline-offset:3px; border-radius:4px; } button{ font-family:inherit; cursor:pointer; border:none; background:none; } ::selection{ background:var(--brand-200); color:var(--ink); } h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.18; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; } /* ---------- Layout ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } section{ position:relative; } .section-pad{ padding-block:clamp(72px, 9vw, 130px); } .eyebrow{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.16em; color:var(--brand-600); text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; direction:ltr; } .eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand-500); border-radius:2px; } .section-head{ max-width:680px; margin-inline:auto; text-align:center; margin-bottom:clamp(40px,5vw,64px); } .section-head .eyebrow{ margin-bottom:18px; } .section-head h2{ font-size:clamp(30px, 4.4vw, 50px); } .section-head p{ color:var(--muted); font-size:clamp(16px,1.6vw,19px); margin-top:18px; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--body); font-weight:600; font-size:16px; padding:14px 26px; border-radius:999px; transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease; white-space:nowrap; line-height:1; } .btn svg{ width:19px; height:19px; } .btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-accent); } .btn-primary:hover{ background:var(--accent-600); transform:translateY(-2px); } .btn-dark{ background:var(--ink); color:#fff; } .btn-dark:hover{ background:var(--ink-2); transform:translateY(-2px); } .btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm); } .btn-ghost:hover{ border-color:var(--brand-200); color:var(--brand-700); transform:translateY(-2px); } .btn-lg{ padding:17px 32px; font-size:17px; } .btn-white{ background:#fff; color:var(--ink); } .btn-white:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(0,0,0,.4); } .btn-outline-light{ border:1px solid rgba(255,255,255,.28); color:#fff; } .btn-outline-light:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); } /* ---------- Header ---------- */ .site-header{ position:fixed; inset-block-start:0; inset-inline:0; z-index:100; transition:background .3s ease, box-shadow .3s ease, padding .3s ease; padding-block:18px; } .site-header.scrolled{ background:oklch(0.995 0.002 240 / .82); backdrop-filter:saturate(180%) blur(16px); box-shadow:0 1px 0 var(--line), 0 6px 24px -18px rgba(16,40,70,.4); padding-block:12px; } .nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand img{ height:38px; width:auto; } .nav-links{ display:flex; align-items:center; gap:6px; list-style:none; } .nav-links a{ font-size:15.5px; font-weight:500; color:var(--ink-2); padding:9px 15px; border-radius:10px; transition:color .2s, background .2s; } .nav-links a:hover{ color:var(--brand-700); background:var(--brand-50); } .nav-cta{ display:flex; align-items:center; gap:12px; } .nav-login{ font-size:15.5px; font-weight:600; color:var(--ink); padding:10px 8px; white-space:nowrap; } .nav-login:hover{ color:var(--brand-700); } .lang-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 12px; transition:.2s; } .lang-pill:hover{ border-color:var(--brand-200); color:var(--brand-700); } .burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface); } .burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px auto; border-radius:2px; transition:.25s; } /* ---------- Hero ---------- */ .hero{ padding-top:clamp(130px, 17vw, 188px); padding-bottom:clamp(60px,7vw,90px); overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; } .hero-bg::before{ content:""; position:absolute; inset-block-start:-30%; inset-inline-end:-12%; width:780px; height:780px; border-radius:50%; background:radial-gradient(circle at center, oklch(0.70 0.13 233 / .22), transparent 64%); filter:blur(8px); } .hero-bg::after{ content:""; position:absolute; inset-block-end:-34%; inset-inline-start:-14%; width:680px; height:680px; border-radius:50%; background:radial-gradient(circle at center, oklch(0.70 0.175 42 / .14), transparent 65%); } .hero-grid-overlay{ position:absolute; inset:0; background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 78%); mask-image:radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 78%); opacity:.7; } .hero-inner{ display:grid; grid-template-columns:1.05fr 1.15fr; align-items:center; gap:clamp(32px,4vw,64px); } .hero-copy{ max-width:560px; } .hero-chip{ display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); padding:7px 8px 7px 16px; border-radius:999px; box-shadow:var(--shadow-sm); font-size:14px; font-weight:500; color:var(--ink-2); margin-bottom:26px; white-space:nowrap; } .hero-chip b{ color:var(--brand-700); font-weight:700; } .hero-chip .tag{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; background:var(--brand-500); color:#fff; padding:4px 9px; border-radius:999px; direction:ltr; } .hero h1{ font-size:clamp(36px, 5.6vw, 64px); line-height:1.28; font-weight:700; } .hero h1 .grad{ display:inline-block; padding-block:.04em; background:linear-gradient(90deg, var(--brand-500), var(--brand-700)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-lead{ font-size:clamp(16.5px,1.8vw,20px); color:var(--muted); margin-top:24px; max-width:520px; } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .hero-trust{ display:flex; align-items:center; gap:20px; margin-top:30px; flex-wrap:wrap; } .hero-trust .stars{ color:var(--accent-500); letter-spacing:2px; font-size:15px; } .hero-trust small{ color:var(--faint); font-size:14px; } .hero-trust .divider{ width:1px; height:30px; background:var(--line); } .hero-trust .mini b{ font-family:var(--display); font-size:18px; color:var(--ink); display:block; line-height:1.1; } .hero-trust .mini span{ font-size:13px; color:var(--faint); } .hero-visual{ position:relative; } .hero-visual img{ width:100%; height:auto; filter:drop-shadow(0 50px 70px rgba(15,45,80,.22)); animation:floaty 6s ease-in-out infinite; } .hero-badge{ position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px 15px; display:flex; align-items:center; gap:11px; font-size:14px; font-weight:600; color:var(--ink); } .hero-badge .ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; } .hero-badge small{ display:block; font-size:12px; font-weight:500; color:var(--faint); } .hero-badge.b1{ inset-block-start:14%; inset-inline-start:-3%; animation:floaty 5s ease-in-out infinite; } .hero-badge.b2{ inset-block-end:12%; inset-inline-end:-2%; animation:floaty 5.6s ease-in-out .6s infinite; } @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } /* ---------- Logos strip ---------- */ .logos{ padding-block:clamp(40px,5vw,60px); border-block:1px solid var(--line); background:var(--surface); } .logos p{ text-align:center; font-size:13.5px; color:var(--faint); letter-spacing:.04em; margin-bottom:30px; } .logos-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(28px,5vw,64px); } /* marquee track */ .logos-marquee{ --lg-gap:clamp(36px,6vw,72px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logos-track{ display:flex; align-items:center; gap:var(--lg-gap); width:max-content; animation:marquee 34s linear infinite; } .logos-set{ display:flex; align-items:center; gap:var(--lg-gap); } .logos-marquee:hover .logos-track{ animation-play-state:paused; } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - (var(--lg-gap) / 2))); } } .logo-item{ display:flex; align-items:center; justify-content:center; width:150px; height:64px; flex-shrink:0; } .logo-item img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.5; transition:filter .35s ease, opacity .35s ease, transform .35s ease; } .logo-item:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.06); } /* ---------- Features ---------- */ .features{ background:var(--bg); } .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .feat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease; position:relative; overflow:hidden; } .feat-card::after{ content:""; position:absolute; inset-block-start:0; inset-inline-end:0; width:120px; height:120px; background:radial-gradient(circle at top right, var(--brand-50), transparent 70%); opacity:0; transition:opacity .3s; } .feat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--brand-200); } .feat-card:hover::after{ opacity:1; } .feat-ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(145deg, var(--brand-50), oklch(0.93 0.04 233 / .55)); color:var(--brand-600); margin-bottom:20px; position:relative; z-index:1; border:1px solid oklch(0.86 0.07 233 / .5); } .feat-ic svg{ width:26px; height:26px; stroke-width:1.7; } .feat-card h3{ font-size:20px; font-weight:600; margin-bottom:9px; position:relative; z-index:1; } .feat-card p{ color:var(--muted); font-size:15.5px; line-height:1.65; position:relative; z-index:1; } /* Spotlight feature card — full-width: copy + website mockup */ .feat-spotlight{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:clamp(28px,4vw,56px); padding:clamp(30px,3.4vw,46px); } .feat-spotlight:hover{ transform:none; box-shadow:none; border-color:var(--brand-200); } .spot-copy{ position:relative; z-index:1; } .spot-copy h3{ font-size:clamp(22px,2.4vw,28px); margin-block:18px 12px; } .spot-copy > p{ font-size:16px; max-width:46ch; } .spot-list{ list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:12px; } .spot-list li{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--ink-2); } .spot-list .check{ width:24px; height:24px; flex-shrink:0; border-radius:7px; display:grid; place-items:center; background:var(--brand-50); color:var(--brand-600); border:1px solid oklch(0.86 0.07 233 / .5); } .spot-list .check svg{ width:14px; height:14px; stroke-width:2.4; } .spot-cta{ margin-top:24px; display:inline-flex; align-items:center; gap:9px; } .spot-cta svg{ transition:transform .25s ease; } .spot-cta:hover svg{ transform:translateX(-4px); } .spot-media{ position:relative; padding-block:38px 26px; padding-inline-end:30px; z-index:1; } .ws-langtoggle{ position:absolute; inset-block-start:0; inset-inline-end:30px; z-index:5; display:inline-flex; gap:3px; background:var(--soft-2); border:1px solid var(--line); border-radius:999px; padding:3px; } .ws-langtoggle button{ border:none; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--muted); padding:5px 15px; border-radius:999px; cursor:pointer; transition:.2s; } .ws-langtoggle button.active{ background:var(--brand-600); color:#fff; } .web-sample{ width:100%; } .ws-shot{ display:block; width:100%; aspect-ratio:1400 / 797; overflow:hidden; background:var(--soft); } .ws-shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; } /* realistic iPhone frame */ .iphone{ position:relative; width:clamp(108px,12vw,138px); aspect-ratio:430 / 882; background:linear-gradient(150deg,#3a3f4a,#1a1d24 38%,#23262e 62%,#43474f); border-radius:30px; padding:5px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 3px #0c0e12, 0 30px 56px -20px rgba(15,45,80,.55), 0 10px 24px -10px rgba(15,45,80,.32); } .iphone .ip-screen{ position:relative; width:100%; height:100%; border-radius:25px; overflow:hidden; background:#0c0e12; } .iphone .ip-screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; } .iphone .ip-island{ position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:2; width:30%; height:7px; border-radius:99px; background:#05070a; } .ip-btn{ position:absolute; background:linear-gradient(180deg,#2a2e36,#15171c); border-radius:2px; } .ip-btn.ip-vol{ inset-inline-start:-2px; top:21%; width:2.5px; height:11%; } .ip-btn.ip-pwr{ inset-inline-end:-2px; top:27%; width:2.5px; height:13%; } .ws-phone{ position:absolute; inset-block-end:0; inset-inline-end:-6px; z-index:3; } .spot-media[data-lang="ar"] .ws-en{ display:none; } .spot-media[data-lang="en"] .ws-ar{ display:none; } /* On small phones the overlapping iPhone covers ~half the website frame — hide it so the website preview reads clearly (no overlap). */ @media (max-width: 640px){ .tab-webmedia{ padding-block:40px 8px; } .tab-webmedia .ws-phone{ display:none; } .tab-webmedia .ws-langtoggle{ inset-inline-start:auto; inset-inline-end:auto; left:50%; transform:translateX(-50%); } } @media (max-width: 860px){ .feat-spotlight{ grid-template-columns:1fr; } .spot-media{ padding-inline-end:0; order:2; } } .feat-card.accent .feat-ic{ background:linear-gradient(145deg, oklch(0.92 0.06 48 / .6), oklch(0.86 0.09 44 / .4)); color:var(--accent-700); border-color:oklch(0.82 0.10 48 / .55); } /* ---------- Feature tabs (vertical) ---------- */ .ftabs{ display:grid; grid-template-columns:300px 1fr; gap:clamp(18px,2.2vw,32px); margin-top:clamp(28px,3.4vw,46px); align-items:stretch; } .ftabs-list{ display:flex; flex-direction:column; gap:6px; justify-content:space-between; } .ftab{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; text-align:start; padding:11px 15px 13px; border-radius:var(--radius-sm); border:1px solid transparent; background:transparent; cursor:pointer; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } .ftab:hover{ background:var(--soft); } .ftab.active{ background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-sm); } .ftab-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--soft); color:var(--faint); border:1px solid transparent; transition:.25s ease; } .ftab-ic svg{ width:19px; height:19px; stroke-width:1.7; } .ftab.active .ftab-ic{ background:linear-gradient(145deg, var(--brand-50), oklch(0.93 0.04 233 / .55)); color:var(--brand-600); border-color:oklch(0.86 0.07 233 / .5); } .ftab-txt b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink-2); line-height:1.3; } .ftab-txt small{ display:block; font-size:12px; color:var(--faint); margin-top:1px; } .ftab.active .ftab-txt b{ color:var(--brand-700); } .ftab-prog{ position:absolute; inset-inline:15px; inset-block-end:5px; height:2.5px; border-radius:2px; background:var(--line-2); overflow:hidden; opacity:0; transition:opacity .25s; } .ftab.active .ftab-prog{ opacity:1; } .ftab-prog i{ display:block; height:100%; width:0; background:var(--brand-500); border-radius:2px; } .ftab.active .ftab-prog i{ animation:ftabFill 6s linear forwards; } .ftabs.paused .ftab.active .ftab-prog i{ animation:none; width:0; } @keyframes ftabFill{ from{ width:0; } to{ width:100%; } } /* Stage + panels */ .ftabs-stage{ position:relative; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,2.8vw,40px); min-height:clamp(430px,40vw,500px); display:flex; align-items:center; overflow:hidden; } .ftab-panel{ display:none; width:100%; } .ftab-panel.active{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(22px,3vw,46px); align-items:center; } @media (prefers-reduced-motion: no-preference){ .ftab-panel.active{ animation:fpIn .5s cubic-bezier(.2,.7,.3,1) both; } @keyframes fpIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } } .fp-copy .eyebrow{ margin-bottom:14px; } .fp-copy h3{ font-size:clamp(21px,2.3vw,28px); margin-bottom:13px; } .fp-copy > p{ color:var(--muted); font-size:16px; max-width:46ch; } .fp-copy .show-list{ margin-top:20px; } .fp-copy .spot-cta{ margin-top:24px; } .fp-media{ display:flex; align-items:center; justify-content:center; min-width:0; } .tab-webmedia{ display:block; } /* Phones inside panels */ .fp-media .iphone{ width:clamp(150px,15.5vw,196px); } .phones-duo{ position:relative; padding:8px 0; } .phones-duo .ph-front{ position:relative; z-index:2; } .phones-duo .ph-back{ position:absolute; inset-inline-start:-46%; inset-block-end:14px; z-index:1; transform:rotate(-6deg) scale(.9); opacity:.92; filter:saturate(.96); } .ph-solo{ margin-block:6px; } /* Notification screen */ .ip-notif{ background:linear-gradient(160deg,#eef4fb,#e3ecf6); } .notif-wrap{ position:absolute; inset:0; padding:34px 12px 14px; display:flex; flex-direction:column; gap:9px; } .notif-time{ font-size:11px; color:oklch(0.45 0.02 248); font-weight:600; padding-inline-start:4px; margin-bottom:1px; } .notif{ display:flex; gap:9px; align-items:flex-start; background:oklch(1 0 0 / .82); backdrop-filter:blur(4px); border:1px solid oklch(1 0 0 / .6); border-radius:13px; padding:9px 10px; box-shadow:0 6px 16px -8px rgba(15,45,80,.28); } .notif b{ display:block; font-size:10.5px; font-weight:700; color:var(--ink); line-height:1.35; } .notif small{ display:block; font-size:9px; color:var(--muted); margin-top:1px; } .notif-ic{ width:24px; height:24px; flex:0 0 auto; border-radius:7px; display:grid; place-items:center; } .notif-ic svg{ width:14px; height:14px; stroke-width:2; fill:none; stroke:currentColor; } .ic-warn{ background:oklch(0.95 0.06 70); color:oklch(0.55 0.13 60); } .ic-brand{ background:var(--brand-50); color:var(--brand-600); } .ic-ok{ background:oklch(0.94 0.06 150); color:oklch(0.5 0.11 150); } /* Vignettes (representative product UI) */ .vig-frame{ width:100%; max-width:540px; } .vig{ background:#fff; padding:clamp(16px,1.7vw,22px); display:flex; flex-direction:column; gap:11px; } .vig-card{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); max-width:430px; } .vig-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; } .vig-h b{ font-size:15px; font-weight:700; color:var(--ink); } .vig-h span{ font-size:12.5px; color:var(--muted); } .vig-row{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); } .vig-row .lbl{ font-size:13.5px; color:var(--ink-2); } .vig-row .val{ margin-inline-start:auto; font-size:13px; font-weight:600; color:var(--ink); } .vig-net{ background:var(--brand-50); border-color:var(--brand-200); } .vig-net .val{ color:var(--brand-700); } .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .dot-ok{ background:oklch(0.6 0.13 150); } .dot-warn{ background:oklch(0.72 0.15 70); } .pill{ font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:999px; } .pill-ok{ background:oklch(0.94 0.06 150); color:oklch(0.46 0.11 150); } .pill-warn{ background:oklch(0.95 0.07 72); color:oklch(0.52 0.13 62); } /* Contracts table */ .vig-table{ display:flex; flex-direction:column; gap:7px; } .vig-trow{ display:grid; grid-template-columns:64px 1fr 1fr auto; gap:10px; align-items:center; padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); font-size:13px; color:var(--ink-2); } .vig-trow .mono{ font-family:var(--mono); color:var(--muted); font-size:12.5px; } .vig-thead{ background:var(--soft); border-color:transparent; font-size:11.5px; font-weight:700; color:var(--faint); padding-block:8px; } /* Finance */ .vig-stats{ display:grid; grid-template-columns:1fr 1fr; gap:11px; } .vig-stat{ border:1px solid var(--line); border-radius:12px; padding:14px 15px; background:var(--surface); } .vig-stat small{ display:block; font-size:12.5px; color:var(--muted); } .vig-stat b{ display:block; font-size:20px; font-weight:700; margin-top:5px; color:var(--ink); } .vig-stat .trend{ font-size:11.5px; font-weight:600; } .trend.up{ color:oklch(0.55 0.12 150); } .trend.down{ color:oklch(0.55 0.12 150); } /* Reports bars */ .vig-bars{ display:flex; align-items:flex-end; gap:10px; height:160px; padding:10px 4px 0; } .vig-bars i{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(var(--brand-400),var(--brand-600)); min-height:6px; } .vig-bars i:last-child{ background:linear-gradient(var(--accent-500),var(--accent-600)); } .vig-xlabels{ display:flex; gap:10px; padding:0 4px; } .vig-xlabels span{ flex:1; text-align:center; font-size:11px; color:var(--faint); } /* Marketing logos */ .vig-logos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .vig-logos span{ display:grid; place-items:center; height:62px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:12px; } .vig-logos img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:.3s; } .vig-card:hover .vig-logos img{ filter:grayscale(0); opacity:1; } .vig-reach{ display:flex; align-items:baseline; gap:10px; padding:13px 15px; border-radius:12px; background:oklch(0.96 0.035 48); border:1px solid oklch(0.88 0.06 48); margin-top:3px; } .vig-reach b{ font-size:24px; font-weight:800; color:var(--accent-700); } .vig-reach span{ font-size:12.5px; color:var(--accent-700); } /* Contract stack — dashboard + real contract document overlapping */ .contract-stack{ position:relative; width:100%; max-width:540px; padding-block:6px 4px; } .contract-stack .cs-dash{ width:86%; } .contract-doc{ position:absolute; inset-block-start:30px; inset-inline-start:0; margin:0; width:clamp(150px,15vw,190px); border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 24px 50px -18px rgba(15,45,80,.4), 0 4px 12px -6px rgba(15,45,80,.18); transform:rotate(3.5deg); transition:transform .35s cubic-bezier(.2,.7,.3,1); } .contract-doc img{ display:block; width:100%; height:auto; } .contract-stack:hover .contract-doc{ transform:rotate(0deg) translateY(-4px) scale(1.03); } @media (max-width: 980px){ .contract-stack{ max-width:480px; margin-inline:auto; } } @media (max-width: 560px){ .contract-stack .cs-dash{ width:100%; } .contract-doc{ position:relative; inset:auto; width:46%; margin-block-start:-46px; margin-inline-start:auto; transform:rotate(2deg); } } /* Government slider — crossfading screens */ .gslider{ position:relative; width:100%; max-width:560px; } .gslider-track{ position:relative; height:clamp(330px,32vw,400px); } .gslide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:scale(.985); transition:opacity .5s ease, transform .5s ease, visibility .5s; } .gslide.active{ opacity:1; visibility:visible; transform:none; } .gslide .gs-fit{ width:100%; max-width:520px; } /* Wide dashboard screenshot */ .gs-shot{ width:100%; max-width:540px; } .gs-shot img{ display:block; width:100%; height:auto; } /* Police letter document */ .gs-doc{ margin:0; height:100%; display:flex; align-items:center; justify-content:center; } .gs-doc img{ max-height:100%; width:auto; max-width:100%; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); } /* WhatsApp phone */ .gs-phone{ width:clamp(168px,17vw,210px); } .gs-phone .ip-screen img{ width:100%; height:100%; object-fit:cover; } /* Nav arrows */ .gs-nav{ position:absolute; inset-block-start:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); box-shadow:var(--shadow-sm); cursor:pointer; transition:.2s ease; } .gs-nav:hover{ color:var(--brand-600); border-color:var(--brand-200); transform:translateY(-50%) scale(1.08); } .gs-nav svg{ width:20px; height:20px; } .gs-prev{ inset-inline-start:-8px; } .gs-next{ inset-inline-end:-8px; } /* Dots */ .gs-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; } .gs-dot{ width:8px; height:8px; border-radius:999px; border:none; padding:0; cursor:pointer; background:var(--line-2); transition:.3s ease; } .gs-dot:hover{ background:var(--faint); } .gs-dot.active{ width:24px; background:var(--brand-500); } @media (max-width: 980px){ .gslider{ margin-inline:auto; } .gs-nav{ width:36px; height:36px; } .gs-prev{ inset-inline-start:4px; } .gs-next{ inset-inline-end:4px; } } @media (max-width: 980px){ .ftabs{ grid-template-columns:1fr; gap:18px; } .ftabs-list{ flex-direction:row; justify-content:flex-start; overflow-x:auto; gap:8px; padding-bottom:6px; scrollbar-width:none; } .ftabs-list::-webkit-scrollbar{ display:none; } .ftab{ flex:0 0 auto; width:230px; } .ftab-prog{ inset-block-end:6px; } .ftabs-stage{ min-height:0; } /* Feature tab panel — mobile order: eyebrow · title · intro · image · list · CTA */ .ftab-panel.active{ display:flex; flex-direction:column; gap:24px; text-align:center; } .fp-copy{ display:contents; } .fp-copy .eyebrow{ order:1; justify-content:center; } .fp-copy h2, .fp-copy h3{ order:2; } .fp-copy > p{ order:3; } .fp-media{ order:4; } .fp-copy .show-list{ order:5; max-width:440px; margin-inline:auto; text-align:start; } .fp-copy .spot-cta, .fp-copy > .btn{ order:6; } .phones-duo .ph-back{ inset-inline-start:auto; inset-inline-end:-30%; } } @media (max-width: 560px){ .ftab{ width:200px; } .vig-trow{ grid-template-columns:54px 1fr auto; } .vig-trow span:nth-child(3){ display:none; } } /* ---------- Showcase ---------- */ .showcase{ overflow:hidden; } .showcase + .showcase{ padding-top:0; } .show-row{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px,5vw,80px); } .show-row.flip .show-media{ order:2; } .show-copy .eyebrow{ margin-bottom:18px; } .show-copy h2{ font-size:clamp(27px,3.6vw,42px); } .show-copy > p{ color:var(--muted); font-size:17px; margin-top:18px; } .show-list{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:15px; } .show-list li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-2); } .show-list .check{ width:25px; height:25px; border-radius:8px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; flex-shrink:0; margin-top:2px; border:1px solid oklch(0.86 0.07 233 / .5); } .show-list .check svg{ width:15px; height:15px; stroke-width:2.4; } .show-copy .btn{ margin-top:32px; } .show-media{ position:relative; } .media-frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); background:var(--surface); } .media-frame.browser .browser-bar{ height:42px; background:var(--soft-2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; padding-inline:16px; } .media-frame.browser .browser-bar i{ width:11px; height:11px; border-radius:50%; background:var(--line); display:block; } .media-frame.browser .browser-bar .url{ margin-inline-start:14px; font-family:var(--mono); font-size:11.5px; color:var(--faint); background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:4px 12px; direction:ltr; } .show-media .dashboard-shot{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; } .show-media .glow{ position:absolute; inset:auto; z-index:-1; width:70%; height:70%; inset-block-start:14%; inset-inline-start:14%; background:radial-gradient(circle, oklch(0.70 0.13 233 / .25), transparent 70%); filter:blur(40px); } .show-deco{ position:absolute; inset-block-start:-22px; inset-inline-end:-22px; z-index:2; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:13px 16px; display:flex; align-items:center; gap:12px; } .show-deco .ring{ width:42px; height:42px; border-radius:50%; background:conic-gradient(var(--brand-500) var(--p,72%), var(--line-2) 0); display:grid; place-items:center; flex-shrink:0; } .show-deco .ring i{ width:30px; height:30px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-family:var(--display); font-size:11px; font-weight:700; color:var(--brand-700); font-style:normal; } .show-deco b{ font-family:var(--display); font-size:16px; color:var(--ink); display:block; line-height:1.2; } .show-deco small{ font-size:12px; color:var(--faint); } /* phone showcase */ .app-section{ background:linear-gradient(180deg, var(--soft), var(--bg)); } .app-media{ display:flex; justify-content:center; position:relative; } .app-media img{ width:min(360px,80%); height:auto; filter:drop-shadow(0 40px 60px rgba(15,45,80,.25)); } .store-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .store-btn{ display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:#fff; border-radius:14px; padding:11px 20px; transition:.2s; } .store-btn:hover{ background:var(--ink-2); transform:translateY(-2px); } .store-btn svg{ width:26px; height:26px; } .store-btn span{ font-size:11px; color:rgba(255,255,255,.7); display:block; line-height:1.3; } .store-btn b{ display:block; font-size:16px; font-weight:600; line-height:1.25; margin-top:1px; } .track-app{ margin-top:26px; } .track-app-label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px; } .track-app .store-btns{ margin-top:0; } /* ---------- Stats ---------- */ .stats{ background:var(--ink-bg); color:#fff; position:relative; overflow:hidden; } .stats::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, oklch(0.56 0.13 235 / .35), transparent 45%), radial-gradient(circle at 85% 90%, oklch(0.64 0.175 40 / .22), transparent 45%); } .stats .wrap{ position:relative; } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; } .stat .num{ font-family:var(--display); font-weight:700; font-size:clamp(40px,5vw,60px); line-height:1; letter-spacing:-.02em; display:inline-flex; align-items:baseline; direction:ltr; } .stat .num .suf{ color:var(--brand-400); font-size:.55em; margin-inline-start:2px; } .stat p{ color:rgba(255,255,255,.62); font-size:15.5px; margin-top:12px; } .stats-divider{ height:1px; background:rgba(255,255,255,.1); margin-block:clamp(40px,5vw,56px) 0; } /* ---------- Testimonials ---------- */ .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .testi-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .3s; } .testi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .testi-card .stars{ color:var(--accent-500); letter-spacing:2px; font-size:15px; margin-bottom:16px; } .testi-card blockquote{ font-size:16.5px; color:var(--ink-2); line-height:1.7; flex:1; } .testi-card .who{ display:flex; align-items:center; gap:13px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); } .testi-card .av{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; color:#fff; font-size:18px; background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); } .testi-card .av.a2{ background:linear-gradient(135deg,var(--accent-500),var(--accent-700)); } .testi-card .av.a3{ background:linear-gradient(135deg,var(--ink-2),var(--ink)); } .testi-card .who b{ font-family:var(--display); font-size:16px; display:block; } .testi-card .who span{ font-size:13.5px; color:var(--faint); } /* ---------- CTA ---------- */ .cta-band{ padding-block:clamp(40px,6vw,80px); } .cta-box{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--brand-600), var(--brand-700) 55%, var(--ink-bg)); padding:clamp(48px,7vw,84px) clamp(28px,6vw,80px); text-align:center; color:#fff; } .cta-box::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%); mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%); } .cta-box::after{ content:""; position:absolute; inset-block-end:-50%; inset-inline-end:-12%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, oklch(0.70 0.175 42 / .35), transparent 65%); } .cta-box > *{ position:relative; } .cta-box h2{ color:#fff; font-size:clamp(30px,4.4vw,52px); } .cta-box p{ color:rgba(255,255,255,.82); font-size:clamp(16px,1.8vw,19px); max-width:560px; margin:18px auto 0; } .cta-box .hero-actions{ justify-content:center; margin-top:34px; } .cta-note{ margin-top:20px; font-size:14px; color:rgba(255,255,255,.7); } /* ---------- Contact / Locations ---------- */ .contact{ position:relative; background:linear-gradient(180deg, var(--bg), var(--soft)); overflow:hidden; } .contact-bg{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 14% 22%, oklch(0.64 0.14 233 / .12), transparent 42%), radial-gradient(circle at 86% 82%, oklch(0.70 0.175 42 / .10), transparent 46%); } .contact .wrap{ position:relative; } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1000px; margin-inline:auto; } .contact-card{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px; box-shadow:var(--shadow-sm); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; } .contact-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--brand-200); } .cc-glow{ position:absolute; inset-inline-end:-50px; top:-50px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle, oklch(0.64 0.14 233 / .22), transparent 70%); opacity:.55; transition:opacity .45s, transform .45s; pointer-events:none; } .contact-card:hover .cc-glow{ opacity:1; transform:scale(1.18); } .cc-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; position:relative; } .cc-pin{ position:relative; flex:none; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow:var(--shadow-brand); } .cc-pin svg{ width:26px; height:26px; } .cc-title h3{ font-size:21px; line-height:1.3; } .cc-sub{ font-family:var(--mono); font-size:12.5px; color:var(--brand-600); letter-spacing:.04em; } .cc-info{ list-style:none; display:flex; flex-direction:column; gap:16px; margin-bottom:26px; position:relative; } .cc-info li{ display:flex; gap:13px; align-items:center; } .cc-ico{ flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--soft-2); color:var(--brand-600); transition:background .3s, color .3s; } .contact-card:hover .cc-ico{ background:var(--brand-50); } .cc-ico svg{ width:17px; height:17px; } .cc-info a{ color:var(--ink-2); font-size:15.5px; line-height:1.6; transition:color .2s; } .cc-info a:hover{ color:var(--brand-600); } .cc-map{ display:inline-flex; align-items:center; gap:8px; position:relative; font-weight:600; font-size:15px; color:var(--brand-600); } .cc-map svg{ width:18px; height:18px; transition:transform .3s; } .cc-map:hover{ color:var(--brand-700); } .cc-map:hover svg{ transform:translateX(-6px); } .contact-hours{ display:flex; align-items:center; justify-content:center; gap:12px; width:fit-content; margin:36px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:13px 26px; box-shadow:var(--shadow-sm); font-size:15px; color:var(--ink-2); } .contact-hours b{ color:var(--ink); font-weight:600; } .ch-ico{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--brand-500), var(--brand-700)); } .ch-ico svg{ width:17px; height:17px; } @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } .contact-hours{ flex-direction:column; text-align:center; border-radius:18px; } } @media (prefers-reduced-motion: no-preference){ .contact-bg{ animation:ccDrift 16s ease-in-out infinite alternate; } .cc-pin::after{ content:""; position:absolute; inset:0; border-radius:inherit; animation:ccPulse 2.8s ease-out infinite; } @keyframes ccDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(0,-14px,0) scale(1.04); } } @keyframes ccPulse{ 0%{ box-shadow:0 0 0 0 oklch(0.64 0.14 233 / .45); } 70%{ box-shadow:0 0 0 13px oklch(0.64 0.14 233 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.64 0.14 233 / 0); } } } /* ---------- Legal pages (privacy / terms) ---------- */ .legal{ position:relative; overflow:hidden; padding-block:clamp(104px,12vw,156px) clamp(56px,8vw,90px); background:linear-gradient(180deg, var(--bg), var(--soft)); } .legal-bg{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% -5%, oklch(0.64 0.14 233 / .12), transparent 42%), radial-gradient(circle at 5% 100%, oklch(0.70 0.175 42 / .08), transparent 46%); } .legal .wrap{ position:relative; max-width:880px; } .legal-hero{ text-align:center; margin-bottom:clamp(34px,5vw,52px); } .legal-hero .eyebrow{ justify-content:center; margin-bottom:16px; } .legal-hero h1{ font-size:clamp(28px,4.2vw,46px); line-height:1.3; } .legal-hero p{ color:var(--muted); margin-top:14px; font-size:16px; } .legal-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,52px); box-shadow:var(--shadow); } .legal-body h2{ position:relative; font-size:clamp(19px,2.2vw,23px); color:var(--ink); margin:36px 0 16px; padding-inline-start:16px; } .legal-body h2:first-child{ margin-top:0; } .legal-body h2::before{ content:""; position:absolute; inset-inline-start:0; top:.18em; bottom:.18em; width:4px; border-radius:3px; background:linear-gradient(var(--brand-500), var(--brand-700)); } .legal-body p{ color:var(--ink-2); line-height:1.95; margin-bottom:15px; font-size:16px; } .legal-body ul{ list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:10px; } .legal-body li{ position:relative; padding-inline-start:24px; color:var(--ink-2); line-height:1.9; font-size:16px; } .legal-body li::before{ content:""; position:absolute; inset-inline-start:2px; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--brand-500); } .legal-body a{ color:var(--brand-600); font-weight:500; } .legal-body a:hover{ color:var(--brand-700); text-decoration:underline; } .legal-meta{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); } .legal-back{ display:inline-flex; align-items:center; gap:8px; margin-top:30px; font-weight:600; color:var(--brand-600); } .legal-back svg{ width:18px; height:18px; transition:transform .3s; } .legal-back:hover svg{ transform:translateX(-5px); } @media (max-width:600px){ .legal-card{ padding:24px 20px; } } /* ---------- Landing / solution sub-pages ---------- */ .lp-hero{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(104px,13vw,156px) clamp(36px,6vw,64px); background:linear-gradient(180deg,var(--bg),var(--soft)); } .lp-hero .lp-bg{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% -5%, oklch(0.64 0.14 233 / .12), transparent 42%), radial-gradient(circle at 8% 100%, oklch(0.70 0.175 42 / .08), transparent 46%); } .lp-hero .wrap{ position:relative; max-width:840px; } .lp-hero .eyebrow{ justify-content:center; margin-bottom:16px; } .lp-hero h1{ font-size:clamp(30px,5vw,52px); line-height:1.25; } .lp-hero p{ color:var(--muted); font-size:clamp(16px,1.8vw,19px); margin-top:18px; } .lp-hero .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; } .lp-body{ padding-block:clamp(44px,6vw,76px); } .lp-prose{ max-width:840px; margin-inline:auto; } .lp-prose h2{ font-size:clamp(23px,3vw,34px); margin:42px 0 16px; } .lp-prose h2:first-child{ margin-top:0; } .lp-prose > p{ color:var(--ink-2); line-height:1.95; font-size:17px; margin-bottom:16px; } .lp-prose .show-list{ margin-block:14px 8px; } .lp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; } .lp-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); } .lp-card h3{ font-size:18px; margin-bottom:8px; color:var(--ink); } .lp-card p{ color:var(--muted); font-size:15px; line-height:1.8; margin:0; } .lp-related{ max-width:840px; margin:8px auto 0; padding-top:30px; border-top:1px solid var(--line); } .lp-related h2{ font-size:19px; margin-bottom:14px; } .lp-chips{ display:flex; flex-wrap:wrap; gap:10px; } .lp-chips a{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:14.5px; font-weight:600; color:var(--ink-2); transition:.2s; } .lp-chips a:hover{ border-color:var(--brand-300); color:var(--brand-700); transform:translateY(-2px); } @media (max-width:700px){ .lp-grid{ grid-template-columns:1fr; } } /* ---------- FAQ ---------- */ .faq{ background:linear-gradient(180deg, var(--soft), var(--bg)); } .faq-list{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; } .faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .25s, box-shadow .25s; } .faq-item[open]{ border-color:var(--brand-200); box-shadow:var(--shadow); } .faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:600; font-size:clamp(15px,1.7vw,18px); color:var(--ink); line-height:1.6; display:flex; align-items:center; justify-content:space-between; gap:14px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--brand-50); color:var(--brand-600); font-size:20px; line-height:1; transition:.25s; } .faq-item[open] summary::after{ content:"\2212"; background:var(--brand-600); color:#fff; } .faq-a{ padding:0 24px 22px; } .faq-a p{ color:var(--ink-2); line-height:1.95; font-size:16px; margin:0; } .faq-more{ margin-top:12px !important; } .faq-more a{ color:var(--brand-600); font-weight:600; font-size:15px; } .faq-more a:hover{ color:var(--brand-700); text-decoration:underline; } @media (max-width:600px){ .faq-item summary{ padding:16px 18px; } .faq-a{ padding:0 18px 18px; } } /* ---------- Footer ---------- */ .site-footer{ background:var(--ink-bg); color:rgba(255,255,255,.62); padding-block:clamp(56px,7vw,80px) 30px; } .foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:44px 48px; align-items:start; } .foot-brand{ max-width:440px; } .foot-brand img{ height:40px; margin-bottom:20px; } .foot-brand p{ font-size:15px; max-width:320px; line-height:1.7; } .foot-social{ display:flex; gap:11px; margin-top:22px; } .foot-social a{ width:40px; height:40px; border-radius:11px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:rgba(255,255,255,.7); transition:.2s; } .foot-social a:hover{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; transform:translateY(-2px); } .foot-social svg{ width:18px; height:18px; } .foot-store{ margin-top:0; } .foot-store-label{ display:block; font-size:15px; font-weight:600; color:#fff; margin-bottom:18px; letter-spacing:.01em; } .foot-store .store-btns{ margin-top:0; gap:12px; flex-direction:column; align-items:stretch; max-width:220px; } .foot-store .store-btn{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); padding:10px 16px; justify-content:flex-start; } .foot-store .store-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); transform:translateY(-2px); } .foot-col h4{ color:#fff; font-size:15px; font-weight:600; margin-bottom:18px; letter-spacing:.01em; } .foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; } .foot-col a{ font-size:15px; color:rgba(255,255,255,.6); transition:.2s; } .foot-col a:hover{ color:#fff; } .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:clamp(40px,5vw,56px); padding-top:26px; border-top:1px solid rgba(255,255,255,.1); font-size:14px; } .foot-bottom .links{ display:flex; gap:22px; } .foot-bottom a:hover{ color:#fff; } /* ---------- Reveal animation ---------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .hero-visual img, .hero-badge{ animation:none; } html{ scroll-behavior:auto; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } .stats-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; } .testi-grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } .foot-top{ grid-template-columns:1fr 1fr; gap:36px 32px; } .foot-brand{ grid-column:1 / -1; max-width:none; } } @media (max-width: 880px){ .nav-links, .nav-cta .nav-login, .nav-cta .lang-pill{ display:none; } .burger{ display:block; } /* HERO — mobile order: chip · title · lead · image · ratings · tour btn · start btn */ .hero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:30px; max-width:640px; margin-inline:auto; } .hero-copy{ display:contents; } .hero-chip{ order:1; } .hero-copy h1{ order:2; } .hero-lead{ order:3; margin-inline:auto; } .hero-visual{ order:4; width:100%; } .hero-trust{ order:5; justify-content:center; } .hero-actions{ order:6; flex-direction:column; align-items:stretch; width:100%; max-width:380px; gap:14px; } .hero-actions .btn-ghost{ order:1; } .hero-actions .btn-primary{ order:2; } /* SHOWCASE rows — mobile order: eyebrow · title · intro · image · list · CTA */ .show-row{ display:flex; flex-direction:column; gap:26px; text-align:center; } .show-copy{ display:contents; } .show-copy .eyebrow{ order:1; justify-content:center; } .show-copy h2, .show-copy h3{ order:2; } .show-copy > p{ order:3; } .show-media, .show-row.flip .show-media{ order:4; } .show-copy .show-list{ order:5; } .show-copy > .btn, .show-copy .store-btns, .show-copy .track-app{ order:6; } .show-list{ max-width:440px; margin-inline:auto; text-align:start; } /* mobile nav drawer */ .mobile-drawer{ display:flex; } } @media (max-width: 600px){ body{ font-size:16px; } .feat-grid{ grid-template-columns:1fr; } .hero-badge{ display:none; } .foot-top{ grid-template-columns:1fr; } .foot-brand{ grid-column:auto; } .foot-bottom{ flex-direction:column; text-align:center; } } /* ---------- Mobile drawer ---------- */ .mobile-drawer{ position:fixed; inset:0; z-index:200; background:oklch(0.21 0.026 255 / .5); backdrop-filter:blur(4px); display:none; opacity:0; pointer-events:none; transition:opacity .3s; } .mobile-drawer.open{ opacity:1; pointer-events:auto; } .drawer-panel{ position:absolute; inset-block:0; inset-inline-end:0; width:min(330px,82vw); background:var(--surface); box-shadow:var(--shadow-lg); padding:26px 24px; transform:translateX(100%); transition:transform .35s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; } .mobile-drawer.open .drawer-panel{ transform:none; } .drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; } .drawer-head img{ height:34px; } .drawer-close{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line); font-size:22px; color:var(--ink-2); line-height:1; } .drawer-panel a.dl{ font-size:17px; font-weight:500; color:var(--ink-2); padding:14px 4px; border-bottom:1px solid var(--line-2); } .drawer-panel a.dl:hover{ color:var(--brand-700); } .drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:12px; padding-top:24px; } /* ============================================================ GPS TRACKING SECTION ============================================================ */ .tracking{ background:var(--soft); } .tracking .show-row{ margin-bottom:clamp(48px,6vw,76px); align-items:center; grid-template-columns:0.9fr 1.1fr; } /* Phone + device mockups */ .phone{ background:#0c0e16; padding:8px; border-radius:42px; border:1px solid #242a3a; box-shadow:0 44px 90px -34px rgba(15,45,80,.5), 0 14px 34px -14px rgba(15,45,80,.22); } .phone img{ display:block; width:100%; height:auto; border-radius:34px; filter:none; } .phone-solo{ width:clamp(248px,30vw,300px); margin-inline:auto; } /* web + app device combo */ .device-combo{ position:relative; padding-block-end:30px; padding-inline-start:30px; } .web-frame{ width:100%; } .web-frame img{ display:block; width:100%; height:auto; } .phone-overlay{ position:absolute; z-index:4; inset-block-end:0; inset-inline-start:-2%; width:clamp(112px,13vw,148px); padding:6px; border-radius:30px; box-shadow:0 30px 60px -22px rgba(15,45,80,.55), 0 10px 24px -12px rgba(15,45,80,.3); } .phone-overlay img{ border-radius:24px; } .phone-badge{ position:absolute; z-index:5; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:10px 14px; display:flex; align-items:center; gap:11px; } .phone-badge b{ font-family:var(--display); font-size:14px; font-weight:700; color:var(--ink); display:block; line-height:1.2; } .phone-badge small{ font-size:11.5px; color:var(--faint); } .phone-badge .lg{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; } .phone-badge .lg svg{ width:18px; height:18px; } .device-combo .pb-top{ inset-block-start:-16px; inset-inline-end:-8px; } .pb-top .lg{ background:oklch(0.55 0.13 155 / .16); } .pb-top .lg i{ width:9px; height:9px; border-radius:50%; background:oklch(0.74 0.16 155); } @media (max-width: 880px){ .tracking .show-row{ grid-template-columns:1fr; } } @media (max-width: 600px){ .device-combo{ padding-inline-start:0; } .phone-overlay{ inset-inline-start:-3%; width:96px; } } /* Impact cards */ .impact-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .impact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .3s, border-color .3s; } .impact-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--brand-200); } .impact-ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(145deg, var(--brand-50), oklch(0.93 0.04 233 / .5)); color:var(--brand-600); border:1px solid oklch(0.86 0.07 233 / .5); margin-bottom:18px; } .impact-ic svg{ width:24px; height:24px; stroke-width:1.7; } .impact-card h4{ font-size:17.5px; font-weight:600; margin-bottom:9px; } .impact-card p{ color:var(--muted); font-size:14.5px; line-height:1.65; } @media (max-width: 1024px){ .impact-row{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 600px){ .impact-row{ grid-template-columns:1fr; } } /* ============================================================ WHATSAPP + AI ASSISTANT SECTION ============================================================ */ :root{ --wa: oklch(0.55 0.13 158); --wa-deep: oklch(0.45 0.10 160); --wa-bub: #d9fdd3; } .wa-section{ background:linear-gradient(180deg, var(--bg), var(--soft)); } .wa-eyebrow::before{ background:var(--wa); } .wa-row{ margin-bottom:clamp(54px,7vw,90px); align-items:center; } .wa-row:last-of-type{ margin-bottom:clamp(48px,6vw,72px); } /* Level tag (numbered) */ .lvl-tag{ display:inline-flex; align-items:center; gap:11px; margin-bottom:18px; font-family:var(--display); font-weight:700; font-size:15px; color:var(--wa-deep); } .lvl-tag .lvl-num{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:oklch(0.55 0.13 158 / .12); color:var(--wa-deep); font-size:15px; border:1px solid oklch(0.55 0.13 158 / .28); } .lvl-tag-ai{ color:var(--brand-700); } .lvl-tag-ai .lvl-num{ background:var(--brand-50); color:var(--brand-700); border-color:oklch(0.86 0.07 233 / .6); } .wa-row .show-copy h3{ font-size:clamp(24px,2.8vw,34px); } .wa-row .show-copy > p{ margin-top:16px; } .wa-row .show-list .check{ background:oklch(0.55 0.13 158 / .12); color:var(--wa-deep); border-color:oklch(0.55 0.13 158 / .3); } .wa-row.flip .show-list .check{ background:var(--brand-50); color:var(--brand-600); border-color:oklch(0.86 0.07 233 / .5); } /* Phone with live chat */ .wa-phone{ width:clamp(280px,30vw,340px); margin-inline:auto; } .wa-screen{ border-radius:34px; overflow:hidden; aspect-ratio:320 / 660; display:flex; flex-direction:column; background:#ece5dd; } /* Chat header */ .wa-head{ display:flex; align-items:center; gap:10px; padding:13px 14px; background:#f6f4f1; border-bottom:1px solid #e2ddd5; flex-shrink:0; } .wa-back{ color:#54656f; display:grid; place-items:center; } .wa-back svg{ width:18px; height:18px; transform:scaleX(-1); } .wa-av{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(145deg, var(--brand-500), var(--brand-700)); color:#fff; font-family:var(--display); font-weight:800; font-size:17px; } .wa-av-ai{ background:linear-gradient(145deg, var(--brand-400), var(--brand-600)); } .wa-av-ai svg{ width:21px; height:21px; stroke-width:1.7; } .wa-id{ display:flex; flex-direction:column; line-height:1.25; min-width:0; } .wa-id b{ font-family:var(--display); font-size:14.5px; font-weight:700; color:#111b21; display:flex; align-items:center; gap:5px; } .wa-id small{ font-size:11px; color:var(--wa-deep); } .wa-head-ai .wa-id small{ color:var(--brand-600); } .wa-verify{ width:14px; height:14px; color:var(--brand-500); flex-shrink:0; } /* Chat body */ .wa-body{ flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; background-color:#e5ded4; background-image: radial-gradient(oklch(0.5 0.03 150 / .05) 1px, transparent 1px); background-size:18px 18px; } .wa-date{ align-self:center; font-size:10.5px; color:#5b6b73; background:#fff; padding:3px 11px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.05); margin-bottom:2px; } .wa-msg{ position:relative; max-width:82%; padding:8px 11px 16px; border-radius:11px; font-size:12.5px; line-height:1.6; color:#111b21; box-shadow:0 1px 1px rgba(0,0,0,.07); } .wa-msg.out{ align-self:flex-end; background:var(--wa-bub); border-top-right-radius:3px; } .wa-msg.in{ align-self:flex-start; background:#fff; border-top-left-radius:3px; } .wa-msg b{ font-weight:700; } .wa-t{ position:absolute; inset-block-end:5px; inset-inline-start:10px; font-size:9px; color:#667781; white-space:nowrap; } .wa-msg.in .wa-t{ inset-inline-start:auto; inset-inline-end:10px; } /* Document / car bubbles */ .wa-doc, .wa-car{ display:flex; align-items:center; gap:10px; padding-bottom:18px; } .wa-doc-ic, .wa-car-ic{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; background:oklch(0.55 0.13 158 / .16); color:var(--wa-deep); } .wa-doc-ic svg, .wa-car-ic svg{ width:18px; height:18px; stroke-width:1.8; } .wa-doc-tx, .wa-car-tx{ display:flex; flex-direction:column; line-height:1.4; } .wa-doc-tx b, .wa-car-tx b{ font-size:12.5px; } .wa-doc-tx small, .wa-car-tx small{ font-size:11px; color:#54656f; } .wa-car-ic{ background:var(--brand-50); color:var(--brand-600); } /* Typing indicator */ .wa-typing{ align-self:flex-start; background:#fff; border-radius:11px; border-top-left-radius:3px; padding:11px 13px; display:flex; gap:4px; box-shadow:0 1px 1px rgba(0,0,0,.07); } .wa-typing span{ width:7px; height:7px; border-radius:50%; background:#9aa6ad; } /* Floating badges */ .wa-badge{ position:absolute; z-index:6; inset-block-start:8%; inset-inline-start:-6px; display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:11px 15px; } .wa-badge-ic{ width:36px; height:36px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; background:oklch(0.55 0.13 158 / .14); color:var(--wa-deep); } .wa-badge-ai{ inset-block-start:auto; inset-block-end:12%; inset-inline-start:auto; inset-inline-end:-6px; } .wa-badge-ai .wa-badge-ic{ background:var(--brand-50); color:var(--brand-600); } .wa-badge-ic svg{ width:19px; height:19px; stroke-width:1.8; } .wa-badge b{ font-family:var(--display); font-size:13.5px; font-weight:700; color:var(--ink); display:block; line-height:1.2; } .wa-badge small{ font-size:11px; color:var(--faint); } .glow-ai{ background:radial-gradient(circle, oklch(0.70 0.13 233 / .25), transparent 70%); } .wa-caps{ margin-top:clamp(8px,1.5vw,16px); } .wa-caps .impact-card:hover{ border-color:oklch(0.55 0.13 158 / .4); } .wa-caps .impact-ic{ background:oklch(0.55 0.13 158 / .12); color:var(--wa-deep); } .wa-caps .impact-card:nth-child(even) .impact-ic{ background:var(--brand-50); color:var(--brand-600); } @media (max-width: 880px){ .wa-row{ grid-template-columns:1fr; } .wa-badge{ inset-inline-start:0; } .wa-badge-ai{ inset-inline-end:0; } } /* ============================================================ MOTION LAYER — tasteful animations (reduced-motion safe) ============================================================ */ @media (prefers-reduced-motion: no-preference){ /* Hero — drifting aurora blobs */ .hero-bg::before{ animation:driftA 15s ease-in-out infinite alternate; } .hero-bg::after{ animation:driftB 18s ease-in-out infinite alternate; } @keyframes driftA{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-46px,34px) scale(1.12); } } @keyframes driftB{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(42px,-30px) scale(1.14); } } /* Hero — animated gradient shimmer on the headline accent */ .hero h1 .grad{ background:linear-gradient(100deg, var(--brand-700), var(--brand-400), var(--brand-600), var(--brand-700)); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 7s linear infinite; } @keyframes shimmer{ to{ background-position:-220% center; } } /* Feature icons — pop into place when card reveals, then float gently */ .feat-card.in .feat-ic, .b-tile.in .feat-ic{ animation:iconPop .65s cubic-bezier(.2,1.3,.4,1) both; } @keyframes iconPop{ 0%{ transform:scale(.4) rotate(-14deg); opacity:0; } 60%{ transform:scale(1.12) rotate(5deg); opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } } /* Feature icons — lively hover */ .feat-ic{ transition:transform .4s cubic-bezier(.2,1.3,.4,1), box-shadow .35s ease, color .25s; } .feat-card:hover .feat-ic, .b-tile:hover .feat-ic{ transform:translateY(-4px) rotate(-5deg) scale(1.08); box-shadow:0 14px 26px -10px oklch(0.56 0.13 235 / .5); } .feat-card.accent:hover .feat-ic, .b-feature.warm:hover .feat-ic{ box-shadow:0 14px 26px -10px oklch(0.64 0.175 40 / .5); } .feat-card:hover .feat-ic svg, .b-tile:hover .feat-ic svg{ animation:iconWiggle .55s ease; } @keyframes iconWiggle{ 0%,100%{ transform:rotate(0); } 30%{ transform:rotate(-9deg); } 65%{ transform:rotate(7deg); } } /* Feature cards — sheen sweep on hover */ .feat-card::before{ content:""; position:absolute; inset-block:0; inset-inline-start:-60%; width:55%; background:linear-gradient(100deg, transparent, oklch(0.99 0.01 233 / .55), transparent); transform:skewX(-18deg); opacity:0; pointer-events:none; z-index:2; } .feat-card:hover::before{ animation:sheen .85s ease; } @keyframes sheen{ 0%{ inset-inline-start:-60%; opacity:0; } 18%{ opacity:1; } 100%{ inset-inline-start:130%; opacity:0; } } /* Showcase — checklist items pop in, staggered, when the column reveals */ .show-copy.in .show-list li{ animation:checkIn .55s cubic-bezier(.2,1.1,.4,1) both; } .show-copy.in .show-list li:nth-child(1){ animation-delay:.15s; } .show-copy.in .show-list li:nth-child(2){ animation-delay:.28s; } .show-copy.in .show-list li:nth-child(3){ animation-delay:.41s; } @keyframes checkIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } } .show-copy.in .show-list li .check{ animation:iconPop .6s cubic-bezier(.2,1.3,.4,1) both; animation-delay:inherit; } /* Showcase decor ring — gentle pulse */ .show-deco .ring{ animation:ringPulse 3.4s ease-in-out infinite; } @keyframes ringPulse{ 0%,100%{ box-shadow:0 0 0 0 oklch(0.64 0.14 233 / .35); } 55%{ box-shadow:0 0 0 9px oklch(0.64 0.14 233 / 0); } } /* Stats — slow drifting glow */ .stats::before{ animation:driftA 22s ease-in-out infinite alternate; } /* Stat numbers — subtle lift when revealed */ .stat.in .num{ animation:numLift .7s cubic-bezier(.2,1,.3,1) both; } @keyframes numLift{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } /* Testimonials — avatar gentle bob on hover */ .testi-card:hover .av{ animation:bob .6s ease; } @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } /* CTA — slow shifting warm glow */ .cta-box::after{ animation:ctaGlow 9s ease-in-out infinite alternate; } @keyframes ctaGlow{ from{ transform:translate(0,0) scale(1); opacity:.9; } to{ transform:translate(-50px,-26px) scale(1.18); opacity:1; } } /* Primary buttons — soft sheen sweep on hover */ .btn-primary, .btn-white{ position:relative; overflow:hidden; } .btn-primary::after, .btn-white::after{ content:""; position:absolute; inset-block:0; inset-inline-start:-80%; width:60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-20deg); } .btn-primary:hover::after, .btn-white:hover::after{ animation:sheen .8s ease; } /* Header brand — tiny entrance */ .brand img{ animation:fadeDown .7s ease both; } @keyframes fadeDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } } /* GPS tracking — live pulse on phone badge + gentle phone float */ .pb-top .lg i{ animation:livePulse 1.9s ease-out infinite; } @keyframes livePulse{ 0%{ box-shadow:0 0 0 0 oklch(0.78 0.16 155 / .6); } 70%{ box-shadow:0 0 0 8px oklch(0.78 0.16 155 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.78 0.16 155 / 0); } } .phone-overlay{ animation:floaty 6s ease-in-out infinite; } .device-combo .pb-top{ animation:floaty 5s ease-in-out infinite; } .pb-bot{ animation:floaty 5.6s ease-in-out .4s infinite; } /* Impact cards — radar pulse + float on reveal + hover */ .impact-card.in .impact-ic{ animation:iconPop .65s cubic-bezier(.2,1.3,.4,1); } .impact-ic{ position:relative; transition:transform .4s cubic-bezier(.2,1.3,.4,1), box-shadow .35s ease; } .impact-ic::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:icPulse 3s ease-out infinite; } @keyframes icPulse{ 0%{ box-shadow:0 0 0 0 oklch(0.64 0.14 233 / .42); } 70%{ box-shadow:0 0 0 13px oklch(0.64 0.14 233 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.64 0.14 233 / 0); } } .impact-row .impact-card:nth-child(2) .impact-ic::before{ animation-delay:.75s; } .impact-row .impact-card:nth-child(3) .impact-ic::before{ animation-delay:1.5s; } .impact-row .impact-card:nth-child(4) .impact-ic::before{ animation-delay:2.25s; } .impact-ic svg{ animation:icFloat 3.6s ease-in-out infinite; } .impact-row .impact-card:nth-child(2) .impact-ic svg{ animation-delay:.4s; } .impact-row .impact-card:nth-child(3) .impact-ic svg{ animation-delay:.8s; } .impact-row .impact-card:nth-child(4) .impact-ic svg{ animation-delay:1.2s; } @keyframes icFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } } .impact-card:hover .impact-ic{ transform:translateY(-4px) rotate(-5deg) scale(1.1); box-shadow:0 14px 26px -10px oklch(0.56 0.13 235 / .5); } .impact-card:hover .impact-ic svg{ animation:iconWiggle .55s ease; } }