:root {
      --brand-bg: #0d1117;
      --brand-surface: rgba(59,130,246,0.06);
      --brand-accent: #3b82f6;
      --brand-accent-rgb: 59,130,246;
      --brand-text: #e8f0fe;
      --brand-muted: rgba(232,240,254,0.5);
      --brand-border: rgba(59,130,246,0.18);
      --font-display: 'Syne', sans-serif;
      --font-body: 'Inter', sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { background: var(--brand-bg); color: var(--brand-text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; }
    body > *:not(#bgWrap) { position: relative; z-index: 1; }
    body::before { content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(ellipse, rgba(59,130,246,0.1) 0%, transparent 70%); pointer-events: none; z-index: 0; }
    #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

    .announcement-bar { background: rgba(59,130,246,0.12); border-bottom: 1px solid var(--brand-border); color: var(--brand-text); text-align: center; padding: 9px 20px; font-size: 13px; font-weight: 500; position: relative; z-index: 2; }
    .announcement-bar a { color: #93c5fd; text-decoration: none; font-weight: 700; }

    nav { position: relative; top: auto; z-index: 100; background: rgba(13,17,23,0.9); backdrop-filter: blur(24px); border-bottom: 1px solid var(--brand-border); padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .nav-logo { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--brand-text); text-decoration: none; }
    .nav-links { display: flex; gap: 32px; list-style: none; }
    .nav-links a { color: var(--brand-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
    .nav-links a:hover { color: var(--brand-text); }
    .nav-cta { background: var(--brand-accent); color: #fff; border: none; padding: 10px 22px; border-radius: 10px; font-family: var(--font-display); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; transition: opacity 0.2s; }
    .nav-cta:hover { opacity: 0.9; }
    .nav-hamburger { display: none; background: none; border: none; color: var(--brand-text); cursor: pointer; }

    .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 5vw; position: relative; z-index: 1; }
    .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: #93c5fd; padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 28px; }
    .hero h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 80px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 24px; max-width: 800px; }
    .hero h1 span { color: var(--brand-accent); }
    .hero-sub { font-size: 18px; color: var(--brand-muted); max-width: 560px; margin: 0 auto 40px; line-height: 1.7; }
    .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
    .btn-primary { background: var(--brand-accent); color: #fff; padding: 14px 28px; border-radius: 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s, transform 0.2s; display: inline-flex; align-items: center; gap: 8px; }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-2px); }
    .btn-ghost { background: transparent; color: var(--brand-text); padding: 14px 28px; border-radius: 10px; border: 1px solid var(--brand-border); font-family: var(--font-display); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: border-color 0.2s; display: inline-flex; align-items: center; gap: 8px; }
    .btn-ghost:hover { border-color: var(--brand-accent); }
    .hero-trust { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
    .trust-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--brand-muted); }
    .trust-item-icon { color: var(--brand-accent); }

    section { padding: 100px 5vw; position: relative; z-index: 1; }
    .section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 16px; }
    .section-title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
    .section-sub { font-size: 17px; color: var(--brand-muted); max-width: 540px; line-height: 1.7; margin-bottom: 56px; }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.is-revealed { opacity: 1; transform: translateY(0); }

    .form-section { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 20px; padding: 52px; max-width: 640px; margin: 0 auto; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .form-group { display: flex; flex-direction: column; gap: 8px; }
    .form-group.full { grid-column: span 2; }
    .form-group label { font-size: 13px; font-weight: 600; color: var(--brand-text); }
    .form-group input, .form-group select, .form-group textarea { background: rgba(255,255,255,0.05); border: 1px solid var(--brand-border); border-radius: 10px; padding: 12px 16px; color: var(--brand-text); font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color 0.2s; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--brand-accent); }
    .form-group select option { background: #0d1117; }
    .form-group textarea { min-height: 100px; resize: none; }
    .form-submit { background: var(--brand-accent); color: #fff; border: none; padding: 15px; border-radius: 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; cursor: pointer; width: 100%; margin-top: 8px; transition: opacity 0.2s; }
    .form-submit:hover { opacity: 0.9; }
    .form-note { font-size: 12px; color: var(--brand-muted); text-align: center; margin-top: 12px; }

    footer { border-top: 1px solid var(--brand-border); padding: 56px 5vw 28px; position: relative; z-index: 1; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
    .footer-brand p { font-size: 13px; color: var(--brand-muted); margin-top: 12px; max-width: 260px; line-height: 1.7; }
    .footer-col h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; margin-bottom: 14px; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col ul a { color: var(--brand-muted); text-decoration: none; font-size: 14px; transition: color 0.2s; }
    .footer-col ul a:hover { color: var(--brand-text); }
    .social-links { display: flex; gap: 10px; margin-top: 16px; }
    .social-link { width: 36px; height: 36px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--brand-muted); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
    .social-link:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
    .footer-bottom { border-top: 1px solid var(--brand-border); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: var(--brand-muted); }

    .mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: rgba(13,17,23,0.97); border-top: 1px solid var(--brand-border); padding: 12px 16px; }
    .mobile-cta-bar .btn-primary { width: 100%; justify-content: center; }
    .mobile-menu { display: none; position: fixed; inset: 0; background: var(--brand-bg); z-index: 150; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--brand-text); text-decoration: none; }
    .mobile-menu-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--brand-text); cursor: pointer; }

    @media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .nav-hamburger { display: block; } .mobile-cta-bar { display: block; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } body { padding-bottom: 80px; } }
    @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 8px; } .form-grid { grid-template-columns: 1fr; } .form-group.full { grid-column: 1; } .form-section { padding: 28px 16px; } .hero-trust { flex-direction: column; align-items: center; gap: 12px; } }

