:root {
  --bg-dark: #f6f8fc;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fbff;
  --border-color: #dfe5ef;
  --border-glow: #b8c7e0;
  --text-main: #0b1324;
  --text-secondary: #45536b;
  --text-muted: #69778e;
  --accent-primary: #1f5eff;
  --accent-primary-hover: #174acb;
  --accent-glow: rgba(31, 94, 255, 0.18);
  --accent-blue: #136dba;
  --accent-teal: #087f6d;
  --accent-amber: #a65f00;
  --surface-soft: #edf2fa;
  --surface-blue: #edf3ff;
  --surface-teal: #e8f7f4;
  --navy: #0b1324;
  --font-family: "Inter", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --shadow-sm: 0 1px 2px rgba(11, 19, 36, 0.05), 0 4px 14px rgba(11, 19, 36, 0.04);
  --shadow-md: 0 16px 45px rgba(25, 42, 76, 0.10);
  --shadow-lg: 0 30px 80px rgba(11, 19, 36, 0.18);
  --radius-md: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: hidden; }
body {
  min-height: 100vh;
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed; inset: 0; z-index: -2;
  background: radial-gradient(circle at 10% 5%, rgba(31,94,255,.08), transparent 28%), radial-gradient(circle at 95% 20%, rgba(8,127,109,.07), transparent 25%);
  content: ""; pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
code { border: 1px solid #d9e1ee; border-radius: 6px; background: #eef2f8; color: #174a84; font-family: var(--font-mono); font-size: .88em; padding: 2px 6px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-150%); border-radius: 8px; background: var(--navy); color: #fff; padding: 9px 14px; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(31,94,255,.35); outline-offset: 3px; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.container-narrow { width: min(880px, calc(100% - 48px)); margin: 0 auto; }
.eyebrow, .section-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--accent-primary); font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.eyebrow::before, .section-tag::before { width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; }
.section-tag { justify-content: center; width: 100%; text-align: center; }
.section-heading { max-width: 780px; margin: 0 auto 16px; font-size: clamp(32px,4vw,48px); font-weight: 760; letter-spacing: -.045em; line-height: 1.08; text-align: center; }
.section-subheading { max-width: 680px; margin: 0 auto 48px; color: var(--text-secondary); font-size: 17px; line-height: 1.7; text-align: center; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-primary); font-weight: 750; }
.text-link:hover { color: var(--accent-primary-hover); }
.text-link svg { transition: transform 180ms ease; }
.text-link:hover svg { transform: translateX(3px); }

