:root {
 color-scheme: dark;
 --bg: #060a0f;
 --surface: #0c1219;
 --surface-raised: #101821;
 --line: #1d2a36;
 --line-bright: #30404f;
 --text: #f4f7f8;
 --muted: #91a0ae;
 --orange: #ff6a1a;
 --orange-light: #ff9b65;
 --orange-dark: #d94e08;
 --emerald: #32dc9d;
 --emerald-dim: rgba(50, 220, 157, 0.11);
 --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}



* {
 box-sizing: border-box;
}



html {
 scroll-behavior: smooth;
}



body {
 margin: 0;
 min-width: 320px;
 background: var(--bg);
 color: var(--text);
 font-family:
   Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
   sans-serif;
 -webkit-font-smoothing: antialiased;
}



button,
a {
 -webkit-tap-highlight-color: transparent;
}



button:focus-visible,
a:focus-visible {
 outline: 3px solid rgba(255, 106, 26, 0.55);
 outline-offset: 3px;
}



.pricing-section {
 position: relative;
 min-height: 100vh;
 overflow: hidden;
 padding: 112px 24px 72px;
 background:
   radial-gradient(circle at 50% -10%, rgba(255, 106, 26, 0.1), transparent 27rem),
   linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
   var(--bg);
 background-size: auto, 48px 48px, 48px 48px, auto;
}



.pricing-section::before,
.pricing-section::after {
 position: absolute;
 z-index: 0;
 content: "";
 pointer-events: none;
}



.pricing-section::before {
 top: 0;
 left: 50%;
 width: min(900px, 80vw);
 height: 1px;
 transform: translateX(-50%);
 background: linear-gradient(90deg, transparent, var(--orange), transparent);
 box-shadow: 0 0 34px 4px rgba(255, 106, 26, 0.35);
}



.pricing-section::after {
 top: 360px;
 right: -260px;
 width: 520px;
 height: 520px;
 border: 1px solid rgba(50, 220, 157, 0.06);
 border-radius: 50%;
}



.pricing-shell {
 position: relative;
 z-index: 1;
 width: min(1180px, 100%);
 margin: 0 auto;
}



.section-heading {
 width: min(800px, 100%);
 margin: 0 auto;
 text-align: center;
}



.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 margin-bottom: 22px;
 color: var(--orange-light);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.15em;
 text-transform: uppercase;
}



.eyebrow-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--orange);
 box-shadow: 0 0 12px var(--orange);
}



.section-heading h2 {
 margin: 0;
 color: var(--text);
 font-size: clamp(37px, 5vw, 62px);
 font-weight: 740;
 letter-spacing: -0.052em;
 line-height: 1.02;
}



.section-heading h2 span {
 color: var(--orange-light);
}



.section-heading p {
 width: min(680px, 100%);
 margin: 24px auto 0;
 color: var(--muted);
 font-size: clamp(16px, 2vw, 19px);
 line-height: 1.7;
}



.deal-callout {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 width: fit-content;
 margin: 34px auto 16px;
 color: #b6f5db;
 font-size: 13px;
 font-weight: 650;
}



.pulse-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--emerald);
 box-shadow: 0 0 0 5px rgba(50, 220, 157, 0.1);
 animation: pulse 2s ease-out infinite;
}



@keyframes pulse {
 50% {
   box-shadow: 0 0 0 9px rgba(50, 220, 157, 0);
 }
}



.pricing-tabs {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 width: min(760px, 100%);
 margin: 0 auto 42px;
 padding: 5px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: rgba(12, 18, 25, 0.94);
 box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}



.pricing-tab {
 min-height: 52px;
 padding: 9px 12px;
 border: 0;
 border-radius: 10px;
 background: transparent;
 color: var(--muted);
 cursor: pointer;
 font: inherit;
 font-size: 14px;
 font-weight: 720;
 transition:
   color 180ms ease,
   background 180ms ease,
   box-shadow 180ms ease;
}



.pricing-tab:hover {
 color: var(--text);
}



.pricing-tab.is-active {
 background: linear-gradient(135deg, #ff7a32, var(--orange-dark));
 color: #fff;
 box-shadow: 0 6px 22px rgba(255, 106, 26, 0.24);
}



.tab-saving {
 display: inline-block;
 margin-left: 4px;
 padding: 3px 6px;
 border-radius: 5px;
 background: var(--emerald-dim);
 color: var(--emerald);
 font-size: 10px;
 font-weight: 800;
 vertical-align: 1px;
}



.is-active .tab-saving {
 background: rgba(3, 29, 20, 0.25);
 color: #d5ffef;
}



.tab-limited {
 display: block;
 margin-top: 2px;
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}



.pricing-panel {
 animation: panel-in 260ms ease both;
}



.pricing-panel[hidden] {
 display: none;
}



@keyframes panel-in {
 from {
   opacity: 0;
   transform: translateY(8px);
 }
}



.billing-note {
 margin: -19px auto 30px;
 color: #71808e;
 font-size: 12px;
 font-weight: 650;
 letter-spacing: 0.04em;
 text-align: center;
 text-transform: uppercase;
}



.lifetime-note {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 color: #90bca9;
}



.lifetime-note > span:first-child {
 color: var(--emerald);
}



.note-separator {
 width: 3px;
 height: 3px;
 border-radius: 50%;
 background: #4c5c68;
}



.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;
 padding: 30px 28px 28px;
 border: 1px solid var(--line);
 border-radius: 18px;
 background:
   linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 50%),
   var(--surface);
 box-shadow: 0 12px 35px rgba(0, 0, 0, 0.17);
 transition:
   transform 200ms ease,
   border-color 200ms ease;
}



.pricing-card:hover {
 transform: translateY(-4px);
 border-color: var(--line-bright);
}



.card-topline {
 margin-bottom: 11px;
 color: #6f7e8a;
 font-size: 11px;
 font-weight: 750;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}



.pricing-card h3 {
 margin: 0;
 color: #fbfcfc;
 font-size: 23px;
 letter-spacing: -0.025em;
}



.card-description {
 min-height: 66px;
 margin: 12px 0 24px;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.55;
}



.price {
 display: flex;
 align-items: flex-start;
 min-height: 68px;
}



.price .currency {
 margin: 8px 3px 0 0;
 color: #c7d0d7;
 font-size: 21px;
 font-weight: 720;
}



.price strong {
 color: #fff;
 font-size: 50px;
 font-weight: 750;
 letter-spacing: -0.055em;
 line-height: 1;
}



.price .term {
 align-self: flex-end;
 margin: 0 0 9px 8px;
 color: var(--muted);
 font-size: 13px;
 font-weight: 600;
}



.old-price {
 height: 24px;
 margin: -16px 0 2px;
 color: #687684;
 font-size: 11px;
}



.old-price span {
 margin-right: 5px;
 color: #9aa6b0;
 font-weight: 700;
 text-decoration: line-through;
}



.payment-label {
 margin: -7px 0 21px;
 color: var(--emerald);
 font-size: 11px;
 font-weight: 720;
 letter-spacing: 0.04em;
 text-transform: uppercase;
}



.plan-button {
 display: flex;
 align-items: center;
 justify-content: space-between;
 min-height: 48px;
 padding: 0 16px;
 border: 1px solid #2b3a47;
 border-radius: 9px;
 background: #121c25;
 color: #f2f5f6;
 font-size: 13px;
 font-weight: 750;
 text-decoration: none;
 transition:
   background 180ms ease,
   border-color 180ms ease;
}



.plan-button:hover {
 border-color: #475a6a;
 background: #17232e;
}



.ltd-button {
 border-color: rgba(50, 220, 157, 0.28);
 background: rgba(50, 220, 157, 0.08);
 color: #c8f8e6;
}



