:root {
    --black: #0a0a0a;
    --surface: #131513;
    --surface-2: #191c19;
    --surface-3: #0e100e;
    --line: #262a26;
    --line-soft: #1c1f1c;
    --accent: #7df49a;
    --accent-dim: #4f9c67;
    --accent-soft: rgba(125, 244, 154, 0.1);
    --accent-border: rgba(125, 244, 154, 0.3);
    --text: #f1f3f1;
    --text-muted: #8c948d;
    --text-faint: #5c635d;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* {
    box-sizing: border-box;
}
 html {
     scroll-behavior: smooth;
}
 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
    }
     *, *::before, *::after {
         animation-duration: 0.01ms !important;
         transition-duration: 0.01ms !important;
    }
}
body {
    margin: 0;
    background: #070907;
    color: var(--text);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
 a {
     color: inherit;
     text-decoration: none;
}
 h1, h2, h3 {
     margin: 0;
     font-weight: 700;
     letter-spacing: -0.02em;
}
 p {
     margin: 0;
     color: var(--text-muted);
}
 ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
 img, svg {
     display: block;
     max-width: 100%;
}
 :focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 3px;
}
 .reveal {
     opacity: 0;
     transform: translateY(16px);
     transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
 .reveal.in-view {
     opacity: 1;
     transform: translateY(0);
}
 .glow {
     position: fixed;
     top: -20%;
     left: 50%;
     transform: translateX(-50%);
     width: 60vw;
     height: 60vw;
     max-width: 900px;
     max-height: 900px;
     background: radial-gradient(circle, rgba(125, 244, 154, 0.1) 0%, rgba(125, 244, 154, 0) 65%);
     pointer-events: none;
     z-index: 0;
}
 .glow-secondary {
     position: fixed;
     bottom: -15%;
     right: -12%;
     width: 50vw;
     height: 50vw;
     max-width: 700px;
     max-height: 700px;
     background: radial-gradient(circle, rgba(125, 244, 154, 0.06) 0%, rgba(125, 244, 154, 0) 65%);
     pointer-events: none;
     z-index: 0;
}
.site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
      radial-gradient(1100px 700px at 50% -180px, rgba(125,244,154,0.15), transparent 70%),
      radial-gradient(900px 900px at -280px 42%, rgba(125,244,154,0.07), transparent 70%),
      radial-gradient(1100px 800px at 110% 108%, rgba(125,244,154,0.10), transparent 70%),
      #070907;
}
.site-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    will-change: transform, opacity;
}
.site-orb-top {
    width: 1100px;
    height: 700px;
    left: 50%;
    top: -320px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(125,244,154,0.15), transparent 70%);
    animation: orbTop 18s ease-in-out infinite alternate;
}
.site-orb-mid {
    width: 900px;
    height: 900px;
    left: -320px;
    top: 38%;
    background: radial-gradient(closest-side, rgba(125,244,154,0.06), transparent 70%);
    animation: orbMid 22s ease-in-out infinite alternate;
}
.site-orb-bot {
    width: 1100px;
    height: 800px;
    right: -340px;
    bottom: -360px;
    background: radial-gradient(closest-side, rgba(125,244,154,0.09), transparent 70%);
    animation: orbBot 20s ease-in-out infinite alternate;
}
@keyframes orbTop {
    0% { transform: translateX(-50%) translateY(0); opacity: 1; }
    100% { transform: translateX(calc(-50% + 40px)) translateY(30px); opacity: 0.85; }
}
@keyframes orbMid {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(50px, -30px); opacity: 0.8; }
}
@keyframes orbBot {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(-40px, -30px); opacity: 0.85; }
}
.site-beam {
    position: absolute;
    left: -20%;
    right: -20%;
    background: linear-gradient(90deg, transparent, rgba(214,255,224,0.045) 30%, rgba(125,244,154,0.07) 50%, transparent 70%);
    filter: blur(30px);
    transform: rotate(-12deg);
    will-change: transform, opacity;
    animation: beamDrift 16s ease-in-out infinite alternate;
}
.site-beam-1 { top: 6%; height: 300px; opacity: 0.9; }
.site-beam-2 { top: 42%; height: 380px; opacity: 0.5; animation-duration: 21s; animation-delay: -7s; }
@keyframes beamDrift {
    0% { transform: rotate(-12deg) translateY(0); }
    100% { transform: rotate(-12deg) translateY(28px); }
}
.site-grain {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
    .site-orb-top, .site-orb-mid, .site-orb-bot, .site-beam {
        animation: none;
    }
}
body main,
body .nav,
body .footer {
    position: relative;
    z-index: 1;
}
section.hero.haunt-hero {
    background: transparent;
    border-bottom-color: transparent;
}
body .footer {
    background-color: transparent;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    border-top: 1px solid rgba(255,255,255,0.06);
}
 .nav {
     position: sticky;
     top: 0;
     z-index: 20;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 24px;
}
 .nav-inner {
     margin-top: 16px;
     width: 100%;
     max-width: 1040px;
     padding: 10px 10px 10px 22px;
     border-radius: 100px;
     background: rgba(19, 21, 19, 0.72);
     border: 1px solid var(--line);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7);
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
 .nav-inner.scrolled {
     background: rgba(15, 17, 15, 0.88);
     border-color: rgba(125, 244, 154, 0.22);
     box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.85);
     transform: translateY(-1px) scale(0.99);
}
 .logo {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-weight: 700;
     font-size: 1.05rem;
     letter-spacing: -0.01em;
}
 .logo-img {
     height: 28px;
     width: auto;
     display: block;
}
 .nav-links {
     display: flex;
     align-items: center;
     gap: 28px;
}
 .nav-links a {
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--text-muted);
     transition: color 0.25s var(--ease);
}
 .nav-links a:hover {
     color: var(--text);
}
 .nav-right {
     display: flex;
     align-items: center;
     gap: 18px;
}
 .nav-signin {
     font-size: 0.88rem;
     font-weight: 600;
     color: var(--text);
     transition: color 0.25s var(--ease);
}
 .nav-signin:hover {
     color: var(--accent);
}
 .btn.nav-cta {
     padding: 10px 22px;
     font-size: 0.88rem;
}
 .nav-toggle {
     display: none;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1px solid var(--line);
     background: var(--surface-2);
     color: var(--text);
     cursor: pointer;
     transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
 .nav-toggle svg, .nav-toggle .lucide {
     width: 18px;
     height: 18px;
}
 .nav-toggle:hover {
     border-color: var(--accent);
     color: var(--accent);
}
 .mobile-menu {
     width: 100%;
     max-width: 1040px;
     margin-top: 8px;
     padding: 14px 18px 18px;
     border-radius: 24px;
     background: rgba(15, 17, 15, 0.94);
     border: 1px solid var(--line);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.85);
     display: flex;
     flex-direction: column;
     gap: 4px;
}
 .mobile-menu[hidden] {
     display: none;
}
 .mobile-menu a {
     padding: 12px 4px;
     font-size: 0.95rem;
     font-weight: 500;
     color: var(--text);
     border-bottom: 1px solid var(--line-soft);
}
 .mobile-menu a.btn {
     margin-top: 10px;
     border-bottom: none;
}
 main {
     position: relative;
     z-index: 1;
}
 section {
     max-width: 1120px;
     margin: 0 auto;
     padding: 100px 24px;
     scroll-margin-top: 96px;
}
.section-head {
    max-width: 620px;
}
 .section-head h2 {
     font-size: clamp(1.6rem, 3vw, 2.15rem);
}
.section-head h3 {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    text-align: center;
}
 .section-head p {
     margin-top: 14px;
     font-size: 1.02rem;
     max-width: 540px;
}
 .section-head-center {
     max-width: 560px;
     margin: 0 auto;
     text-align: center;
}
 .section-head-center p {
     margin-left: auto;
     margin-right: auto;
}
 .divider {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 18px;
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 24px;
}
 .divider-line {
     flex: 1;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--line) 50%, transparent);
}
 .divider-mark {
     width: 8px;
     height: 8px;
     border-radius: 2px;
     background: var(--accent-dim);
     transform: rotate(45deg);
     flex-shrink: 0;
     opacity: 0.8;
}
 .section-intro {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 18px;
     max-width: 560px;
     margin: 0 auto 48px;
}
 .intro-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--surface-2);
     border: 1px solid var(--line);
     color: var(--accent);
}
 .intro-icon svg, .intro-icon .lucide {
     width: 19px;
     height: 19px;
}
 .section-intro h2 {
     font-size: clamp(1.6rem, 3vw, 2.15rem);
}
 .section-intro p {
     font-size: 1.02rem;
}
 .hero {
     padding-top: 68px;
     padding-bottom: 88px;
}
 .hero-inner {
     display: grid;
     grid-template-columns: 1fr 1.05fr;
     gap: 48px;
     align-items: center;
}
 .hero-text h1 {
     font-size: clamp(2.2rem, 4.2vw, 3.5rem);
     line-height: 1.1;
     max-width: 560px;
     font-weight: 800;
     letter-spacing: -0.03em;
}
 .hero-sub {
     margin-top: 22px;
     font-size: 1.08rem;
     max-width: 460px;
     color: var(--text-muted);
}
 .hero-actions {
     margin-top: 34px;
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
}
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 13px 26px;
     border-radius: 100px;
     font-size: 0.95rem;
     font-weight: 600;
     border: 1px solid transparent;
     transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
 .btn-primary {
     background: var(--accent);
     color: #06140b;
}
 .btn-primary:hover {
     background: #93f7ab;
     transform: translateY(-1px);
}
 .btn:active {
     transform: scale(0.97);
}
 .btn-ghost {
     background-color: #1a1a1a;
     border-color: #333333;
     color: #ffffff;
     font-weight: 500;
}
 .btn-ghost:hover {
     border-color: var(--accent);
     color: var(--accent);
}
 .hero-meta {
     display: flex;
     gap: 40px;
     margin-top: 52px;
}
 .meta-item {
     display: flex;
     flex-direction: column;
     gap: 4px;
}
 .meta-num {
     font-size: 1.15rem;
     font-weight: 700;
     color: var(--accent);
}
 .meta-label {
     font-size: 0.85rem;
     color: var(--text-muted);
}
 .hero-visual {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
}
 .browser-frame {
     width: 360px;
     max-width: 100%;
     border-radius: 22px;
     border: 1px solid var(--line);
     background: var(--surface);
     padding: 16px;
     box-shadow: 0 50px 90px -36px rgba(0, 0, 0, 0.75);
     perspective: 900px;
}
 .preview-window {
     display: block;
     overflow: hidden;
     padding: 0;
     background: #0c0d10;
     border-color: #2b312c;
     animation: settle 1.1s var(--ease-out) both;
     transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
     will-change: transform;
}
 .preview-window:hover {
     border-color: rgba(125, 244, 154, 0.45);
     box-shadow: 0 50px 90px -36px rgba(0, 0, 0, 0.8), 0 0 40px -12px rgba(125, 244, 154, 0.25);
}
 @keyframes settle {
     0% {
         opacity: 0;
         transform: translateY(18px) rotate(1deg);
    }
     100% {
         opacity: 1;
         transform: translateY(0) rotate(0deg);
    }
}
 .browser-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.025);
 }
 .browser-dots {
     display: inline-flex;
     gap: 6px;
     flex-shrink: 0;
}
 .browser-dot {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: var(--line);
}
 .browser-dot:nth-child(1) {
     background: #f0505a;
     opacity: 0.85;
}
 .browser-dot:nth-child(2) {
     background: #f0b94e;
     opacity: 0.85;
}
 .browser-dot:nth-child(3) {
     background: #5ee89c;
     opacity: 0.85;
}
 .browser-url {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 0.74rem;
      line-height: 1.2;
      color: var(--text-muted);
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid var(--line-soft);
      border-radius: 100px;
      padding: 3px 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
 }
 .browser-url strong {
     color: var(--text);
     font-weight: 700;
}
 .url-lock {
     margin-right: 6px;
     color: var(--accent);
     font-size: 0.7rem;
}
 .preview-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 0.64rem;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: 100px;
      padding: 3px 9px;
      flex-shrink: 0;
 }
 .preview-live span {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 8px var(--accent);
     animation: previewPulse 2s ease-in-out infinite;
}
 @keyframes previewPulse {
     0%, 100% {
         opacity: 1;
    }
     50% {
         opacity: 0.35;
    }
}
 .preview-shot {
     width: 100%;
     max-width: 540px;
}
 .preview-shot-body {
     position: relative;
     aspect-ratio: 16 / 10;
     overflow: hidden;
     background: #060607;
     border-radius: 0 0 21px 21px;
}
 .preview-shot-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top center;
     display: block;
     transform: scale(1.01);
     transition: transform 0.6s var(--ease-out);
}
 .preview-window:hover .preview-shot-img {
     transform: scale(1.04);
}
 .preview-shot-fade {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 90px;
     background: linear-gradient(180deg, transparent, rgba(6, 6, 7, 0.9));
     pointer-events: none;
}
 .preview-caption {
     font-family: var(--mono);
     font-size: 0.72rem;
     color: var(--text-faint);
}
 .preview-caption span {
     color: var(--accent);
}
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
}
 .stat-card {
     padding: 30px 26px;
     border-radius: 20px;
     border: 1px solid var(--line);
     background: var(--surface);
     display: flex;
     flex-direction: column;
     gap: 14px;
     transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
 .stat-card:hover {
     transform: translateY(-3px);
     border-color: rgba(125, 244, 154, 0.3);
}
 .stat-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: var(--accent-soft);
     color: var(--accent);
}
 .stat-icon svg, .stat-icon .lucide {
     width: 18px;
     height: 18px;
}
 .stat-value {
     font-size: 1.7rem;
     font-weight: 800;
     letter-spacing: -0.02em;
}
 .stat-card p {
     font-size: 0.92rem;
}
 .steps {
     margin-top: 48px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
}
 .step {
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding-top: 20px;
     border-top: 1px solid var(--line);
     transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
 .step:hover {
     border-color: var(--accent-dim);
     transform: translateY(-3px);
}
 .step-num {
     font-size: 0.85rem;
     color: var(--accent);
     font-weight: 700;
     transition: color 0.3s var(--ease);
}
 .step h3 {
     font-size: 1.05rem;
}
 .step p {
     font-size: 0.92rem;
}
 .feature-grid {
     margin-top: 48px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
}
 .feature-card {
     padding: 28px 24px;
     border-radius: 18px;
     border: 1px solid var(--line);
     background: var(--surface);
     display: flex;
     flex-direction: column;
     gap: 16px;
     transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
 .feature-card:hover {
     transform: translateY(-3px);
     border-color: rgba(125, 244, 154, 0.28);
     background: var(--surface-2);
}
 .feature-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: var(--accent-soft);
     color: var(--accent);
}
 .feature-icon svg, .feature-icon .lucide {
     width: 19px;
     height: 19px;
}
 .feature-card h3 {
     font-size: 1.02rem;
}
 .feature-card p {
     font-size: 0.9rem;
}
 .compare-grid {
     margin-top: 48px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
}
 .compare-card {
     padding: 30px 28px;
     border-radius: 18px;
     border: 1px solid var(--line);
     background: var(--surface);
}
 .compare-typical {
     opacity: 0.72;
}
 .compare-viax {
     border-color: rgba(125, 244, 154, 0.35);
     background: linear-gradient(180deg, #1d221d, #151815);
}
 .compare-tag {
     display: inline-block;
     font-size: 0.8rem;
     font-weight: 700;
     color: var(--text-muted);
     padding: 5px 14px;
     border-radius: 100px;
     border: 1px solid var(--line);
}
 .compare-tag-accent {
     color: var(--accent);
     background: var(--accent-soft);
     border-color: var(--accent-border);
}
 .compare-list {
     margin-top: 22px;
     display: flex;
     flex-direction: column;
     gap: 14px;
}
 .compare-list li {
     font-size: 0.92rem;
     color: var(--text-muted);
     padding-left: 26px;
     position: relative;
}
 .compare-typical .compare-list li::before {
     content: "";
     position: absolute;
     left: 2px;
     top: 10px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--text-faint);
}
 .compare-viax .compare-list li {
     color: #c6ccc7;
}
 .compare-viax .compare-list li::before {
     content: "\2713";
     position: absolute;
     left: 0;
     top: 0;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: var(--accent-soft);
     border: 1px solid var(--accent-border);
     color: var(--accent);
     font-size: 0.62rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
}
 @media (max-width: 640px) {
     .compare-grid {
         grid-template-columns: 1fr;
    }
}
 .order-sub {
     margin-top: 14px;
     max-width: 560px;
     font-size: 1.02rem;
}
 .order-grid {
     margin-top: 44px;
     display: grid;
     grid-template-columns: 1.05fr 0.95fr;
     gap: 22px;
     align-items: start;
}
 .plan-single {
     position: relative;
     border: 1px solid #2e3530;
     border-radius: 24px;
     overflow: hidden;
     background: var(--surface);
     box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
     transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
 .plan-single:hover {
     transform: translateY(-4px);
     box-shadow: 0 48px 90px -36px rgba(0, 0, 0, 0.85);
}
 .plan-single::before, .handles-window::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
     opacity: 0.7;
     pointer-events: none;
}
 .package-window {
     position: relative;
}
 .handles-window {
     position: relative;
     border: 1px solid #2e3530;
     border-radius: 24px;
     overflow: hidden;
     background: var(--surface-3);
     box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
     padding: 32px 30px 30px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
 .handles-window:hover {
     transform: translateY(-4px);
     box-shadow: 0 48px 90px -36px rgba(0, 0, 0, 0.85);
}
 .plan-single-main {
     padding: 40px;
     background: linear-gradient(180deg, rgba(125, 244, 154, 0.04), transparent 40%);
}
 .plan-single-main h3 {
     font-size: 1.6rem;
     letter-spacing: -0.02em;
}
 .plan-desc {
     margin-top: 14px;
     font-size: 0.98rem;
     max-width: 380px;
}
 .plan-list {
     margin-top: 24px;
     display: flex;
     flex-direction: column;
     gap: 12px;
}
 .plan-list li {
     font-size: 0.92rem;
     color: #c6ccc7;
     padding-left: 30px;
     position: relative;
}
 .plan-list-check li::before {
     content: "\2713";
     position: absolute;
     left: 0;
     top: 0;
     width: 19px;
     height: 19px;
     border-radius: 50%;
     background: var(--accent-soft);
     border: 1px solid var(--accent-border);
     color: var(--accent);
     font-size: 0.65rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
}
 .plan-price-row {
     margin-top: 22px;
     padding-top: 22px;
     border-top: 1px dashed var(--line);
     display: flex;
     flex-direction: column;
     gap: 6px;
}
 .plan-price {
     font-size: 3.2rem;
     font-weight: 800;
     color: var(--text);
     line-height: 1;
     letter-spacing: -0.03em;
     display: flex;
     align-items: baseline;
}
 .plan-currency {
     font-size: 1.6rem;
     color: var(--accent);
     margin-left: 2px;
     font-weight: 700;
}
 .plan-per {
     font-size: 1.05rem;
     font-weight: 600;
     color: var(--text-muted);
     margin-left: 8px;
     letter-spacing: 0;
}
 .plan-once {
     font-size: 0.9rem;
     color: var(--text-muted);
}
 .btn-full {
     width: 100%;
     margin-top: 20px;
     padding: 15px 26px;
     font-weight: 700;
}
 .checkout-note {
     margin-top: 12px;
     font-size: 0.85rem;
     color: #f4a86a;
     text-align: center;
}
 .checkout-note[hidden] {
     display: none;
}
 .side-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     margin-bottom: 2px;
}
 .side-title {
     font-size: 0.95rem;
     font-weight: 700;
}
 .side-count {
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--accent);
     background: var(--accent-soft);
     border: 1px solid var(--accent-border);
     padding: 5px 12px;
     border-radius: 100px;
     white-space: nowrap;
}
 .stub {
     position: relative;
     width: 100%;
     background: var(--surface-2);
     border: 1px solid var(--line);
     border-radius: 16px;
     padding: 18px 18px 16px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
 .stub:hover {
     border-color: rgba(125, 244, 154, 0.4);
}
 .stub-primary {
     border-color: rgba(125, 244, 154, 0.35);
     background: linear-gradient(180deg, #1d221d, #151815);
}
 .stub-extra {
     border-style: dashed;
     animation: stubIn 0.4s var(--ease) both;
}
 .stub-extra.stub-exit {
     animation: stubOut 0.25s var(--ease) forwards;
}
 @keyframes stubIn {
     0% {
         opacity: 0;
         transform: translateY(-6px) scale(0.96);
    }
     100% {
         opacity: 1;
         transform: translateY(0) scale(1);
    }
}
 @keyframes stubOut {
     0% {
         opacity: 1;
         transform: scale(1);
    }
     100% {
         opacity: 0;
         transform: scale(0.94);
    }
}
 .extra-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
}
 .extra-list:empty {
     display: none;
}
 .stub-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding-right: 24px;
}
 .stub-label {
     font-size: 0.78rem;
     color: var(--text-muted);
}
 .stub-price {
     font-size: 0.78rem;
     color: var(--accent);
     white-space: nowrap;
     font-weight: 700;
}
 .stub-price-free {
     color: var(--accent);
}
 .stub-input-row {
     display: flex;
     align-items: center;
     gap: 2px;
     border-bottom: 1px solid var(--line);
     padding-bottom: 8px;
     transition: border-color 0.25s var(--ease);
}
 .stub-input-row:focus-within {
     border-color: var(--accent);
}
 .stub-input-row.error {
     border-color: #f4a86a;
}
 .stub-slash {
     font-family: var(--mono);
     color: var(--text-muted);
     font-size: 1rem;
}
 .stub-input {
     flex: 1;
     min-width: 0;
     background: transparent;
     border: none;
     outline: none;
     color: var(--text);
     font-family: var(--mono);
     font-size: 1rem;
}
 .stub-input::placeholder {
     color: #4d534e;
}
 .stub-preview {
     font-family: var(--mono);
     font-size: 0.74rem;
     color: var(--text-muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .stub-remove {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     border: 1px solid var(--line);
     background: transparent;
     color: var(--text-muted);
     font-size: 0.9rem;
     line-height: 1;
     cursor: pointer;
     transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
 .stub-remove:hover {
     border-color: var(--accent);
     color: var(--accent);
     transform: scale(1.08);
}
 .stub-add {
     align-items: center;
     justify-content: center;
     text-align: center;
     cursor: pointer;
     font-family: inherit;
     border-style: dashed;
     background: transparent;
     color: var(--text-muted);
     padding: 20px;
}
 .stub-add:hover {
     border-color: var(--accent);
     color: var(--accent);
     background: rgba(125, 244, 154, 0.05);
}
 .stub-add-full {
     width: 100%;
}
 .stub-add-icon {
     font-size: 1.3rem;
     line-height: 1;
}
 .stub-add-text {
     font-size: 0.88rem;
     margin-top: 4px;
     font-weight: 600;
}
 .stub-add-price {
     font-size: 0.76rem;
     margin-top: 4px;
     color: var(--text-muted);
}
 .stub-add:disabled {
     opacity: 0.35;
     cursor: not-allowed;
     border-color: var(--line);
     color: var(--text-muted);
     background: transparent;
}
 .limit-note {
     font-size: 0.85rem;
     line-height: 1.5;
     color: var(--accent);
     background: var(--accent-soft);
     border: 1px solid var(--accent-border);
     border-radius: 12px;
     padding: 12px 14px;
     margin: 0;
     animation: stubIn 0.35s var(--ease) both;
}
 .limit-note[hidden] {
     display: none;
}
 .side-note {
     font-size: 0.8rem;
     color: var(--text-muted);
}
 .faq-list {
     margin-top: 8px;
     display: flex;
     flex-direction: column;
     max-width: 720px;
     margin-left: auto;
     margin-right: auto;
}
 .faq-item {
     border-bottom: 1px solid var(--line);
     padding: 20px 0;
     transition: border-color 0.3s var(--ease);
}
 .faq-item summary {
     cursor: pointer;
     font-weight: 600;
     font-size: 1rem;
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     transition: color 0.3s var(--ease);
}
 .faq-item summary:hover {
     color: var(--accent);
}
 @keyframes faqOpen {
     0% {
         opacity: 0;
         transform: translateY(-4px);
    }
     100% {
         opacity: 1;
         transform: translateY(0);
    }
}
 .faq-item summary::-webkit-details-marker {
     display: none;
}
 .faq-item summary::after {
     content: "+";
     color: var(--accent);
     font-size: 1.2rem;
     flex-shrink: 0;
     transition: transform 0.3s var(--ease);
}
 .faq-item[open] summary::after {
     transform: rotate(45deg);
}
 .faq-item p {
     margin-top: 14px;
     font-size: 0.95rem;
     max-width: 600px;
     animation: faqOpen 0.35s var(--ease) both;
}
 .footer {
     position: relative;
     border-top: 1px solid #1c1c1c;
     background-color: #060606;
     background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
     background-size: 64px 64px;
     background-position: center top;
     padding: 64px 24px 0;
     overflow: hidden;
}
 .footer-top {
     position: relative;
     max-width: 1120px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr 1fr;
     gap: 40px;
     padding-bottom: 52px;
}
 .footer-brand {
     display: flex;
     flex-direction: column;
     gap: 14px;
     max-width: 320px;
}
 .footer-logo {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-weight: 800;
     font-size: 1.15rem;
     letter-spacing: -0.01em;
     color: var(--text);
}
 .footer-logo img {
     height: 26px;
     width: auto;
}
 .footer-tag {
     font-size: 0.88rem;
     line-height: 1.6;
     color: #8a8f8a;
}
 .footer-status {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     align-self: flex-start;
     font-size: 0.78rem;
     font-weight: 600;
     color: #b9beb9;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--line);
     border-radius: 100px;
     padding: 7px 14px;
}
 .footer-status i {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 8px var(--accent);
     flex-shrink: 0;
}
 .footer-col h4 {
     margin: 0;
     font-size: 0.72rem;
     font-weight: 800;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--text);
}
 .footer-col nav {
     margin-top: 16px;
     display: flex;
     flex-direction: column;
     gap: 11px;
}
 .footer-col a {
     font-size: 0.88rem;
     color: #8a8f8a;
     transition: color 0.25s var(--ease);
     width: fit-content;
}
 .footer-col a:hover {
     color: var(--accent);
}
 .footer-bottom {
     position: relative;
     max-width: 1120px;
     margin: 0 auto;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     padding: 20px 0 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
}
 .footer-bottom p {
     font-size: 0.78rem;
     color: #6e6e6e;
}
 .footer-socials {
     display: flex;
     align-items: center;
     gap: 10px;
}
 .footer-socials a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     color: #8a8f8a;
     transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
 .footer-socials a:hover {
     color: var(--accent);
     border-color: var(--accent-border);
     background: var(--accent-soft);
}
 .footer-socials svg {
     width: 17px;
     height: 17px;
     fill: currentColor;
}
 .legal-wrap {
     max-width: 760px !important;
     padding-top: 54px !important;
     padding-bottom: 60px !important;
}
 .legal-card {
     margin-top: 26px;
     border: 1px solid var(--line);
     border-radius: 22px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%), var(--surface);
     padding: 34px 32px;
     display: flex;
     flex-direction: column;
     gap: 26px;
}
 .legal-block h2 {
     font-size: 1.02rem;
     margin-bottom: 8px;
}
 .legal-block p, .legal-block li {
     font-size: 0.9rem;
     line-height: 1.7;
     color: var(--text-muted);
}
 .legal-block ul {
     margin-top: 10px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     list-style: disc;
     padding-left: 20px;
}
 .legal-block a {
     color: var(--accent);
}
 .legal-updated {
     font-family: var(--mono);
     font-size: 0.74rem;
     color: var(--text-faint);
}
 @media (max-width: 560px) {
     .legal-card {
         padding: 26px 22px;
    }
}
 @media (max-width: 860px) {
     .nav-links, .nav-signin, .btn.nav-cta {
         display: none;
    }
     .nav-toggle {
         display: inline-flex;
    }
     .hero-inner {
         grid-template-columns: 1fr;
    }
     .hero-visual {
         order: -1;
    }
     .steps {
         grid-template-columns: repeat(2, 1fr);
    }
     .stats-grid {
         grid-template-columns: 1fr;
    }
     .feature-grid {
         grid-template-columns: repeat(2, 1fr);
    }
     .footer-top {
         grid-template-columns: 1fr 1fr;
         gap: 36px 24px;
    }
     .footer-brand {
         grid-column: 1 / -1;
         max-width: none;
    }
}
 @media (max-width: 820px) {
     .order-grid {
         grid-template-columns: 1fr;
    }
     .plan-single-main {
         padding: 32px 26px;
    }
     .handles-window {
         padding: 26px 22px;
    }
}
 @media (max-width: 520px) {
     .steps {
         grid-template-columns: 1fr;
    }
     .feature-grid {
         grid-template-columns: 1fr;
    }
     .hero-meta {
         gap: 28px;
    }
     section {
         padding: 76px 20px;
    }
     .footer {
         padding: 48px 20px 0;
    }
     .footer-top {
         grid-template-columns: 1fr;
         gap: 32px;
         padding-bottom: 36px;
    }
     .footer-bottom {
         justify-content: center;
         text-align: center;
    }
}
 @media (max-width: 420px) {
     .nav-inner {
         padding: 8px 8px 8px 16px;
    }
     .nav-right {
         gap: 6px;
    }
     .nav-toggle {
         width: 34px;
         height: 34px;
    }
     .logo-img {
         height: 25px;
    }
}
 html {
     scroll-behavior: smooth;
}
 body {
     -webkit-font-smoothing: antialiased;
}
 ::selection {
     background: rgba(125,244,154,.28);
}
 .cmp-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .7rem;
     font-weight: 800;
     letter-spacing: .09em;
     text-transform: uppercase;
     color: var(--accent);
     background: rgba(125,244,154,.08);
     border: 1px solid var(--accent-border);
     border-radius: 100px;
     padding: 6px 14px;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
}
 .cmp-pill i, .cmp-pill svg {
     width: 13px;
     height: 13px;
}
 .cmp-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 10px var(--accent);
     animation: dotPulse 2.2s ease-in-out infinite;
}
 @keyframes dotPulse {
     0%,100% {
         transform: scale(1);
         opacity: 1;
    }
     50% {
         transform: scale(.6);
         opacity: .5;
    }
}
 .cmp-hero {
     padding-top: 54px;
     padding-bottom: 30px;
     position: relative;
}
 .cmp-hero-grid {
     display: grid;
     grid-template-columns: 1.08fr .92fr;
     gap: 48px;
     align-items: center;
}
 .cmp-hero h1 {
     margin-top: 20px;
     font-size: clamp(2.4rem, 4.6vw, 3.7rem);
     line-height: 1.02;
     font-weight: 800;
     letter-spacing: -.035em;
}
 .grad {
     background: linear-gradient(92deg, var(--accent) 10%, #d6ffe0 55%, var(--accent) 95%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     animation: gradShift 6s linear infinite;
}
 @keyframes gradShift {
     to {
         background-position: 200% center;
    }
}
 .cmp-sub {
     margin-top: 18px;
     font-size: 1.05rem;
     max-width: 540px;
     line-height: 1.65;
}
 .cmp-sub strong {
     color: var(--text);
     font-weight: 700;
}
 .cmp-actions {
     margin-top: 28px;
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     align-items: center;
}
 .btn-shine {
     position: relative;
     overflow: hidden;
}
 .btn-shine::after {
     content: "";
     position: absolute;
     top: 0;
     left: -80%;
     width: 55%;
     height: 100%;
     background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
     transform: skewX(-20deg);
     animation: shine 3.8s ease-in-out infinite;
}
 @keyframes shine {
     0%,55% {
         left: -80%;
    }
     100% {
         left: 130%;
    }
}
 .cmp-trust {
     margin-top: 30px;
     display: flex;
     gap: 26px;
     flex-wrap: wrap;
}
 .cmp-trust div {
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: .86rem;
     color: var(--text-muted);
     font-weight: 600;
}
 .cmp-trust i, .cmp-trust svg {
     width: 16px;
     height: 16px;
     color: var(--accent);
}
 .cmp-visual {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
}
 .cmp-visual .preview-window {
     width: 100%;
     max-width: 520px;
}
 .float-chip {
     position: absolute;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .76rem;
     font-weight: 800;
     color: var(--text);
     background: rgba(14,16,14,.82);
     border: 1px solid rgba(125,244,154,.35);
     border-radius: 100px;
     padding: 9px 15px;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 18px 40px -12px rgba(0,0,0,.7), 0 0 24px -8px rgba(125,244,154,.4);
     animation: floaty 5s ease-in-out infinite;
     white-space: nowrap;
     z-index: 3;
}
 .float-chip i, .float-chip svg {
     width: 14px;
     height: 14px;
     color: var(--accent);
}
 .chip-a {
     top: 18px;
     left: -8px;
}
 .chip-b {
     bottom: 52px;
     right: -6px;
     animation-delay: -2.5s;
}
 @keyframes floaty {
     0%,100% {
         transform: translateY(0);
    }
     50% {
         transform: translateY(-9px);
    }
}
 .cmp-cap {
     font-family: var(--mono);
     font-size: .72rem;
     color: var(--text-faint);
}
 .cmp-cap span {
     color: var(--accent);
}
 .marquee {
     margin: 34px auto 0;
     max-width: 1120px;
     padding: 0 24px;
}
 .marquee-track {
     border: 1px solid var(--line);
     border-radius: 100px;
     background: rgba(19,21,19,.6);
     backdrop-filter: blur(10px);
     overflow: hidden;
     white-space: nowrap;
     mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
 .marquee-inner {
     display: inline-flex;
     gap: 0;
     padding: 12px 0;
     animation: marq 26s linear infinite;
     will-change: transform;
}
 .marquee-track:hover .marquee-inner {
     animation-play-state: paused;
}
 .marquee-inner span {
     font-size: .78rem;
     font-weight: 800;
     letter-spacing: .12em;
     color: var(--text-muted);
     padding: 0 22px;
}
 .marquee-inner span b {
     color: var(--accent);
     font-weight: 800;
}
 @keyframes marq {
     to {
         transform: translateX(-50%);
    }
}
 .cmp-sec {
     padding-top: 70px !important;
     padding-bottom: 20px !important;
}
 .sec-top {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
}
 .sec-top .section-head {
     margin: 0;
}
 .sec-top .section-head h2 {
     font-size: clamp(1.7rem, 3vw, 2.3rem);
     letter-spacing: -.025em;
}
 .sec-top .section-head p {
     margin-top: 10px;
}
 .cmp-table-wrap {
     margin-top: 28px;
     border: 1px solid var(--line);
     border-radius: 22px;
     background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--surface);
     overflow: hidden;
     box-shadow: 0 40px 80px -48px rgba(0,0,0,.85);
}
 .cmp-scroll {
     overflow-x: auto;
}
 table.cmp-table {
     width: 100%;
     min-width: 840px;
     border-collapse: separate;
     border-spacing: 0;
     font-size: .89rem;
}
 .cmp-table th, .cmp-table td {
     padding: 16px 18px;
     text-align: left;
     vertical-align: middle;
     border-bottom: 1px solid var(--line-soft);
}
 .cmp-table thead th {
     font-size: .7rem;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--text-muted);
     font-weight: 800;
     background: rgba(0,0,0,.3);
     position: sticky;
     top: 0;
     z-index: 2;
}
 .cmp-table tbody tr {
     transition: background .25s var(--ease);
}
 .cmp-table tbody tr:hover td, .cmp-table tbody tr:hover th {
     background: rgba(125,244,154,.035);
}
 .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td {
     border-bottom: none;
}
 .cmp-table tbody th {
     color: var(--text);
     font-weight: 700;
     width: 178px;
     font-size: .88rem;
}
 .cmp-table tbody th small {
     display: block;
     font-weight: 500;
     color: var(--text-faint);
     font-size: .74rem;
     margin-top: 2px;
}
 .cmp-table td {
     color: var(--text-muted);
}
 .cmp-table td.hl, .cmp-table thead th.hl {
     background: linear-gradient(180deg, rgba(125,244,154,.13), rgba(125,244,154,.06));
     box-shadow: inset 1px 0 0 rgba(125,244,154,.35), inset -1px 0 0 rgba(125,244,154,.35);
}
 .cmp-table thead th.hl {
     box-shadow: inset 1px 0 0 rgba(125,244,154,.35), inset -1px 0 0 rgba(125,244,154,.35), inset 0 1px 0 rgba(125,244,154,.35);
     border-radius: 0;
}
 .cmp-table td.hl {
     color: var(--text);
     font-weight: 700;
}
 .cell {
     display: flex;
     align-items: center;
     gap: 9px;
}
 .cell i, .cell svg {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
}
 .cell.good i, .cell.good svg {
     color: var(--accent);
}
 .cell.bad i, .cell.bad svg {
     color: var(--text-faint);
}
 .cmp-brand {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-weight: 800;
     color: var(--text);
     letter-spacing: -.01em;
}
 .cmp-brand img {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     object-fit: cover;
     background: #000;
     border: 1px solid var(--line);
}
 .cmp-brand img.sq {
     border-radius: 7px;
}
 .winner {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: .62rem;
     font-weight: 800;
     letter-spacing: .08em;
     color: #06140b;
     background: var(--accent);
     border-radius: 100px;
     padding: 3px 9px;
     margin-left: 8px;
     vertical-align: middle;
}
 .savebar {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 18px 22px;
     background: rgba(125,244,154,.06);
     border-top: 1px solid var(--accent-border);
     font-size: .88rem;
     color: var(--text);
     flex-wrap: wrap;
}
 .savebar i, .savebar svg {
     width: 18px;
     height: 18px;
     color: var(--accent);
     flex-shrink: 0;
}
 .savebar strong {
     color: var(--accent);
}
 .split {
     margin-top: 26px;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     gap: 16px;
     align-items: stretch;
}
 .split-card {
     border: 1px solid var(--line);
     border-radius: 20px;
     padding: 26px 24px;
     background: var(--surface);
     position: relative;
     overflow: hidden;
     transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
 .split-card:hover {
     transform: translateY(-3px);
}
 .split-card.them {
     opacity: .75;
}
 .split-card.us {
     border-color: rgba(125,244,154,.4);
     background: linear-gradient(180deg, #1d221d, #131613);
     box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 40px -18px rgba(125,244,154,.35);
}
 .split-card.us::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
 .split-card h4 {
     font-size: .95rem;
     display: flex;
     align-items: center;
     gap: 9px;
}
 .split-card h4 i, .split-card h4 svg {
     width: 17px;
     height: 17px;
}
 .split-card.us h4 i, .split-card.us h4 svg {
     color: var(--accent);
}
 .split-card p {
     margin-top: 10px;
     font-size: .89rem;
}
 .theme-pills {
     margin-top: 16px;
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
}
 .theme-pills span {
     font-size: .74rem;
     font-weight: 700;
     color: var(--text-faint);
     border: 1px dashed var(--line);
     border-radius: 10px;
     padding: 8px 12px;
     background: rgba(0,0,0,.25);
}
 .split-vs {
     align-self: center;
     font-family: var(--mono);
     font-size: .72rem;
     font-weight: 800;
     color: var(--accent);
     background: var(--accent-soft);
     border: 1px solid var(--accent-border);
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .vs-grid {
     margin-top: 28px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
}
 .vs-card {
     display: flex;
     flex-direction: column;
     gap: 0;
     padding: 26px 24px 24px;
     border-radius: 20px;
     border: 1px solid var(--line);
     background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--surface);
     transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
     position: relative;
     overflow: hidden;
}
 .vs-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
     opacity: 0;
     transition: opacity .35s;
}
 .vs-card:hover, .vs-card.active {
     transform: translateY(-4px);
     border-color: rgba(125,244,154,.4);
     box-shadow: 0 30px 60px -28px rgba(0,0,0,.85), 0 0 36px -16px rgba(125,244,154,.35);
}
 .vs-card:hover::before, .vs-card.active::before {
     opacity: 1;
}
 .vs-logos {
     display: flex;
     align-items: center;
     gap: 9px;
}
 .vs-logos img {
     width: 32px;
     height: 32px;
     border-radius: 9px;
     object-fit: cover;
     background: #000;
     border: 1px solid var(--line);
}
 .vs-logos img.round {
     border-radius: 50%;
}
 .vs-logos .vs {
     font-size: .68rem;
     font-weight: 800;
     color: var(--text-faint);
     letter-spacing: .06em;
}
 .vs-card h3 {
     font-size: 1.05rem;
     margin-top: 16px;
}
 .vs-card > p {
     font-size: .89rem;
     margin-top: 8px;
     flex: 1;
}
 .meter {
     margin-top: 16px;
}
 .meter-row {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: .72rem;
     font-weight: 700;
     color: var(--text-muted);
     margin-top: 7px;
}
 .meter-row img {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     object-fit: cover;
}
 .bar {
     flex: 1;
     height: 6px;
     border-radius: 100px;
     background: rgba(255,255,255,.07);
     overflow: hidden;
}
 .bar i {
     display: block;
     height: 100%;
     width: 0;
     border-radius: 100px;
     background: var(--text-faint);
     transition: width 1.1s var(--ease-out);
}
 .bar.win i {
     background: linear-gradient(90deg, var(--accent-dim), var(--accent));
     box-shadow: 0 0 10px rgba(125,244,154,.6);
}
 .vs-link {
     margin-top: 18px;
     display: inline-flex;
     align-items: center;
     gap: 7px;
     color: var(--accent);
     font-weight: 800;
     font-size: .88rem;
}
 .vs-link i, .vs-link svg {
     width: 15px;
     height: 15px;
     transition: transform .25s var(--ease);
}
 .vs-link:hover i, .vs-link:hover svg {
     transform: translateX(4px);
}
 .vs-detail {
     margin-top: 18px;
     border: 1px solid var(--line);
     border-radius: 22px;
     background: var(--surface-3);
     padding: 32px 30px;
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 32px;
     scroll-margin-top: 110px;
     position: relative;
     overflow: hidden;
     transition: border-color .35s, box-shadow .35s;
}
 .vs-detail:target {
     border-color: rgba(125,244,154,.5);
     box-shadow: 0 0 0 1px rgba(125,244,154,.3), 0 30px 70px -30px rgba(0,0,0,.9);
     animation: targetFlash 1.6s ease-out;
}
 @keyframes targetFlash {
     0% {
         box-shadow: 0 0 0 0 rgba(125,244,154,.55);
    }
     100% {
         box-shadow: 0 0 0 22px rgba(125,244,154,0);
    }
}
 .vs-kicker {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: .7rem;
     font-weight: 800;
     letter-spacing: .09em;
     text-transform: uppercase;
     color: var(--accent);
}
 .vs-kicker i, .vs-kicker svg {
     width: 13px;
     height: 13px;
}
 .vs-detail h3 {
     font-size: clamp(1.3rem, 2.4vw, 1.65rem);
     letter-spacing: -.025em;
     margin-top: 10px;
}
 .vs-detail h3 span {
     color: var(--accent);
}
 .vs-detail p {
     margin-top: 12px;
     font-size: .93rem;
     line-height: 1.65;
}
 .vs-detail p strong {
     color: var(--text);
}
 .checklist {
     margin-top: 6px;
     display: flex;
     flex-direction: column;
     gap: 11px;
}
 .checklist li {
     display: flex;
     gap: 11px;
     align-items: flex-start;
     font-size: .89rem;
     color: #c9cfca;
     background: rgba(255,255,255,.02);
     border: 1px solid var(--line-soft);
     border-radius: 12px;
     padding: 11px 13px;
}
 .checklist li i, .checklist li svg {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
     margin-top: 2px;
}
 .checklist li.yes i, .checklist li.yes svg {
     color: var(--accent);
}
 .checklist li.no {
     color: var(--text-muted);
}
 .checklist li.no i, .checklist li.no svg {
     color: var(--text-faint);
}
 .vs-verdict {
     margin-top: 16px;
     display: flex;
     gap: 12px;
     align-items: flex-start;
     background: var(--accent-soft);
     border: 1px solid var(--accent-border);
     border-radius: 14px;
     padding: 15px 16px;
     font-size: .87rem;
     color: var(--text);
     line-height: 1.55;
}
 .vs-verdict i, .vs-verdict svg {
     width: 17px;
     height: 17px;
     color: var(--accent);
     flex-shrink: 0;
     margin-top: 2px;
}
 .cta-card {
     margin-top: 26px;
     text-align: center;
     padding: 64px 32px;
     border-radius: 26px;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(125,244,154,.3);
     background: radial-gradient(70% 130% at 50% -20%, rgba(125,244,154,.16), transparent 60%), linear-gradient(180deg, #161a16, #0d0f0d);
}
 .cta-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 10%;
     right: 10%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
 .cta-card .orb {
     position: absolute;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(125,244,154,.14), transparent 65%);
     pointer-events: none;
}
 .cta-card h2 {
     font-size: clamp(1.7rem, 3.4vw, 2.5rem);
     letter-spacing: -.03em;
}
 .cta-card p {
     margin: 14px auto 0;
     max-width: 520px;
     font-size: 1rem;
}
 .cta-price {
     margin-top: 18px;
     display: inline-flex;
     align-items: baseline;
     gap: 10px;
     font-weight: 800;
}
 .cta-price s {
     color: var(--text-faint);
     font-weight: 600;
     font-size: .95rem;
}
 .cta-price b {
     font-size: 2rem;
     color: var(--text);
     letter-spacing: -.03em;
}
 .cta-price b em {
     font-style: normal;
     color: var(--accent);
}
 .cta-micro {
     margin-top: 16px;
     display: flex;
     gap: 18px;
     justify-content: center;
     flex-wrap: wrap;
     font-size: .8rem;
     color: var(--text-muted);
     font-weight: 600;
}
 .cta-micro span {
     display: inline-flex;
     align-items: center;
     gap: 7px;
}
 .cta-micro i, .cta-micro svg {
     width: 14px;
     height: 14px;
     color: var(--accent);
}
 .fine {
     margin: 24px auto 0;
     max-width: 780px;
     text-align: center;
     font-size: .72rem;
     color: var(--text-faint);
     line-height: 1.6;
}
 #stickyCta {
     position: fixed;
     bottom: 18px;
     left: 50%;
     transform: translate(-50%, 90px);
     z-index: 50;
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 10px 10px 10px 20px;
     border-radius: 100px;
     background: rgba(13,15,13,.88);
     border: 1px solid rgba(125,244,154,.35);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     box-shadow: 0 24px 60px -12px rgba(0,0,0,.8), 0 0 30px -10px rgba(125,244,154,.4);
     transition: transform .45s var(--ease-out);
     white-space: nowrap;
     max-width: calc(100vw - 32px);
}
 #stickyCta.show {
     transform: translate(-50%, 0);
}
 #stickyCta span {
     font-size: .83rem;
     font-weight: 700;
}
 #stickyCta span b {
     color: var(--accent);
}
 #stickyCta .btn {
     padding: 10px 20px;
     font-size: .84rem;
     margin: 0;
}
 .nav-links a.active {
     color: var(--text);
     position: relative;
}
 .reveal {
     will-change: transform, opacity;
}
 @media (max-width: 960px) {
     .cmp-hero-grid {
         grid-template-columns: 1fr;
         gap: 34px;
    }
     .cmp-visual .preview-window {
         max-width: 100%;
    }
     .chip-a {
         left: 6px;
    }
     .chip-b {
         right: 6px;
    }
     .vs-grid {
         grid-template-columns: 1fr;
    }
     .vs-detail {
         grid-template-columns: 1fr;
         padding: 26px 22px;
    }
     .split {
         grid-template-columns: 1fr;
    }
     .split-vs {
         justify-self: center;
         transform: rotate(90deg);
    }
     .sec-top {
         align-items: flex-start;
         flex-direction: column;
    }
}
 @media (max-width: 560px) {
     .cmp-hero {
         padding-top: 36px;
    }
     .cmp-trust {
         gap: 14px;
    }
     #stickyCta span {
         display: none;
    }
}
 @media (prefers-reduced-motion: reduce) {
     .marquee-inner, .float-chip, .btn-shine::after, .grad {
         animation: none !important;
    }
     html {
         scroll-behavior: auto;
    }
}
 .promo-card {
     width: 100%;
     max-width: 520px;
     text-align: left;
}
 .promo-card-body {
     padding: 22px 22px 20px;
     display: flex;
     flex-direction: column;
     gap: 16px;
}
 .promo-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
}
 .promo-label {
     font-size: 0.72rem;
     font-weight: 800;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-muted);
}
 .promo-price-row {
     display: flex;
     flex-direction: column;
     gap: 6px;
}
 .promo-price-row s {
     color: var(--text-faint);
     font-size: 1rem;
     font-weight: 600;
}
 .promo-price {
     font-size: 3.4rem;
     font-weight: 800;
     letter-spacing: -0.03em;
     line-height: 1;
     color: var(--text);
     display: flex;
     align-items: baseline;
     gap: 8px;
}
 .promo-price em {
     font-style: normal;
     font-size: 1.4rem;
     color: var(--accent);
}
 .promo-price span {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--text-muted);
     letter-spacing: 0;
}
 .promo-list {
     margin-top: 2px;
}
 .promo-calc {
     margin-top: 22px;
     border: 1px solid var(--line);
     border-radius: 22px;
     background: linear-gradient(180deg, rgba(125, 244, 154, 0.06), transparent 45%), var(--surface-3);
     padding: 30px 28px;
     box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.85);
     transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
 .promo-calc:hover {
     transform: translateY(-3px);
     border-color: rgba(125, 244, 154, 0.35);
}
 .promo-calc-head h3 {
     font-size: 1.25rem;
     letter-spacing: -0.02em;
}
 .promo-calc-head p {
     margin-top: 8px;
     font-size: 0.92rem;
}
 .promo-range-label {
     display: block;
     margin-top: 22px;
     font-size: 0.82rem;
     font-weight: 700;
     color: var(--text);
}
 #promoRange {
     width: 100%;
     margin-top: 14px;
     appearance: none;
     -webkit-appearance: none;
     height: 8px;
     border-radius: 100px;
     background: linear-gradient(90deg, var(--accent) var(--promo-fill, 13%), rgba(255, 255, 255, 0.08) var(--promo-fill, 13%));
     outline: none;
     cursor: pointer;
}
 #promoRange::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--accent);
     border: 3px solid #06140b;
     box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(125, 244, 154, 0.7);
     transition: transform 0.2s var(--ease);
}
 #promoRange::-webkit-slider-thumb:hover {
     transform: scale(1.12);
}
 #promoRange::-moz-range-thumb {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: var(--accent);
     border: 3px solid #06140b;
     box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(125, 244, 154, 0.7);
}
 .promo-output {
     margin-top: 20px;
     border: 1px solid var(--accent-border);
     background: var(--accent-soft);
     border-radius: 16px;
     padding: 18px 20px;
     text-align: center;
}
 .promo-big {
     font-size: 1.3rem;
     font-weight: 800;
     color: var(--text);
     letter-spacing: -0.01em;
}
 .promo-big span {
     color: var(--accent);
}
 .promo-small {
     margin-top: 8px;
     font-size: 0.9rem;
     color: var(--text);
}
 .promo-fine {
     margin-top: 14px;
     font-size: 0.76rem;
     color: var(--text-faint);
     text-align: center;
}
 #promoForm {
     margin-top: 22px;
     display: flex;
     flex-direction: column;
     gap: 6px;
}
 #promoForm .promo-label {
     margin-top: 14px;
}
 #promoForm .promo-label:first-of-type {
     margin-top: 0;
}
 #promoForm .stub-input-row {
     padding-top: 8px;
}
 #promoForm .btn-full {
     margin-top: 22px;
}
 @media (max-width: 960px) {
     .promo-card {
         max-width: 100%;
    }
     .promo-calc {
         padding: 24px 20px;
    }
     .promo-price {
         font-size: 2.8rem;
    }
}
 .form-hero {
     padding-top: 54px;
     padding-bottom: 10px;
}
 .form-hero h1 {
     margin-top: 20px;
     font-size: clamp(2rem, 4.2vw, 3rem);
     line-height: 1.05;
     font-weight: 800;
     letter-spacing: -.03em;
}
 .form-hero h1 .grad {
     background: linear-gradient(92deg, var(--accent) 10%, #d6ffe0 55%, var(--accent) 95%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
}
 .form-sub {
     margin-top: 16px;
     font-size: 1.02rem;
     max-width: 600px;
     line-height: 1.65;
}
 .form-sub strong {
     color: var(--text);
}
 .form-steps {
     margin-top: 26px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}
 .form-steps span {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .78rem;
     font-weight: 800;
     letter-spacing: .04em;
     color: var(--text-muted);
     border: 1px solid var(--line);
     border-radius: 100px;
     padding: 8px 15px;
     background: rgba(19,21,19,.6);
}
 .form-steps span b {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: var(--surface-2);
     border: 1px solid var(--line);
     font-size: .68rem;
     color: var(--text);
}
 .form-steps span.on {
     color: var(--accent);
     border-color: var(--accent-border);
     background: var(--accent-soft);
}
 .form-steps span.on b {
     background: var(--accent);
     border-color: var(--accent);
     color: #06140b;
}
 .form-steps span.done {
     color: var(--text);
}
 .form-steps span.done b {
     background: var(--accent-soft);
     border-color: var(--accent-border);
     color: var(--accent);
}
 .form-sec {
     padding-top: 34px !important;
     padding-bottom: 20px !important;
}
 .form-card {
     border: 1px solid var(--line);
     border-radius: 22px;
     background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--surface);
     padding: 34px 32px;
     box-shadow: 0 40px 80px -48px rgba(0,0,0,.85);
     position: relative;
     overflow: hidden;
}
 .form-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
     opacity: .8;
}
 .form-card h2 {
     font-size: 1.3rem;
     letter-spacing: -.02em;
}
 .form-card > p.desc {
     margin-top: 10px;
     font-size: .93rem;
     max-width: 560px;
}
 .form-card > p.desc strong {
     color: var(--text);
}
 .flow-mini {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     gap: 0;
     border: 1px solid var(--line-soft);
     border-radius: 16px;
     overflow: hidden;
}
 .flow-mini div {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     padding: 12px 16px;
     font-size: .87rem;
     color: var(--text-muted);
     background: rgba(0,0,0,.2);
     border-bottom: 1px solid var(--line-soft);
}
 .flow-mini div:last-child {
     border-bottom: none;
}
 .flow-mini div b {
     color: var(--accent);
     font-family: var(--mono);
     font-size: .75rem;
     flex-shrink: 0;
     margin-top: 2px;
}
 .flow-mini div strong {
     color: var(--text);
}
 .lic-row {
     margin-top: 22px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}
 .lic-row .stub-input-row {
     flex: 1;
     min-width: 220px;
     border: 1px solid var(--line);
     border-radius: 14px;
     padding: 13px 16px;
     background: rgba(0,0,0,.3);
}
 .lic-row .stub-input {
     font-size: .95rem;
     letter-spacing: .04em;
}
 .lic-row .btn {
     margin: 0;
     white-space: nowrap;
}
 .gate-err {
     margin-top: 14px;
     font-size: .85rem;
     color: #f4a86a;
     background: rgba(244,168,106,.07);
     border: 1px solid rgba(244,168,106,.35);
     border-radius: 12px;
     padding: 12px 15px;
}
 .gate-err[hidden] {
     display: none;
}
 .lic-badge {
     margin-top: 18px;
     display: none;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
     font-size: .82rem;
     color: var(--text-muted);
}
 .lic-badge.show {
     display: flex;
}
 .lic-badge code {
     font-family: var(--mono);
     font-size: .8rem;
     color: var(--accent);
     background: var(--accent-soft);
     border: 1px solid var(--accent-border);
     border-radius: 8px;
     padding: 4px 10px;
     letter-spacing: .05em;
     user-select: text;
     -webkit-user-select: text;
}
 .lic-badge button {
     background: none;
     border: none;
     color: var(--text-faint);
     font-size: .78rem;
     cursor: pointer;
     text-decoration: underline;
     font-family: inherit;
     padding: 0;
}
 .lic-badge button:hover {
     color: var(--accent);
}
 .f-grid {
     margin-top: 24px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
}
 .f-field {
     display: flex;
     flex-direction: column;
     gap: 8px;
}
 .f-field.full {
     grid-column: 1 / -1;
}
 .f-field label {
     font-size: .8rem;
     font-weight: 800;
     letter-spacing: .05em;
     text-transform: uppercase;
     color: var(--text);
}
 .f-field label small {
     display: block;
     font-weight: 500;
     text-transform: none;
     letter-spacing: 0;
     color: var(--text-faint);
     font-size: .76rem;
     margin-top: 3px;
}
 .f-field label em {
     color: #f4a86a;
     font-style: normal;
}
 .f-in, .f-field select, .f-field textarea {
     width: 100%;
     background: rgba(0,0,0,.3);
     border: 1px solid var(--line);
     border-radius: 14px;
     padding: 13px 16px;
     color: var(--text);
     font-family: inherit;
     font-size: .93rem;
     outline: none;
     transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
     user-select: text;
     -webkit-user-select: text;
}
 .f-field textarea {
     resize: vertical;
     min-height: 84px;
     line-height: 1.6;
}
 .f-in:focus, .f-field select:focus, .f-field textarea:focus {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(125,244,154,.12);
}
 .f-field select {
     appearance: none;
     -webkit-appearance: none;
     cursor: pointer;
}
 .f-field select option {
     background: #131513;
     color: var(--text);
}
 .f-hint {
     font-size: .76rem;
     color: var(--text-faint);
}
 .f-hint code {
     font-family: var(--mono);
     color: var(--accent);
     font-size: .74rem;
}
 .f-err {
     font-size: .78rem;
     color: #f4a86a;
     display: none;
}
 .f-field.bad .f-in, .f-field.bad select, .f-field.bad textarea {
     border-color: #f4a86a;
}
 .f-field.bad .f-err {
     display: block;
}
 .swatches {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     align-items: center;
}
 .sw {
     width: 34px;
     height: 34px;
     border-radius: 10px;
     border: 2px solid transparent;
     cursor: pointer;
     padding: 0;
     transition: transform .2s var(--ease), border-color .2s;
}
 .sw:hover {
     transform: scale(1.1);
}
 .sw.on {
     border-color: #fff;
     box-shadow: 0 0 0 2px var(--accent);
}
 .color-row {
     display: flex;
     gap: 10px;
     align-items: center;
}
 input[type="color"].f-color {
     width: 52px;
     height: 44px;
     border: 1px solid var(--line);
     border-radius: 12px;
     background: rgba(0,0,0,.3);
     padding: 5px;
     cursor: pointer;
}
 .color-hex {
     font-family: var(--mono);
     font-size: .82rem;
     color: var(--accent);
}
 .form-actions {
     margin-top: 26px;
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
}
 .form-actions .btn {
     margin: 0;
}
 .review-list {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     border: 1px solid var(--line-soft);
     border-radius: 16px;
     overflow: hidden;
}
 .review-list div {
     display: grid;
     grid-template-columns: 170px 1fr;
     gap: 14px;
     padding: 12px 16px;
     font-size: .88rem;
     border-bottom: 1px solid var(--line-soft);
     background: rgba(0,0,0,.2);
}
 .review-list div:last-child {
     border-bottom: none;
}
 .review-list dt {
     color: var(--text-faint);
     font-weight: 700;
     font-size: .76rem;
     text-transform: uppercase;
     letter-spacing: .06em;
     padding-top: 2px;
}
 .review-list dd {
     margin: 0;
     color: var(--text);
     word-break: break-word;
     white-space: pre-wrap;
}
 .review-list dd.mono {
     font-family: var(--mono);
     font-size: .82rem;
     color: var(--accent);
}
 .color-dot {
     display: inline-block;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     vertical-align: -2px;
     margin-right: 8px;
     border: 1px solid rgba(255,255,255,.3);
}
 .done-id-box {
     margin-top: 22px;
     border: 1px solid var(--accent-border);
     background: var(--accent-soft);
     border-radius: 18px;
     padding: 24px;
     text-align: center;
}
 .done-id-box .lbl {
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--accent);
}
 .done-id-row {
     margin-top: 12px;
     display: flex;
     gap: 10px;
}
 .done-id-row input {
     flex: 1;
     min-width: 0;
     font-family: var(--mono);
     font-size: .82rem;
     letter-spacing: .02em;
     background: rgba(0,0,0,.45);
     border: 1px solid var(--accent-border);
     border-radius: 12px;
     padding: 14px 16px;
     color: var(--text);
     outline: none;
     user-select: text;
     -webkit-user-select: text;
}
 .done-id-row .btn {
     margin: 0;
     white-space: nowrap;
}
 .api-row {
     margin-top: 12px;
     display: flex;
     gap: 10px;
}
 .api-row input {
     flex: 1;
     min-width: 0;
     font-family: var(--mono);
     font-size: .72rem;
     background: rgba(0,0,0,.35);
     border: 1px solid var(--line);
     border-radius: 12px;
     padding: 11px 14px;
     color: var(--text-muted);
     outline: none;
     user-select: text;
     -webkit-user-select: text;
}
 .api-row .btn {
     margin: 0;
     white-space: nowrap;
     padding: 11px 18px;
     font-size: .82rem;
}
 .done-next {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     gap: 0;
     border: 1px solid var(--line-soft);
     border-radius: 16px;
     overflow: hidden;
}
 .done-next div {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     padding: 12px 16px;
     font-size: .87rem;
     color: var(--text-muted);
     background: rgba(0,0,0,.2);
     border-bottom: 1px solid var(--line-soft);
}
 .done-next div:last-child {
     border-bottom: none;
}
 .done-next div b {
     color: var(--accent);
     flex-shrink: 0;
}
 .done-next div code {
     font-family: var(--mono);
     font-size: .76rem;
     color: var(--accent);
     word-break: break-all;
}
 .copy-ok {
     margin-top: 12px;
     font-size: .82rem;
     color: var(--accent);
     display: none;
     font-weight: 700;
}
 .copy-ok.show {
     display: block;
}
 .raw-note {
     margin-top: 16px;
     font-size: .76rem;
     color: var(--text-faint);
     text-align: center;
}
 .raw-note code {
     font-family: var(--mono);
     color: var(--text-muted);
}
 [hidden] {
     display: none !important;
}
 @media (max-width: 640px) {
     .form-card {
         padding: 26px 20px;
    }
     .f-grid {
         grid-template-columns: 1fr;
    }
     .review-list div {
         grid-template-columns: 1fr;
         gap: 4px;
    }
     .done-id-row, .api-row, .lic-row {
         flex-direction: column;
    }
     .done-id-row .btn, .api-row .btn, .lic-row .btn {
         width: 100%;
    }
}
.hero-text h1 .hero-line {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.09em;
    margin-bottom: -0.09em;
}
.hero-text h1 .hero-line > span {
    display: inline-block;
    animation: heroLineUp 1s var(--ease-out) backwards;
}
.hero-text h1 .hero-line:nth-child(1) > span {
    animation-delay: 0.05s;
}
.hero-text h1 .hero-line:nth-child(2) > span {
    animation-delay: 0.17s;
}
@keyframes heroLineUp {
    from {
        transform: translateY(112%);
    }
    to {
        transform: translateY(0);
    }
}
.hero-sub {
    animation: heroRise 0.9s var(--ease-out) 0.3s backwards;
}
.hero-actions {
    animation: heroRise 0.9s var(--ease-out) 0.42s backwards;
}
.hero-meta {
    animation: heroRise 0.9s var(--ease-out) 0.54s backwards;
}
@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
.hero-visual {
    animation: heroVisualIn 1.1s var(--ease-out) 0.3s backwards;
}
@keyframes heroVisualIn {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.hero-actions .btn {
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(125, 244, 154, 0.45);
}
.hero-actions .btn-ghost:hover {
    transform: translateY(-2px);
}
.hero-visual .preview-window {
    position: relative;
}
.hero-visual .preview-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.14), transparent 65%);
}
.hero-visual .preview-window:hover::before {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hero-text h1 .hero-line > span,
    .hero-sub,
    .hero-actions,
    .hero-meta,
    .hero-visual {
        animation: none;
    }
    .hero-visual .preview-window::before {
        display: none;
    }
    .meta-dot {
        animation: none;
    }
}
.hero-eyebrow {
    display: inline-flex;
    margin-bottom: 20px;
    animation: heroRise 0.9s var(--ease-out) 0s backwards;
}
.hero-meta {
    flex-wrap: wrap;
    row-gap: 18px;
}
.meta-dot {
    align-self: center;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    animation: dotPulse 2.2s ease-in-out infinite;
}
.meta-dot:nth-of-type(2) {
    animation-delay: 1.1s;
}