#bgWrap{z-index:-1!important}
body>*:not(#bgWrap){position:relative;z-index:1}
#site-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:100!important}

html{height:100%;background:transparent!important}
body{min-height:100%;margin:0;background:transparent!important}
#bgWrap{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;min-height:100vh!important;z-index:0!important;overflow:hidden!important;pointer-events:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
/* Canvas scales 6% from center to crop thin black "curtain" bars Veo sometimes adds at edges. */
#bgCanvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;margin:0!important;padding:0!important;box-sizing:border-box!important;transform:scale(1.06)!important;transform-origin:center center!important}
#bgWrap,#bgCanvas,#bgWrap *{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#overlay{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important}
#pageRoot{background:transparent!important}
#postFrameBackdrop{position:fixed!important;inset:0!important;z-index:1!important;pointer-events:none!important;opacity:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
body>nav,body>header,#pageRoot>nav:first-of-type,#pageRoot>header:first-of-type,nav[role="navigation"],header[role="banner"]{z-index:8000!important}

/* Prevent un-initialized Lucide icons from showing as large white shapes */
i[data-lucide]{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border-radius:0!important;color:inherit!important}
i[data-lucide] svg{display:block}

/* Draftly safety layer — keeps nav clickable + overlays transparent to input */
  #overlay, #bgWrap, #bgCanvas, #scrollProgressBar,
  .noise-overlay, #postFrameBackdrop { pointer-events: none !important; }

  /* Liquid fill: permanently hidden in generated sites.
     The cinematic finale blob is disabled — footer must be cleanly visible. */
  #liquidFill {
    display: none !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* ── Nav: always fixed pill, flex row, never breaks ── */
  #siteNav,
  nav, header, .nav-pill, .nav-bar, .site-nav, .navbar, .top-nav {
    pointer-events: auto !important;
    position: fixed !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Full-width navbars */
  nav:not(#siteNav), header, .nav-bar, .site-nav, .navbar, .top-nav {
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
  }
  /* Nav links group stays in center */
  nav .nav-links, nav .nav-items, nav ul, nav ol,
  header .nav-links, header .nav-items {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(16px, 2vw, 32px) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* CTA pill — never outside the nav row */
  nav .nav-cta, nav .cta-btn, nav .cta-pill, nav a.cta,
  nav button.cta, nav .btn-primary, nav .reserve-btn,
  header .nav-cta, header .cta-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  nav a, nav button, header a, header button,
  .nav-pill a, .nav-pill button, .nav-bar a, .nav-bar button {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* ── Page content ── */
  #pageRoot, main, .page-content { pointer-events: auto !important; }
  #pageRoot section, #pageRoot .section, main section { pointer-events: auto !important; }
  footer, .site-footer {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
  }

  /* ── No underlines anywhere ── */
  a, a:link, a:visited, a:hover, a:active, a:focus {
    text-decoration: none !important;
  }

  /* ── Scroll indicator: enforce absolute (never fixed) ── */
  .scroll-indicator, [class*="scroll-indicator"], [class*="discover"],
  #heroContent .scroll-down, #heroContent .scroll-hint {
    position: absolute !important;
  }

  /* ── Hamburger: hidden on desktop ── */
  .nav-hamburger { display: none; }

  /* ── Mobile menu drawer: hidden by default ── */
  #mobileMenu { display: none; }
  #mobileMenu.is-open { display: flex !important; }

  /* ══════════════════════════════════════
     MOBILE: ≤768px
     ══════════════════════════════════════ */
  @media (max-width: 768px) {
    /* Compact nav pill: brand + hamburger only */
    #siteNav .nav-links,
    nav .nav-links, nav .nav-items { display: none !important; }
    #siteNav .nav-cta,
    nav .nav-cta { display: none !important; }
    .nav-hamburger {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
    }
    #siteNav { gap: 8px !important; padding-left: 16px !important; padding-right: 8px !important; }

    /* Hero text scales for small screens */
    h1#heroHeadline, h1.hero-headline {
      font-size: clamp(1.8rem, 7.5vw, 3rem) !important;
      line-height: 1.1 !important;
    }
    #heroSubline, .hero-subline, .hero-sub {
      font-size: clamp(0.82rem, 3vw, 1rem) !important;
    }
    .hero-cta, a.hero-cta, button.hero-cta {
      padding: 10px 22px !important;
      font-size: 0.82rem !important;
    }

    /* Single-column grids everywhere */
    .bento-grid, .feature-grid, .features-grid,
    .stats-grid, .kpi-grid, .metrics-grid,
    .testimonial-grid, .quotes-grid,
    .process-steps, .steps-grid,
    .gallery-grid, .masonry-grid,
    .pricing-grid, .plans-grid,
    [style*="grid-template-columns"] {
      grid-template-columns: 1fr !important;
    }

    /* Cards: full width */
    .card, .feature-card, .bento-tile, .stat-block,
    .quote-block, .testimonial, .pricing-card,
    .process-step, .gallery-item {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Section padding */
    section, .section {
      padding-left: clamp(16px, 5vw, 28px) !important;
      padding-right: clamp(16px, 5vw, 28px) !important;
      padding-top: clamp(48px, 8vh, 72px) !important;
      padding-bottom: clamp(48px, 8vh, 72px) !important;
    }

    /* Min touch targets */
    a, button, [role="button"] { min-height: 44px; }

    /* Footer single column */
    footer > div > div[style*="grid"],
    .footer-grid, .footer-columns {
      grid-template-columns: 1fr !important;
    }
  }

  /* ══════════════════════════════════════
     MOBILE: ≤480px (iPhone SE etc)
     ══════════════════════════════════════ */
  @media (max-width: 480px) {
    h1#heroHeadline, h1.hero-headline {
      font-size: clamp(1.55rem, 8.5vw, 2.2rem) !important;
    }
    #heroContent {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
    #siteNav {
      max-width: calc(100vw - 16px) !important;
      top: clamp(8px, 1.5vh, 14px) !important;
    }
  }