.ltd-button:hover {
 border-color: rgba(50, 220, 157, 0.5);
 background: rgba(50, 220, 157, 0.13);
}



.feature-divider {
 display: flex;
 align-items: center;
 gap: 12px;
 margin: 27px 0 18px;
 color: #71808d;
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}



.feature-divider::after {
 height: 1px;
 flex: 1;
 background: var(--line);
 content: "";
}



.feature-list {
 display: grid;
 gap: 14px;
 margin: 0;
 padding: 0;
 color: #b7c1c9;
 font-size: 13px;
 line-height: 1.45;
 list-style: none;
}



.feature-list li {
 display: flex;
 gap: 9px;
 align-items: flex-start;
}



.feature-list strong {
 display: contents;
 color: #eef2f3;
}



.check {
 display: inline-flex;
 width: 17px;
 height: 17px;
 flex: 0 0 17px;
 align-items: center;
 justify-content: center;
 margin-top: 1px;
 border-radius: 50%;
 background: var(--emerald-dim);
 color: var(--emerald);
 font-size: 10px;
 font-weight: 900;
}



.bonus-box {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: auto;
 padding: 18px 0 0;
 border-top: 1px solid var(--line);
 color: #d8e1e5;
}



.bonus-box .gift {
 font-size: 21px;
}



.bonus-box div {
 display: grid;
 gap: 3px;
}



.bonus-box strong {
 font-size: 12px;
}



.bonus-box span:last-child {
 color: var(--emerald);
 font-size: 10px;
 font-weight: 750;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}



.featured-card {
 border-color: rgba(50, 220, 157, 0.72);
 background:
   linear-gradient(160deg, rgba(50, 220, 157, 0.08), transparent 38%),
   var(--surface-raised);
 box-shadow:
   0 0 0 1px rgba(50, 220, 157, 0.08),
   0 0 36px rgba(50, 220, 157, 0.1),
   var(--shadow);
}



.featured-card:hover {
 border-color: var(--emerald);
}



.popular-badge {
 position: absolute;
 top: -16px;
 left: 50%;
 width: max-content;
 transform: translateX(-50%);
 padding: 8px 15px;
 border: 1px solid #54e9b0;
 border-radius: 999px;
 background: #123829;
 color: #c6fbe6;
 box-shadow: 0 5px 20px rgba(50, 220, 157, 0.2);
 font-size: 10px;
 font-weight: 850;
 letter-spacing: 0.09em;
 text-transform: uppercase;
}



.popular-badge span {
 margin-right: 5px;
 color: var(--emerald);
}



.featured-button {
 border-color: var(--emerald);
 background: var(--emerald);
 color: #042218;
 box-shadow: 0 8px 28px rgba(50, 220, 157, 0.18);
}



.featured-button:hover {
 border-color: #5df1ba;
 background: #5df1ba;
}



.addon-block {
 position: relative;
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 24px;
 align-items: center;
 margin-top: 28px;
 padding: 26px 28px;
 overflow: hidden;
 border: 1px solid #2b3945;
 border-radius: 15px;
 background: #0c131a;
}



.addon-block[hidden] {
 display: none;
}



.addon-icon {
 display: grid;
 width: 52px;
 height: 52px;
 place-items: center;
 border: 1px solid rgba(255, 106, 26, 0.3);
 border-radius: 12px;
 background: rgba(255, 106, 26, 0.1);
}



.addon-icon svg {
 width: 25px;
 fill: var(--orange);
}



.addon-kicker,
.guarantee-kicker {
 color: var(--orange-light);
 font-size: 9px;
 font-weight: 850;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}



.addon-copy h3 {
 margin: 4px 0 12px;
 font-size: 19px;
}



.addon-copy ul {
 display: flex;
 flex-wrap: wrap;
 gap: 9px 22px;
 margin: 0;
 padding: 0;
 color: #aab5bd;
 font-size: 12px;
 list-style: none;
}



.addon-copy li {
 display: flex;
 align-items: center;
 gap: 7px;
}



.addon-copy small {
 color: #6f7c87;
}



.addon-price {
 display: grid;
 gap: 8px;
 justify-items: end;
 min-width: 150px;
}



.addon-price span {
 color: #75838e;
 font-size: 11px;
 text-transform: uppercase;
}



.addon-price strong {
 color: #fff;
 font-size: 24px;
 letter-spacing: -0.03em;
}



.addon-price a {
 color: var(--orange-light);
 font-size: 12px;
 font-weight: 750;
 text-decoration: none;
}



.addon-free-note {
 position: absolute;
 top: 0;
 right: 22px;
 padding: 5px 9px;
 border-radius: 0 0 6px 6px;
 background: rgba(50, 220, 157, 0.13);
 color: #9fddc5;
 font-size: 9px;
 font-weight: 650;
}



.addon-free-note strong {
 color: var(--emerald);
}



.addon-checkout-section {
 position: relative;
 scroll-margin-top: 96px;
 padding: 72px 24px 80px;
 background:
   radial-gradient(circle at 70% 0%, rgba(255, 106, 26, 0.12), transparent 28rem),
   var(--bg);
}



.addon-checkout-shell {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: 0.92fr 1.08fr;
 gap: 48px;
 align-items: start;
 width: min(1120px, 100%);
 margin: 0 auto;
}



.addon-checkout-copy {
 padding-top: 8px;
}



.addon-checkout-kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 16px;
 color: var(--emerald);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.16em;
 text-transform: uppercase;
}



.addon-checkout-kicker-icon {
 width: 16px;
 height: 16px;
}



.addon-checkout-copy h2 {
 margin: 0 0 16px;
 max-width: 18ch;
 font-size: 40px;
 font-weight: 900;
 letter-spacing: -0.04em;
 line-height: 1.08;
}



.addon-checkout-copy > p {
 margin: 0 0 24px;
 max-width: 46ch;
 color: var(--muted);
 font-size: 16px;
 line-height: 1.7;
}



.addon-checkout-plan {
 display: grid;
 gap: 4px;
 margin-bottom: 24px;
 padding: 18px 20px;
 border: 1px solid rgba(255, 106, 26, 0.28);
 border-radius: 16px;
 background: rgba(255, 106, 26, 0.06);
}



.addon-checkout-plan span {
 color: var(--orange-light);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}



.addon-checkout-plan strong {
 font-size: 20px;
}



.addon-checkout-plan em {
 color: var(--muted);
 font-size: 14px;
 font-style: normal;
 font-weight: 700;
}



.addon-checkout-trust {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}



.addon-checkout-trust span {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 12px;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.03);
 color: var(--muted);
 font-size: 12px;
 font-weight: 650;
}



.addon-checkout-trust svg,
.addon-checkout-signed-in svg {
 width: 16px;
 height: 16px;
 color: var(--emerald);
}



.addon-checkout-signed-in {
 display: grid;
 justify-items: center;
 padding: 48px 32px;
 border: 1px solid rgba(50, 220, 157, 0.25);
 border-radius: 24px;
 background: rgba(50, 220, 157, 0.05);
 text-align: center;
}



.addon-checkout-signed-in svg {
 width: 48px;
 height: 48px;
}



.addon-checkout-signed-in h3 {
 margin: 16px 0 8px;
 font-size: 24px;
}



.addon-checkout-signed-in p {
 margin: 0 0 24px;
 color: var(--muted);
}



.addon-checkout-signed-in .primary-cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}



.addon-checkout-signed-in .primary-cta svg {
 width: 18px;
 height: 18px;
 color: inherit;
}



@media (max-width: 900px) {
 .addon-checkout-shell {
   grid-template-columns: 1fr;
   gap: 28px;
 }

 .addon-checkout-copy h2 {
   font-size: 32px;
   max-width: none;
 }
}