.testimonials .section-head {
    margin: 0 auto;
    text-align: center;
}

.testimonial-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.testimonial-card {
    padding: 28px 26px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(125, 244, 154, 0.3);
}
.testimonial-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 1.05rem;
    color: #d6b05a;
}
.star {
    color: var(--text-faint);
}
.star.filled {
    color: #d6b05a;
}
.testimonial-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
.author-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.92rem;
}
.author-link {
    font-size: 0.82rem;
    color: var(--text-faint);
    font-family: var(--mono);
}
.author-link:hover {
    color: var(--accent);
}

.trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    padding: 18px 24px;
    border-radius: 16px;
    background: rgba(19, 21, 19, 0.45);
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.trust-item i,
.trust-item svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}
.trust-item:hover {
    color: var(--text);
}

@media (max-width: 640px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
    .trust-bar {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}

section.hero.haunt-hero {
    max-width: none;
    margin: 0;
    padding: 72px 24px 96px;
    position: relative;
    overflow: visible;
    background: transparent;
    border-bottom: none;
}
.haunt-hero .hero-bg,
.hero-orb,
.hero-beam,
.hero-grain {
    display: none;
}
.haunt-hero .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
    grid-template-columns: 1fr 1.02fr;
    gap: 56px;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0,0,0,0.45);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 7px 8px 7px 8px;
    padding-right: 14px;
    margin-bottom: 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
    animation: heroRise 0.9s var(--ease-out) 0s backwards;
}
.hero-pill:hover { border-color: var(--accent-border); color: var(--text); }
.hero-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 100px;
    padding: 4px 11px;
}
.hero-pill-tag .cmp-dot { width: 6px; height: 6px; }
.hero-pill-arrow { color: var(--text-faint); font-size: 1rem; line-height: 1; }
.haunt-hero .hero-text h1 {
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    max-width: 520px;
}
.hero-accent {
    background: linear-gradient(92deg, var(--accent) 5%, #e2ffe9 50%, var(--accent) 95%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradShift 6s linear infinite;
}
.haunt-hero .hero-sub {
    margin-top: 18px;
    font-size: 1rem;
    max-width: 440px;
    line-height: 1.65;
}
.claim-bar {
    margin-top: 28px;
    display: flex;
    align-items: center;
    max-width: 410px;
    background: rgba(0,0,0,0.55);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 5px;
    padding-left: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.8);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    animation: heroRise 0.9s var(--ease-out) 0.42s backwards;
}
.claim-bar:focus-within {
    border-color: rgba(125,244,154,0.5);
    box-shadow: 0 0 0 3px rgba(125,244,154,0.12), 0 20px 50px -20px rgba(0,0,0,0.8);
}
.claim-prefix {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 100px;
    padding: 10px 14px;
    white-space: nowrap;
    font-family: var(--mono);
    letter-spacing: -0.01em;
}
.claim-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 0.92rem;
    font-family: var(--mono);
    padding: 10px 12px;
}
.claim-input::placeholder { color: #4d534e; }
.claim-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    color: #06140b;
    background: var(--accent);
    border-radius: 100px;
    padding: 11px 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.claim-btn:hover { background: #93f7ab; transform: translateY(-1px); }
.claim-btn span { font-size: 1.05rem; line-height: 1; }
.haunt-hero .hero-meta { margin-top: 36px; gap: 32px; }
.haunt-hero .hero-visual .preview-window {
    max-width: 560px;
    width: 100%;
    background: #0a0b0d;
    border-color: #242824;
    box-shadow: 0 60px 100px -40px rgba(0,0,0,0.9), 0 0 80px -30px rgba(125,244,154,0.25);
}
.haunt-hero .preview-shot-body { aspect-ratio: 16 / 10.5; }
@media (max-width: 860px) {
    section.hero.haunt-hero { padding: 48px 20px 72px; }
    .haunt-hero .hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .haunt-hero .hero-visual { order: 2; }
    .claim-bar { max-width: 100%; }
}