.def-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .def-about-img-wrap { position: relative; }
    .def-about-img { width: 100%; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: rgba(59,130,246,0.08); }
    .def-about-img img { width: 100%; height: 100%; object-fit: cover; }
    .def-about-badge { position: absolute; bottom: -20px; right: -20px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 14px; padding: 20px 24px; text-align: center; }
    .def-about-badge-num { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--brand-accent); line-height: 1; }
    .def-about-badge-label { font-size: 12px; color: var(--brand-muted); margin-top: 4px; }
    .def-about-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 14px; }
    .def-about-heading { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
    .def-about-body { font-size: 15px; color: var(--brand-muted); line-height: 1.75; margin-bottom: 16px; }
    .def-about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
    .def-about-value { display: flex; align-items: flex-start; gap: 10px; }
    .def-about-value-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); flex-shrink: 0; margin-top: 6px; }
    .def-about-value-text { font-size: 14px; color: var(--brand-text); font-weight: 600; }
    @media (max-width: 860px) { .def-about-grid { grid-template-columns: 1fr; gap: 48px; } .def-about-badge { right: 0; bottom: -16px; } }

.def-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .def-feat-card { background: rgba(59,130,246,0.05); border: 1px solid rgba(59,130,246,0.15); border-radius: 16px; padding: 32px; transition: border-color 0.3s, transform 0.3s; }
    .def-feat-card:hover { border-color: rgba(59,130,246,0.4); transform: translateY(-4px); }
    .def-feat-icon { width: 48px; height: 48px; background: rgba(59,130,246,0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #60a5fa; margin-bottom: 20px; }
    .def-feat-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
    .def-feat-desc { font-size: 14px; color: var(--brand-muted); line-height: 1.65; }
    @media (max-width: 900px) { .def-features-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .def-features-grid { grid-template-columns: 1fr; } }

.def-faq-wrap { max-width: 760px; margin: 0 auto; }
    .def-faq-item { border-bottom: 1px solid var(--brand-border); }
    .def-faq-q { width: 100%; background: none; border: none; color: var(--brand-text); font-family: var(--font-display); font-size: 17px; font-weight: 700; text-align: left; padding: 24px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color 0.2s; }
    .def-faq-q:hover { color: var(--brand-accent); }
    .def-faq-icon { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--brand-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, border-color 0.2s, transform 0.3s; }
    .def-faq-item.open .def-faq-icon { background: var(--brand-accent); border-color: var(--brand-accent); transform: rotate(45deg); }
    .def-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.3s; }
    .def-faq-item.open .def-faq-a { max-height: 400px; }
    .def-faq-a-inner { padding-bottom: 24px; font-size: 15px; color: var(--brand-muted); line-height: 1.75; }