.guarantee-box {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 20px;
 align-items: center;
 margin-top: 28px;
 padding: 28px 30px;
 border: 1px solid rgba(50, 220, 157, 0.35);
 border-radius: 15px;
 background:
   linear-gradient(90deg, rgba(50, 220, 157, 0.1), transparent 60%),
   #0a1515;
}



.guarantee-seal {
 display: grid;
 width: 56px;
 height: 56px;
 place-items: center;
 border: 1px solid rgba(50, 220, 157, 0.38);
 border-radius: 50%;
 background: rgba(50, 220, 157, 0.08);
 box-shadow: 0 0 25px rgba(50, 220, 157, 0.08);
}



.guarantee-seal svg {
 width: 30px;
 overflow: visible;
 fill: none;
 stroke: var(--emerald);
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-width: 1.7;
}



.guarantee-box h3 {
 margin: 5px 0 6px;
 font-size: 19px;
 letter-spacing: -0.015em;
}



.guarantee-box p {
 margin: 0;
 color: #a8b8b7;
 font-size: 13px;
 line-height: 1.6;
}



.guarantee-box p strong {
 color: var(--emerald);
}



.pricing-footer {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 13px;
 margin: 27px 0 0;
 color: #64727d;
 font-size: 11px;
 font-weight: 650;
}



.pricing-footer span {
 width: 3px;
 height: 3px;
 border-radius: 50%;
 background: #3b4954;
}



@media (max-width: 900px) {
 .pricing-section {
   padding-top: 88px;
 }



 .pricing-grid {
   grid-template-columns: 1fr;
   width: min(580px, 100%);
   margin: 0 auto;
   gap: 24px;
 }



 .card-description {
   min-height: 0;
 }



 .featured-card {
   margin-top: 8px;
 }



 .addon-block {
   grid-template-columns: auto 1fr;
 }



 .addon-price {
   grid-column: 2;
   justify-items: start;
 }
}



@media (max-width: 620px) {
 .pricing-section {
   padding: 72px 16px 48px;
   background-size: auto, 32px 32px, 32px 32px, auto;
 }



 .section-heading h2 {
   font-size: 39px;
 }



 .section-heading p {
   font-size: 15px;
   line-height: 1.6;
 }



 .deal-callout {
   font-size: 11px;
   text-align: center;
 }



 .pricing-tabs {
   grid-template-columns: 1fr;
   margin-bottom: 35px;
 }



 .pricing-tab {
   min-height: 44px;
 }



 .tab-limited {
   display: inline;
   margin-left: 5px;
 }



 .billing-note,
 .lifetime-note {
   margin-top: -13px;
   padding: 0 12px;
   line-height: 1.5;
 }



 .lifetime-note {
   display: block;
 }



 .note-separator {
   display: none;
 }



 .lifetime-note span:first-child::after {
   content: " · ";
 }



 .pricing-card {
   padding: 28px 22px 24px;
 }



 .addon-block {
   grid-template-columns: 1fr;
   padding: 55px 22px 23px;
 }



 .addon-icon {
   width: 46px;
   height: 46px;
 }



 .addon-copy ul {
   display: grid;
 }



 .addon-copy li {
   align-items: flex-start;
 }



 .addon-price {
   grid-column: 1;
 }



 .addon-free-note {
   right: 10px;
   left: 10px;
   text-align: center;
 }



 .guarantee-box {
   grid-template-columns: 1fr;
   padding: 24px 22px;
 }



 .guarantee-seal {
   width: 48px;
   height: 48px;
 }



 .pricing-footer {
   flex-wrap: wrap;
   gap: 7px 10px;
   line-height: 1.4;
   text-align: center;
 }
}



/* Complete landing page */



body {
 overflow-x: hidden;
}



.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}



.skip-link {
 position: fixed;
 z-index: 1000;
 top: 10px;
 left: 10px;
 transform: translateY(-150%);
 padding: 10px 14px;
 border-radius: 7px;
 background: var(--orange);
 color: #fff;
 font-weight: 750;
 text-decoration: none;
 transition: transform 150ms ease;
}



.skip-link:focus {
 transform: translateY(0);
}



.content-shell,
.nav-shell,
.hero-grid,
.hero-trust,
.footer-grid,
.footer-bottom {
 width: min(1180px, calc(100% - 48px));
 margin-inline: auto;
}



.site-header {
 position: fixed;
 z-index: 100;
 top: 0;
 right: 0;
 left: 0;
 border-bottom: 1px solid transparent;
 transition:
   background 180ms ease,
   border-color 180ms ease;
}



#how-it-works,
#features,
#use-cases,
#pricing,
#faq,
#security,
.addon-checkout-section {
 scroll-margin-top: 88px;
}



.site-header.is-scrolled {
 border-color: rgba(255, 255, 255, 0.07);
 background: rgba(6, 10, 15, 0.86);
 backdrop-filter: blur(18px);
}



.nav-shell {
 display: flex;
 height: 72px;
 align-items: center;
 gap: 36px;
}



.brand {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 color: #fff;
 font-size: 18px;
 font-weight: 790;
 letter-spacing: -0.025em;
 text-decoration: none;
}



.brand em {
 color: var(--orange);
 font-style: normal;
}



.brand-mark {
 display: grid;
 width: 30px;
 height: 30px;
 place-items: center;
 border-radius: 8px 3px 8px 3px;
 background: linear-gradient(145deg, var(--orange-light), var(--orange-dark));
 color: #fff;
 box-shadow: 0 6px 20px rgba(255, 106, 26, 0.2);
 font-size: 16px;
 font-weight: 850;
}



.brand-mark.mini {
 width: 22px;
 height: 22px;
 border-radius: 6px 2px 6px 2px;
 font-size: 11px;
}



.nav-links {
 display: flex;
 flex: 1;
 justify-content: center;
 gap: 30px;
}



.nav-links a {
 color: #9aa7b1;
 font-size: 13px;
 font-weight: 650;
 text-decoration: none;
 transition: color 160ms ease;
}



.nav-links a:hover,
.nav-links a.is-active {
 color: #fff;
}



.nav-cta {
 display: inline-flex;
 min-height: 40px;
 align-items: center;
 gap: 14px;
 padding: 0 16px;
 border: 1px solid rgba(255, 106, 26, 0.45);
 border-radius: 8px;
 background: rgba(255, 106, 26, 0.08);
 color: var(--orange-light);
 font-size: 12px;
 font-weight: 760;
 text-decoration: none;
}



.menu-toggle {
 display: none;
 width: 40px;
 height: 40px;
 padding: 9px;
 border: 1px solid var(--line);
 border-radius: 8px;
 background: var(--surface);
}



.menu-toggle > span:not(.sr-only) {
 display: block;
 height: 1px;
 margin: 4px 0;
 background: #fff;
}



.hero {
 position: relative;
 overflow: hidden;
 padding: 155px 0 0;
 background:
   radial-gradient(circle at 72% 20%, rgba(255, 106, 26, 0.09), transparent 28rem),
   linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
 background-size: auto, 54px 54px, 54px 54px;
}



.hero::after {
 position: absolute;
 right: -180px;
 bottom: 80px;
 width: 500px;
 height: 500px;
 border: 1px solid rgba(255, 106, 26, 0.05);
 border-radius: 50%;
 content: "";
}



.hero-grid {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: minmax(0, 0.88fr) minmax(580px, 1.12fr);
 gap: 60px;
 align-items: center;
}



.hero-copy {
 padding-bottom: 70px;
}



.hero-eyebrow {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 23px;
 color: var(--orange-light);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}



.hero-eyebrow span {
 width: 24px;
 height: 1px;
 background: var(--orange);
 box-shadow: 0 0 8px var(--orange);
}



