:root {
      --bg: #090b0a;
      --surface: #111411;
      --surface-2: #171b17;
      --line: rgba(255,255,255,.11);
      --text: #f6f8f5;
      --muted: #9ea69e;
      --accent: #b8ff4a;
      --accent-2: #79e8ff;
      --radius: 24px;
      --shadow: 0 24px 80px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 82% 8%, rgba(184,255,74,.09), transparent 27%),
        radial-gradient(circle at 10% 28%, rgba(121,232,255,.06), transparent 24%),
        var(--bg);
      font-family: Inter, sans-serif;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    .shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
    .section { padding: 110px 0; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      margin: 0 0 18px; color: var(--accent); font-size: .78rem;
      font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
    h1,h2,h3,p { margin-top: 0; }
    h1,h2,h3 { font-family: Syne, sans-serif; }
    h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.045em; }
    .lead { max-width: 650px; color: var(--muted); font-size: 1.06rem; line-height: 1.8; }

    .topbar {
      position: fixed; inset: 14px 0 auto; z-index: 50;
    }
    .nav {
      width: min(1180px, calc(100% - 28px)); margin: auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px 12px 18px; border: 1px solid var(--line);
      border-radius: 18px; background: rgba(9,11,10,.72);
      backdrop-filter: blur(20px); box-shadow: 0 12px 40px rgba(0,0,0,.2);
    }
    .logo { display: flex; align-items: center; gap: 11px; font-family: Syne; font-weight: 800; }
    .logo-mark {
      width: 34px; aspect-ratio: 1; display: grid; place-items: center;
      color: #0a0c09; background: var(--accent); border-radius: 11px;
      transform: rotate(-6deg);
    }
    .nav-links { display: flex; align-items: center; gap: 28px; color: #c7ccc7; font-size: .9rem; }
    .nav-links a:hover { color: white; }
    .nav-cta, .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 700;
      transition: .25s ease; cursor: pointer;
    }
    .nav-cta { min-height: 42px; color: #0a0c09; background: var(--accent); }
    .nav-cta:hover, .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(184,255,74,.2); }
    .menu { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; color: white; background: transparent; }

    .hero { min-height: 100vh; display: grid; align-items: center; padding: 150px 0 70px; }
    .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
    .hero h1 { font-size: clamp(3.7rem, 7vw, 7.3rem); line-height: .86; letter-spacing: -.065em; margin-bottom: 28px; }
    .hero h1 .outline { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.56); }
    .hero-copy > p:not(.eyebrow) { max-width: 610px; color: var(--muted); font-size: 1.12rem; line-height: 1.75; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 42px; }
    .btn-primary { color: #0b0d0a; background: var(--accent); }
    .btn-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.03); }
    .btn-secondary:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
    .trust-row { display: flex; flex-wrap: wrap; gap: 24px; color: #bcc4bc; font-size: .86rem; }
    .trust-row span { display: flex; align-items: center; gap: 8px; }
    .trust-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 15px var(--accent); }

    .product-stage { position: relative; min-height: 610px; }
    .orb { position: absolute; border-radius: 50%; filter: blur(2px); }
    .orb-a { width: 310px; height: 310px; right: -40px; top: 40px; background: radial-gradient(circle at 35% 30%, #e8ffbf, var(--accent) 35%, #547a17 72%); opacity: .9; }
    .orb-b { width: 170px; height: 170px; left: 0; bottom: 22px; border: 1px solid rgba(121,232,255,.3); background: rgba(121,232,255,.04); backdrop-filter: blur(8px); }
    .app-card {
      position: absolute; inset: 70px 20px 40px 35px; padding: 18px;
      border: 1px solid rgba(255,255,255,.15); border-radius: 30px;
      background: linear-gradient(150deg, rgba(28,32,28,.96), rgba(11,13,11,.92));
      box-shadow: var(--shadow); transform: rotate(3deg); overflow: hidden;
    }
    .app-card::before { content:""; position:absolute; inset:-40% auto auto -20%; width:70%; height:70%; background:radial-gradient(circle, rgba(184,255,74,.16), transparent 70%); }
    .app-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
    .mini-logo { display:flex; align-items:center; gap:8px; font-family:Syne; font-size:.88rem; }
    .mini-dot { width:24px; height:24px; border-radius:8px; background:var(--accent); }
    .live-pill { padding:8px 10px; border-radius:999px; color:#ffb0b0; background:rgba(255,92,92,.1); font-size:.65rem; font-weight:800; }
    .feature-art {
      min-height: 250px; display:flex; align-items:flex-end; padding:24px; border-radius:22px;
      background:
        linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.1)),
        radial-gradient(circle at 72% 28%, rgba(121,232,255,.7), transparent 17%),
        linear-gradient(135deg, #27352c, #111511 48%, #202820);
      position:relative; overflow:hidden;
    }
    .feature-art::after { content:""; position:absolute; width:220px; height:220px; right:-30px; bottom:-70px; border-radius:45% 55% 35% 65%; border:30px solid rgba(184,255,74,.45); transform:rotate(28deg); }
    .feature-copy { position:relative; z-index:2; max-width:290px; }
    .feature-copy span { color:var(--accent); font-size:.67rem; font-weight:800; letter-spacing:.14em; }
    .feature-copy h3 { margin:8px 0 10px; font-size:2rem; line-height:1; }
    .feature-copy p { margin:0; color:#b7beb7; font-size:.75rem; }
    .rail-title { display:flex; justify-content:space-between; margin:20px 2px 12px; color:#ccd1cc; font-size:.74rem; }
    .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .tile { aspect-ratio:1.5; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(140deg,#263126,#111411); }
    .tile:nth-child(2) { background:linear-gradient(140deg,#1c2930,#121516); }
    .tile:nth-child(3) { background:linear-gradient(140deg,#30241f,#161311); }
    .float-card {
      position:absolute; z-index:3; padding:16px 18px; border:1px solid var(--line); border-radius:18px;
      background:rgba(13,16,13,.82); backdrop-filter:blur(16px); box-shadow:0 16px 40px rgba(0,0,0,.35);
    }
    .float-card strong { display:block; font-family:Syne; font-size:1.2rem; }
    .float-card small { color:var(--muted); }
    .float-one { right:-15px; bottom:34px; }
    .float-two { left:-20px; top:80px; }

    .marquee-wrap { border-block:1px solid var(--line); overflow:hidden; background:#0d100d; }
    .marquee { display:flex; width:max-content; animation:scroll 24s linear infinite; }
    .marquee span { padding:22px 26px; color:#d8ddd8; font-family:Syne; font-size:.92rem; white-space:nowrap; }
    .marquee span::after { content:"✦"; margin-left:52px; color:var(--accent); }
    @keyframes scroll { to { transform:translateX(-50%); } }

    .intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
    .intro-number { font-family:Syne; font-size:clamp(7rem,16vw,13rem); line-height:.75; color:rgba(255,255,255,.04); }
    .feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; }
    .feature-card {
      min-height:245px; padding:28px; border:1px solid var(--line); border-radius:var(--radius);
      background:linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
      transition:.3s ease;
    }
    .feature-card:hover { transform:translateY(-6px); border-color:rgba(184,255,74,.32); }
    .feature-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:48px; border-radius:15px; background:rgba(184,255,74,.1); color:var(--accent); font-size:1.2rem; }
    .feature-card h3 { font-size:1.35rem; margin-bottom:12px; }
    .feature-card p { color:var(--muted); line-height:1.7; font-size:.92rem; }

    .showcase { background:#eef1eb; color:#101310; border-radius:42px; margin:0 14px; overflow:hidden; }
    .showcase .eyebrow { color:#54741f; }
    .showcase-copy { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; }
    .showcase .lead { color:#5e665d; }
    .content-panels { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; margin-top:56px; }
    .panel { position:relative; min-height:430px; padding:30px; border-radius:28px; overflow:hidden; }
    .panel-dark { color:white; background:#111511; }
    .panel-lime { background:var(--accent); }
    .panel-label { display:inline-block; padding:8px 11px; border-radius:999px; font-size:.68rem; font-weight:800; background:rgba(255,255,255,.1); }
    .panel h3 { position:relative; z-index:2; max-width:430px; margin-top:170px; font-size:clamp(2rem,4vw,3.7rem); line-height:.95; letter-spacing:-.04em; }
    .rings { position:absolute; width:330px; height:330px; right:-70px; top:-70px; border:45px solid rgba(184,255,74,.25); border-radius:50%; box-shadow:0 0 0 45px rgba(184,255,74,.08); }
    .stack { position:absolute; inset:100px 25px auto; display:grid; gap:10px; }
    .stack div { display:flex; justify-content:space-between; align-items:center; padding:16px; border-radius:15px; background:rgba(15,18,15,.9); color:white; transform:rotate(-2deg); box-shadow:0 18px 35px rgba(0,0,0,.15); }
    .stack div:nth-child(2) { transform:rotate(2deg) translateX(8px); }
    .stack small { color:#aeb6ae; }

    .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:80px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--line); }
    .stat { padding:32px 26px; background:var(--bg); }
    .stat strong { display:block; font-family:Syne; font-size:2.1rem; margin-bottom:8px; }
    .stat span { color:var(--muted); font-size:.86rem; }

    .pricing-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:48px; }
    .pricing-toggle { display:flex; padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
    .pricing-toggle button { padding:10px 15px; border:0; border-radius:10px; color:var(--muted); background:transparent; cursor:pointer; }
    .pricing-toggle button.active { color:#101310; background:var(--accent); }
    .plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .plan { padding:30px; border:1px solid var(--line); border-radius:28px; background:var(--surface); }
    .plan.featured { color:#0f120f; background:var(--accent); transform:translateY(-14px); }
    .plan-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
    .plan-name { font-family:Syne; font-size:1.1rem; font-weight:800; }
    .badge { padding:7px 9px; border-radius:999px; font-size:.65rem; font-weight:800; background:rgba(0,0,0,.12); }
    .price { margin:42px 0 8px; font-family:Syne; font-size:4rem; line-height:1; letter-spacing:-.05em; }
    .price sup { font-size:1.2rem; vertical-align:top; }
    .price-note { color:var(--muted); font-size:.82rem; }
    .featured .price-note, .featured li { color:#34402b; }
    .plan ul { list-style:none; padding:0; margin:30px 0; display:grid; gap:14px; color:#c4cbc4; font-size:.9rem; }
    .plan li::before { content:"✓"; margin-right:10px; color:var(--accent); font-weight:800; }
    .featured li::before { color:#172011; }
    .plan .btn { width:100%; }
    .featured .btn { color:white; background:#111411; }

    .faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:70px; }
    .faq-list { border-top:1px solid var(--line); }
    details { border-bottom:1px solid var(--line); }
    summary { list-style:none; display:flex; justify-content:space-between; gap:20px; padding:24px 0; cursor:pointer; font-family:Syne; font-weight:700; }
    summary::-webkit-details-marker { display:none; }
    summary span { color:var(--accent); transition:.25s; }
    details[open] summary span { transform:rotate(45deg); }
    details p { max-width:700px; margin:-6px 0 24px; color:var(--muted); line-height:1.7; }

    .cta-box { position:relative; overflow:hidden; padding:70px; border-radius:36px; color:#101310; background:var(--accent); }
    .cta-box h2 { max-width:800px; margin-bottom:30px; }
    .cta-box .btn { color:white; background:#101310; }
    .cta-orbit { position:absolute; width:370px; height:370px; right:-120px; top:-120px; border:2px solid rgba(0,0,0,.12); border-radius:50%; box-shadow:0 0 0 60px rgba(0,0,0,.05),0 0 0 120px rgba(0,0,0,.03); }

    footer { padding:36px 0 44px; }
    .footer-row { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:28px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
    .footer-links { display:flex; gap:24px; }

    .reveal { opacity:0; transform:translateY(28px); transition:.8s cubic-bezier(.2,.7,.2,1); }
    .reveal.visible { opacity:1; transform:none; }

    @media (max-width: 900px) {
      .nav-links { display:none; position:absolute; top:68px; left:14px; right:14px; padding:18px; flex-direction:column; align-items:stretch; border:1px solid var(--line); border-radius:18px; background:#0f120f; }
      .nav-links.open { display:flex; }
      .menu { display:block; }
      .hero-grid,.intro-grid,.showcase-copy,.faq-grid { grid-template-columns:1fr; }
      .hero { padding-top:130px; }
      .product-stage { min-height:570px; }
      .feature-grid,.plans { grid-template-columns:1fr; }
      .content-panels { grid-template-columns:1fr; }
      .stats { grid-template-columns:repeat(2,1fr); }
      .pricing-head { align-items:flex-start; flex-direction:column; }
      .plan.featured { transform:none; }
      .intro-number { display:none; }
    }

    @media (max-width: 620px) {
      .shell { width:min(100% - 24px, 1180px); }
      .section { padding:78px 0; }
      .hero h1 { font-size:3.55rem; }
      .hero-grid { gap:30px; }
      .product-stage { min-height:480px; }
      .app-card { inset:42px 4px 28px 10px; }
      .orb-a { width:230px; height:230px; }
      .float-two { left:-2px; top:32px; }
      .float-one { right:0; bottom:4px; }
      .feature-art { min-height:210px; }
      .feature-copy h3 { font-size:1.5rem; }
      .feature-card { min-height:auto; }
      .feature-icon { margin-bottom:32px; }
      .showcase { margin:0 6px; border-radius:28px; }
      .content-panels { margin-top:36px; }
      .panel { min-height:370px; }
      .stats { grid-template-columns:1fr 1fr; }
      .stat { padding:24px 18px; }
      .cta-box { padding:42px 26px; }
      .footer-row { align-items:flex-start; flex-direction:column; }
      .footer-links { flex-wrap:wrap; gap:14px; }
    }

/* WordPress / Elementor compatibility */
body.admin-bar .topbar { top: 46px; }
@media (min-width: 783px) { body.admin-bar .topbar { top: 32px; } }
.nav-links .nav-menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:28px; }
.nav-links .nav-menu li { margin:0; padding:0; }
.nav-links .nav-menu a { color:#c7ccc7; }
.nav-links .nav-menu a:hover { color:#fff; }
.nav-links .nav-menu .nav-cta > a,
.nav-links .nav-menu a.nav-cta { min-height:42px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; color:#0a0c09; background:var(--accent); font-weight:700; }
.site-page { min-height:70vh; padding:130px 0 80px; }
.site-page .entry-content { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.site-page.elementor-page-wrap { padding-bottom:0; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) {
  .nav-links .nav-menu { flex-direction:column; align-items:stretch; gap:18px; }
}