/* Navigation */
.navbar { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(213,221,234,.82); background: rgba(250,251,253,.88); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: box-shadow 280ms ease,background 280ms ease; }
.navbar.is-nav-scrolled { box-shadow: 0 12px 34px rgba(21,22,27,.07); }
.nav-content { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--navy); font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
.logo-icon-svg { position: relative; display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: none; }
.logo-icon-svg::after { content: none; }
.logo-icon-svg img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 26px; color: #4b5870; font-size: 13.5px; font-weight: 650; }
.nav-links a { position: relative; padding: 25px 0 24px; white-space: nowrap; transition: color 160ms ease; }
.nav-links a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; transform: scaleX(0); border-radius: 2px; background: var(--accent-primary); content: ""; transition: transform 180ms ease; }
.nav-links a:hover, .nav-links a.active { color: var(--navy); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.nav-menu-btn { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border-color); border-radius: 11px; background: #fff; color: var(--navy); cursor: pointer; }
.mobile-nav-panel { display: none; }
.language-picker { position:relative; flex:0 0 auto; }
.language-picker summary { display:flex; min-width:62px; min-height:38px; align-items:center; justify-content:center; gap:7px; border:1px solid #d8d8dc; border-radius:999px; background:rgba(255,255,255,.82); color:#3f4147; padding:8px 12px; font-size:11px; font-weight:650; letter-spacing:.08em; list-style:none; cursor:pointer; user-select:none; }
.language-picker summary::-webkit-details-marker { display:none; }
.language-picker summary svg { transition:transform 220ms ease; }
.language-picker[open] summary svg { transform:rotate(180deg); }
.language-menu { position:absolute; top:calc(100% + 10px); right:0; z-index:120; width:180px; overflow:hidden; border:1px solid #dedfe3; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 22px 60px rgba(20,21,26,.14); padding:7px; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); }
.language-menu a { display:flex; align-items:center; justify-content:space-between; gap:18px; border-radius:12px; color:#55585f; padding:10px 11px; font-size:12.5px; font-weight:520; }
.language-menu a:hover { background:#f1f1f3; color:#202125; }
.language-menu a[aria-current="page"] { background:#ededf0; color:#202125; }
.language-menu small { color:#92959c; font-size:9px; font-weight:650; letter-spacing:.08em; }
.language-suggestion { position:fixed; right:24px; bottom:24px; z-index:220; display:flex; width:min(560px,calc(100% - 48px)); align-items:center; justify-content:space-between; gap:28px; border:1px solid rgba(255,255,255,.72); border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 26px 80px rgba(18,19,23,.18); padding:20px; backdrop-filter:blur(22px) saturate(145%); -webkit-backdrop-filter:blur(22px) saturate(145%); animation:language-suggestion-in 500ms cubic-bezier(.2,.8,.2,1) both; }
.language-suggestion.is-leaving { transform:translateY(16px); opacity:0; transition:transform 260ms ease,opacity 260ms ease; }
.language-suggestion strong { display:block; margin-bottom:3px; color:#24252a; font-size:14px; font-weight:620; }
.language-suggestion p { color:#71747b; font-size:11.5px; line-height:1.5; }
.language-suggestion-actions { display:flex; flex:0 0 auto; gap:8px; }
@keyframes language-suggestion-in { from { transform:translateY(18px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Buttons */
.btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; padding: 9px 17px; background: transparent; color: var(--navy); font-size: 14px; font-weight: 750; line-height: 1.2; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { transform: none; cursor: not-allowed; opacity: .62; }
.btn-primary { background: var(--accent-primary); color: #fff; box-shadow: 0 8px 20px rgba(31,94,255,.20); }
.btn-primary:hover { background: var(--accent-primary-hover); box-shadow: 0 10px 26px rgba(31,94,255,.26); }
.btn-secondary { border-color: var(--border-color); background: rgba(255,255,255,.84); color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { border-color: #c3ccdc; background: #fff; }
.btn-dark { background: var(--navy); color: #fff; box-shadow: 0 10px 28px rgba(11,19,36,.20); }
.btn-dark:hover { background: #182641; }
.btn-sm { min-height: 36px; border-radius: 9px; padding: 7px 12px; font-size: 12.5px; }
.btn-lg { min-height: 52px; border-radius: 13px; padding: 13px 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* Landing hero */
.hero { position: relative; padding: 86px 0 56px; }
.hero::after { position: absolute; top: 18px; left: 50%; z-index: -1; width: 880px; height: 420px; transform: translateX(-50%); background-image: linear-gradient(rgba(124,142,174,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(124,142,174,.10) 1px,transparent 1px); background-size: 32px 32px; content: ""; mask-image: radial-gradient(ellipse,#000 5%,transparent 72%); }
.hero-layout { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr); align-items: center; gap: 68px; }
.hero-copy { max-width: 620px; }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; border: 1px solid #cdd9ee; border-radius: 999px; background: rgba(255,255,255,.84); color: #3c4c66; box-shadow: var(--shadow-sm); padding: 7px 12px; font-size: 12px; font-weight: 750; }
.hero-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #0aa889; box-shadow: 0 0 0 4px rgba(10,168,137,.12); }
.hero-title { margin-bottom: 22px; font-size: clamp(44px,5vw,67px); font-weight: 790; letter-spacing: -.058em; line-height: 1.01; }
.gradient-text { background: linear-gradient(105deg,#1f5eff 12%,#087f6d 80%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-subtitle { max-width: 600px; margin-bottom: 30px; color: var(--text-secondary); font-size: 18px; line-height: 1.72; }
.hero-cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; }
.hero-note { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.hero-note span { display: inline-flex; align-items: center; gap: 5px; }
.hero-note span + span::before { width: 3px; height: 3px; margin-right: 5px; border-radius: 50%; background: #9ba8bc; content: ""; }
.product-shell { position: relative; transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.product-shell::before { position: absolute; inset: 18% -12% -14%; z-index: -1; border-radius: 50%; background: rgba(31,94,255,.16); filter: blur(60px); content: ""; }
.browser-frame { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: #10192b; color: #eef4ff; box-shadow: var(--shadow-lg); }
.browser-topbar { display: flex; height: 48px; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.08); background: #0b1324; padding: 0 18px; }
.browser-dot { width: 8px; height: 8px; border-radius: 50%; background: #39455a; }
.browser-address { min-width: 0; flex: 1; margin-left: 7px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.06); color: #96a5bc; padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.product-content { padding: 28px; }
.product-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.product-status-copy small { display: block; margin-bottom: 2px; color: #8fa0b8; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.product-status-copy strong { font-size: 19px; letter-spacing: -.025em; }
.status-toggle { position: relative; width: 48px; height: 27px; border-radius: 999px; background: #16a38d; box-shadow: 0 0 20px rgba(22,163,141,.28); }
.status-toggle::after { position: absolute; top: 4px; right: 4px; width: 19px; height: 19px; border-radius: 50%; background: #fff; content: ""; }
.identity-card { margin-bottom: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.045); padding: 17px; }
.identity-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.identity-site { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
.site-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #1f5eff; color: #fff; }
.private-pill { border: 1px solid rgba(43,212,188,.22); border-radius: 999px; background: rgba(43,212,188,.09); color: #78ead8; padding: 4px 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hash-row { display: flex; align-items: center; gap: 8px; }
.hash-value { flex: 1; overflow: hidden; color: #aebbd0; font-family: var(--font-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hash-bars { display: flex; align-items: center; gap: 3px; }
.hash-bars span { width: 3px; border-radius: 3px; background: #2bd4bc; }
.product-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.metric-tile { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); padding: 13px; }
.metric-tile span { display: block; margin-bottom: 5px; color: #8291a9; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.metric-tile strong { color: #f4f7fc; font-size: 13px; }
.floating-card { position: absolute; right: -24px; bottom: -22px; display: flex; width: 205px; align-items: center; gap: 11px; border: 1px solid #dce4f0; border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); padding: 13px; }
.floating-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--surface-teal); color: var(--accent-teal); }
.floating-card small { display: block; color: var(--text-muted); font-size: 10px; font-weight: 650; }
.floating-card strong { display: block; color: var(--navy); font-size: 12.5px; }
.trust-strip { padding: 50px 0 24px; }
.trust-label { margin-bottom: 20px; color: var(--text-muted); font-size: 11px; font-weight: 750; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.browser-compatibility-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 32px; color: #5b6a82; font-size: 13px; font-weight: 700; }
.browser-item { display: flex; align-items: center; gap: 8px; }
.browser-item svg { color: #8391a6; }
.browser-item img { display: block; width: 22px; height: 22px; object-fit: contain; }

/* Shared sections and cards */
.section { padding: 104px 0; }
.section-tight { padding: 76px 0; }
.section-white { border-top: 1px solid #e4e9f1; border-bottom: 1px solid #e4e9f1; background: rgba(255,255,255,.76); }
.features-section, .comparison-section, .faq-section { padding: 100px 0; }
.features-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.feature-card { position: relative; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); padding: 26px; transition: transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease; }
.feature-card:hover { transform: translateY(-4px); border-color: #c7d1e1; box-shadow: var(--shadow-md); }
.feature-card.wide { grid-column: span 2; }
.feature-card.dark { border-color: #17233a; background: var(--navy); color: #fff; }
.feature-card.dark .feature-desc { color: #aeb9ca; }
.feature-icon-wrapper { display: grid; width: 44px; height: 44px; margin-bottom: 20px; place-items: center; border: 1px solid #d9e3f3; border-radius: 12px; background: var(--surface-blue); color: var(--accent-primary); }
.feature-card.dark .feature-icon-wrapper { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.07); color: #73a0ff; }
.feature-kicker { margin-bottom: 7px; color: var(--accent-primary); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.feature-title { margin-bottom: 9px; font-size: 18px; font-weight: 760; letter-spacing: -.025em; line-height: 1.3; }
.feature-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.68; }
.workflow-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 54px; }
.workflow-step { position: relative; text-align: center; }
.step-number { position: relative; z-index: 1; display: grid; width: 54px; height: 54px; margin: 0 auto 20px; place-items: center; border: 1px solid #cbd8eb; border-radius: 50%; background: #fff; color: var(--accent-primary); box-shadow: 0 0 0 8px var(--bg-dark); font-size: 14px; font-weight: 850; }
.workflow-step h3 { margin-bottom: 8px; font-size: 17px; letter-spacing: -.02em; }
.workflow-step p { max-width: 300px; margin: 0 auto; color: var(--text-secondary); font-size: 13.5px; }

/* Scanner */
.demo-section { padding: 40px 0 96px; }
.demo-card { overflow: hidden; border: 1px solid #dce3ee; border-radius: 20px; background: #fff; box-shadow: var(--shadow-md); padding: 30px; }
.demo-card.terminal { border-color: #202c43; background: #0b1324; color: #f4f7fc; box-shadow: var(--shadow-lg); }
.demo-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.demo-title { margin-bottom: 3px; font-size: 20px; font-weight: 760; letter-spacing: -.025em; }
.demo-subtitle { color: var(--text-muted); font-size: 13px; }
.terminal .demo-subtitle { color: #91a0b8; }
.demo-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 18px; }
.demo-box { min-width: 0; border: 1px solid #e0e6ef; border-radius: 12px; background: #f7f9fc; padding: 16px; }
.terminal .demo-box { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.045); }
.demo-label { margin-bottom: 7px; color: var(--text-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.terminal .demo-label { color: #7f8da4; }
.demo-val { overflow-wrap: anywhere; color: var(--accent-blue); font-family: var(--font-mono); font-size: 12px; }
.terminal .demo-val { color: #78ead8; }
.demo-note { color: var(--text-muted); font-size: 11.5px; }
.terminal .demo-note { color: #7f8da4; }

/* Comparison */
.comparison-table-wrapper { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; }
.comparison-table th, .comparison-table td { min-width: 154px; border-bottom: 1px solid #e6eaf1; padding: 17px 20px; font-size: 13px; }
.comparison-table th { background: #f5f7fb; color: #526078; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.comparison-table th:first-child, .comparison-table td:first-child { min-width: 215px; color: var(--navy); font-weight: 700; }
.comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table .col-highlight { background: #f0f5ff; color: #174acb; font-weight: 750; }
.status-badge-table { display: inline-flex; border-radius: 999px; padding: 4px 9px; font-size: 10.5px; font-weight: 800; line-height: 1.2; }
.badge-yes { background: #dff5f0; color: #08735f; }
.badge-no { background: #f3e8eb; color: #9e3347; }

/* Downloads and CTA */
.download-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.download-card { display: flex; min-height: 220px; flex-direction: column; border: 1px solid var(--border-color); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); padding: 22px; }
.download-card .browser-logo { display: grid; width: 42px; height: 42px; margin-bottom: 18px; place-items: center; border-radius: 12px; background: var(--surface-blue); color: var(--accent-primary); }
.download-card .browser-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.download-card h3 { margin-bottom: 6px; font-size: 16px; }
.download-card p { flex: 1; margin-bottom: 20px; color: var(--text-secondary); font-size: 12.5px; }
.cta-panel { position: relative; overflow: hidden; border-radius: 26px; background: var(--navy); color: #fff; padding: 60px; }
.cta-panel::after { position: absolute; top: -130px; right: -80px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.03),0 0 0 90px rgba(255,255,255,.025); content: ""; }
.cta-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-copy { max-width: 620px; }
.cta-copy h2 { margin-bottom: 12px; font-size: clamp(30px,4vw,45px); letter-spacing: -.045em; line-height: 1.08; }
.cta-copy p { color: #aeb8ca; font-size: 15.5px; }
.cta-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.cta-panel .btn-primary { background: #fff; color: var(--navy); box-shadow: none; }
.cta-panel .btn-secondary { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }

/* Page headers and documents */
.page-hero { padding: 78px 0 62px; text-align: center; }
.page-hero h1 { max-width: 850px; margin: 0 auto 18px; font-size: clamp(39px,5vw,60px); font-weight: 790; letter-spacing: -.055em; line-height: 1.02; }
.page-hero p { max-width: 690px; margin: 0 auto; color: var(--text-secondary); font-size: 17px; }
.page-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 24px; color: var(--text-muted); font-size: 12px; font-weight: 650; }
.doc-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: start; gap: 58px; padding: 22px 0 100px; }
.doc-nav { position: sticky; top: 98px; display: flex; flex-direction: column; gap: 4px; }
.doc-nav-label { margin-bottom: 8px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.doc-nav a { border-radius: 8px; color: #536178; padding: 7px 10px; font-size: 12.5px; font-weight: 650; }
.doc-nav a:hover { background: #eaf0f9; color: var(--accent-primary); }
.document { min-width: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); padding: 48px 52px; }
.document-section { scroll-margin-top: 100px; }
.document-section + .document-section { margin-top: 46px; border-top: 1px solid #e7ebf2; padding-top: 46px; }
.document h2 { margin-bottom: 13px; font-size: 24px; letter-spacing: -.035em; line-height: 1.25; }
.document h3 { margin: 24px 0 8px; font-size: 16px; letter-spacing: -.015em; }
.document p, .document li { color: var(--text-secondary); font-size: 14px; line-height: 1.8; }
.document p + p { margin-top: 12px; }
.document ul, .document ol { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 0 21px; }
.callout { display: flex; gap: 14px; margin-bottom: 38px; border: 1px solid #bde4dd; border-radius: 14px; background: #effaf7; padding: 18px; }
.callout-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #d9f3ed; color: var(--accent-teal); }
.callout h3 { margin: 0 0 3px; color: #075f52; font-size: 14px; }
.callout p { color: #35645d; font-size: 12.5px; }
.code-panel { margin: 16px 0; overflow-x: auto; border: 1px solid #23304a; border-radius: 13px; background: #0b1324; color: #bcd0f2; padding: 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; white-space: pre; }
.security-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 32px; }
.security-metric { border: 1px solid var(--border-color); border-radius: 13px; background: #fff; padding: 17px; text-align: center; }
.security-metric strong { display: block; margin-bottom: 3px; color: var(--accent-primary); font-size: 20px; }
.security-metric span { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

/* Pricing */
.pricing-section { padding: 32px 0 100px; }
.pricing-switch-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; }
.pricing-switch { display: flex; border: 1px solid var(--border-color); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); padding: 4px; }
.switch-btn { border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); padding: 9px 16px; font-size: 12px; font-weight: 750; cursor: pointer; }
.switch-btn.active { background: var(--navy); color: #fff; box-shadow: 0 5px 13px rgba(11,19,36,.16); }
.discount-tag { color: var(--accent-teal); font-size: 11px; font-weight: 750; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.pricing-card { position: relative; display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--border-color); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); padding: 30px; }
.pricing-card.featured { transform: translateY(-8px); border-color: #9eb8fb; box-shadow: 0 22px 56px rgba(31,94,255,.15); }
.featured-pill { position: absolute; top: 16px; right: 16px; border-radius: 999px; background: var(--surface-blue); color: var(--accent-primary); padding: 5px 9px; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.plan-name { margin-bottom: 7px; font-size: 19px; font-weight: 780; letter-spacing: -.025em; }
.plan-desc { min-height: 46px; margin-bottom: 24px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; }
.plan-price-wrapper { display: flex; min-height: 58px; align-items: baseline; gap: 7px; margin-bottom: 24px; }
.plan-price { font-size: 42px; font-weight: 790; letter-spacing: -.05em; line-height: 1; }
.plan-period { max-width: 100px; color: var(--text-muted); font-size: 11.5px; line-height: 1.3; }
.plan-features-list { display: flex; flex: 1; flex-direction: column; gap: 12px; margin-bottom: 28px; list-style: none; }
.plan-feature-item { display: flex; align-items: flex-start; gap: 9px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; }
.check-icon, .cross-icon { flex: 0 0 auto; margin-top: 1px; }
.check-icon { color: var(--accent-teal); }
.cross-icon { color: #9ca8ba; }
.pricing-assurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 28px; color: var(--text-muted); font-size: 11.5px; font-weight: 650; }
.pricing-assurance span { display: flex; align-items: center; gap: 6px; }

/* FAQ */
.faq-grid { display: flex; max-width: 820px; flex-direction: column; gap: 10px; margin: 0 auto; }
.faq-item { overflow: hidden; border: 1px solid var(--border-color); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; border: 0; background: transparent; color: var(--navy); padding: 18px 20px; font-size: 14px; font-weight: 750; text-align: left; cursor: pointer; }
.faq-question svg { flex: 0 0 auto; color: var(--text-muted); transition: transform 180ms ease; }
.faq-answer { padding: 0 46px 19px 20px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.faq-answer.collapsed { display: none; }

/* Modals and forms */
.modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; overflow-y: auto; background: rgba(11,19,36,.62); backdrop-filter: blur(9px); padding: 24px; }
.modal[aria-hidden="false"] { display: flex; }
.modal-card { position: relative; width: min(500px,100%); border: 1px solid #dbe2ec; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); padding: 32px; }
.modal-close { position: absolute; top: 14px; right: 14px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 9px; background: #eef2f7; color: var(--text-secondary); cursor: pointer; }
.modal-card h2, .modal-card h3 { margin-bottom: 7px; padding-right: 40px; font-size: 23px; letter-spacing: -.035em; }
.modal-subtitle { margin-bottom: 22px; color: var(--text-secondary); font-size: 13px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; color: #344057; font-size: 11.5px; font-weight: 800; }
.portal-input, .form-input { width: 100%; border: 1px solid #cfd7e4; border-radius: 10px; background: #fff; color: var(--navy); padding: 11px 12px; font-size: 14px; transition: border-color 150ms ease,box-shadow 150ms ease; }
.portal-input:focus, .form-input:focus { border-color: #83a6fb; box-shadow: 0 0 0 4px rgba(31,94,255,.10); outline: none; }
.form-help { margin-top: 6px; color: var(--text-muted); font-size: 10.5px; }
.form-alert { display: none; margin-bottom: 16px; border-radius: 10px; padding: 10px 12px; font-size: 12px; }
.order-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; border: 1px solid var(--border-color); border-radius: 12px; background: #f6f8fc; padding: 14px; }
.order-summary strong { display: block; font-size: 13px; }
.order-summary span { color: var(--text-muted); font-size: 11px; }
.order-price { color: var(--navy) !important; font-size: 18px !important; font-weight: 800; }
.success-key { margin: 18px 0; overflow-wrap: anywhere; border: 1px solid #bce2db; border-radius: 12px; background: #ecf8f5; color: #076d5d; padding: 14px; font-family: var(--font-mono); font-size: 13px; font-weight: 800; text-align: center; }

/* Portal */
.portal-page { padding: 48px 0 96px; }
.portal-shell { width: min(1020px,calc(100% - 48px)); margin: 0 auto; }
.auth-layout { display: grid; max-width: 920px; grid-template-columns: .9fr 1.1fr; overflow: hidden; margin: 22px auto 0; border: 1px solid var(--border-color); border-radius: 22px; background: #fff; box-shadow: var(--shadow-md); }
.auth-aside { display: flex; min-height: 540px; flex-direction: column; justify-content: space-between; background: var(--navy); color: #fff; padding: 38px; }
.auth-aside h1 { margin: 26px 0 12px; font-size: 32px; letter-spacing: -.045em; line-height: 1.12; }
.auth-aside p { color: #aeb9cb; font-size: 14px; }
.auth-benefits { display: flex; flex-direction: column; gap: 13px; list-style: none; }
.auth-benefits li { display: flex; align-items: center; gap: 9px; color: #c5cede; font-size: 12.5px; }
.auth-benefits svg { color: #59dcc7; }
.auth-card { max-width: none; margin: 0; border: 0; border-radius: 0; background: #fff; padding: 54px 48px; }
.auth-card-header { margin-bottom: 28px; }
.auth-card-header h2 { margin-bottom: 5px; font-size: 25px; letter-spacing: -.035em; }
.auth-card-header p { color: var(--text-muted); font-size: 12.5px; }
.auth-toggle { margin-top: 18px; color: var(--text-muted); font-size: 12.5px; text-align: center; }
.link-button { border: 0; background: transparent; color: var(--accent-primary); font-size: inherit; font-weight: 750; cursor: pointer; }
.auth-recovery-link { display:block; margin:14px auto 0; font-size:12.5px; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.dashboard-heading h1 { margin-bottom: 3px; font-size: 34px; letter-spacing: -.045em; }
.dashboard-heading p { color: var(--text-secondary); font-size: 13px; }
.portal-nav-tabs { display: flex; gap: 4px; margin-bottom: 22px; border: 1px solid var(--border-color); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); padding: 4px; }
.portal-tab-btn { flex: 1; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); padding: 9px 12px; font-size: 12.5px; font-weight: 750; cursor: pointer; }
.portal-tab-btn.active { background: var(--surface-blue); color: var(--accent-primary); }
.portal-panel { display: none; }
.portal-panel.active { display: block; }
.portal-security-form { display:grid; max-width:580px; grid-template-columns:1fr 1fr; gap:0 14px; margin-top:20px; }
.portal-security-form .form-group:first-child,.portal-security-form .form-alert,.portal-security-form button { grid-column:1 / -1; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 9px; border: 1px solid var(--border-color); border-radius: 9px; background: #f7f9fc; padding: 10px 12px; font-size: 12px; }
.status-pill-sub { border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.portal-user-profile { display: none; align-items: center; gap: 9px; }
.portal-user-profile span { max-width: 170px; overflow: hidden; color: var(--text-secondary); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Support and 404 */
.support-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.support-card { display: flex; min-height: 240px; flex-direction: column; border: 1px solid var(--border-color); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); padding: 25px; }
.support-card h2 { margin: 18px 0 8px; font-size: 18px; letter-spacing: -.025em; }
.support-card p { flex: 1; margin-bottom: 20px; color: var(--text-secondary); font-size: 13px; }
.not-found { display: grid; min-height: calc(100vh - 72px); place-items: center; padding: 72px 24px; text-align: center; }
.not-found-code { margin-bottom: 12px; background: linear-gradient(120deg,var(--accent-primary),var(--accent-teal)); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: clamp(80px,16vw,160px); font-weight: 850; letter-spacing: -.08em; line-height: .8; }
.not-found h1 { margin-bottom: 12px; font-size: 34px; letter-spacing: -.04em; }
.not-found p { max-width: 510px; margin: 0 auto 26px; color: var(--text-secondary); }

/* Footer */
.footer { border-top: 1px solid #dce3ed; background: #eef2f7; color: var(--text-muted); padding: 62px 0 28px; font-size: 12.5px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: 46px; margin-bottom: 46px; }
.footer-brand p { max-width: 320px; margin-top: 15px; line-height: 1.65; }
.footer-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; border: 1px solid #d1dce8; border-radius: 999px; background: rgba(255,255,255,.6); color: #496056; padding: 5px 9px; font-size: 10px; font-weight: 750; }
.footer-status::before { width: 6px; height: 6px; border-radius: 50%; background: #0aa889; content: ""; }
.footer-col h4 { margin-bottom: 15px; color: var(--navy); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; list-style: none; }
.footer-col a { transition: color 150ms ease; }
.footer-col a:hover { color: var(--navy); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #d7dee9; padding-top: 23px; font-size: 11px; }

@media (max-width: 1060px) {
  .nav-links { gap: 17px; }
  .nav-links a:nth-child(3) { display: none; }
  .hero-layout { grid-template-columns: 1fr .9fr; gap: 40px; }
  .download-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .container, .container-narrow, .portal-shell { width: min(100% - 32px,680px); }
  .nav-links, .nav-actions > .btn { display: none; }
  .nav-actions .portal-user-profile { display: none !important; }
  .nav-menu-btn { display: grid; }
  .mobile-nav-panel { border-top: 1px solid #e1e6ee; background: rgba(250,251,253,.98); padding: 10px 16px 18px; }
  .mobile-nav-panel.open { display: grid; }
  .mobile-nav-panel a { border-radius: 9px; color: var(--text-secondary); padding: 10px 12px; font-size: 13px; font-weight: 700; }
  .mobile-nav-panel a.active { background: var(--surface-blue); color: var(--accent-primary); }
  .mobile-nav-panel .mobile-nav-cta { margin-top: 6px; background: var(--accent-primary); color: #fff; text-align: center; }
  .hero { padding-top: 66px; }
  .hero-layout { grid-template-columns: 1fr; text-align: center; }
  .hero-copy, .hero-subtitle { margin-right: auto; margin-left: auto; }
  .hero-cta-group, .hero-note { justify-content: center; }
  .product-shell { width: min(540px,100%); margin: 0 auto; transform: none; }
  .features-grid, .pricing-grid, .support-grid { grid-template-columns: 1fr 1fr; }
  .feature-card.wide { grid-column: span 2; }
  .pricing-card.featured { transform: none; }
  .pricing-card:last-child { grid-column: span 2; width: calc(50% - 9px); justify-self: center; }
  .cta-content { align-items: flex-start; flex-direction: column; }
  .doc-layout { grid-template-columns: 1fr; gap: 22px; }
  .doc-nav { position: static; flex-flow: row wrap; border-bottom: 1px solid #dfe5ee; padding-bottom: 14px; }
  .doc-nav-label { width: 100%; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-aside { min-height: auto; }
  .auth-aside > div:last-child { margin-top: 26px; }
}
@media (max-width: 620px) {
  .container, .container-narrow, .portal-shell { width: calc(100% - 28px); }
  .nav-content { min-height: 64px; }
  .logo { font-size: 14px; }
  .logo-icon-svg { width: 31px; height: 31px; }
  .hero { padding: 54px 0 36px; }
  .hero-title { font-size: 42px; }
  .hero-subtitle { font-size: 16px; }
  .hero-cta-group .btn, .cta-actions .btn { width: 100%; }
  .hero-cta-group, .cta-actions { width: 100%; flex-direction: column; }
  .hero-note { flex-wrap: wrap; }
  .product-content { padding: 20px; }
  .product-metrics { grid-template-columns: 1fr; }
  .floating-card { position: static; width: 100%; margin-top: 12px; }
  .section, .features-section, .comparison-section, .faq-section { padding: 76px 0; }
  .section-heading { font-size: 34px; }
  .section-subheading { margin-bottom: 35px; font-size: 15px; }
  .features-grid, .pricing-grid, .support-grid, .download-grid, .demo-grid, .security-metrics { grid-template-columns: 1fr; }
  .feature-card.wide, .pricing-card:last-child { grid-column: auto; width: auto; }
  .workflow-grid { grid-template-columns: 1fr; gap: 30px; }
  .workflow-step::after, .workflow-signal { display: none; }
  .demo-header, .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .demo-header .btn, .dashboard-heading .btn { width: 100%; }
  .page-hero { padding: 58px 0 42px; }
  .page-hero h1 { font-size: 39px; }
  .document { border-right: 0; border-left: 0; border-radius: 0; margin-right: -14px; margin-left: -14px; padding: 34px 22px; }
  .cta-panel { border-radius: 20px; padding: 38px 24px; }
  .auth-aside, .auth-card { padding: 32px 24px; }
  .auth-layout { border-radius: 18px; }
  .portal-nav-tabs { overflow-x: auto; }
  .portal-tab-btn { min-width: 130px; }
  .device-row { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .modal { padding: 14px; }
  .modal-card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Cinematic SaaS visual system */
:root {
  --bg-dark: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --border-color: #e2e2e5;
  --border-glow: #c9cad1;
  --text-main: #17181b;
  --text-secondary: #5f636b;
  --text-muted: #7b7f87;
  --accent-primary: #315bea;
  --accent-primary-hover: #2347c5;
  --accent-teal: #087f72;
  --surface-soft: #f5f5f7;
  --surface-blue: #eef2ff;
  --surface-teal: #eaf8f5;
  --navy: #17181b;
  --font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --shadow-sm: 0 1px 2px rgba(17,18,22,.04), 0 8px 30px rgba(17,18,22,.045);
  --shadow-md: 0 22px 70px rgba(17,18,22,.10);
  --shadow-lg: 0 42px 120px rgba(0,0,0,.27);
  --radius-md: 26px;
}

body { background: #fff; color: var(--text-main); font-size: 16px; line-height: 1.58; }
body::before { display: none; }
.container { width: min(1240px,calc(100% - 64px)); }
.container-narrow { width: min(920px,calc(100% - 64px)); }

.navbar { border-bottom-color: rgba(219,219,223,.72); background: rgba(255,255,255,.82); }
.nav-content { min-height: 76px; }
.logo { gap: 11px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.logo-icon-svg { width: 36px; height: 36px; border-radius: 9px; background: #fff; box-shadow: none; }
.nav-links { gap: 30px; color: #5f6268; font-size: 13.5px; font-weight: 500; }
.nav-links a { padding: 27px 0 26px; }
.nav-links a::after { bottom: 14px; height: 1px; background: #17181b; }
.nav-actions { gap: 8px; }

.btn { min-height: 44px; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 560; letter-spacing: -.01em; transition: transform 260ms cubic-bezier(.2,.8,.2,1),box-shadow 260ms ease,background 260ms ease,border-color 260ms ease,color 260ms ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary,.btn-dark { background: #18191c; color: #fff; box-shadow: 0 9px 28px rgba(17,18,22,.16); }
.btn-primary:hover,.btn-dark:hover { background: #303136; box-shadow: 0 13px 36px rgba(17,18,22,.22); }
.btn-secondary { border-color: #d8d8dc; background: rgba(255,255,255,.82); box-shadow: none; }
.btn-secondary:hover { border-color: #a9abb2; }
.btn-sm { min-height: 38px; border-radius: 999px; padding: 8px 15px; }
.btn-lg { min-height: 54px; border-radius: 999px; padding: 14px 25px; font-size: 15px; }

.hero-cinematic { display: grid; min-height: 700px; align-items: center; overflow: hidden; padding: 84px 0 104px; isolation: isolate; }
.hero-cinematic::after { display: none; }
.hero-particle-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .86; pointer-events: none; }
.hero-centered { position: relative; z-index: 1; display: flex; max-width: 1000px; align-items: center; flex-direction: column; text-align: center; }
.hero-pill { margin-bottom: 32px; border-color: #dedee3; background: rgba(255,255,255,.72); box-shadow: 0 10px 40px rgba(30,31,38,.06); color: #575a61; padding: 8px 14px; font-size: 12px; font-weight: 520; backdrop-filter: blur(16px); }
.hero-pill-dot { width: 6px; height: 6px; background: #18a489; box-shadow: 0 0 0 5px rgba(24,164,137,.1); }
.hero-title { max-width: 990px; margin-bottom: 28px; font-size: clamp(58px,6.35vw,82px); font-weight: 450; letter-spacing: -.052em; line-height: 1.075; text-wrap: balance; }
.hero-highlight { background: linear-gradient(135deg, #1f5eff 0%, #087f6d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline; }
.hero-subtitle { max-width: 700px; margin: 0 auto 34px; color: #5e626a; font-size: 18px; line-height: 1.65; text-wrap: balance; }
.hero-cta-group { justify-content: center; margin-bottom: 28px; }
.hero-note { flex-wrap: wrap; justify-content: center; color: #767a82; font-size: 12px; font-weight: 500; }

.experience-section { padding: 0 0 96px; }
.experience-panel { position: relative; min-height: 790px; overflow: hidden; border-radius: 38px; background: #08090b; color: #fff; box-shadow: 0 34px 100px rgba(9,10,13,.18); padding: 30px 42px 40px; isolation: isolate; }
.experience-panel::before { position: absolute; inset: 2% 8% 8%; z-index: -2; background: radial-gradient(circle at 35% 35%,rgba(82,116,255,.24),transparent 30%),radial-gradient(circle at 65% 42%,rgba(45,211,182,.17),transparent 27%),radial-gradient(circle at 53% 69%,rgba(242,106,154,.16),transparent 28%); filter: blur(50px); content: ""; animation: ambient-drift 10s ease-in-out infinite alternate; }
.experience-panel::after { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 1.3px); background-position: center; background-size: 44px 44px; content: ""; opacity: .18; mask-image: linear-gradient(to bottom,#000,transparent 75%); }
.experience-topline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.56); font-size: 11px; font-weight: 550; letter-spacing: .11em; text-transform: uppercase; }
.experience-live { display: inline-flex; align-items: center; gap: 8px; }
.experience-live i { width: 6px; height: 6px; border-radius: 50%; background: #55dec7; box-shadow: 0 0 0 5px rgba(85,222,199,.08),0 0 18px rgba(85,222,199,.65); }
.signal-sculpture { position: absolute; top: 95px; left: 50%; display: flex; width: min(740px,72%); height: 245px; transform: translateX(-50%); align-items: center; justify-content: center; gap: clamp(6px,1vw,13px); filter: drop-shadow(0 0 22px rgba(99,127,255,.32)); }
.signal-sculpture::before { position: absolute; inset: 14% 4%; border-radius: 50%; background: radial-gradient(ellipse,rgba(72,108,255,.17),rgba(76,215,190,.07) 48%,transparent 72%); content: ""; filter: blur(18px); }
.signal-sculpture span { position: relative; width: clamp(3px,.36vw,5px); height: 42px; transform-origin: center; border-radius: 999px; background: linear-gradient(180deg,#718cff,#5ad8c1 55%,#ef83aa); box-shadow: 0 0 12px rgba(105,137,255,.55); animation: signal-breathe 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -95ms); }
.signal-sculpture span:nth-child(2),.signal-sculpture span:nth-last-child(2){height:56px}.signal-sculpture span:nth-child(3),.signal-sculpture span:nth-last-child(3){height:76px}.signal-sculpture span:nth-child(4),.signal-sculpture span:nth-last-child(4){height:99px}.signal-sculpture span:nth-child(5),.signal-sculpture span:nth-last-child(5){height:124px}.signal-sculpture span:nth-child(6),.signal-sculpture span:nth-last-child(6){height:148px}.signal-sculpture span:nth-child(7),.signal-sculpture span:nth-last-child(7){height:171px}.signal-sculpture span:nth-child(8),.signal-sculpture span:nth-last-child(8){height:191px}.signal-sculpture span:nth-child(9),.signal-sculpture span:nth-last-child(9){height:208px}.signal-sculpture span:nth-child(10),.signal-sculpture span:nth-last-child(10){height:220px}.signal-sculpture span:nth-child(11){height:226px}
.experience-product { position: absolute; right: 50%; bottom: 86px; width: min(620px,calc(100% - 90px)); transform: translateX(50%); }
.experience-product::before { inset: -12% -18% -18%; background: conic-gradient(from 210deg,rgba(88,121,255,.2),rgba(61,212,187,.18),rgba(238,119,162,.17),rgba(88,121,255,.2)); filter: blur(55px); }
.experience-product .browser-frame { border-color: rgba(255,255,255,.16); background: rgba(16,20,29,.92); box-shadow: 0 40px 100px rgba(0,0,0,.6); backdrop-filter: blur(24px); }
.experience-product .floating-card { right: -70px; bottom: 28px; border-color: rgba(255,255,255,.13); background: rgba(29,31,38,.82); box-shadow: 0 20px 50px rgba(0,0,0,.36); backdrop-filter: blur(18px); }
.experience-product .floating-card small { color: #9499a3; }
.experience-product .floating-card strong { color: #fff; }
.experience-caption { position: absolute; right: 30px; bottom: 24px; left: 30px; color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .04em; text-align: center; }

.trust-strip { position:relative; padding:70px 0 112px; isolation:isolate; }
.trust-strip::before { position:absolute; inset:12px 4% 22px; z-index:-2; border-radius:50%; background:radial-gradient(circle at 18% 58%,rgba(92,124,255,.15),transparent 24%),radial-gradient(circle at 50% 38%,rgba(78,211,187,.14),transparent 27%),radial-gradient(circle at 82% 60%,rgba(240,126,169,.13),transparent 24%); content:""; filter:blur(42px); }
.trust-strip::after { position:absolute; inset:12% 7% 8%; z-index:-1; background-image:radial-gradient(circle,rgba(91,101,127,.16) 0 1px,transparent 1.3px); background-size:28px 28px; content:""; opacity:.22; mask-image:radial-gradient(ellipse,#000,transparent 72%); }
.trust-label { margin-bottom: 38px; color: #7e8188; font-size: 11px; font-weight: 550; }
.browser-compatibility-bar { flex-wrap: nowrap; gap: clamp(10px,2.5vw,34px); }
.browser-item { --arc-offset:18px; --dock-scale:1; --dock-lift:0px; --dock-shadow:.055; position:relative; z-index:1; width:clamp(104px,11vw,132px); height:clamp(104px,11vw,132px); transform:translateY(calc(var(--arc-offset) + var(--dock-lift))) scale(var(--dock-scale)); transform-origin:center bottom; flex:0 0 auto; flex-direction:column; justify-content:center; gap:10px; border:1px solid rgba(255,255,255,.82); border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.34)); color:#4f5259; font-size:12px; font-weight:520; box-shadow:inset 0 1px 1px rgba(255,255,255,.92),inset 0 -1px 1px rgba(92,102,132,.08),0 18px 48px rgba(25,26,31,var(--dock-shadow)); outline:1px solid rgba(105,112,134,.1); outline-offset:-2px; backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); transition:transform 850ms cubic-bezier(0.16,1,0.3,1),border-color 500ms ease,box-shadow 700ms ease,background 700ms ease; will-change:transform; }
.browser-compatibility-bar.is-dock-active .browser-item { transition:transform 650ms cubic-bezier(0.16,1,0.3,1),border-color 450ms ease,box-shadow 600ms ease,background 600ms ease; }
.browser-item:hover { border-color:rgba(255,255,255,.98); background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.46)); box-shadow:inset 0 1px 1px rgba(255,255,255,1),inset 0 -1px 1px rgba(92,102,132,.08),0 26px 64px rgba(25,26,31,.12); }
.browser-item svg { width: 22px; height: 22px; color: #26272b; }
.browser-item img { width:42px; height:42px; filter:drop-shadow(0 7px 12px rgba(23,24,29,.12)); transition:transform 700ms cubic-bezier(0.16,1,0.3,1),filter 600ms ease; }
.browser-item:nth-child(1),.browser-item:nth-child(6) { --arc-offset:18px; }
.browser-item:nth-child(2),.browser-item:nth-child(5) { --arc-offset:7px; }
.browser-item:nth-child(3),.browser-item:nth-child(4) { --arc-offset:0px; }
.browser-item:hover img { transform:scale(1.06); filter:drop-shadow(0 14px 22px rgba(23,24,29,.18)); }

.anti-tracking-section { padding: 48px 0 150px; }
.anti-tracking-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; gap: clamp(62px,8vw,108px); }
.anti-tracking-copy { position: sticky; top: 120px; }
.anti-tracking-copy .section-tag { justify-content: flex-start; width: auto; }
.anti-tracking-copy h2 { max-width: 570px; margin-bottom: 27px; font-size: clamp(40px,4.4vw,60px); font-weight: 450; letter-spacing: -.05em; line-height: 1.07; text-wrap: balance; }
.anti-tracking-copy p { max-width: 570px; color: #656970; font-size: 15.5px; line-height: 1.78; }
.anti-tracking-copy p + p { margin-top: 16px; }
.anti-tracking-copy .text-link { margin-top: 28px; color: #23252a; font-weight: 550; }
.tracking-flow { display: flex; flex-direction: column; border-top: 1px solid #d9dadd; }
.tracking-step { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 20px; border-bottom: 1px solid #d9dadd; padding: 34px 8px 34px 0; }
.tracking-step-number { color: #9a9da4; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.tracking-step-label { display: block; margin-bottom: 9px; color: #80838a; font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.tracking-step h3 { max-width: 560px; margin-bottom: 10px; font-size: clamp(22px,2.3vw,30px); font-weight: 500; letter-spacing: -.035em; line-height: 1.18; }
.tracking-step p { max-width: 600px; color: #70737a; font-size: 13.5px; line-height: 1.7; }
.tracking-step.protected { margin-top: 14px; overflow: hidden; border: 0; border-radius: 28px; background: #111214; color: #fff; padding: 34px 30px; box-shadow: 0 24px 65px rgba(19,20,24,.13); }
.tracking-step.protected .tracking-step-number,.tracking-step.protected .tracking-step-label { color: #73d8c4; }
.tracking-step.protected p { color: #aeb1b8; }

.privacy-layers-section { padding: 0 0 140px; }
.privacy-layers-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.55fr); align-items:end; gap:clamp(44px,7vw,96px); margin-bottom:46px; }
.privacy-layers-heading .section-tag { justify-content:flex-start; width:auto; }
.privacy-layers-heading h2 { max-width:820px; font-size:clamp(40px,4.5vw,60px); font-weight:450; letter-spacing:-.05em; line-height:1.08; text-wrap:balance; }
.privacy-layers-heading > p { color:#686b72; font-size:15px; line-height:1.72; }
.privacy-layer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.privacy-layer-card { position:relative; display:flex; min-height:338px; flex-direction:column; overflow:hidden; border:1px solid #dedfe3; border-radius:28px; background:rgba(255,255,255,.82); padding:29px; box-shadow:0 18px 50px rgba(24,25,30,.05); }
.privacy-layer-topline { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:42px; }
.privacy-layer-icon { display:grid; width:44px; height:44px; place-items:center; border:1px solid #e0e1e5; border-radius:50%; background:#f7f7f8; color:#26272c; }
.privacy-layer-tool { color:#777a82; font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.privacy-layer-card h3 { max-width:280px; margin-bottom:13px; font-size:25px; font-weight:520; letter-spacing:-.035em; line-height:1.18; text-wrap:balance; }
.privacy-layer-card > p { color:#6d7077; font-size:13.5px; line-height:1.68; }
.privacy-layer-boundary { display:flex; flex-direction:column; gap:6px; margin-top:auto; border-top:1px solid #e1e2e5; padding-top:20px; }
.privacy-layer-boundary span { color:#93969d; font-size:9.5px; font-weight:650; letter-spacing:.11em; text-transform:uppercase; }
.privacy-layer-boundary strong { color:#35373d; font-size:12.5px; font-weight:560; line-height:1.5; }
.privacy-layer-card.is-protected { border-color:#17181c; background:#111214; color:#fff; box-shadow:0 28px 70px rgba(20,21,25,.14); }
.privacy-layer-card.is-protected::after { position:absolute; right:-95px; bottom:-130px; width:330px; height:330px; border-radius:50%; background:radial-gradient(circle,rgba(76,211,184,.2),rgba(80,109,240,.15) 40%,transparent 70%); content:""; filter:blur(8px); pointer-events:none; }
.privacy-layer-card.is-protected .privacy-layer-icon { border-color:#37393f; background:#23252a; color:#74dbc5; }
.privacy-layer-card.is-protected .privacy-layer-tool { color:#75d9c4; }
.privacy-layer-card.is-protected > p { position:relative; z-index:1; color:#afb2ba; }
.privacy-layer-card.is-protected .privacy-layer-boundary { position:relative; z-index:1; border-top-color:#34363b; }
.privacy-layer-card.is-protected .privacy-layer-boundary span { color:#79c9b9; }
.privacy-layer-card.is-protected .privacy-layer-boundary strong { color:#f2f3f5; }
.privacy-layers-summary { display:flex; align-items:center; justify-content:center; gap:6px; margin:24px auto 0; color:#6e7178; font-size:13px; line-height:1.6; text-align:center; }
.privacy-layers-summary strong { color:#27282d; font-weight:620; }

.audience-section { padding:132px 0; background:#f6f6f7; }
.audience-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.55fr); align-items:end; gap:clamp(44px,7vw,96px); margin-bottom:48px; }
.audience-heading .section-tag { justify-content:flex-start; width:auto; }
.audience-heading h2 { max-width:790px; font-size:clamp(42px,4.8vw,62px); font-weight:450; letter-spacing:-.052em; line-height:1.07; text-wrap:balance; }
.audience-heading > p { color:#686b72; font-size:15px; line-height:1.72; }
.audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.audience-card { display:flex; min-height:398px; flex-direction:column; border:1px solid #dedfe3; border-radius:30px; background:#fff; padding:31px; transition:transform 450ms cubic-bezier(.2,.8,.2,1),box-shadow 380ms ease,border-color 380ms ease; }
.audience-card:hover { transform:translateY(-7px); border-color:#cacbd0; box-shadow:0 26px 66px rgba(20,21,26,.09); }
.audience-index { align-self:flex-end; color:#9699a0; font-size:10px; font-weight:650; letter-spacing:.12em; }
.audience-icon { display:grid; width:48px; height:48px; margin:42px 0 28px; place-items:center; border:1px solid #dedfe2; border-radius:50%; background:#f5f5f6; color:#28292e; }
.audience-card h3 { max-width:290px; margin-bottom:15px; font-size:26px; font-weight:510; letter-spacing:-.038em; line-height:1.16; text-wrap:balance; }
.audience-card p { margin-bottom:30px; color:#6d7077; font-size:13.5px; line-height:1.7; }
.audience-context { margin-top:auto; border-top:1px solid #e2e3e6; color:#8a8d94; padding-top:18px; font-size:9.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.audience-card.dark { border-color:#111214; background:#111214; color:#fff; box-shadow:0 28px 70px rgba(20,21,25,.13); }
.audience-card.dark:hover { border-color:#111214; box-shadow:0 34px 80px rgba(20,21,25,.18); }
.audience-card.dark .audience-index { color:#6ed4c0; }
.audience-card.dark .audience-icon { border-color:#36383d; background:#222328; color:#76dbc6; }
.audience-card.dark p { color:#aeb1b9; }
.audience-card.dark .audience-context { border-top-color:#34363b; color:#79c9b9; }
.audience-footer { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:28px; border-top:1px solid #d9dade; padding-top:26px; }
.audience-footer p { max-width:700px; color:#73767d; font-size:12.5px; line-height:1.65; }
.audience-footer .text-link { flex:0 0 auto; color:#27282d; font-size:13px; font-weight:560; }

.statement-section { padding: 40px 0 160px; }
.container-statement { max-width: 1030px; text-align: center; }
.container-statement h2 { margin: 0 auto; font-size: clamp(44px,5.25vw,70px); font-weight: 450; letter-spacing: -.052em; line-height: 1.08; text-wrap: balance; }
.eyebrow,.section-tag { margin-bottom: 18px; color: #6b6e75; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.eyebrow::before,.section-tag::before { width: 14px; height: 1px; }
.section-tag { justify-content: center; }
.section-heading { max-width: 900px; margin-bottom: 20px; font-size: clamp(42px,4.7vw,62px); font-weight: 450; letter-spacing: -.05em; line-height: 1.08; text-wrap: balance; }
.section-subheading { max-width: 720px; margin-bottom: 62px; color: #62666d; font-size: 17px; line-height: 1.65; text-wrap: balance; }

.section { padding: 132px 0; }
.section-tight { padding: 96px 0; }
.features-section,.comparison-section,.faq-section { padding: 132px 0; }
.features-section { background: #f6f6f7; }
.section-white { border: 0; background: #fff; }
.features-grid { gap: 20px; }
.feature-card { min-height: 310px; border-color: #e2e2e5; border-radius: 30px; background: #fff; box-shadow: none; padding: 34px; transition: transform 500ms cubic-bezier(.2,.8,.2,1),box-shadow 400ms ease,border-color 400ms ease; }
.feature-card:hover { transform: translateY(-8px); border-color: #d2d2d7; box-shadow: 0 28px 70px rgba(22,23,28,.10); }
.feature-card.dark { border-color: #191a1e; background: #111214; }
.feature-card.dark::after { position: absolute; right: -50px; bottom: -105px; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle,rgba(82,116,255,.35),rgba(58,203,180,.13) 42%,transparent 70%); content: ""; filter: blur(9px); }
.feature-icon-wrapper { width: 48px; height: 48px; margin-bottom: 36px; border-radius: 50%; }
.feature-kicker { font-size: 10px; font-weight: 600; }
.feature-title { max-width: 520px; margin-bottom: 13px; font-size: 23px; font-weight: 550; letter-spacing: -.03em; line-height: 1.25; }
.feature-desc { position: relative; z-index: 1; font-size: 14px; line-height: 1.7; }
@keyframes workflowConnectorFirst {
  0%,8% { background-size:0 100%,auto; }
  35%,96% { background-size:100% 100%,auto; }
  100% { background-size:0 100%,auto; }
}

@keyframes workflowConnectorSecond {
  0%,40% { background-size:0 100%,auto; }
  70%,96% { background-size:100% 100%,auto; }
  100% { background-size:0 100%,auto; }
}

@keyframes workflowSignalTravel {
  0%,7% { left:calc(16.6667% + 24.6667px); opacity:0; transform:translate(-50%,-50%) scale(.7); }
  10% { left:calc(16.6667% + 24.6667px); background:#1f5eff; opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 5px rgba(31,94,255,.12),0 5px 18px rgba(31,94,255,.32); }
  34% { left:calc(50% - 36px); background:#6676dc; opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 6px rgba(102,118,220,.14),0 5px 18px rgba(102,118,220,.3); }
  37% { left:calc(50% - 36px); opacity:0; transform:translate(-50%,-50%) scale(.72); }
  40% { left:calc(50% + 36px); opacity:0; transform:translate(-50%,-50%) scale(.72); }
  43% { left:calc(50% + 36px); background:#6676dc; opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 5px rgba(102,118,220,.12),0 5px 18px rgba(102,118,220,.3); }
  70%,82% { left:calc(83.3333% - 24.6667px); background:#15947d; opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 6px rgba(21,148,125,.14),0 5px 18px rgba(21,148,125,.32); }
  96%,100% { left:calc(83.3333% - 24.6667px); opacity:0; transform:translate(-50%,-50%) scale(.72); }
}

@keyframes stepPulseBeacon {
  0%,27%,100% {
    border-color:#d3d3d8;
    color:#1d1e22;
    box-shadow:0 0 0 10px #fff,0 0 0 11px rgba(86,91,105,.08),0 8px 22px rgba(25,42,76,.06);
  }
  7%,20% {
    border-color:var(--workflow-color);
    color:var(--workflow-color);
    box-shadow:0 0 0 10px #fff,0 0 0 15px rgba(var(--workflow-rgb),.15),0 14px 34px rgba(var(--workflow-rgb),.22);
  }
}

@keyframes workflowNodeRipple {
  0%,3%,27%,100% { opacity:0; transform:scale(.72); }
  8% { opacity:.65; transform:scale(.9); }
  22% { opacity:0; transform:scale(1.35); }
}

@keyframes workflowStepFocus {
  0%,27%,100% { opacity:0; transform:scale(.96); }
  7%,20% { opacity:1; transform:scale(1); }
}

.workflow-grid { position: relative; gap: 34px; margin-top: 70px; }
.workflow-signal { position:absolute; top:47px; left:calc(16.6667% + 24.6667px); z-index:2; width:10px; height:10px; transform:translate(-50%,-50%) scale(.65); border:2px solid #fff; border-radius:50%; background:#1f5eff; box-shadow:0 0 0 5px rgba(31,94,255,.12),0 5px 18px rgba(31,94,255,.32); opacity:0; pointer-events:none; }
.workflow-grid.is-workflow-active .workflow-signal { animation:workflowSignalTravel 7.2s cubic-bezier(.4,0,.2,1) infinite; }

.workflow-step {
  --workflow-color:#1f5eff;
  --workflow-rgb:31,94,255;
  --workflow-delay:0s;
  position: relative;
  text-align: center;
  padding: 16px 14px;
  border-radius: 24px;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), background-color 400ms ease, box-shadow 400ms ease;
  cursor: default;
}
.workflow-step:nth-child(2) { --workflow-color:#6676dc; --workflow-rgb:102,118,220; --workflow-delay:2.4s; }
.workflow-step:nth-child(3) { --workflow-color:#15947d; --workflow-rgb:21,148,125; --workflow-delay:4.8s; }
.workflow-step:not(:nth-child(3))::after { position:absolute; top:47px; left:calc(50% + 31px); z-index:0; width:calc(100% + 34px - 62px); height:2px; border-radius:999px; background:linear-gradient(90deg,#1f5eff,#6676dc) 0 0 / 0 100% no-repeat,#e2e4e9; content:""; pointer-events:none; }
.workflow-step:nth-child(2)::after { background:linear-gradient(90deg,#6676dc,#15947d) 0 0 / 0 100% no-repeat,#e2e4e9; }
.workflow-grid.is-workflow-active .workflow-step:nth-child(1)::after { animation:workflowConnectorFirst 7.2s cubic-bezier(.4,0,.2,1) infinite; }
.workflow-grid.is-workflow-active .workflow-step:nth-child(2)::after { animation:workflowConnectorSecond 7.2s cubic-bezier(.4,0,.2,1) infinite; }
.workflow-step::before { position:absolute; inset:0; z-index:0; transform:scale(.96); border:1px solid rgba(var(--workflow-rgb),.12); border-radius:24px; background:radial-gradient(circle at 50% 18%,rgba(var(--workflow-rgb),.095),rgba(255,255,255,.72) 62%); box-shadow:0 20px 52px rgba(var(--workflow-rgb),.08); content:""; opacity:0; pointer-events:none; }
.workflow-grid.is-workflow-active .workflow-step::before { animation:workflowStepFocus 7.2s ease-in-out var(--workflow-delay) infinite both; }

.workflow-step:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 45px rgba(25, 42, 76, 0.08);
}
.workflow-grid.is-workflow-active .workflow-step:hover::before { animation:none; opacity:1; transform:scale(1); }

.step-number {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid #d3d3d8;
  border-radius: 50%;
  background: #fff;
  color: #1d1e22;
  font-weight: 550;
  box-shadow: 0 0 0 10px #fff;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease, box-shadow 400ms ease, color 400ms ease;
}
.step-number::after { position:absolute; inset:-12px; z-index:-1; border:1px solid rgba(var(--workflow-rgb),.55); border-radius:50%; content:""; opacity:0; }
.workflow-grid.is-workflow-active .step-number { animation:stepPulseBeacon 7.2s ease-in-out var(--workflow-delay) infinite both; }
.workflow-grid.is-workflow-active .step-number::after { animation:workflowNodeRipple 7.2s ease-out var(--workflow-delay) infinite both; }

.workflow-step:hover .step-number {
  transform: scale(1.12);
  border-color:var(--workflow-color);
  color:var(--workflow-color);
  box-shadow:0 0 0 10px #fff,0 0 0 18px rgba(var(--workflow-rgb),.16),0 14px 32px rgba(var(--workflow-rgb),.25);
  animation: none;
}

.workflow-step h3 {
  position:relative;
  z-index:1;
  font-size: 20px;
  font-weight: 550;
  transition: color 300ms ease;
}

.workflow-step:hover h3 {
  color: var(--accent-primary);
}

.workflow-step p { position:relative; z-index:1; font-size:14px; line-height:1.7; }

.demo-card,.comparison-table-wrapper,.download-card,.support-card,.document,.auth-layout,.pricing-card,.faq-item { border-color: #e1e1e4; border-radius: 28px; box-shadow: none; }
.demo-card { padding: 38px; }
.demo-card.terminal { border-color: #191a1e; background: #101113; box-shadow: 0 34px 90px rgba(11,12,14,.17); }
.demo-box { border-radius: 18px; }
.comparison-table-wrapper { overflow: hidden; }
.download-grid { gap: 20px; }
.download-card { min-height: 260px; padding: 30px; transition: transform 420ms cubic-bezier(.2,.8,.2,1),box-shadow 350ms ease; }
.download-card:hover { transform: translateY(-7px); box-shadow: 0 24px 65px rgba(20,21,26,.09); }
.download-card .browser-logo { width: 50px; height: 50px; margin-bottom: 30px; border-radius: 50%; }
.download-card .browser-logo { background: transparent; box-shadow: none; }
.download-card .browser-logo img { width: 48px; height: 48px; filter: drop-shadow(0 8px 13px rgba(23,24,29,.12)); }
.download-card .browser-logo-stack { display: flex; width: 116px; justify-content: flex-start; border-radius: 0; }
.download-card .browser-logo-stack img { width: 46px; height: 46px; flex: 0 0 auto; border: 3px solid #fff; border-radius: 50%; background: #fff; }
.download-card .browser-logo-stack img + img { margin-left: -12px; }
.download-card h3 { font-size: 19px; font-weight: 550; }

.cta-panel { border-radius: 36px; background: #101113; padding: 78px 72px; }
.cta-panel::after { top: -210px; right: -100px; width: 520px; height: 520px; border: 0; background: radial-gradient(circle,rgba(82,116,255,.35),rgba(69,210,184,.13) 43%,transparent 70%); box-shadow: none; filter: blur(8px); }
.cta-copy h2 { font-size: clamp(40px,4.5vw,62px); font-weight: 450; }
.cta-panel .btn-primary { background: #fff; color: #18191c; }

.page-hero { position: relative; overflow: hidden; padding: 116px 0 92px; }
.page-hero::before { position: absolute; top: 10px; left: 50%; z-index: -1; width: 900px; height: 430px; transform: translateX(-50%); background-image: radial-gradient(circle,rgba(74,99,219,.24) 0 1px,transparent 1.5px); background-size: 22px 22px; content: ""; opacity: .28; mask-image: radial-gradient(ellipse,#000,transparent 68%); animation: page-particles 18s linear infinite; }
.page-hero h1 { max-width: 960px; margin-bottom: 24px; font-size: clamp(52px,6vw,76px); font-weight: 450; letter-spacing: -.052em; line-height: 1.07; text-wrap: balance; }
.page-hero p { max-width: 740px; color: #60646b; font-size: 18px; line-height: 1.65; text-wrap: balance; }
.page-meta { color: #7a7d84; font-weight: 520; }
.doc-layout { grid-template-columns: 230px minmax(0,1fr); gap: 64px; padding-bottom: 130px; }
.doc-nav a { border-radius: 999px; padding: 8px 13px; font-weight: 520; }
.document { padding: 58px 62px; }
.document h2 { font-size: 30px; font-weight: 520; }
.document h3 { font-size: 18px; font-weight: 550; }
.callout,.code-panel { border-radius: 20px; }
.customer-docs .document-section > p { max-width:760px; }
.docs-kicker { display:block; margin-bottom:9px; color:#777b83; font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.docs-steps { display:grid; gap:12px; margin-top:22px; padding-left:0; counter-reset:docs-step; list-style:none; }
.docs-steps li { position:relative; min-height:48px; border:1px solid #e2e2e5; border-radius:16px; background:#fafafa; padding:14px 18px 14px 56px; color:#62666d; font-size:14px; line-height:1.65; counter-increment:docs-step; }
.docs-steps li::before { position:absolute; top:14px; left:16px; display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:#17181b; color:#fff; content:counter(docs-step,decimal-leading-zero); font-size:9px; font-weight:650; }
.docs-steps strong { color:#23252a; }
.docs-browser-grid,.docs-status-grid,.docs-mode-grid { display:grid; gap:12px; margin-top:24px; }
.docs-browser-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.docs-browser-grid > div,.docs-mode-grid > div { border:1px solid #e1e2e5; border-radius:18px; background:#fff; padding:20px; }
.docs-browser-grid strong,.docs-mode-grid strong { display:block; margin-bottom:8px; color:#222329; font-size:14px; }
.docs-browser-grid p,.docs-mode-grid p { color:#70747b; font-size:12.5px; line-height:1.6; }
.docs-status-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.docs-status-grid > div { position:relative; overflow:hidden; border:1px solid #e1e2e5; border-radius:18px; background:#fafafa; padding:20px; }
.docs-status-grid > div::before { position:absolute; inset:0 auto 0 0; width:3px; background:#8b9099; content:""; }
.docs-status-grid .is-healthy::before { background:#20a38a; }
.docs-status-grid .is-degraded::before { background:#d89b2b; }
.docs-status-grid .is-attention::before { background:#d05f68; }
.docs-status-grid span,.docs-mode-grid span { display:inline-flex; width:fit-content; margin-bottom:11px; border-radius:999px; background:#f0f1f3; color:#6d7178; padding:5px 8px; font-size:9px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; }
.docs-status-grid strong { display:block; margin-bottom:7px; color:#23252a; font-size:13.5px; line-height:1.4; }
.docs-status-grid p { color:#767980; font-size:12px; line-height:1.55; }
.docs-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.docs-mode-grid > div:first-child { border-color:#c7ddd8; background:#f3faf8; }
.docs-note { margin-top:22px; border-left:2px solid #47ac98; border-radius:0 16px 16px 0; background:#f0f8f6; padding:18px 20px; }
.docs-note strong { display:block; margin-bottom:5px; color:#24695d; font-size:13px; }
.docs-note p { color:#58756f; font-size:12.5px; }
.docs-answer-list { display:grid; gap:0; margin:22px 0; border-top:1px solid #dedfe2; }
.docs-answer-list > div { display:grid; grid-template-columns:minmax(190px,.36fr) minmax(0,.64fr); gap:26px; border-bottom:1px solid #dedfe2; padding:20px 4px; }
.docs-answer-list strong { color:#25262b; font-size:13.5px; }
.docs-answer-list p { color:#6f7279; font-size:13px; line-height:1.65; }
.docs-plan-guide { margin:32px 0 48px; }
.docs-plan-guide-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.document .docs-plan-guide-heading h3,.document .docs-plan-compare-heading h3 { margin:0; color:#24252a; font-size:18px; font-weight:550; letter-spacing:-.025em; line-height:1.35; }
.docs-plan-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.docs-plan-card { position:relative; overflow:hidden; min-height:286px; border:1px solid #dedfe3; border-radius:22px; background:linear-gradient(155deg,#fff 38%,#f7f7f8); padding:27px 26px 25px; }
.docs-plan-card::before { position:absolute; top:0; right:0; left:0; height:3px; background:#b7bac1; content:""; }
.docs-plan-card.is-pro { border-color:#cbd3f0; background:linear-gradient(155deg,#f8f9ff 30%,#eef1fd); }
.docs-plan-card.is-pro::before { background:linear-gradient(90deg,#586fd0,#7767ca); }
.document .docs-plan-card h4 { max-width:260px; margin:0 0 18px; color:#24252a; font-size:14px; font-weight:620; letter-spacing:-.01em; line-height:1.45; }
.docs-plan-card p { color:#676b73; font-size:12.75px; line-height:1.72; }
.docs-plan-card code { border:1px solid rgba(87,102,164,.16); border-radius:5px; background:rgba(255,255,255,.7); color:#455186; padding:1px 4px; font-size:.88em; }
.docs-plan-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.docs-plan-benefits article { border:1px solid #e2e2e5; border-radius:18px; background:#fff; padding:22px; }
.docs-plan-benefits article:last-child { grid-column:1 / -1; }
.document .docs-plan-benefits h4 { margin:0 0 9px; color:#303136; font-size:13px; font-weight:600; line-height:1.45; }
.docs-plan-benefits p { color:#71747b; font-size:12.25px; line-height:1.68; }
.docs-plan-benefits a { color:#335cb3; font-weight:580; text-decoration:underline; text-decoration-color:rgba(51,92,179,.28); text-underline-offset:3px; }
.docs-plan-compare-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 14px; }
.docs-plan-table-wrap { margin-bottom:26px; overflow-x:auto; border:1px solid #dfe0e4; border-radius:20px; background:#fff; scrollbar-color:#b9bbc2 transparent; scrollbar-width:thin; }
.docs-plan-table-wrap:focus-visible { outline:3px solid rgba(74,99,219,.24); outline-offset:3px; }
.docs-plan-table { width:100%; min-width:690px; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.docs-plan-capability-column { width:38%; }
.docs-plan-free-column { width:25%; }
.docs-plan-pro-column { width:37%; }
.docs-plan-table th,.docs-plan-table td { border-bottom:1px solid #e7e7ea; padding:17px 18px; text-align:left; vertical-align:top; }
.docs-plan-table thead th { background:#f5f5f6; color:#72757c; font-size:10px; font-weight:680; letter-spacing:.085em; line-height:1.35; text-transform:uppercase; }
.docs-plan-table thead th:first-child { border-radius:19px 0 0; }
.docs-plan-table thead th:last-child { border-radius:0 19px 0 0; }
.docs-plan-table thead th:nth-child(3),.docs-plan-table tbody td:nth-child(3) { background:#f4f6fd; }
.docs-plan-table tbody th { background:#fff; color:#2e3035; font-size:12.5px; font-weight:600; line-height:1.5; }
.docs-plan-table tbody td { color:#5f636b; font-size:12.25px; font-weight:480; line-height:1.55; }
.docs-plan-table tbody td.is-muted-value { color:#8b8e95; }
.docs-plan-table tbody td.is-pro-value { color:#4059ad; font-weight:600; }
.docs-plan-table tbody tr:hover th,.docs-plan-table tbody tr:hover td { background:#fafafb; }
.docs-plan-table tbody tr:hover td:nth-child(3) { background:#edf0fb; }
.docs-plan-table tbody tr:last-child th,.docs-plan-table tbody tr:last-child td { border-bottom:0; }
.docs-plan-table tbody tr:last-child th { border-radius:0 0 0 19px; }
.docs-plan-table tbody tr:last-child td:last-child { border-radius:0 0 19px; }
.docs-support-panel { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:24px; border-radius:22px; background:#111214; color:#fff; padding:26px 28px; }
.docs-support-panel strong { display:block; margin-bottom:6px; font-size:14px; }
.docs-support-panel p { color:#a9adb5; font-size:12.5px; }
.docs-support-panel .btn { flex:0 0 auto; background:#fff; color:#17181b; }
.security-metric { border-radius: 20px; padding: 24px; }
.security-metric strong { font-size: 27px; font-weight: 520; }

.pricing-section { padding: 48px 0 132px; }
.pricing-grid { gap: 20px; }
.pricing-card { min-height: 600px; padding: 38px; transition: transform 450ms cubic-bezier(.2,.8,.2,1),box-shadow 400ms ease,border-color 400ms ease; }
.pricing-card:hover { transform: translateY(-7px); box-shadow: 0 27px 75px rgba(19,20,25,.09); }
.pricing-card.featured { transform: translateY(-12px); border-color: #bec8f4; background: linear-gradient(180deg,#f7f8ff,#fff 42%); box-shadow: 0 28px 80px rgba(61,82,181,.12); }
.pricing-card.featured:hover { transform: translateY(-18px); }
.featured-pill { top: 22px; right: 22px; font-weight: 650; }
.plan-name { font-size: 22px; font-weight: 550; }
.plan-desc { margin-bottom: 34px; font-size: 13.5px; }
.plan-price-wrapper { min-height: 76px; margin-bottom: 34px; }
.plan-price { font-size: 60px; font-weight: 450; letter-spacing: -.06em; }
.plan-feature-item { font-size: 13.5px; }
.page-hero .page-meta { gap: 9px; margin-top: 30px; }
.page-hero .page-meta span { border: 1px solid #dedee2; border-radius: 999px; background: rgba(255,255,255,.72); padding: 7px 12px; backdrop-filter: blur(8px); }
.consumer-pricing-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.consumer-pricing-grid .pricing-card { min-height: 570px; padding: 30px; }
.consumer-pricing-grid .plan-price { font-size: clamp(43px,4vw,54px); }
.consumer-pricing-grid .plan-desc { min-height: 66px; margin-bottom: 25px; }
.consumer-pricing-grid .plan-price-wrapper { min-height: 66px; margin-bottom: 24px; }
.plan-audience { display: block; margin-bottom: 15px; color: #777a82; font-size: 10px; font-weight: 650; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.plan-savings { display: inline-flex; width: fit-content; margin: -12px 0 22px; border-radius: 999px; background: #e8f7f4; color: #087f6d; padding: 6px 9px; font-size: 10px; font-weight: 650; line-height: 1.2; }
.business-pricing { margin-top: 92px; }
.business-heading { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(300px,.72fr); align-items: end; gap: 48px; margin-bottom: 30px; }
.business-heading .section-tag { justify-content: flex-start; width: auto; }
.business-heading h2 { max-width: 760px; font-size: clamp(40px,5vw,66px); font-weight: 450; letter-spacing: -.055em; line-height: 1.04; text-wrap: balance; }
.business-heading > p { max-width: 430px; color: #676a72; font-size: 15.5px; line-height: 1.7; }
.business-card { display:grid; grid-template-columns:minmax(340px,.84fr) minmax(0,1.16fr); grid-template-areas:"intro features" "volume volume"; overflow:hidden; border:1px solid #24252a; border-radius:36px; background:#111214; color:#fff; box-shadow:0 34px 95px rgba(18,19,23,.16); }
.business-card-top { display:flex; grid-area:intro; flex-direction:column; gap:30px; border-right:1px solid #303136; background:radial-gradient(circle at 12% 6%,rgba(88,107,189,.16),transparent 40%),#111214; padding:44px 42px 40px; }
.business-card-top > div:first-child { flex:1; }
.plan-audience-dark { color: #9da1aa; }
.business-card-top h3 { max-width:560px; margin-bottom:16px; font-size:clamp(30px,3.1vw,42px); font-weight:450; letter-spacing:-.045em; line-height:1.08; text-wrap:balance; }
.business-card-top > div:first-child > p { max-width:560px; color:#aeb1b8; font-size:14px; line-height:1.68; }
.business-price-block { display:grid; grid-template-columns:1fr; align-items:end; border-top:1px solid #303136; padding-top:26px; }
.business-price-label { color: #979aa3; font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.business-price-block > .business-price-label { grid-column:1 / -1; }
.business-price-block > div { display:flex; align-items:flex-end; gap:10px; margin:9px 0 0; }
.business-price-block strong { font-size:clamp(44px,4.4vw,58px); font-weight:450; letter-spacing:-.06em; line-height:.95; }
.business-price-block div span { color: #aeb1b8; font-size: 12px; line-height: 1.35; }
.business-price-block .btn { grid-column:1; width:100%; align-self:end; margin-top:20px; white-space:nowrap; }
.btn-light { border-color: #fff; background: #fff; color: #17181b; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.btn-light:hover { background: #ececef; }
.business-features { display:grid; grid-area:features; grid-template-columns:repeat(2,minmax(0,1fr)); background:#151619; }
.business-features > div { display:flex; align-items:flex-start; gap:13px; min-height:0; border-right:1px solid #303136; border-bottom:1px solid #303136; padding:31px 28px; }
.business-features > div:nth-child(2n),.business-features > div:nth-child(3n) { border-right:0; }
.business-features > div:nth-child(3) { border-right:1px solid #303136; }
.business-features > div:nth-last-child(-n+2),.business-features > div:nth-last-child(-n+3) { border-bottom:0; }
.business-features > div:nth-child(4) { border-bottom:1px solid #303136; }
.business-features .check-icon { flex:0 0 auto; margin-top:2px; color:#62d4bd; }
.business-features span { color:#a5a8b0; font-size:12.5px; line-height:1.5; }
.business-features strong { display:block; margin-bottom:5px; color:#f6f6f7; font-size:13.5px; font-weight:550; }
.volume-pricing { grid-area:volume; border-top:1px solid #303136; padding:30px 42px 38px; }
.volume-pricing-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.volume-pricing-heading h4 { margin-top: 6px; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.volume-pricing-heading > span { color: #8f929a; font-size: 11px; }
.volume-tiers { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.volume-tier { display:flex; min-height:112px; align-items:flex-start; flex-direction:column; border:1px solid #303136; border-radius:18px; background:#18191c; padding:18px 20px; }
.volume-tier.active { border-color: #5a6bb7; background: linear-gradient(145deg,#242945,#18191c 72%); }
.volume-tier > span { margin-bottom:16px; color:#a7aab2; font-size:11px; }
.volume-tier strong { margin:0 0 2px; font-size:25px; font-weight:500; letter-spacing:-.04em; line-height:1; }
.volume-tier small { color: #858890; font-size: 10px; }
.faq-grid { max-width: 900px; gap: 13px; }
.faq-item { border-radius: 22px; }
.faq-question { padding: 22px 25px; font-size: 15px; font-weight: 550; }
.faq-answer { padding: 0 52px 24px 25px; font-size: 14px; }

.modal-card { border-radius: 28px; padding: 40px; }
.portal-input,.form-input { min-height: 48px; border-radius: 14px; }
.auth-layout { overflow: hidden; }
.auth-aside { background: #111214; }
.auth-aside h1 { font-size: 39px; font-weight: 450; }
.auth-card { padding: 64px 56px; }
.support-card { min-height: 280px; padding: 32px; transition: transform 400ms cubic-bezier(.2,.8,.2,1),box-shadow 350ms ease; }
.support-card:hover { transform: translateY(-7px); box-shadow: 0 24px 65px rgba(20,21,26,.09); }
.support-card h2 { font-size: 21px; font-weight: 550; }
.not-found-code { background-image: linear-gradient(120deg,#5378ff,#56cfb9 52%,#ec7da6); font-weight: 450; }
.not-found h1 { font-size: 44px; font-weight: 450; }

/* Blog and long-form research */
.blog-hero { position: relative; overflow: hidden; padding: 126px 0 94px; text-align: center; }
.blog-hero::before { position: absolute; top: -80px; left: 50%; z-index: -1; width: 920px; height: 460px; transform: translateX(-50%); background: radial-gradient(circle at 36% 42%,rgba(83,113,255,.16),transparent 28%),radial-gradient(circle at 64% 48%,rgba(69,207,181,.13),transparent 27%); content: ""; filter: blur(18px); }
.blog-hero h1 { max-width: 920px; margin: 0 auto 24px; font-size: clamp(54px,6.5vw,82px); font-weight: 450; letter-spacing: -.055em; line-height: 1.04; text-wrap: balance; }
.blog-hero p { max-width: 720px; margin: 0 auto; color: #63676e; font-size: 18px; line-height: 1.65; text-wrap: balance; }
.blog-featured-section { padding: 8px 0 130px; }
.blog-featured-card { display: grid; min-height: 600px; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); overflow: hidden; border-radius: 38px; background: #111214; color: #fff; box-shadow: 0 34px 95px rgba(18,19,23,.18); }
.blog-featured-visual { position: relative; min-height: 600px; overflow: hidden; border-right: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 50% 50%,rgba(80,111,255,.22),transparent 24%),radial-gradient(circle at 58% 44%,rgba(73,210,184,.16),transparent 40%),#0b0c0f; isolation: isolate; }
.blog-featured-visual::before { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle,rgba(255,255,255,.24) 0 1px,transparent 1.2px); background-size: 34px 34px; content: ""; opacity: .18; mask-image: radial-gradient(circle,#000,transparent 72%); }
.blog-signal-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(141,158,255,.27); border-radius: 50%; transform: translate(-50%,-50%); transform-origin:center; will-change:transform; }
.blog-signal-orbit::before,.blog-signal-orbit::after { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #6d8aff; box-shadow: 0 0 24px rgba(109,138,255,.9); content: ""; }
.blog-signal-orbit::before { top: 15%; left: 11%; }
.blog-signal-orbit::after { right: 7%; bottom: 25%; background: #56d2ba; box-shadow: 0 0 24px rgba(86,210,186,.9); }
.orbit-one { width: 370px; height: 370px; transform: translate(-50%,-50%) rotate(12deg); animation:blog-orbit-one 42s linear infinite; }
.orbit-two { width: 500px; height: 500px; transform: translate(-50%,-50%) rotate(-25deg); opacity: .58; animation:blog-orbit-two 64s linear infinite; }
.blog-signal-core { position: absolute; top: 50%; left: 50%; display: flex; width: 250px; height: 250px; transform: translate(-50%,-50%); align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(17,19,26,.65); box-shadow: 0 0 80px rgba(91,119,255,.2),inset 0 0 55px rgba(80,210,185,.08); backdrop-filter: blur(18px); }
.blog-signal-core span { width: 5px; height: 62px; border-radius: 999px; background: linear-gradient(180deg,#728cff,#5bd7bf 58%,#ee84aa); box-shadow: 0 0 15px rgba(105,137,255,.55); }
.blog-signal-core span:nth-child(2),.blog-signal-core span:nth-child(6) { height: 94px; }
.blog-signal-core span:nth-child(3),.blog-signal-core span:nth-child(5) { height: 126px; }
.blog-signal-core span:nth-child(4) { height: 156px; }
.blog-featured-copy { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: 68px 62px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #8c9099; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.article-meta span + span::before,.article-meta time::before { margin-right: 18px; color: #565960; content: "·"; }
.blog-featured-copy h2 { margin: 28px 0 22px; font-size: clamp(38px,4vw,56px); font-weight: 450; letter-spacing: -.05em; line-height: 1.05; text-wrap: balance; }
.blog-featured-copy > p { margin-bottom: 34px; color: #a9acb4; font-size: 15px; line-height: 1.75; }
.blog-featured-copy .text-link { margin-top: auto; color: #fff; font-weight: 550; }
.blog-topics-section { padding: 30px 0 140px; }
.blog-section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.62fr); align-items: end; gap: 70px; margin-bottom: 46px; }
.blog-section-heading .section-tag { justify-content: flex-start; width: auto; }
.blog-section-heading h2 { max-width: 730px; font-size: clamp(40px,5vw,64px); font-weight: 450; letter-spacing: -.052em; line-height: 1.06; }
.blog-section-heading > p { color: #686b72; font-size: 15px; line-height: 1.72; }
.blog-topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.blog-topic-card { display: flex; min-height: 330px; flex-direction: column; border: 1px solid #dedee2; border-radius: 28px; background: #fff; padding: 32px; transition: transform 400ms cubic-bezier(.2,.8,.2,1),box-shadow 350ms ease,border-color 350ms ease; }
.blog-topic-card:hover { transform: translateY(-7px); border-color: #c8c9ce; box-shadow: 0 26px 65px rgba(22,23,28,.09); }
.blog-topic-card > span { margin-bottom: auto; color: #8a8d94; font-size: 11px; }
.blog-topic-card h3 { margin: 40px 0 12px; font-size: 27px; font-weight: 500; letter-spacing: -.035em; }
.blog-topic-card p { color: #6b6e75; font-size: 13.5px; line-height: 1.65; }
.blog-topic-card.dark { border-color: #111214; background: #111214; color: #fff; }
.blog-topic-card.dark > span { color: #6ed4c0; }
.blog-topic-card.dark p { color: #a4a7af; }
.blog-use-case-section { padding:0 0 150px; }
.blog-use-case-card { display:grid; min-height:480px; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); overflow:hidden; border:1px solid #dedfe3; border-radius:36px; background:#f7f7f8; transition:transform 450ms cubic-bezier(.2,.8,.2,1),box-shadow 380ms ease,border-color 380ms ease; }
.blog-use-case-card:hover { transform:translateY(-7px); border-color:#cacbd0; box-shadow:0 30px 78px rgba(20,21,26,.1); }
.blog-use-case-copy { display:flex; align-items:flex-start; flex-direction:column; justify-content:center; padding:58px 62px; }
.blog-use-case-copy h2 { max-width:620px; margin:28px 0 20px; font-size:clamp(40px,4.6vw,61px); font-weight:450; letter-spacing:-.052em; line-height:1.05; text-wrap:balance; }
.blog-use-case-copy > p { max-width:650px; margin-bottom:34px; color:#696c73; font-size:14.5px; line-height:1.74; }
.blog-use-case-copy .text-link { color:#27282d; font-weight:560; }
.blog-audience-map { position:relative; display:flex; min-height:480px; align-items:center; flex-direction:column; justify-content:center; gap:18px; overflow:hidden; border-left:1px solid rgba(255,255,255,.1); background:radial-gradient(circle at 50% 44%,rgba(81,113,255,.26),transparent 24%),radial-gradient(circle at 52% 58%,rgba(70,208,181,.16),transparent 42%),#111214; isolation:isolate; }
.blog-audience-map::before { position:absolute; inset:0; z-index:-1; background-image:radial-gradient(circle,rgba(255,255,255,.25) 0 1px,transparent 1.2px); background-size:32px 32px; content:""; opacity:.16; mask-image:radial-gradient(circle,#000,transparent 75%); }
.blog-audience-map span { position:relative; z-index:2; min-width:250px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(26,28,34,.72); color:#e7e8eb; box-shadow:0 18px 42px rgba(0,0,0,.2); padding:14px 20px; font-size:12px; font-weight:520; text-align:center; backdrop-filter:blur(14px); }
.blog-audience-map span:nth-child(1) { transform:translateX(-42px); }
.blog-audience-map span:nth-child(3) { transform:translateX(42px); }
.blog-audience-map i { position:absolute; width:330px; height:330px; border:1px solid rgba(119,141,255,.2); border-radius:50%; box-shadow:0 0 0 54px rgba(111,134,255,.04),0 0 0 108px rgba(84,210,184,.025); }

.article-hero { position: relative; overflow: hidden; padding: 108px 0 96px; }
.article-hero::before { position: absolute; top: -260px; left: 50%; z-index: -1; width: 1000px; height: 650px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle,rgba(88,118,255,.18),rgba(74,209,183,.08) 34%,transparent 70%); content: ""; filter: blur(25px); }
.article-hero-inner { max-width: 1040px; }
.article-back { display: inline-flex; margin-bottom: 42px; border-bottom: 1px solid #a8abb2; color: #666a71; font-size: 12px; font-weight: 550; }
.article-hero .article-meta { margin-bottom: 25px; }
.article-hero h1 { max-width: 1030px; margin-bottom: 30px; font-size: clamp(55px,7vw,88px); font-weight: 450; letter-spacing: -.058em; line-height: 1.02; text-wrap: balance; }
.article-deck { max-width: 810px; color: #5f636b; font-size: 20px; line-height: 1.65; text-wrap: balance; }
.article-shell { display: grid; grid-template-columns: 220px minmax(0,760px); justify-content: center; gap: 88px; padding: 32px 0 150px; }
.article-toc { position: sticky; top: 110px; display: flex; height: fit-content; flex-direction: column; gap: 5px; border-left: 1px solid #d7d8dc; padding-left: 18px; }
.article-toc > span { margin-bottom: 10px; color: #92959c; font-size: 9px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.article-toc a { border-radius: 9px; color: #73767d; padding: 6px 9px; font-size: 11.5px; line-height: 1.35; transition: background 180ms ease,color 180ms ease; }
.article-toc a:hover { background: #eeeeef; color: #202125; }
.article-body { min-width: 0; }
.article-body > p,.article-section > p { color: #555961; font-size: 17px; line-height: 1.9; }
.article-lead { margin-bottom: 76px; color: #222429 !important; font-size: 24px !important; font-weight: 450; letter-spacing: -.02em; line-height: 1.58 !important; }
.article-section { scroll-margin-top: 110px; padding: 75px 0; border-top: 1px solid #d9dadd; }
.article-section-number { display: block; margin-bottom: 20px; color: #8b8e95; font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.article-section h2 { max-width: 720px; margin-bottom: 28px; font-size: clamp(38px,4.2vw,54px); font-weight: 450; letter-spacing: -.05em; line-height: 1.08; text-wrap: balance; }
.article-section > p + p { margin-top: 21px; }
.article-callout { margin: 36px 0 2px; border-left: 2px solid #4abda7; background: #eef8f5; padding: 22px 26px; }
.article-callout strong { display: block; margin-bottom: 5px; color: #1c6a5d; font-size: 13px; }
.article-callout p { color: #54716b; font-size: 14px; line-height: 1.7; }
.audio-graph { display: grid; grid-template-columns: repeat(7,auto); align-items: center; gap: 9px; margin: 40px 0; border-radius: 28px; background: #111214; color: #fff; padding: 28px; }
.audio-graph-node { display: flex; min-width: 0; min-height: 128px; align-items: flex-start; flex-direction: column; justify-content: center; border: 1px solid #303136; border-radius: 18px; background: #191a1e; padding: 16px; }
.audio-graph-node.active { border-color: #5667b5; background: linear-gradient(145deg,#252a48,#191a1e); }
.audio-graph-node span { margin-bottom: auto; color: #7ad7c3; font-size: 8px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.audio-graph-node strong { font-size: 13px; font-weight: 550; }
.audio-graph-node small { color: #8f929a; font-size: 9px; }
.audio-graph-arrow { color: #656871; font-size: 9px; text-transform: uppercase; }
.signal-combination { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 36px 0; border: 1px solid #dedee2; border-radius: 24px; background: #fff; padding: 24px; }
.signal-combination span { border-radius: 999px; background: #f0f0f2; color: #63666d; padding: 8px 12px; font-size: 10px; }
.signal-combination strong { width: 100%; margin-top: 12px; color: #202125; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.article-section blockquote { margin: 38px 0 0; border-radius: 28px; background: #111214; color: #fff; padding: 36px; }
.article-section blockquote p { font-size: 22px; font-weight: 450; letter-spacing: -.025em; line-height: 1.55; }
.protection-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0; }
.protection-comparison > div { display: flex; min-width: 0; flex-direction: column; border: 1px solid #dedee2; border-radius: 26px; background: #fff; padding: 28px; }
.protection-comparison > div > span { color: #878a91; font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.protection-comparison strong { margin: 20px 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.protection-comparison p { min-height: 68px; margin-bottom: 24px; color: #73767d; font-size: 12px; line-height: 1.6; }
.protection-comparison code { display: block; overflow: hidden; margin-top: 7px; border-color: #dfdfe3; background: #f1f1f3; color: #656871; padding: 8px 10px; text-overflow: ellipsis; white-space: nowrap; }
.protection-comparison .protected { border-color: #27282d; background: #111214; color: #fff; }
.protection-comparison .protected > span { color: #6ed4c0; }
.protection-comparison .protected p { color: #a4a7af; }
.protection-comparison .protected code { border-color: #34353b; background: #1d1e22; color: #9cdaca; }
.article-summary { margin-top: 42px; border-radius: 30px; background: #111214; color: #fff; padding: 42px; }
.article-summary > span { color: #6ed4c0; font-size: 9px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.article-summary h3 { max-width: 650px; margin: 18px 0 28px; font-size: clamp(28px,3.4vw,40px); font-weight: 450; letter-spacing: -.04em; line-height: 1.18; }
.article-sources { padding-top: 72px; border-top: 1px solid #d9dadd; }
.article-sources h2 { margin-bottom: 26px; font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.article-hero-audience::before { background:radial-gradient(circle,rgba(72,204,179,.16),rgba(83,113,255,.1) 36%,transparent 70%); }
.article-body a { color:#2e59a7; text-decoration:underline; text-decoration-color:rgba(46,89,167,.35); text-underline-offset:3px; }
.article-use-list { display:grid; gap:0; margin:38px 0 0; border-top:1px solid #d9dadd; list-style:none; }
.article-use-list li { display:grid; grid-template-columns:minmax(190px,.36fr) minmax(0,.64fr); gap:30px; border-bottom:1px solid #d9dadd; padding:23px 4px; }
.article-use-list strong { color:#292a2f; font-size:14px; font-weight:560; }
.article-use-list span { color:#696d74; font-size:13.5px; line-height:1.68; }
.article-boundary { margin:42px 0; border-radius:30px; background:#111214; color:#fff; padding:38px; }
.article-boundary > span { color:#70d5c0; font-size:9px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.article-boundary h3 { max-width:600px; margin:15px 0 14px; font-size:31px; font-weight:470; letter-spacing:-.04em; line-height:1.16; }
.article-boundary p { color:#adb0b8; font-size:14px; line-height:1.78; }
.use-case-profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:40px 0; }
.use-case-profile-grid > div,.use-case-plan-grid > div { border:1px solid #dedfe3; border-radius:24px; background:#fff; padding:24px; }
.use-case-profile-grid span,.use-case-plan-grid span { display:block; color:#868990; font-size:9px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.use-case-profile-grid strong,.use-case-plan-grid strong { display:block; margin:18px 0 10px; color:#292a2f; font-size:18px; font-weight:520; letter-spacing:-.025em; line-height:1.3; }
.use-case-profile-grid p,.use-case-plan-grid p { color:#73767d; font-size:12px; line-height:1.65; }
.use-case-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:40px 0 0; }
.use-case-plan-grid > div { min-height:225px; }
.use-case-plan-grid .featured { border-color:#202126; background:#111214; }
.use-case-plan-grid .featured span { color:#70d5c0; }
.use-case-plan-grid .featured strong { color:#fff; }
.use-case-plan-grid .featured p { color:#aaadb5; }
.article-faq > div { border-top:1px solid #d9dadd; padding:28px 2px; }
.article-faq > div:last-child { border-bottom:1px solid #d9dadd; }
.article-faq h3 { margin-bottom:10px; color:#292a2f; font-size:20px; font-weight:520; letter-spacing:-.025em; }
.article-faq p { color:#62666d; font-size:15px; line-height:1.75; }
.faq-answer a { color:#2e59a7; text-decoration:underline; text-decoration-color:rgba(46,89,167,.35); text-underline-offset:3px; }
.article-sources ul { display: flex; flex-direction: column; list-style: none; }
.article-sources li { border-top: 1px solid #e0e0e3; padding: 19px 0; }
.article-sources a { display: block; margin-bottom: 4px; color: #202125; font-size: 13.5px; font-weight: 550; }
.article-sources a:hover { text-decoration: underline; }
.article-sources span { display: block; color: #777a81; font-size: 11.5px; line-height: 1.55; }
.article-next { background: #f0f0f2; padding: 95px 0; }
.article-next .container > span { display: block; margin-bottom: 18px; color: #878a91; font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.article-next .container > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; }
.article-next h2 { max-width: 800px; font-size: clamp(38px,5vw,62px); font-weight: 450; letter-spacing: -.05em; line-height: 1.08; }

.footer { border-top-color: #e3e3e5; background: #f5f5f6; padding-top: 76px; }
.footer-col h4 { font-weight: 600; }

[data-reveal].reveal-ready { opacity: 0; transform: translateY(42px); filter: blur(8px); transition: opacity 900ms cubic-bezier(.2,.8,.2,1),transform 900ms cubic-bezier(.2,.8,.2,1),filter 900ms ease; }
[data-reveal].reveal-ready.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-group > .reveal-ready:nth-child(2) { transition-delay: 80ms; }
.reveal-group > .reveal-ready:nth-child(3) { transition-delay: 160ms; }
.reveal-group > .reveal-ready:nth-child(4) { transition-delay: 240ms; }
.reveal-group > .reveal-ready:nth-child(5) { transition-delay: 320ms; }

@keyframes type-cursor-blink { 0%,46%{opacity:1} 47%,100%{opacity:0} }
@keyframes signal-breathe { 0%,100%{transform:scaleY(.72);opacity:.66} 50%{transform:scaleY(1.07);opacity:1} }
@keyframes ambient-drift { from{transform:translate3d(-2%,-1%,0) scale(.98)} to{transform:translate3d(2%,2%,0) scale(1.05)} }
@keyframes page-particles { from{background-position:0 0} to{background-position:88px 44px} }
@keyframes blog-orbit-one { from{transform:translate(-50%,-50%) rotate(12deg)} to{transform:translate(-50%,-50%) rotate(372deg)} }
@keyframes blog-orbit-two { from{transform:translate(-50%,-50%) rotate(-25deg)} to{transform:translate(-50%,-50%) rotate(-385deg)} }

@media (max-width:1060px) {
  .container { width:min(100% - 48px,1100px); }
  .hero-cinematic { min-height:660px; }
  .experience-product { width:min(590px,calc(100% - 120px)); }
  .experience-product .floating-card { right:-35px; }
  .pricing-card { padding:30px; }
  .consumer-pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .consumer-pricing-grid .pricing-card { min-height:540px; }
  .business-card { grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); }
  .business-card-top { gap:26px; padding:38px 34px 34px; }
  .business-features > div { padding:26px 22px; }
  .volume-pricing { padding:30px 34px 36px; }
  .blog-featured-copy { padding:52px 44px; }
  .article-shell { grid-template-columns:190px minmax(0,700px); gap:52px; }
}

@media (max-width:860px) {
  .container,.container-narrow,.portal-shell { width:min(100% - 36px,720px); }
  .mobile-nav-panel { border-top-color:#e5e5e7; background:rgba(255,255,255,.97); }
  .mobile-nav-panel a { border-radius:999px; font-weight:550; }
  .mobile-nav-panel .mobile-nav-cta { background:#18191c; }
  .hero-cinematic { min-height:620px; padding:72px 0 90px; }
  .hero-title { font-size:clamp(52px,9vw,70px); }
  .experience-panel { min-height:740px; border-radius:32px; }
  .signal-sculpture { top:90px; width:80%; }
  .experience-product { width:min(570px,calc(100% - 72px)); }
  .experience-product .floating-card { right:-20px; bottom:-32px; }
  .browser-compatibility-bar { gap:14px; }
  .browser-item { width:110px; height:110px; }
  .anti-tracking-layout { grid-template-columns:1fr; gap:54px; }
  .anti-tracking-copy { position:static; }
  .privacy-layers-heading { grid-template-columns:1fr; gap:20px; }
  .privacy-layers-heading > p { max-width:640px; }
  .privacy-layer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .privacy-layer-card.is-protected { grid-column:1 / -1; }
  .audience-heading { grid-template-columns:1fr; gap:20px; }
  .audience-heading > p { max-width:640px; }
  .audience-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .audience-card:last-child { grid-column:1 / -1; }
  .statement-section { padding-bottom:120px; }
  .doc-layout { grid-template-columns:1fr; gap:28px; }
  .doc-nav { position:static; flex-flow:row wrap; border-bottom:1px solid #dfe0e4; padding-bottom:16px; }
  .doc-nav-label { width:100%; }
  .docs-browser-grid,.docs-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .docs-browser-grid > div:last-child,.docs-status-grid > div:last-child { grid-column:1 / -1; }
  .docs-plan-card { min-height:0; }
  .docs-plan-benefits { grid-template-columns:1fr; }
  .docs-plan-benefits article:last-child { grid-column:auto; }
  .consumer-pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .consumer-pricing-grid .pricing-card:last-child { grid-column:auto; width:auto; }
  .business-heading { grid-template-columns:1fr; gap:22px; }
  .business-heading > p { max-width:620px; }
  .business-card { grid-template-columns:1fr; grid-template-areas:"intro" "features" "volume"; }
  .business-card-top { gap:30px; border-right:0; border-bottom:1px solid #303136; }
  .business-price-block { padding-top:28px; }
  .business-features { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .business-features > div:nth-child(3n) { border-right:1px solid #303136; }
  .business-features > div:nth-child(2n) { border-right:0; }
  .business-features > div:nth-last-child(-n+3) { border-bottom:1px solid #303136; }
  .business-features > div:nth-last-child(-n+2) { border-bottom:0; }
  .volume-tiers { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .blog-featured-card { grid-template-columns:1fr; }
  .blog-featured-visual { min-height:450px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .blog-featured-copy { min-height:480px; }
  .blog-section-heading { grid-template-columns:1fr; gap:22px; }
  .blog-topic-grid { grid-template-columns:1fr 1fr; }
  .blog-topic-card:last-child { grid-column:span 2; }
  .blog-use-case-card { grid-template-columns:1fr; }
  .blog-audience-map { min-height:390px; border-top:1px solid rgba(255,255,255,.1); border-left:0; }
  .article-shell { grid-template-columns:1fr; gap:54px; }
  .article-toc { position:static; flex-flow:row wrap; border-bottom:1px solid #d7d8dc; border-left:0; padding:0 0 18px; }
  .article-toc > span { width:100%; }
  .article-toc a { border:1px solid #dedee2; border-radius:999px; background:#fff; padding:7px 11px; }
}

@media (max-width:620px) {
  .container,.container-narrow,.portal-shell { width:calc(100% - 28px); }
  .nav-content { min-height:66px; }
  .language-picker summary { min-width:56px; padding:7px 10px; }
  .language-menu { position:fixed; top:74px; right:14px; width:190px; }
  .language-suggestion { right:14px; bottom:14px; width:calc(100% - 28px); align-items:stretch; flex-direction:column; gap:16px; border-radius:22px; }
  .language-suggestion-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hero-cinematic { min-height:630px; padding:64px 0 84px; }
  .hero-title { margin-bottom:24px; font-size:clamp(45px,13vw,58px); line-height:1.04; }
  .hero-subtitle { font-size:16px; }
  .hero-note { gap:8px; }
  .hero-note span + span::before { display:none; }
  .experience-section { padding-bottom:70px; }
  .experience-panel { min-height:650px; border-radius:24px; padding:24px 18px 34px; }
  .experience-topline { font-size:9px; }
  .signal-sculpture { top:82px; width:86%; height:180px; gap:6px; }
  .signal-sculpture span { width:3px; transform:scaleY(.72); }
  .experience-product { right:50%; bottom:78px; width:calc(100% - 34px); transform:translateX(50%); }
  .experience-product .product-content { padding:18px; }
  .experience-product .product-status { margin-bottom:18px; }
  .experience-product .identity-card-head { align-items:flex-start; flex-direction:column; }
  .experience-product .product-metrics { grid-template-columns:repeat(3,1fr); }
  .experience-product .metric-tile { padding:9px 7px; }
  .experience-product .metric-tile span { letter-spacing:.03em; }
  .experience-product .metric-tile strong { font-size:10px; }
  .experience-product .floating-card { position:absolute; right:8px; bottom:-56px; width:196px; }
  .experience-caption { bottom:18px; font-size:9px; }
  .trust-strip { padding:48px 0 90px; }
  .browser-compatibility-bar { margin:0 -28px; overflow-x:auto; justify-content:flex-start; padding:12px 28px 38px; scrollbar-width:none; }
  .browser-compatibility-bar::-webkit-scrollbar { display:none; }
  .browser-item,.browser-item:nth-child(1),.browser-item:nth-child(2),.browser-item:nth-child(3),.browser-item:nth-child(4),.browser-item:nth-child(5),.browser-item:nth-child(6) { --arc-offset:0px; width:104px; height:104px; transform:translateY(var(--dock-lift)) scale(var(--dock-scale)); }
  .anti-tracking-section { padding:20px 0 100px; }
  .anti-tracking-copy h2 { font-size:42px; }
  .tracking-step { grid-template-columns:42px minmax(0,1fr); gap:12px; padding:28px 0; }
  .tracking-step.protected { padding:28px 22px; }
  .privacy-layers-section { padding-bottom:100px; }
  .privacy-layers-heading { margin-bottom:30px; }
  .privacy-layers-heading h2 { font-size:40px; }
  .privacy-layer-grid { grid-template-columns:1fr; }
  .privacy-layer-card,.privacy-layer-card.is-protected { min-height:auto; grid-column:auto; padding:26px; }
  .privacy-layer-topline { margin-bottom:30px; }
  .privacy-layer-card > p { margin-bottom:32px; }
  .privacy-layers-summary { display:block; text-align:left; }
  .audience-section { padding:100px 0; }
  .audience-heading { margin-bottom:30px; }
  .audience-heading h2 { font-size:40px; }
  .audience-grid { grid-template-columns:1fr; }
  .audience-card,.audience-card:last-child { min-height:auto; grid-column:auto; padding:27px; }
  .audience-icon { margin:30px 0 24px; }
  .audience-card p { margin-bottom:34px; }
  .audience-footer { align-items:flex-start; flex-direction:column; gap:18px; }
  .statement-section { padding:25px 0 100px; }
  .container-statement h2 { font-size:42px; }
  .section,.features-section,.comparison-section,.faq-section { padding:96px 0; }
  .section-heading { font-size:40px; }
  .section-subheading { margin-bottom:42px; font-size:16px; }
  .workflow-step::after,.workflow-signal { display:none; }
  .feature-card { min-height:auto; border-radius:24px; padding:28px; }
  .feature-icon-wrapper { margin-bottom:28px; }
  .cta-panel { border-radius:26px; padding:48px 28px; }
  .page-hero { padding:82px 0 66px; }
  .page-hero h1 { font-size:48px; }
  .page-hero p { font-size:16px; }
  .document { border:1px solid #e1e1e4; border-radius:24px; margin:0; padding:35px 24px; }
  .docs-browser-grid,.docs-status-grid,.docs-mode-grid { grid-template-columns:1fr; }
  .docs-browser-grid > div:last-child,.docs-status-grid > div:last-child { grid-column:auto; }
  .docs-answer-list > div { grid-template-columns:1fr; gap:7px; }
  .docs-plan-guide { margin:26px 0 40px; }
  .docs-plan-cards { grid-template-columns:1fr; }
  .docs-plan-card { border-radius:19px; padding:24px 22px; }
  .docs-plan-benefits article { padding:20px; }
  .docs-plan-table-wrap { border-radius:17px; }
  .docs-plan-table { min-width:640px; }
  .docs-plan-table th,.docs-plan-table td { padding:15px 16px; }
  .docs-plan-table thead th:first-child { border-radius:16px 0 0; }
  .docs-plan-table thead th:last-child { border-radius:0 16px 0 0; }
  .docs-plan-table tbody th { position:sticky; left:0; z-index:1; }
  .docs-support-panel { align-items:flex-start; flex-direction:column; padding:24px; }
  .docs-support-panel .btn { width:100%; }
  .pricing-section { padding-bottom:100px; }
  .page-hero .page-meta { align-items:center; flex-direction:column; }
  .consumer-pricing-grid { grid-template-columns:1fr; }
  .pricing-card { min-height:auto; border-radius:26px; padding:30px; }
  .pricing-card.featured,.pricing-card.featured:hover { transform:none; }
  .plan-price { font-size:54px; }
  .consumer-pricing-grid .plan-desc { min-height:auto; }
  .business-pricing { margin-top:72px; }
  .business-heading h2 { font-size:40px; }
  .business-card { border-radius:26px; }
  .business-card-top { padding:38px 26px 34px; }
  .business-features { grid-template-columns:1fr; }
  .business-features > div,.business-features > div:nth-child(2n),.business-features > div:nth-child(3n),.business-features > div:nth-last-child(-n+2),.business-features > div:nth-last-child(-n+3) { min-height:auto; border-right:0; border-bottom:1px solid #303136; padding:24px 26px; }
  .business-features > div:last-child { border-bottom:0; }
  .volume-pricing { padding:34px 26px 40px; }
  .volume-pricing-heading { align-items:flex-start; flex-direction:column; }
  .volume-tiers { grid-template-columns:1fr 1fr; }
  .volume-tier { min-height:116px; padding:18px; }
  .volume-tier strong { font-size:23px; }
  .modal-card { padding:32px 24px; }
  .auth-aside h1 { font-size:34px; }
  .blog-hero { padding:84px 0 64px; }
  .blog-hero h1 { font-size:48px; }
  .blog-hero p { font-size:16px; }
  .blog-featured-section { padding-bottom:96px; }
  .blog-featured-card { border-radius:26px; }
  .blog-featured-visual { min-height:360px; }
  .orbit-one { width:280px; height:280px; }
  .orbit-two { width:390px; height:390px; }
  .blog-signal-core { width:190px; height:190px; }
  .blog-signal-core span { height:45px; }
  .blog-signal-core span:nth-child(2),.blog-signal-core span:nth-child(6) { height:68px; }
  .blog-signal-core span:nth-child(3),.blog-signal-core span:nth-child(5) { height:91px; }
  .blog-signal-core span:nth-child(4) { height:116px; }
  .blog-featured-copy { min-height:500px; padding:38px 28px; }
  .blog-featured-copy h2 { font-size:39px; }
  .blog-topics-section { padding-bottom:100px; }
  .blog-section-heading h2 { font-size:40px; }
  .blog-topic-grid { grid-template-columns:1fr; }
  .blog-topic-card,.blog-topic-card:last-child { min-height:260px; grid-column:auto; }
  .blog-use-case-section { padding-bottom:100px; }
  .blog-use-case-card { border-radius:28px; }
  .blog-use-case-copy { padding:42px 28px; }
  .blog-use-case-copy h2 { font-size:40px; }
  .blog-audience-map { min-height:350px; padding:40px 20px; }
  .blog-audience-map span { width:100%; min-width:0; }
  .blog-audience-map span:nth-child(1),.blog-audience-map span:nth-child(3) { transform:none; }
  .article-hero { padding:80px 0 66px; }
  .article-back { margin-bottom:32px; }
  .article-hero h1 { font-size:49px; }
  .article-deck { font-size:17px; }
  .article-shell { padding-top:12px; padding-bottom:100px; }
  .article-body > p,.article-section > p { font-size:16px; line-height:1.82; }
  .article-lead { margin-bottom:56px; font-size:21px !important; }
  .article-section { padding:58px 0; }
  .article-section h2 { font-size:39px; }
  .audio-graph { display:flex; overflow-x:auto; border-radius:24px; margin-right:-14px; margin-left:-14px; padding:22px 18px; scrollbar-width:none; }
  .audio-graph::-webkit-scrollbar { display:none; }
  .audio-graph-node { min-width:132px; flex:0 0 132px; }
  .audio-graph-arrow { flex:0 0 auto; }
  .protection-comparison { grid-template-columns:1fr; }
  .protection-comparison p { min-height:auto; }
  .article-use-list li { grid-template-columns:1fr; gap:8px; }
  .article-boundary { border-radius:24px; padding:30px 24px; }
  .article-boundary h3 { font-size:28px; }
  .use-case-profile-grid,.use-case-plan-grid { grid-template-columns:1fr; }
  .use-case-plan-grid > div { min-height:auto; }
  .article-summary { border-radius:24px; padding:32px 24px; }
  .article-next { padding:72px 0; }
  .article-next .container > div { align-items:flex-start; flex-direction:column; }
  .article-next .btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  #heroTypeText::after,.signal-sculpture span,.experience-panel::before,.page-hero::before,.blog-signal-orbit { animation:none !important; }
  [data-reveal].reveal-ready { opacity:1; transform:none; filter:none; }
}
/* Customer portal alignment and account identity */
.portal-page {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0,rgba(82,111,255,.07),transparent 34%),linear-gradient(180deg,#fff 0,#fafafb 100%);
  padding: 70px 0 120px;
}
.portal-page::before {
  position: absolute;
  top: -170px;
  left: 50%;
  width: 760px;
  height: 340px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(77,207,181,.07);
  content: "";
  filter: blur(75px);
  pointer-events: none;
}
.portal-shell { position:relative; width:min(1120px,calc(100% - 48px)); }
.auth-layout { width:100%; max-width:960px; margin:0 auto; }
.auth-card { display:flex; flex-direction:column; justify-content:center; }
.auth-card > * { width:100%; max-width:390px; margin-right:auto; margin-left:auto; }
.auth-card-header { text-align:left; }
.auth-recovery-link { width:auto; }
.auth-toggle { width:100%; }

.dashboard-heading {
  width:min(760px,100%);
  align-items:center;
  flex-direction:column;
  gap:23px;
  margin:0 auto 32px;
  text-align:center;
}
.dashboard-heading-copy { display:grid; justify-items:center; }
.dashboard-heading .eyebrow { margin-bottom:12px; }
.dashboard-heading h1 { margin:0 0 10px; font-size:clamp(40px,4.4vw,54px); font-weight:450; line-height:1.04; }
.dashboard-heading p { max-width:600px; margin:0 auto; color:#6b6f76; font-size:14.5px; line-height:1.65; }
.dashboard-heading .btn { min-width:190px; }
.portal-claim-alert { width:min(880px,100%); margin:0 auto 24px; }

.portal-nav-tabs {
  width:fit-content;
  max-width:100%;
  justify-content:center;
  gap:6px;
  margin:0 auto 28px;
  border-radius:17px;
  padding:6px;
}
.portal-tab-btn { min-width:150px; flex:0 0 auto; border-radius:12px; padding:11px 18px; transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease; }
.portal-tab-btn.active { background:#eef1ff; box-shadow:inset 0 0 0 1px rgba(83,104,205,.08); }
.portal-tab-btn:focus-visible { outline:3px solid rgba(69,100,215,.16); outline-offset:2px; }
.portal-panel.active { display:block; width:min(980px,100%); margin-right:auto; margin-left:auto; }

.portal-license-card,.portal-empty-state,.portal-account-card,.portal-orders-card {
  box-sizing:border-box;
  border:1px solid #dedfe3;
  border-radius:28px;
  background:rgba(255,255,255,.94);
  box-shadow:0 20px 60px rgba(20,21,26,.06);
}
.portal-license-card { margin-bottom:16px; padding:28px; }
.portal-license-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.portal-license-meta { display:flex; min-width:0; align-items:center; flex-wrap:wrap; gap:9px; }
.portal-license-meta > span:last-child { color:#858891; font-size:11px; }
.portal-license-key { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; border:1px solid #e0e2e8; border-radius:17px; background:#f7f8fb; padding:15px 16px; }
.portal-license-key > div { display:grid; min-width:0; gap:5px; }
.portal-license-key strong { overflow:hidden; color:#258c79; font-family:var(--font-mono); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.portal-field-label { color:#8a8d95; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.portal-devices-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; color:#6b6f76; font-size:11.5px; }
.portal-devices-heading strong { color:#202126; font-size:12px; }
.device-row { min-height:64px; margin-top:0; border-radius:15px; padding:12px 14px; }
.device-row + .device-row { margin-top:8px; }
.device-identity { display:grid; min-width:0; gap:3px; }
.device-identity strong { overflow:hidden; font-family:var(--font-mono); font-size:12px; text-overflow:ellipsis; }
.device-identity span { color:#878a92; font-size:10.5px; }
.portal-no-devices { border:1px dashed #dfe1e6; border-radius:15px; color:#858891; padding:18px; font-size:12px; text-align:center; }
.portal-empty-state { display:grid; min-height:300px; place-items:center; align-content:center; padding:48px; color:var(--text-muted); text-align:center; }
.portal-empty-state .demo-title { margin:8px 0 7px; }
.portal-empty-state .demo-subtitle { max-width:500px; margin:0 auto 20px; }
.portal-empty-state.is-loading { min-height:220px; }
.portal-error-state { min-height:160px; color:#96354a; }

.portal-account-card { width:min(820px,100%); margin:0 auto; padding:38px; }
.portal-card-heading { margin-bottom:26px; text-align:center; }
.portal-card-heading .eyebrow { margin-bottom:8px; }
.portal-card-heading .demo-title { font-size:28px; font-weight:500; }
.portal-card-heading .demo-subtitle { max-width:520px; margin:7px auto 0; }
.portal-plan-overview { color:var(--text-secondary); }
.portal-plan-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.portal-plan-grid .demo-box { min-height:118px; align-content:center; text-align:center; }
.portal-plan-grid .demo-label { margin-bottom:7px; }
.portal-plan-grid strong { font-size:13px; text-transform:capitalize; }
.portal-plan-action { display:block; margin:20px auto 0; }
.portal-security-form { width:min(590px,100%); max-width:none; margin:0 auto; }
.portal-security-form button { min-width:180px; justify-self:center; margin-top:4px; }
.portal-orders-card { overflow:auto; }

.portal-user-profile {
  min-height:42px;
  align-items:center;
  gap:8px;
  border:1px solid #dedfe3;
  border-radius:999px;
  background:#f8f8f9;
  padding:4px 5px 4px 4px;
}
.portal-user-profile > .portal-profile-avatar {
  display:grid;
  width:32px;
  height:32px;
  max-width:none;
  flex:0 0 32px;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#e8ecff,#e4f7f2);
  color:#4358b3;
  font-size:10px;
  font-weight:750;
  letter-spacing:.02em;
}
.portal-profile-copy { display:grid; min-width:74px; gap:1px; padding:0 3px; line-height:1.1; }
.portal-profile-copy strong { max-width:105px; overflow:hidden; color:#28292e; font-size:10.5px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.portal-user-profile .portal-profile-copy span { max-width:none; overflow:visible; color:#92959c; font-size:8.5px; text-overflow:clip; }
.portal-signout-btn { min-height:32px; border:0; border-radius:999px; background:#fff; color:#44474f; padding:0 12px; font-family:inherit; font-size:9.5px; font-weight:650; box-shadow:0 1px 4px rgba(20,21,26,.08); cursor:pointer; transition:background 160ms ease,color 160ms ease; }
.portal-signout-btn:hover { background:#202126; color:#fff; }
.portal-signout-btn:focus-visible { outline:3px solid rgba(69,100,215,.16); outline-offset:2px; }

/* Customer portal premium select */
.portal-native-select {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  white-space:nowrap !important;
}
.portal-select { position:relative; z-index:2; width:100%; }
.portal-select.is-open { z-index:20; }
.portal-select-trigger {
  position:relative;
  display:flex;
  width:100%;
  min-height:74px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  overflow:hidden;
  border:1px solid #d7d9e0;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,247,251,.94));
  color:#202126;
  padding:13px 13px 13px 17px;
  box-shadow:0 8px 24px rgba(24,27,38,.06),inset 0 1px 0 rgba(255,255,255,.92);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color 240ms ease,box-shadow 240ms ease,transform 240ms cubic-bezier(.2,.8,.2,1),background 240ms ease;
}
.portal-select-trigger::before {
  position:absolute;
  top:-45px;
  left:-35%;
  width:48%;
  height:130px;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
  content:"";
  opacity:0;
  pointer-events:none;
  transition:left 620ms cubic-bezier(.2,.8,.2,1),opacity 220ms ease;
}
.portal-select-trigger:hover { border-color:#b9bfd0; background:#fff; box-shadow:0 13px 32px rgba(24,27,38,.09),inset 0 1px 0 #fff; transform:translateY(-1px); }
.portal-select-trigger:hover::before { left:92%; opacity:.7; }
.portal-select-trigger:focus-visible,.portal-select.is-open .portal-select-trigger { border-color:#8d9de0; box-shadow:0 0 0 4px rgba(79,103,211,.11),0 16px 38px rgba(28,35,67,.10); outline:none; }
.portal-select-copy { display:grid; min-width:0; gap:2px; }
.portal-select-kicker { color:#898d98; font-size:8.5px; font-weight:750; letter-spacing:.13em; line-height:1.2; text-transform:uppercase; }
.portal-select-value { overflow:hidden; font-size:14.5px; font-weight:650; letter-spacing:-.015em; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.portal-select-meta { color:#71757e; font-size:10.5px; line-height:1.35; }
.portal-select-chevron {
  position:relative;
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border:1px solid rgba(75,79,92,.10);
  border-radius:13px;
  background:rgba(255,255,255,.76);
  box-shadow:0 5px 14px rgba(28,31,43,.07);
  transition:background 220ms ease,transform 320ms cubic-bezier(.2,.8,.2,1);
}
.portal-select-chevron::after { width:7px; height:7px; transform:translateY(-2px) rotate(45deg); border-right:1.5px solid #525660; border-bottom:1.5px solid #525660; content:""; }
.portal-select.is-open .portal-select-chevron { background:#202126; transform:rotate(180deg); }
.portal-select.is-open .portal-select-chevron::after { border-color:#fff; }
.portal-select-menu {
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  left:0;
  overflow:hidden;
  border:1px solid rgba(208,211,220,.9);
  border-radius:20px;
  background:rgba(252,252,253,.93);
  padding:7px;
  box-shadow:0 24px 58px rgba(21,24,36,.18),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  animation:portal-select-menu-in 220ms cubic-bezier(.2,.8,.2,1) both;
}
.portal-select-menu[hidden] { display:none; }
.portal-select-option {
  display:flex;
  width:100%;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#2a2b30;
  padding:10px 12px;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:background 180ms ease,color 180ms ease,transform 220ms cubic-bezier(.2,.8,.2,1);
}
.portal-select-option + .portal-select-option { margin-top:2px; }
.portal-select-option:hover,.portal-select-option:focus-visible { background:#f0f2fa; outline:none; transform:translateX(2px); }
.portal-select-option.is-selected { background:linear-gradient(135deg,#edf0ff,#edf8f5); color:#283878; }
.portal-select-option-copy { display:grid; min-width:0; gap:3px; }
.portal-select-option-copy strong { font-size:13px; font-weight:650; letter-spacing:-.01em; }
.portal-select-option-copy > span { color:#7d818b; font-size:10px; }
.portal-select-option-indicator { display:grid; width:22px; height:22px; flex:0 0 22px; place-items:center; border:1px solid #d7dae4; border-radius:50%; background:rgba(255,255,255,.75); }
.portal-select-option-indicator::after { width:6px; height:6px; border-radius:50%; background:#5269d7; content:""; opacity:0; transform:scale(.4); transition:opacity 160ms ease,transform 220ms cubic-bezier(.2,.8,.2,1); }
.portal-select-option.is-selected .portal-select-option-indicator { border-color:#b9c4ef; }
.portal-select-option.is-selected .portal-select-option-indicator::after { opacity:1; transform:scale(1); }
@keyframes portal-select-menu-in { from { opacity:0; transform:translateY(-7px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width:860px) {
  .portal-page { padding-top:48px; }
  .portal-shell { width:min(100% - 36px,760px); }
  .nav-actions .portal-user-profile { display:flex !important; }
  .portal-profile-copy { display:none; }
  .auth-card > * { max-width:430px; }
  .portal-nav-tabs { justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .portal-nav-tabs::-webkit-scrollbar { display:none; }
  .portal-tab-btn { min-width:142px; }
  .portal-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px) {
  .portal-page { padding:34px 0 82px; }
  .portal-shell { width:calc(100% - 28px); }
  .portal-user-profile > .portal-profile-avatar { display:none; }
  .portal-user-profile { min-height:38px; padding:3px; }
  .portal-signout-btn { min-height:30px; padding:0 10px; }
  .auth-aside { align-items:center; text-align:center; }
  .auth-benefits { width:100%; max-width:330px; text-align:left; }
  .auth-card-header { text-align:center; }
  .dashboard-heading { align-items:center; gap:20px; margin-bottom:26px; text-align:center; }
  .dashboard-heading .btn { width:100%; }
  .dashboard-heading h1 { font-size:40px; }
  .portal-nav-tabs { width:100%; margin-bottom:20px; }
  .portal-tab-btn { min-width:132px; }
  .portal-license-card { border-radius:23px; padding:21px; }
  .portal-license-header,.portal-license-key { align-items:stretch; flex-direction:column; }
  .portal-license-header .btn,.portal-license-key .btn { width:100%; }
  .portal-license-key strong { white-space:normal; overflow-wrap:anywhere; }
  .device-row { align-items:stretch; }
  .device-row .btn { width:100%; }
  .portal-account-card { border-radius:23px; padding:28px 20px; }
  .portal-plan-grid { grid-template-columns:1fr 1fr; }
  .portal-plan-grid .demo-box { min-height:105px; padding:14px 10px; }
  .portal-security-form { grid-template-columns:1fr; }
  .portal-security-form .form-group { grid-column:1; }
  .portal-security-form button { width:100%; }
  .portal-empty-state { min-height:260px; border-radius:23px; padding:34px 22px; }
  .portal-select-trigger { min-height:70px; border-radius:16px; }
  .portal-select-menu { border-radius:18px; }
}

@media (max-width:430px) {
  .navbar .logo > span:last-child { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .portal-select-menu { animation:none; }
  .portal-select-trigger::before { display:none; }
}