.hero h1 {
 max-width: 690px;
 margin: 0;
 font-size: clamp(48px, 5.1vw, 72px);
 font-weight: 760;
 letter-spacing: -0.061em;
 line-height: 0.98;
}



.hero h1 em {
 color: var(--orange-light);
 font-style: normal;
}



.hero-copy > p {
 max-width: 620px;
 margin: 27px 0 31px;
 color: #9aa8b3;
 font-size: 17px;
 line-height: 1.7;
}



.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}



.primary-cta,
.secondary-cta {
 display: inline-flex;
 min-height: 52px;
 align-items: center;
 justify-content: center;
 gap: 14px;
 padding: 0 20px;
 border-radius: 9px;
 font-size: 13px;
 font-weight: 780;
 text-decoration: none;
}



.primary-cta {
 background: linear-gradient(135deg, #ff7c34, var(--orange-dark));
 color: #fff;
 box-shadow: 0 12px 36px rgba(255, 106, 26, 0.2);
}



.primary-cta:hover {
 filter: brightness(1.08);
}



.secondary-cta {
 border: 1px solid var(--line-bright);
 background: rgba(13, 20, 28, 0.68);
 color: #d6dde1;
}



.play {
 display: grid;
 width: 24px;
 height: 24px;
 place-items: center;
 border: 1px solid #41505d;
 border-radius: 50%;
 color: var(--orange-light);
 font-size: 8px;
}



.hero-microcopy {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 18px;
 margin-top: 20px;
 color: #667581;
 font-size: 10px;
 font-weight: 650;
}



.hero-microcopy span::first-letter {
 color: var(--emerald);
}



.dashboard-wrap {
 position: relative;
 align-self: end;
 min-width: 0;
 padding: 26px 0 73px;
}



.dashboard-glow {
 position: absolute;
 top: 15%;
 left: 15%;
 width: 70%;
 height: 65%;
 border-radius: 50%;
 background: rgba(255, 106, 26, 0.12);
 filter: blur(80px);
}



.dashboard-window {
 position: relative;
 z-index: 1;
 overflow: hidden;
 border: 1px solid #2b3742;
 border-radius: 13px;
 background: #091017;
 box-shadow: 0 35px 90px rgba(0, 0, 0, 0.55);
 transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}



.window-bar {
 display: grid;
 grid-template-columns: 1fr 1.2fr auto;
 gap: 20px;
 align-items: center;
 min-height: 48px;
 padding: 0 14px;
 border-bottom: 1px solid #1d2933;
 background: #0d141c;
 color: #bfc8ce;
 font-size: 10px;
}



.window-brand {
 display: flex;
 align-items: center;
 gap: 7px;
 font-weight: 750;
}



.window-search {
 padding: 8px 10px;
 border: 1px solid #202d37;
 border-radius: 6px;
 background: #091017;
 color: #5f6d78;
}



.avatar {
 display: grid;
 width: 26px;
 height: 26px;
 place-items: center;
 border-radius: 7px;
 background: #283642;
 font-size: 8px;
 font-weight: 800;
}



.dashboard-body {
 display: grid;
 grid-template-columns: 115px 1fr;
 min-height: 355px;
}



.dash-sidebar {
 display: grid;
 align-content: start;
 gap: 7px;
 padding: 18px 10px;
 border-right: 1px solid #1b2731;
 background: #0b1219;
}



.dash-sidebar span {
 display: flex;
 gap: 8px;
 align-items: center;
 padding: 9px;
 border-radius: 6px;
 color: #596a76;
 font-size: 9px;
}



.dash-sidebar .dash-active {
 background: rgba(255, 106, 26, 0.1);
 color: var(--orange-light);
}



.dash-sidebar b {
 color: inherit;
 font-weight: 650;
}



.dash-main {
 min-width: 0;
 padding: 22px;
}



.dash-heading,
.result-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
}



.dash-heading div {
 display: grid;
 gap: 4px;
}



.dash-heading small {
 color: #64737f;
 font-size: 8px;
 text-transform: uppercase;
}



.dash-heading strong {
 font-size: 14px;
}



.dash-heading button {
 padding: 7px 10px;
 border: 0;
 border-radius: 5px;
 background: var(--orange);
 color: #fff;
 font-size: 8px;
 font-weight: 750;
}



.filter-row {
 display: flex;
 gap: 6px;
 margin: 20px 0 14px;
}



.filter-row span {
 padding: 7px;
 border: 1px solid #23303b;
 border-radius: 5px;
 color: #8c9aa5;
 font-size: 7px;
}



.result-meta {
 padding-bottom: 9px;
 font-size: 8px;
}



.result-meta span {
 color: var(--emerald);
}



.lead-table {
 border: 1px solid #1e2a34;
 border-radius: 7px;
}



.table-row {
 display: grid;
 grid-template-columns: 1.35fr 1fr 0.7fr;
 align-items: center;
 min-height: 51px;
 padding: 0 11px;
 border-bottom: 1px solid #18232c;
 color: #8d9aa4;
 font-size: 8px;
}



.table-row:last-child {
 border: 0;
}



.table-row > span:first-child {
 display: grid;
 grid-template-columns: 25px 1fr;
 column-gap: 7px;
 align-items: center;
}



.table-row i {
 display: grid;
 grid-row: 1 / 3;
 width: 25px;
 height: 25px;
 place-items: center;
 border-radius: 50%;
 background: #202f3a;
 color: #a9b5bd;
 font-size: 7px;
 font-style: normal;
}



.table-row b {
 color: #cfd6da;
 font-size: 8px;
}



.table-row small {
 grid-column: 2;
 color: #5a6974;
 font-size: 7px;
}



.table-head {
 min-height: 30px;
 color: #566570;
 text-transform: uppercase;
}



.table-head > span:first-child {
 display: block;
}



.verified {
 color: var(--emerald);
}



.checking {
 color: #e6b870;
}



.faded-row {
 opacity: 0.55;
}



.float-card {
 position: absolute;
 z-index: 2;
 display: flex;
 gap: 9px;
 align-items: center;
 padding: 11px 13px;
 border: 1px solid #2b3944;
 border-radius: 9px;
 background: rgba(14, 23, 31, 0.96);
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}



.float-card > span {
 display: grid;
 width: 26px;
 height: 26px;
 place-items: center;
 border-radius: 7px;
 background: var(--emerald-dim);
 color: var(--emerald);
 font-size: 11px;
}



.float-card div {
 display: grid;
 gap: 2px;
}



.float-card b {
 font-size: 9px;
}



.float-card small {
 color: #687783;
 font-size: 7px;
}



.float-verified {
 right: -20px;
 bottom: 42px;
}



.float-export {
 bottom: 25px;
 left: -22px;
}



.float-export > span {
 background: rgba(255, 106, 26, 0.11);
 color: var(--orange-light);
}



.hero-trust {
 position: relative;
 z-index: 2;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 background: rgba(8, 13, 19, 0.7);
}



.hero-trust > div {
 display: grid;
 gap: 5px;
 padding: 23px 26px;
 border-right: 1px solid var(--line);
}



.hero-trust > div:last-child {
 border-right: 0;
}



.hero-trust strong {
 font-size: 15px;
}



.hero-trust span {
 color: #697783;
 font-size: 10px;
 font-weight: 650;
}



.proof-section,
.comparison-section,
.how-section,
.features-section,
.use-cases-section,
.roi-section,
.trust-section,
.faq-section {
 padding: 104px 0;
}



.proof-section {
 background: #080d13;
 text-align: center;
}



.proof-label,
.section-index {
 color: var(--orange-light);
 font-size: 10px;
 font-weight: 850;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}



.proof-section h2 {
 max-width: 640px;
 margin: 14px auto 38px;
 font-size: clamp(30px, 4vw, 44px);
 letter-spacing: -0.045em;
 line-height: 1.08;
}



