/* ========================================================= Hermit — landing. Transcribed from the Hermit design project. Design system (tokens + components) lifted from the source; fonts self-hosted via fonts.css (Inter) + SF Pro system stack. ========================================================= */ *{box-sizing:border-box;} img{display:block;max-width:100%;} /* scroll reveal — transform only, opacity stays 1 (matches design) */ .reveal{transform:translateY(22px);transition:transform .7s cubic-bezier(.16,1,.3,1) var(--rd,0ms);will-change:transform;} .reveal.in{transform:none;} @media (prefers-reduced-motion: reduce){.reveal{transform:none!important;transition:none!important;}} :root { /* ---- Brand: electric blue (the signal) ---- */ --blue-electric: #2600fe; /* primary brand — promo, CTAs on light */ --blue-electric-700: #1d01a0; --blue-royal: #1b2bd4; /* promo gradient mid */ --blue-1300: #13017d; /* deep indigo */ --blue-1400: #14056b; /* ---- Brand: navy (the dark the hermit walks through) ---- */ --navy-1000: #000320; /* darkest app/site canvas */ --navy-950: #01061f; --navy-900: #070c2f; --navy-850: #0b0f3a; --navy-800: #11154d; --indigo-void: #020034; /* ---- Telegram-native accents (inherited from the fork) ---- */ --tg-link: #007aff; /* iOS link blue — "Add Account", chevrons */ --tg-azure: #34a2e0; /* Saved Messages / brand-light blue */ --tg-badge: #007aff; /* unread badge */ /* ---- Signal accents ---- */ --orange-flame: #ff5d15; /* streaks · fire · energy */ --orange-glow: #ff8a00; /* streak gradient top */ --green-action: #34c759; /* proxy on · success · accept call */ --green-call: #3fae8e; /* call-screen wash */ --red-stop: #ff3b30; /* destructive · end call */ --lantern: #5fd3e0; /* the lantern's teal light */ --lantern-soft: #a9ecf3; /* ---- Neutrals ---- */ --white: #ffffff; --grey-98: #f7f8fb; --grey-50: #f7f7f7; /* iOS grouped background */ --grey-100: #f0f0f0; --grey-150: #e9e9ee; --grey-200: #e5e5ea; /* separators on light */ --grey-fill: rgba(118,118,128,0.12); /* iOS search-field fill */ --grey-400: #b1b2b0; --grey-500: #8e8e93; /* iOS secondary label */ --grey-600: #666665; --grey-700: #45434500; --ink-900: #0a0a0a; --ink-800: #131313; --black: #000000; /* ---- Alpha helpers ---- */ --white-90: rgba(255,255,255,0.9); --white-70: rgba(255,255,255,0.7); --white-50: rgba(255,255,255,0.5); --white-12: rgba(255,255,255,0.12); --white-08: rgba(255,255,255,0.08); --black-50: rgba(0,0,0,0.5); --black-30: rgba(0,0,0,0.3); /* ============================================================ SEMANTIC ALIASES — default = LIGHT WORLD (the messenger) ============================================================ */ --bg-canvas: var(--grey-50); --surface: var(--white); --surface-raised: var(--white); --surface-sunken: var(--grey-fill); --separator: var(--grey-200); --text-primary: var(--ink-800); --text-secondary: var(--grey-500); --text-tertiary: var(--grey-400); --text-on-accent: var(--white); --accent: var(--blue-electric); --accent-link: var(--tg-link); --accent-press: var(--blue-electric-700); --focus-ring: rgba(38,0,254,0.4); --scrim: var(--black-30); } /* ============================================================ DARK WORLD — desktop app + VPS/VPN site Apply with: or class="theme-dark" ============================================================ */ :root[data-theme="dark"], .theme-dark { --bg-canvas: var(--navy-1000); --surface: rgba(255,255,255,0.04); --surface-raised: #0e1238; --surface-sunken: rgba(255,255,255,0.06); --separator: rgba(255,255,255,0.10); --text-primary: var(--white); --text-secondary: var(--white-70); --text-tertiary: var(--white-50); --text-on-accent: var(--navy-1000); --accent: var(--white); /* on dark, white is the CTA */ --accent-link: var(--tg-azure); --accent-press: rgba(255,255,255,0.85); --focus-ring: rgba(255,255,255,0.4); --scrim: var(--black-50); } /* Signature gradients */ :root { --grad-promo: linear-gradient(180deg, #2a2fd6 0%, #1a1f9e 45%, #0a0d6b 100%); /* @kind other */ --grad-canvas-dark: radial-gradient(120% 90% at 50% 0%, #11154d 0%, #050829 55%, #000320 100%); /* @kind other */ --grad-streak: linear-gradient(180deg, #ff8a00 0%, #ff5d15 100%); /* @kind other */ --grad-call: linear-gradient(160deg, #3fae8e 0%, #4f7fb8 60%, #6f6fd0 100%); /* @kind other */ --grad-lantern: radial-gradient(circle, rgba(95,211,224,0.55) 0%, rgba(95,211,224,0) 70%); /* @kind other */ } /* ============================================================ HERMIT — TYPOGRAPHY TOKENS Type voice = SF Pro Display / SF Pro Text (Apple system). Hermit is built on Telegram-iOS, so the native Apple type ramp IS the brand. On Apple devices the stack resolves to the real SF Pro; elsewhere it falls back to Inter (closest match). ============================================================ */ :root { /* Families */ --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Roboto Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Type scale (px) — Apple-style ramp */ --fs-caption2: 11px; --fs-caption: 12px; --fs-footnote: 13px; --fs-subhead: 15px; --fs-body: 17px; /* iOS body default */ --fs-callout: 16px; --fs-headline: 17px; --fs-title3: 20px; --fs-title2: 22px; --fs-title1: 28px; --fs-largetitle: 34px; --fs-display: 48px; --fs-display-lg: 72px; /* Line heights */ --lh-tight: 1.05; /* @kind other */ --lh-snug: 1.2; /* @kind other */ --lh-normal: 1.35; /* @kind other */ --lh-relaxed: 1.5; /* @kind other */ /* Tracking */ --tracking-tight: -0.02em; /* @kind other */ --tracking-snug: -0.01em; /* @kind other */ --tracking-normal: 0; /* @kind other */ } /* ---- Reusable type classes ---- */ .t-display { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .t-largetitle { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-largetitle); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .t-title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--fs-title1); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .t-headline { font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: var(--fs-headline); line-height: var(--lh-normal); } .t-body { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--fs-body); line-height: var(--lh-normal); } .t-subhead { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--fs-subhead); line-height: var(--lh-normal); } .t-footnote { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--fs-footnote); line-height: var(--lh-normal); color: var(--text-secondary); } .t-caption { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-secondary); } .t-mono { font-family: var(--font-mono); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); } /* ============================================================ HERMIT — SPACING, RADII, SHADOWS, MOTION ============================================================ */ :root { /* Spacing scale (4pt base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* default gutter on mobile */ --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Corner radii — iOS-soft, generously rounded */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; /* grouped list cards */ --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; /* search bar, capsule buttons, tabs */ --radius-phone: 44px; /* device bezel inner radius */ /* Borders */ --border-hairline: 0.5px; --border-1: 1px; --border-2: 2px; /* Shadows — soft, low, neutral. Light world is shadow-light; elevation comes mostly from grouped surfaces + hairlines. */ --shadow-xs: 0 1px 2px rgba(10,12,40,0.06); --shadow-sm: 0 2px 8px rgba(10,12,40,0.08); --shadow-md: 0 8px 24px rgba(10,12,40,0.10); --shadow-lg: 0 18px 48px rgba(10,12,40,0.16); --shadow-float: 0 12px 32px rgba(10,12,40,0.18); /* floating tab bar / pills */ /* On dark world, glow replaces shadow */ --glow-lantern: 0 0 48px rgba(95,211,224,0.45); --glow-streak: 0 6px 24px rgba(255,93,21,0.45); /* Motion — iOS spring-ish, quick and calm */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* Layout */ --tap-min: 44px; /* minimum touch target */ --mobile-gutter: 16px; --content-max: 1200px; } /* Generated from Figma Variables. First mode = :root default. FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */ :root { --app-lock-screen-flashlight-margin-v: 24; --color-azure-8: rgb(18,20,22); /* @kind color */ --color-grey-98: rgb(247,248,251); /* @kind color */ --color-orange-54: rgb(255,93,21); /* @kind color */ --color-white-90: rgba(255,255,255,0.9); /* @kind color */ --font-size-20: 20; --line-height-28: 28; --mode: rgb(255,255,255); /* @kind color */ --primary-base-white: rgb(255,255,255); /* @kind color */ } :root[data-mode="15-pro"] { --app-lock-screen-flashlight-margin-v: 16; } /* No TEXT/EFFECT styles in this file. */ html, body { margin: 0; background: #06060f; scroll-behavior: smooth; } html { scroll-padding-top: 84px; } body { font-family: var(--font-text, -apple-system, BlinkMacSystemFont, "Inter", sans-serif); color: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { -webkit-tap-highlight-color: transparent; } ::selection { background: rgba(91,84,255,.32); } ::-webkit-scrollbar { height: 10px; width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: padding-box; } /* ── motion primitives ── */ @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes floaty2 { 0%,100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-10px) rotate(-2.5deg); } } @keyframes glowpulse{ 0%,100% { opacity:.55; transform: scale(1); } 50% { opacity:.9; transform: scale(1.08); } } @keyframes glowdrift{ 0%,100% { opacity:.6; transform: translate(0,0) scale(1); } 50% { opacity:.95; transform: translate(2%, -3%) scale(1.07); } } @keyframes sheen { to { background-position: 200% center; } } @keyframes twinkle { 0%,100% { opacity:.35; transform: scale(.85); } 50% { opacity:1; transform: scale(1.1); } } .floaty { animation: floaty 7s ease-in-out infinite; } .floaty-a{ animation: floaty 6.2s ease-in-out infinite; } .floaty-b{ animation: floaty2 7.6s ease-in-out .4s infinite; } .glowdrift { animation: glowdrift 12s ease-in-out infinite; } .glowpulse { animation: glowpulse 6s ease-in-out infinite; } .twinkle { animation: twinkle 3.4s ease-in-out infinite; } /* ── animated aurora backdrop: fixed brand-coloured gradients that slowly drift, scale and overlap → iridescent shimmer behind transparent sections ── */ .aurora-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .aurora-bg b { position: absolute; display: block; border-radius: 50%; filter: blur(74px); mix-blend-mode: screen; will-change: transform; } .aurora-bg .a1 { width: 56vmax; height: 56vmax; left: -16vmax; top: -18vmax; background: radial-gradient(circle, rgba(74,58,255,.5), rgba(74,58,255,0) 62%); animation: aur1 30s ease-in-out infinite; } .aurora-bg .a2 { width: 50vmax; height: 50vmax; right: -18vmax; top: -8vmax; background: radial-gradient(circle, rgba(95,211,224,.32), rgba(95,211,224,0) 64%); animation: aur2 36s ease-in-out infinite; } .aurora-bg .a3 { width: 54vmax; height: 54vmax; left: 14vmax; bottom: -26vmax; background: radial-gradient(circle, rgba(123,92,255,.4), rgba(123,92,255,0) 64%); animation: aur3 33s ease-in-out infinite; } .aurora-bg .a4 { width: 40vmax; height: 40vmax; right: 4vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(255,93,21,.12), rgba(255,93,21,0) 66%); animation: aur2 42s ease-in-out 2s infinite; } @keyframes aur1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(12vmax,8vmax) scale(1.16); } 66% { transform: translate(5vmax,-5vmax) scale(.9); } } @keyframes aur2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-13vmax,9vmax) scale(1.2); } } @keyframes aur3 { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(-9vmax,-7vmax) scale(1.14); } 75% { transform: translate(7vmax,3vmax) scale(.94); } } /* nav links — colour fade only, NO underline */ .navlink { color: rgba(255,255,255,.6); transition: color .25s ease; } .navlink:hover { color: #fff; } /* screenshot / tile lift */ .shot { transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; } .shot:hover { transform: translateY(-10px); } .tile { transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; } .adv:hover .tile { transform: translateY(-10px) rotate(-1deg); } /* ── elevated dark cards: no flat border — depth via top-light + soft shadow ── */ .card-soft { background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.014)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 50px -32px rgba(0,0,0,.9); } .feat { border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 50px -32px rgba(0,0,0,.9); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; } .feat:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 34px 70px -30px rgba(0,0,0,.95), 0 14px 54px -28px rgba(74,58,255,.5); } .feat:hover .feat-ic { transform: scale(1.08) rotate(-4deg); } .feat-ic { transition: transform .5s cubic-bezier(.34,1.56,.64,1); } .review { border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 50px -32px rgba(0,0,0,.9); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; } .review:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 34px 70px -30px rgba(0,0,0,.95), 0 14px 54px -28px rgba(74,58,255,.42); } .statcard { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -32px rgba(0,0,0,.85); } .termcard { border-radius: 20px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 44px 100px -44px rgba(74,58,255,.5), 0 24px 60px -36px rgba(0,0,0,.9); } /* advantage cards */ .advcard { background: linear-gradient(180deg, #12131f, #0c0d1a); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 56px -34px rgba(0,0,0,.95); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; } .advcard:hover { transform: translateY(-7px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 42px 84px -34px rgba(0,0,0,.98), 0 16px 56px -30px rgba(74,58,255,.5); } .advcard-img { transition: transform .6s cubic-bezier(.16,1,.3,1); } .advcard:hover .advcard-img { transform: translateX(-50%) translateY(-10px) scale(1.04); } /* faq */ .faq-item { border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 40px -32px rgba(0,0,0,.85); transition: box-shadow .35s ease, background .35s ease; } .faq-item:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 48px -30px rgba(0,0,0,.9); } .faq-item.open { background: linear-gradient(180deg, rgba(123,120,255,.13), rgba(123,120,255,.025)); box-shadow: inset 0 1px 0 rgba(138,134,255,.2), 0 26px 60px -28px rgba(74,58,255,.5); } .faq-a { overflow: hidden; transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s ease; } /* solid (white) CTA sheen */ .cta-sheen { position: relative; overflow: hidden; transition: transform .18s ease; } .cta-sheen:hover { transform: translateY(-2px); } .cta-sheen::after { content:''; position:absolute; top:0; left:-60%; width:45%; height:100%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(120,110,255,.5), transparent); transition: left .7s cubic-bezier(.16,1,.3,1); } .cta-sheen:hover::after { left:130%; } .cta-ghost { transition: transform .18s ease, background .25s ease, border-color .25s ease; } .cta-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ LAYOUT & COMPONENTS — transcribed from Landing.jsx inline styles; JS breakpoints (mob<760, tab<1040) → CSS media queries ============================================================ */ body{background:#06060f;color:#fff;font-family:var(--font-text);-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0;} a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;} .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 32px;} .wrap--narrow{max-width:820px;} @media(max-width:600px){.wrap{padding:0 20px;}} .sec{border-top:1px solid rgba(255,255,255,.09);} .sec-pad{padding:108px 0;} @media(max-width:760px){.sec-pad{padding:72px 0;}} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:13px;font-family:var(--font-display);font-weight:600;font-size:16.5px;padding:15px 26px;text-decoration:none;cursor:pointer;white-space:nowrap;background:#fff;color:#0a0a14;border:1px solid #fff;} .btn--sm{font-size:14.5px;padding:10px 18px;border-radius:11px;} .btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);} .kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;} .kicker .sp{color:#8a86ff;display:inline-flex;} .kicker .lb{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);} .s-head{margin-bottom:56px;} .s-head h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;color:#fff;line-height:1.05;white-space:pre-line;} .s-head p{margin:16px 0 0;font-size:18px;color:rgba(255,255,255,.62);line-height:1.55;max-width:580px;} .s-head.center{text-align:center;} .s-head.center h2{max-width:700px;margin-left:auto;margin-right:auto;} .s-head.center p{max-width:560px;margin-left:auto;margin-right:auto;} .nav{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease;} .nav.scrolled{background:rgba(6,6,15,.72);-webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px);border-bottom:1px solid rgba(255,255,255,.09);} .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;} .nav-links{display:flex;gap:34px;font-size:15px;} .nav-links a{font-weight:500;text-decoration:none;} @media(max-width:860px){.nav-links{display:none;}} .lockup{display:inline-flex;align-items:center;gap:13px;} .lockup .wm{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:#fff;} .app-icon{display:block;flex:none;border-radius:26%;box-shadow:0 6px 18px -6px rgba(38,0,254,.7),inset 0 0 0 1px rgba(255,255,255,.1);} .hero{position:relative;} .hero-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:center;padding:66px 0 92px;position:relative;z-index:1;} .hero h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(34px,8vw,70px);line-height:1.02;letter-spacing:-.04em;color:#fff;} .hero h1 .grad{background:linear-gradient(100deg,#fff 0%,#9a96ff 55%,#5b54ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;} .hero-sub{margin:24px 0 0;max-width:488px;font-size:19px;color:rgba(255,255,255,.62);line-height:1.55;} .hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;align-items:center;} .hero-rate{margin-top:20px;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.42);font-size:13.5px;flex-wrap:wrap;} .hero-rate .stars{display:inline-flex;gap:2px;color:#ff5d15;} .hero-phone{position:relative;width:296px;margin:0 auto;} @media(max-width:760px){.hero-grid{grid-template-columns:1fr;gap:44px;padding:36px 0 56px;}.float-card-wrap{display:none;}} .pm{width:296px;height:612px;flex:none;background:#0b0b0f;border-radius:48px;padding:8px;box-shadow:0 50px 120px -28px rgba(50,36,170,.6),inset 0 0 0 2px #26272e,inset 0 0 0 3px #050509;} .pm-sc{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#f7f7f7;display:flex;flex-direction:column;} .pm-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:92px;height:26px;background:#000;border-radius:16px;z-index:9;} .pm-status{display:flex;align-items:center;justify-content:space-between;padding:13px 24px 0;height:30px;color:#131313;} .pm-status .tm{font-family:var(--font-display);font-weight:600;font-size:14px;} .pm-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 4px;} .pm-bar .ed{color:#007aff;font-size:15px;} .pm-hpill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 6px;border-radius:999px;background:#2600fe;color:#fff;font-family:var(--font-display);font-weight:600;font-size:13px;} .pm-title{margin:0;padding:0 16px 8px;font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em;color:#131313;} .pm-search{margin:0 14px 10px;height:36px;border-radius:10px;background:rgba(118,118,128,.12);display:flex;align-items:center;gap:7px;padding:0 10px;color:#8e8e93;font-size:16px;} .pm-tabs{display:flex;gap:8px;padding:0 14px 8px;} .pm-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#8e8e93;background:transparent;} .pm-tab.on{background:#fff;color:#131313;box-shadow:0 1px 3px rgba(0,0,0,.12);} .pm-tab .b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#8e8e93;color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;} .pm-list{flex:1;overflow:hidden;padding:0 8px;} .pm-row{display:flex;align-items:center;gap:12px;padding:9px 8px;position:relative;} .pm-row+.pm-row{border-top:.5px solid rgba(60,60,67,.12);} .pm-av{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:600;font-size:17px;} .pm-mid{flex:1;min-width:0;} .pm-nm{display:flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:600;font-size:16px;color:#131313;} .pm-pv{font-size:14px;color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;} .pm-rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;} .pm-tm{font-size:13px;color:#8e8e93;} .pm-unread{min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#007aff;color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;} .pm-streak{display:inline-flex;align-items:center;gap:2px;color:#ff5d15;font-size:13px;font-weight:600;} .float-card{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:15px;background:rgba(12,13,26,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 44px -16px rgba(0,0,0,.8);white-space:nowrap;} .float-card .lb{font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff;} .lantern-grid{display:grid;grid-template-columns:minmax(300px,470px) 1fr;gap:90px;align-items:center;padding:148px 0;} .lantern-grid h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(38px,5.4vw,68px);letter-spacing:-.035em;line-height:1.04;color:#fff;} .lantern-grid h2 .grad{background:linear-gradient(100deg,#fff 0%,#a7e3ea 45%,#5fd3e0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;} .lantern-grid p{margin:28px 0 0;font-size:clamp(18px,2.1vw,23px);color:rgba(255,255,255,.62);line-height:1.6;max-width:620px;} @media(max-width:760px){.lantern-grid{grid-template-columns:1fr;gap:40px;padding:84px 0;}} .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:1040px){.adv-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:760px){.adv-grid{grid-template-columns:1fr;}} .adv-media{position:relative;height:220px;overflow:hidden;background:radial-gradient(120% 80% at 50% -8%,rgba(123,120,255,.14),transparent 60%);} .adv-media .glow{position:absolute;left:14%;right:14%;top:16%;bottom:-8%;border-radius:50%;background:radial-gradient(circle,rgba(74,58,255,.42),transparent 66%);filter:blur(26px);z-index:0;} .adv-img{position:absolute;bottom:-58px;left:50%;transform:translateX(-50%);height:300px;width:auto;z-index:1;border-radius:22px;} .adv-flame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;filter:drop-shadow(0 18px 38px rgba(255,93,21,.6));} .adv-fade{position:absolute;left:0;right:0;bottom:0;height:84px;background:linear-gradient(to top,#0c0d1a 8%,transparent);z-index:2;} .adv-body{padding:4px 26px 28px;} .adv-body h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:#fff;} .adv-body p{margin:9px 0 0;font-size:15px;color:rgba(255,255,255,.62);line-height:1.5;} .adv-feat{border-radius:24px;padding:1.5px;background:linear-gradient(135deg,#ff7a1a,#ff2d78 34%,#7b5cff 66%,#5fd3e0);box-shadow:0 34px 90px -42px rgba(123,80,255,.7);} .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} @media(max-width:1040px){.feat-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.feat-grid{grid-template-columns:1fr;}} .feat{height:100%;padding:26px;} .feat-ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#8a86ff;background:rgba(123,120,255,.12);border:1px solid rgba(123,120,255,.2);margin-bottom:18px;} .feat h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:17.5px;letter-spacing:-.01em;color:#fff;} .feat p{margin:8px 0 0;font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.5;} .priv{background:var(--navy-1000);position:relative;overflow:hidden;} .priv-glow{position:absolute;inset:0;background:radial-gradient(74% 70% at 16% 6%,rgba(74,58,255,.34),transparent 58%);pointer-events:none;} .priv-grid{position:relative;display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:center;padding:108px 0;} @media(max-width:760px){.priv-grid{grid-template-columns:1fr;gap:40px;padding:80px 0;}} .priv-phone{position:relative;display:flex;justify-content:center;} .priv-phone .glow{position:absolute;inset:10% 0;border-radius:46%;background:radial-gradient(circle,rgba(74,58,255,.45),transparent 68%);filter:blur(30px);z-index:0;} .priv-phone img{position:relative;z-index:1;width:100%;max-width:320px;border-radius:28px;display:block;} .priv-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;} .priv-row+.priv-row{border-top:1px solid rgba(255,255,255,.1);} .priv-ic{flex:none;width:42px;height:42px;border-radius:13px;color:#8a86ff;background:rgba(123,120,255,.1);border:1px solid rgba(123,120,255,.22);display:inline-flex;align-items:center;justify-content:center;} .priv-row h4{margin:0;font-family:var(--font-display);font-weight:600;font-size:18px;color:#fff;} .priv-row p{margin:3px 0 0;font-size:15.5px;color:rgba(255,255,255,.62);line-height:1.5;} .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} @media(max-width:760px){.stats-grid{grid-template-columns:1fr;gap:40px;}} .stat-row{display:flex;gap:14px;flex-wrap:wrap;} .statcard{flex:1 1 0;min-width:0;padding:20px 18px;} .statcard .n{font-family:var(--font-display);font-weight:600;font-size:34px;letter-spacing:-.03em;color:#8a86ff;line-height:1;} .statcard .l{margin-top:8px;font-size:14px;color:rgba(255,255,255,.62);font-weight:500;} .termcard{width:100%;max-width:440px;background:#0a0c1e;margin:0 auto;} .term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);} .term-dot{width:11px;height:11px;border-radius:999px;} .term-bar .nm{margin-left:8px;font-size:12.5px;color:rgba(255,255,255,.5);font-family:var(--font-mono);} .term-pre{margin:0;padding:20px 20px 24px;font-family:var(--font-mono);font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.82);white-space:pre-wrap;} .rev-cols{columns:3;column-gap:20px;} @media(max-width:1040px){.rev-cols{columns:2;}} @media(max-width:760px){.rev-cols{columns:1;}} .review{padding:24px;break-inside:avoid;margin-bottom:20px;} .review .stars{display:flex;gap:3px;color:#ff5d15;margin-bottom:14px;} .review p{margin:0;font-size:16px;color:rgba(255,255,255,.9);line-height:1.55;} .review .who{margin-top:18px;display:flex;align-items:center;gap:11px;} .review .av{width:38px;height:38px;border-radius:999px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:600;font-size:15px;background:linear-gradient(150deg,#5b54ff,#2600fe);} .review .nm{font-family:var(--font-display);font-weight:600;font-size:15px;color:#fff;} .review .src{font-size:13px;color:rgba(255,255,255,.42);} .faq{display:flex;flex-direction:column;gap:12px;} .faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:20px 22px;cursor:pointer;color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px;} .faq-item summary::-webkit-details-marker{display:none;} .faq-tog{flex:none;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s ease;} .faq-item{border-radius:16px;overflow:hidden;} .faq-item[open]{background:linear-gradient(180deg,rgba(123,120,255,.13),rgba(123,120,255,.025));box-shadow:inset 0 1px 0 rgba(138,134,255,.2),0 26px 60px -28px rgba(74,58,255,.5);} .faq-item[open] .faq-tog{transform:rotate(45deg);background:var(--blue-electric);color:#fff;} .faq-item>p{margin:0;padding:0 22px 22px;color:rgba(255,255,255,.62);font-size:16.5px;line-height:1.6;max-width:700px;} .cta{position:relative;overflow:hidden;background:linear-gradient(165deg,#211f8c 0%,#14056b 42%,var(--navy-1000) 100%);} .cta-inner{position:relative;max-width:760px;margin:0 auto;padding:116px 32px;text-align:center;} .cta-inner h2{margin:26px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4.4vw,52px);letter-spacing:-.035em;line-height:1.04;color:#fff;} .cta-inner p{margin:16px auto 36px;max-width:440px;font-size:18.5px;color:rgba(255,255,255,.74);} @media(max-width:760px){.cta-inner{padding:84px 20px;}} .stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;} .stores a{display:inline-flex;height:50px;align-items:center;} .stores img{height:50px;width:auto;display:block;} .stores .gp img{height:69px;margin:-9px 0;} .gallery{display:flex;gap:30px;overflow-x:auto;padding:12px max(32px,calc(50vw - 590px)) 36px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;} .gallery figure{flex:none;scroll-snap-align:center;position:relative;margin:0;} .gallery .glow{position:absolute;inset:12% 6%;border-radius:50%;background:radial-gradient(circle,rgba(74,58,255,.34),transparent 70%);filter:blur(26px);z-index:0;} .gallery img{position:relative;z-index:1;height:430px;width:auto;border-radius:28px;display:block;} @media(max-width:760px){.gallery img{height:360px;}} .os-statement{position:relative;overflow:hidden;padding:clamp(120px,16vw,184px) 0;text-align:center;} .os-statement h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(46px,8vw,104px);letter-spacing:-.045em;line-height:.98;color:#fff;} .os-statement h2 .grad{background:linear-gradient(100deg,#8a86ff,#5fd3e0);-webkit-background-clip:text;background-clip:text;color:transparent;} .os-statement p{margin:30px auto 0;max-width:600px;font-size:clamp(18px,2.2vw,24px);color:rgba(255,255,255,.62);line-height:1.5;} .footer{border-top:1px solid rgba(255,255,255,.09);background:#06060f;} .footer-in{padding:40px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;} .footer-links{display:flex;gap:26px;font-size:14.5px;flex-wrap:wrap;} .footer-links a{font-weight:500;text-decoration:none;} /* ============================================================ MOBILE PASS (≤600px) — clean phone layout ============================================================ */ html{overflow-x:hidden;} @media (max-width:600px){ /* nav */ .nav-in{height:62px;} /* hero */ .hero-grid{padding:28px 0 52px;gap:36px;} .hero h1{font-size:clamp(33px,9vw,44px);line-height:1.04;} .hero-sub{font-size:16.5px;margin-top:18px;} .hero-cta{flex-direction:column;align-items:stretch;gap:11px;width:100%;} .hero-cta .btn{width:100%;padding:15px 24px;} .hero-rate{justify-content:flex-start;margin-top:18px;} .hero-phone{transform:scale(.96);transform-origin:top center;} /* section heads */ .s-head{margin-bottom:40px;} .s-head h2{font-size:clamp(27px,7.5vw,34px);} .s-head p{font-size:16px;} /* sections */ .sec-pad{padding:64px 0;} /* lantern */ .lantern-grid{padding:60px 0;gap:30px;} .lantern-grid h2{font-size:clamp(31px,9vw,40px);} .lantern-grid p{font-size:17.5px;margin-top:20px;} .lantern-grid img{max-width:300px;} /* advantages */ .adv-media{height:198px;} .adv-img{height:268px;bottom:-48px;} .adv-body{padding:4px 22px 24px;} /* features */ .feat{padding:22px;} /* privacy */ .priv-grid{padding:62px 0;gap:30px;} .priv-phone img{max-width:270px;} /* 100% open source — keep on screen */ .os-statement{padding:88px 0;} .os-statement h2{font-size:clamp(40px,13.5vw,58px);line-height:1.0;} .os-statement p{font-size:17.5px;margin-top:22px;} /* open base + stats + terminal */ .stats-grid{gap:34px;} .stat-row{flex-direction:column;gap:12px;} .statcard{width:100%;} .termcard{max-width:100%;} .term-pre{font-size:12.5px;padding:18px 16px 22px;} /* reviews */ .review{padding:22px;margin-bottom:16px;} /* faq */ .faq-item summary{font-size:16.5px;padding:18px 18px;} .faq-item>p{padding:0 18px 20px;font-size:15.5px;} /* cta */ .cta-inner{padding:80px 20px;} .cta-inner h2{font-size:clamp(30px,8vw,40px);} .cta-inner p{font-size:17px;} .stores{gap:10px;} /* gallery */ .gallery{gap:20px;padding:12px 20px 30px;} .gallery img{height:340px;} /* footer */ .footer-in{flex-direction:column;align-items:flex-start;gap:22px;padding:36px 20px;} .footer-links{gap:12px 20px;} } @media (max-width:380px){ .hero-phone{transform:scale(.86);} .hero h1{font-size:31px;} } /* fix: restore horizontal gutter on grids that share the .wrap element (their padding:X 0 shorthand had overridden .wrap's side padding) */ .hero-grid,.lantern-grid,.priv-grid{padding-left:32px;padding-right:32px;} @media (max-width:600px){.hero-grid,.lantern-grid,.priv-grid{padding-left:20px;padding-right:20px;}}