.audience-bar {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 22px 43px;
 padding: 23px 0;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 color: #55636e;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.1em;
}



.proof-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
 margin-top: 38px;
 text-align: left;
}



.proof-grid article {
 position: relative;
 padding: 26px 25px;
 border: 1px solid var(--line);
 border-radius: 13px;
 background: var(--surface);
}



.proof-number {
 color: #394650;
 font-family: ui-monospace, monospace;
 font-size: 11px;
}



.proof-grid h3 {
 margin: 22px 0 9px;
 font-size: 17px;
}



.proof-grid p {
 margin: 0;
 color: var(--muted);
 font-size: 13px;
 line-height: 1.65;
}



.comparison-section {
 background: var(--bg);
}



.split-heading {
 display: grid;
 grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
 gap: 80px;
 align-items: end;
 margin-bottom: 48px;
}



.split-heading h2,
.center-heading h2,
.roi-copy h2,
.faq-intro h2 {
 max-width: 760px;
 margin: 13px 0 0;
 font-size: clamp(34px, 4.5vw, 52px);
 letter-spacing: -0.051em;
 line-height: 1.04;
}



.split-heading > p,
.center-heading > p {
 margin: 0;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.7;
}



.comparison-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 18px;
}



.comparison-grid article {
 min-height: 480px;
 padding: 34px;
 border: 1px solid var(--line);
 border-radius: 17px;
}



.chaos-card {
 background:
   linear-gradient(145deg, rgba(189, 67, 53, 0.05), transparent 50%),
   #0b1016;
}



.workflow-card {
 border-color: rgba(50, 220, 157, 0.26) !important;
 background:
   linear-gradient(145deg, rgba(50, 220, 157, 0.07), transparent 50%),
   #0a1414;
}



.comparison-tag {
 color: #7a8791;
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.11em;
 text-transform: uppercase;
}



.workflow-card .comparison-tag {
 color: var(--emerald);
}



.comparison-grid h3 {
 margin: 11px 0 26px;
 font-size: 25px;
 letter-spacing: -0.03em;
}



.comparison-grid ul {
 display: grid;
 gap: 17px;
 margin: 0;
 padding: 0;
 color: #9aa7b0;
 font-size: 13px;
 list-style: none;
}



.comparison-grid li {
 display: flex;
 gap: 11px;
 align-items: center;
}



.comparison-grid li span {
 display: grid;
 width: 20px;
 height: 20px;
 flex: 0 0 20px;
 place-items: center;
 border-radius: 50%;
 background: rgba(188, 73, 62, 0.1);
 color: #d9796e;
}



.workflow-card li span {
 background: var(--emerald-dim);
 color: var(--emerald);
}



.tool-chaos,
.flow-line {
 margin-top: 37px;
 padding: 20px;
 border: 1px solid #1c2831;
 border-radius: 10px;
 background: rgba(5, 9, 13, 0.52);
}



.tool-chaos {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
}



.tool-chaos i {
 padding: 8px 10px;
 border: 1px solid #27333d;
 border-radius: 5px;
 color: #7d8992;
 font-size: 9px;
 font-style: normal;
}



.tool-chaos span {
 width: 100%;
 margin-top: 6px;
 color: #596671;
 font-size: 9px;
}



.flow-line {
 display: flex;
 align-items: center;
 justify-content: space-between;
 color: var(--emerald);
 font-size: 9px;
 letter-spacing: 0.08em;
}



.flow-line span {
 color: #42544e;
}



.how-section {
 background: #080d13;
}



.center-heading {
 max-width: 760px;
 margin: 0 auto 50px;
 text-align: center;
}



.center-heading h2 {
 margin-inline: auto;
}



.center-heading > p {
 max-width: 590px;
 margin: 18px auto 0;
}



.steps-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
}



.steps-grid article {
 position: relative;
 padding: 18px 18px 27px;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: #0c1219;
}



.step-count {
 position: absolute;
 z-index: 2;
 top: 30px;
 left: 30px;
 color: #5f6d78;
 font-family: ui-monospace, monospace;
 font-size: 10px;
}



.step-visual {
 position: relative;
 height: 230px;
 overflow: hidden;
 padding: 65px 22px 20px;
 border: 1px solid #1c2933;
 border-radius: 11px;
 background:
   linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
   #091017;
 background-size: 25px 25px;
}



.steps-grid h3 {
 margin: 22px 5px 8px;
 font-size: 19px;
}



.steps-grid article > p {
 margin: 0 5px;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.65;
}



.mock-input {
 padding: 12px;
 border: 1px solid #33424e;
 border-radius: 7px;
 background: #0e171f;
 color: #bcc6cc;
 font-size: 10px;
}



.mock-filters {
 display: flex;
 gap: 5px;
 margin: 9px 0 20px;
}



.mock-filters i,
.source-pills i,
.export-tags i {
 padding: 5px 7px;
 border: 1px solid #25333e;
 border-radius: 5px;
 color: #778691;
 font-size: 7px;
 font-style: normal;
}



.mock-result {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--emerald);
 font-size: 9px;
}



.mock-result span {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--emerald);
 box-shadow: 0 0 9px var(--emerald);
}



.expand-visual {
 padding: 0;
}



.source-node {
 position: absolute;
 z-index: 2;
 display: grid;
 place-items: center;
 border: 1px solid #2a3944;
 border-radius: 9px;
 background: #111c25;
 color: #9ba8b1;
 font-size: 8px;
 font-weight: 750;
}



.main-node {
 top: 88px;
 left: calc(50% - 25px);
 width: 50px;
 height: 50px;
 border-color: var(--orange);
 background: rgba(255, 106, 26, 0.12);
 color: var(--orange-light);
}



.maps-node,
.web-node,
.social-node {
 width: 44px;
 height: 36px;
}



.maps-node {
 top: 35px;
 left: 30px;
}



.web-node {
 top: 35px;
 right: 30px;
}



.social-node {
 right: 38px;
 bottom: 28px;
 color: #6ca5d9;
}



.connector {
 position: absolute;
 z-index: 1;
 width: 80px;
 height: 1px;
 background: #293842;
 transform-origin: left;
}



.connector.one {
 top: 88px;
 left: 63px;
 transform: rotate(20deg);
}



.connector.two {
 top: 104px;
 left: 51%;
 transform: rotate(-42deg);
}



.connector.three {
 top: 130px;
 left: 51%;
 transform: rotate(33deg);
}



.verify-line {
 display: flex;
 justify-content: space-between;
 margin-bottom: 9px;
 padding: 11px;
 border: 1px solid #223039;
 border-radius: 7px;
 background: #0d161e;
 color: #86949e;
 font-size: 8px;
}



.verify-line b {
 color: var(--emerald);
}



.export-progress {
 height: 5px;
 margin: 24px 0 8px;
 overflow: hidden;
 border-radius: 5px;
 background: #1c2b31;
}



.export-progress span {
 display: block;
 width: 88%;
 height: 100%;
 border-radius: inherit;
 background: var(--emerald);
}



.verify-visual small {
 color: #74838d;
 font-size: 8px;
}



.features-section {
 background: var(--bg);
}



.feature-layout {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
}



.feature-layout > article {
 min-height: 265px;
 padding: 27px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: var(--surface);
}



.feature-layout > .feature-large {
 display: grid;
 grid-column: span 2;
 grid-template-columns: 0.8fr 1.2fr;
 gap: 30px;
 background:
   linear-gradient(145deg, rgba(255, 106, 26, 0.05), transparent 50%),
   var(--surface);
}



.feature-icon {
 display: grid;
 width: 38px;
 height: 38px;
 place-items: center;
 margin-bottom: 31px;
 border: 1px solid rgba(255, 106, 26, 0.25);
 border-radius: 9px;
 background: rgba(255, 106, 26, 0.08);
 color: var(--orange-light);
}



.feature-layout h3 {
 margin: 0 0 10px;
 font-size: 18px;
}



.feature-layout p {
 margin: 0;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.65;
}



.feature-layout a {
 display: inline-block;
 margin-top: 22px;
 color: var(--orange-light);
 font-size: 11px;
 font-weight: 750;
 text-decoration: none;
}



.feature-ui {
 align-self: center;
 padding: 18px;
 border: 1px solid #24323d;
 border-radius: 10px;
 background: #091017;
}



.ui-query {
 display: flex;
 justify-content: space-between;
 padding: 11px;
 border: 1px solid #31404b;
 border-radius: 6px;
 color: #aab6bd;
 font-size: 9px;
}



.ui-query span {
 color: var(--orange);
}



.ui-filter-line {
 display: grid;
 grid-template-columns: auto 1fr auto 1fr;
 gap: 7px;
 margin: 9px 0 17px;
 color: #64737d;
 font-size: 7px;
}



.ui-filter-line b {
 color: #aab4bb;
}



.ui-stats {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding-top: 12px;
 border-top: 1px solid #1d2a33;
 color: #75848e;
 font-size: 8px;
}



.ui-stats strong {
 color: #dbe1e4;
 font-size: 15px;
}



.ui-stats em {
 color: var(--emerald);
 font-style: normal;
}



.micro-proof,
.source-pills,
.export-tags {
 display: flex;
 gap: 6px;
 margin-top: 30px;
}



.micro-proof span,
.saved-credit {
 padding: 7px 9px;
 border-radius: 6px;
 background: var(--emerald-dim);
 color: var(--emerald);
 font-size: 8px;
}



.saved-credit {
 display: flex;
 justify-content: space-between;
 margin-top: 30px;
}



.saved-credit b {
 font-weight: 750;
}



.use-cases-section {
 background: #080d13;
}



.use-case-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 border-top: 1px solid var(--line);
 border-left: 1px solid var(--line);
}



.use-case-grid article {
 position: relative;
 min-height: 230px;
 padding: 30px;
 border-right: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 transition: background 180ms ease;
}



.use-case-grid article:hover {
 background: rgba(255, 255, 255, 0.018);
}



.use-case-grid article > span {
 color: var(--orange-light);
 font-size: 19px;
}



.use-case-grid small {
 position: absolute;
 top: 30px;
 right: 30px;
 color: #3b4852;
 font-family: ui-monospace, monospace;
}



.use-case-grid h3 {
 margin: 48px 0 10px;
 font-size: 17px;
}



.use-case-grid p {
 margin: 0;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.6;
}



.roi-section {
 background:
   radial-gradient(circle at 20% 40%, rgba(255, 106, 26, 0.06), transparent 24rem),
   var(--bg);
}



.roi-grid {
 display: grid;
 grid-template-columns: 0.9fr 1.1fr;
 gap: 90px;
 align-items: center;
}



.roi-copy > p {
 margin: 22px 0;
 color: var(--muted);
 line-height: 1.75;
}



.roi-copy blockquote {
 margin: 35px 0 0;
 padding: 20px 0 20px 20px;
 border-left: 2px solid var(--orange);
 color: #c0c8cd;
 font-size: 13px;
 font-style: italic;
 line-height: 1.7;
}



.roi-calculator {
 padding: 30px;
 border: 1px solid var(--line-bright);
 border-radius: 16px;
 background: var(--surface);
 box-shadow: var(--shadow);
}



.calculator-head {
 display: flex;
 justify-content: space-between;
 margin-bottom: 28px;
}



.calculator-head small {
 color: var(--orange-light);
 font-size: 8px;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}



.calculator-head h3 {
 margin: 5px 0 0;
 font-size: 19px;
}



.calculator-head > span {
 display: grid;
 width: 42px;
 height: 42px;
 place-items: center;
 border-radius: 50%;
 background: var(--emerald-dim);
 color: var(--emerald);
 font-size: 10px;
 font-weight: 850;
}



.roi-calculator label {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 10px;
 margin-top: 20px;
 color: #8e9ba5;
 font-size: 11px;
 font-weight: 650;
}



.roi-calculator output {
 color: #e3e8ea;
 font-weight: 750;
}



.roi-calculator input {
 width: 100%;
 grid-column: 1 / -1;
 accent-color: var(--orange);
}



.roi-result {
 display: grid;
 margin-top: 27px;
 padding: 22px;
 border: 1px solid rgba(50, 220, 157, 0.22);
 border-radius: 10px;
 background: var(--emerald-dim);
}



.roi-result small {
 color: #7da994;
 font-size: 9px;
 text-transform: uppercase;
}



.roi-result strong {
 margin: 5px 0;
 color: var(--emerald);
 font-size: 36px;
 letter-spacing: -0.04em;
}



.roi-result span {
 color: #789185;
 font-size: 9px;
}



.roi-calculator > p {
 margin: 13px 0 0;
 color: #58656f;
 font-size: 9px;
}



.trust-section {
 background: #080d13;
}



.trust-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
}



.trust-grid article {
 padding: 30px;
 border: 1px solid var(--line);
 border-radius: 15px;
 background: var(--surface);
}



.trust-icon {
 display: grid;
 width: 42px;
 height: 42px;
 place-items: center;
 margin-bottom: 28px;
 border: 1px solid rgba(50, 220, 157, 0.25);
 border-radius: 50%;
 background: var(--emerald-dim);
 color: var(--emerald);
}



.trust-grid article > span {
 color: var(--orange-light);
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}



.trust-grid h3 {
 margin: 8px 0 13px;
 font-size: 19px;
}



.trust-grid p {
 min-height: 92px;
 margin: 0;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.65;
}



.trust-grid ul {
 display: grid;
 gap: 9px;
 margin: 22px 0 0;
 padding: 17px 0 0;
 border-top: 1px solid var(--line);
 color: #9ba8b1;
 font-size: 10px;
 list-style: none;
}



.trust-grid li::before {
 margin-right: 8px;
 color: var(--emerald);
 content: "✓";
}



.faq-section {
 background: var(--bg);
}



.faq-layout {
 display: grid;
 grid-template-columns: 0.65fr 1.35fr;
 gap: 90px;
 align-items: start;
}



.faq-intro {
 position: sticky;
 top: 110px;
}



.faq-intro p {
 margin: 20px 0 26px;
 color: var(--muted);
 font-size: 13px;
 line-height: 1.7;
}



.faq-intro a {
 color: var(--orange-light);
 font-size: 12px;
 font-weight: 750;
 text-decoration: none;
}



.faq-list {
 border-top: 1px solid var(--line);
}



.faq-list details {
 border-bottom: 1px solid var(--line);
}



.faq-list summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 padding: 23px 0;
 color: #dce2e5;
 cursor: pointer;
 font-size: 14px;
 font-weight: 680;
 list-style: none;
}



.faq-list summary::-webkit-details-marker {
 display: none;
}



.faq-list summary span {
 color: var(--orange-light);
 font-size: 20px;
 font-weight: 400;
 transition: transform 180ms ease;
}



.faq-list details[open] summary span {
 transform: rotate(45deg);
}



.faq-list details p {
 max-width: 650px;
 margin: -5px 45px 23px 0;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.75;
}



.final-cta-section {
 padding: 105px 24px;
 background:
   linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
   radial-gradient(circle at center, rgba(255, 106, 26, 0.1), transparent 30rem),
   #080d13;
 background-size: 44px 44px, 44px 44px, auto, auto;
}



.final-cta-inner {
 max-width: 850px;
 margin: 0 auto;
 text-align: center;
}



.final-cta-inner h2 {
 margin: 14px 0 18px;
 font-size: clamp(39px, 6vw, 64px);
 letter-spacing: -0.055em;
 line-height: 1;
}



.final-cta-inner > p {
 margin: 0 auto 28px;
 color: var(--muted);
 font-size: 16px;
}



.final-trust {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 12px 20px;
 margin-top: 22px;
 color: #6d7a84;
 font-size: 10px;
}



.final-trust span::first-letter {
 color: var(--emerald);
}



.site-footer {
 padding: 68px 0 25px;
 border-top: 1px solid var(--line);
 background: #05090d;
}



.footer-grid {
 display: grid;
 grid-template-columns: 2fr repeat(3, 1fr);
 gap: 60px;
}



.footer-grid > div {
 display: grid;
 align-content: start;
 justify-items: start;
 gap: 13px;
}



.footer-grid p {
 max-width: 320px;
 margin: 8px 0 0;
 color: #66737e;
 font-size: 11px;
 line-height: 1.7;
}



.footer-grid strong {
 margin-bottom: 5px;
 color: #cdd4d8;
 font-size: 11px;
}



.footer-grid > div > a:not(.brand) {
 color: #697680;
 font-size: 10px;
 text-decoration: none;
}



.footer-grid > div > a:hover {
 color: #fff;
}



.footer-bottom {
 display: flex;
 justify-content: space-between;
 margin-top: 60px;
 padding-top: 23px;
 border-top: 1px solid var(--line);
 color: #46535d;
 font-size: 9px;
}



.mobile-sticky-cta {
 display: none;
}



.scroll-top {
 position: fixed;
 z-index: 95;
 right: 22px;
 bottom: 22px;
 display: grid;
 width: 46px;
 height: 46px;
 place-items: center;
 border: 1px solid #2b3944;
 border-radius: 50%;
 background: rgba(12, 18, 25, 0.94);
 color: var(--orange-light);
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
 backdrop-filter: blur(16px);
 cursor: pointer;
 opacity: 0;
 pointer-events: none;
 transform: translateY(12px);
 transition:
   opacity 200ms ease,
   transform 200ms ease,
   border-color 180ms ease,
   background 180ms ease,
   box-shadow 180ms ease;
}



.scroll-top.is-visible {
 opacity: 1;
 pointer-events: auto;
 transform: translateY(0);
}



.scroll-top:hover {
 border-color: rgba(255, 106, 26, 0.55);
 background: #121a22;
 box-shadow:
   0 16px 40px rgba(0, 0, 0, 0.45),
   0 0 24px rgba(255, 106, 26, 0.16);
 transform: translateY(-3px);
}



.scroll-top:focus-visible {
 outline: 3px solid rgba(255, 106, 26, 0.55);
 outline-offset: 3px;
}



.scroll-top svg {
 width: 20px;
 height: 20px;
 fill: none;
 stroke: currentColor;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-width: 1.85;
}



@media (max-width: 1050px) {
 .hero-grid {
   grid-template-columns: 1fr;
   gap: 20px;
 }



 .hero-copy {
   max-width: 780px;
   padding-bottom: 25px;
 }



 .dashboard-wrap {
   width: min(750px, 100%);
   margin: 0 auto;
 }



 .nav-links {
   gap: 18px;
 }



 .feature-layout {
   grid-template-columns: repeat(2, 1fr);
 }



 .feature-layout > .feature-large {
   grid-column: span 2;
 }
}



@media (max-width: 800px) {
 .content-shell,
 .nav-shell,
 .hero-grid,
 .hero-trust,
 .footer-grid,
 .footer-bottom {
   width: min(100% - 32px, 650px);
 }



 .nav-shell {
   height: 64px;
 }



 .nav-cta {
   display: none;
 }



 .menu-toggle {
   display: block;
   margin-left: auto;
 }



 .nav-links {
   position: absolute;
   top: 63px;
   right: 16px;
   left: 16px;
   display: none;
   padding: 16px;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: rgba(9, 15, 21, 0.98);
   box-shadow: var(--shadow);
 }



 .nav-links.is-open {
   display: grid;
 }



 .nav-links a {
   padding: 11px;
 }



 .hero {
   padding-top: 115px;
 }



 .hero h1 {
   font-size: clamp(44px, 11vw, 64px);
 }



 .hero-trust {
   grid-template-columns: repeat(2, 1fr);
 }



 .hero-trust > div:nth-child(2) {
   border-right: 0;
 }



 .hero-trust > div:nth-child(-n + 2) {
   border-bottom: 1px solid var(--line);
 }



 .proof-section,
 .comparison-section,
 .how-section,
 .features-section,
 .use-cases-section,
 .roi-section,
 .trust-section,
 .faq-section {
   padding: 78px 0;
 }



 .proof-grid,
 .comparison-grid,
 .steps-grid,
 .trust-grid {
   grid-template-columns: 1fr;
 }



 .split-heading,
 .roi-grid,
 .faq-layout {
   grid-template-columns: 1fr;
   gap: 32px;
 }



 .comparison-grid article {
   min-height: 0;
 }



 .feature-layout,
 .feature-layout > .feature-large {
   grid-template-columns: 1fr;
 }



 .feature-layout > .feature-large {
   grid-column: span 1;
 }



 .use-case-grid {
   grid-template-columns: repeat(2, 1fr);
 }



 .faq-intro {
   position: static;
 }



 .footer-grid {
   grid-template-columns: 1.6fr 1fr 1fr;
 }



 .footer-grid > div:first-child {
   grid-column: 1 / -1;
 }
}



@media (max-width: 520px) {
 .hero-copy > p {
   font-size: 15px;
 }



 .hero-actions {
   display: grid;
 }



 .primary-cta,
 .secondary-cta {
   width: 100%;
 }



 .dashboard-wrap {
   margin-right: -30px;
   width: calc(100% + 30px);
 }



 .dashboard-window {
   transform: none;
 }



 .dashboard-body {
   grid-template-columns: 72px 1fr;
   min-height: 290px;
 }



 .dash-sidebar {
   padding-inline: 6px;
 }



 .dash-sidebar span {
   padding: 7px 4px;
 }



 .dash-sidebar b {
   display: none;
 }



 .dash-main {
   padding: 14px;
 }



 .filter-row span:nth-child(3),
 .table-row > span:nth-child(2),
 .table-head > span:nth-child(2) {
   display: none;
 }



 .table-row {
   grid-template-columns: 1.4fr 0.6fr;
 }



 .float-card {
   display: none;
 }



 .hero-trust {
   grid-template-columns: 1fr;
 }



 .hero-trust > div {
   border-right: 0;
   border-bottom: 1px solid var(--line);
 }



 .proof-section h2 {
   font-size: 33px;
 }



 .audience-bar {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
 }



 .split-heading h2,
 .center-heading h2,
 .roi-copy h2,
 .faq-intro h2 {
   font-size: 36px;
 }



 .comparison-grid article {
   padding: 25px 20px;
 }



 .flow-line {
   padding-inline: 11px;
   font-size: 7px;
 }



 .feature-ui {
   padding: 12px;
 }



 .use-case-grid {
   grid-template-columns: 1fr;
 }



 .roi-calculator {
   padding: 23px 20px;
 }



 .final-cta-section {
   padding: 80px 16px 110px;
 }



 .footer-grid {
   grid-template-columns: repeat(2, 1fr);
   gap: 35px;
 }



 .footer-grid > div:first-child {
   grid-column: 1 / -1;
 }



 .footer-bottom {
   display: grid;
   gap: 8px;
 }



 .mobile-sticky-cta {
   position: fixed;
   z-index: 90;
   right: 12px;
   bottom: 12px;
   left: 12px;
   display: flex;
   min-height: 50px;
   align-items: center;
   justify-content: center;
   gap: 18px;
   border-radius: 9px;
   background: linear-gradient(135deg, #ff7c34, var(--orange-dark));
   color: #fff;
   box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
   font-size: 12px;
   font-weight: 800;
   text-decoration: none;
   transition: transform 180ms ease;
 }



 .mobile-sticky-cta.is-hidden {
   transform: translateY(80px);
 }



 .scroll-top {
   right: 16px;
   bottom: 22px;
 }



 .scroll-top.is-above-cta {
   bottom: 76px;
 }
}



@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
   scroll-behavior: auto !important;
   animation-duration: 0.01ms !important;
   animation-iteration-count: 1 !important;
   transition-duration: 0.01ms !important;
 }
}

#app {
 min-height: 100vh;
 background: var(--bg);
 color: var(--text);
 overflow-x: hidden;
}

body.font-sans {
 font-family:
   Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
   sans-serif;
}

.blog-page-main {
 position: relative;
 z-index: 1;
 padding: 128px 0 80px;
 min-height: 70vh;
 background:
   radial-gradient(circle at 72% 8%, rgba(255, 106, 26, 0.08), transparent 28rem),
   linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
 background-size: auto, 54px 54px, 54px 54px;
}

.blog-hero {
 max-width: 760px;
 margin: 0 auto 48px;
 text-align: center;
}

.blog-hero h1 {
 margin: 13px 0 0;
 font-size: clamp(34px, 4.5vw, 52px);
 letter-spacing: -0.051em;
 line-height: 1.04;
}

.blog-hero p {
 max-width: 590px;
 margin: 18px auto 0;
 color: var(--muted);
 font-size: 14px;
 line-height: 1.7;
}

.blog-filters,
.blog-tags,
.blog-pagination,
.blog-share {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.blog-filters {
 justify-content: center;
 margin-bottom: 36px;
}

.blog-chip,
.blog-page-link,
.blog-share-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 36px;
 padding: 0 14px;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: rgba(12, 18, 25, 0.88);
 color: #9aa7b1;
 font-size: 12px;
 font-weight: 650;
 text-decoration: none;
 transition:
   color 160ms ease,
   border-color 160ms ease,
   background 160ms ease;
}

.blog-chip:hover,
.blog-page-link:hover,
.blog-share-btn:hover {
 color: #fff;
 border-color: var(--line-bright);
}

.blog-chip.is-active,
.blog-page-link.is-active {
 border-color: rgba(255, 106, 26, 0.45);
 background: rgba(255, 106, 26, 0.12);
 color: var(--orange-light);
}

.blog-page-link.is-disabled {
 opacity: 0.4;
 pointer-events: none;
}

.blog-filter-note,
.blog-empty {
 color: var(--muted);
 font-size: 13px;
 text-align: center;
}

.blog-empty {
 margin: 20px auto;
 padding: 42px 24px;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: var(--surface);
}

.blog-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
}

.blog-card {
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: var(--surface);
 transition:
   transform 200ms ease,
   border-color 200ms ease;
}

.blog-card:hover {
 transform: translateY(-4px);
 border-color: var(--line-bright);
}

.blog-card.compact {
 display: grid;
 color: inherit;
 text-decoration: none;
}

.blog-card-media,
.blog-card img,
.blog-card-placeholder {
 display: block;
 width: 100%;
 height: 176px;
 object-fit: cover;
 background: #091017;
}

.blog-card-placeholder.short,
.blog-card.compact img {
 height: 120px;
}

.blog-card-body {
 display: grid;
 gap: 10px;
 padding: 20px 18px 18px;
}

.blog-card-body h2,
.blog-card-body h3,
.blog-article-title {
 margin: 0;
 color: #fbfcfc;
 letter-spacing: -0.025em;
}

.blog-card-body h2 {
 font-size: 18px;
}

.blog-card-body h3 {
 font-size: 16px;
}

.blog-card-body p,
.blog-article-excerpt {
 margin: 0;
 color: var(--muted);
 font-size: 13px;
 line-height: 1.65;
}

.blog-card-body a,
.blog-breadcrumb a,
.blog-category {
 text-decoration: none;
}

.blog-category {
 display: inline-flex;
 width: fit-content;
 padding: 4px 9px;
 border-radius: 999px;
 background: rgba(255, 106, 26, 0.12);
 color: var(--orange-light);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.blog-card-meta,
.blog-article-meta,
.blog-breadcrumb,
.blog-read-time,
.blog-author-copy {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 color: #6d7a84;
 font-size: 11px;
}

.blog-card-meta {
 justify-content: space-between;
 padding-top: 8px;
}

.blog-read-time {
 margin-left: auto;
}

.blog-avatar {
 display: grid;
 width: 28px;
 height: 28px;
 place-items: center;
 border-radius: 50%;
 background: #202f3a;
 color: #cfd6da;
 font-size: 9px;
 font-weight: 800;
}

.blog-avatar.large {
 width: 42px;
 height: 42px;
 font-size: 11px;
}

.blog-pagination {
 justify-content: center;
 margin-top: 42px;
}

.blog-article {
 max-width: 760px;
 margin: 0 auto;
}

.blog-breadcrumb {
 margin-bottom: 22px;
}

.blog-breadcrumb a {
 color: #9aa7b1;
}

.blog-breadcrumb a:hover {
 color: var(--orange-light);
}

.blog-article-title {
 margin: 18px 0 0;
 font-size: clamp(34px, 5vw, 52px);
 letter-spacing: -0.051em;
 line-height: 1.04;
}

.blog-article-excerpt {
 margin-top: 16px;
 font-size: 16px;
}

.blog-article-meta {
 margin-top: 22px;
 font-size: 12px;
}

.blog-author-name {
 color: #eef2f3;
 font-weight: 650;
}

.blog-article-image {
 width: 100%;
 margin-top: 32px;
 border: 1px solid var(--line);
 border-radius: 16px;
 object-fit: cover;
}

.blog-tags {
 margin-top: 32px;
}

.blog-author-box,
.blog-cta {
 margin-top: 42px;
 padding: 26px;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: var(--surface);
}

.blog-author-box {
 display: flex;
 flex-wrap: wrap;
 gap: 18px;
 align-items: center;
 justify-content: space-between;
}

.blog-author-copy p {
 margin: 0;
 color: #fff;
 font-size: 15px;
 font-weight: 650;
}

.blog-author-copy small {
 color: var(--muted);
 font-size: 12px;
}

.blog-share-btn {
 background: #121c25;
 cursor: pointer;
 font: inherit;
}

.blog-related {
 max-width: 760px;
 margin: 56px auto 0;
}

.blog-related h2 {
 margin: 12px 0 22px;
 font-size: 28px;
 letter-spacing: -0.03em;
}

.blog-related-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 14px;
}

.blog-cta {
 text-align: center;
 background:
   linear-gradient(145deg, rgba(255, 106, 26, 0.08), transparent 50%),
   var(--surface);
}

.blog-cta h2 {
 margin: 12px 0 10px;
 font-size: clamp(28px, 4vw, 40px);
 letter-spacing: -0.04em;
}

.blog-cta p {
 margin: 0 auto 22px;
 color: var(--muted);
 max-width: 520px;
}

.blog-cta .hero-actions {
 justify-content: center;
}

@media (max-width: 900px) {
 .blog-grid,
 .blog-related-grid {
   grid-template-columns: 1fr;
   width: min(580px, 100%);
   margin-inline: auto;
 }
}

@media (max-width: 520px) {
 .blog-page-main {
   padding: 108px 0 64px;
 }

 .blog-hero h1,
 .blog-article-title {
   font-size: 36px;
 }
}