@layer reset, base, components, utilities;

@layer reset {
  html,
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  dl,
  dd,
  figure,
  blockquote {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
  }

  html *,
  html *::before,
  html *::after {
    box-sizing: inherit;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }
}

@layer base {
  :root {
    color-scheme: dark;
    --bg: #0b1120;
    --surface: #0f172a;
    --surface-elevated: #1e293b;
    --border: #334155;
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --accent: #06b6d4;
    --accent-hover: #22d3ee;
    --accent-ink: #042f2e;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #f87171;
    --danger-surface: rgb(127 29 29 / 0.28);
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --space-container: clamp(1rem, 3vw, 2rem);
    --max-width: 72rem;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  }

  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    min-block-size: 100dvh;
    overflow-x: clip;
  }

  h1,
  h2,
  h3 {
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(1.85rem, 4.2vw, 3rem);
  }

  h2 {
    font-size: clamp(1.4rem, 2.8vw, 2rem);
  }

  h3 {
    font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  }

  p {
    color: var(--text-muted);
    max-inline-size: 68ch;
  }

  a {
    color: var(--accent-hover);
    text-underline-offset: 0.2em;
  }

  :where(a:any-link, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--accent-hover);
    outline-offset: 3px;
  }

  [inert],
  [inert] * {
    opacity: 0.5;
    cursor: default;
    user-select: none;
  }
}

@layer components {
  .container {
    inline-size: min(100% - 2 * var(--space-container), var(--max-width));
    margin-inline: auto;
  }

  .section {
    padding-block: clamp(2.5rem, 5vw, 4.25rem);
  }

  .section + .section {
    border-block-start: 1px solid rgb(51 65 85 / 0.55);
  }

  .section-head {
    display: grid;
    gap: 0.6rem;
    margin-block-end: 2rem;
  }

  .eyebrow {
    color: var(--accent-hover);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background: rgb(11 17 32 / 0.92);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--border);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 4.25rem;
  }

  .header-inner > * {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
  }

  .menu-button {
    anchor-name: --menu-button;
    min-block-size: 44px;
    padding-inline: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }

  .site-menu {
    position: fixed;
    inset: auto;
    inset-block-start: 4.5rem;
    inset-block-start: anchor(--menu-button bottom);
    inset-inline-end: 1rem;
    inline-size: min(82dvw, 20rem);
    max-inline-size: calc(100dvw - 2rem);
    max-block-size: calc(100dvh - 6rem);
    margin-block-start: 0.4rem;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 18px 40px rgb(2 6 23 / 0.65);
    overflow: auto;
  }

  .site-menu:is(:popover-open, .\:popover-open) {
    display: grid;
    gap: 0.25rem;
  }

  .site-menu a,
  .nav-link-btn {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    inline-size: 100%;
    text-align: start;
  }

  .site-menu a:hover,
  .site-menu a[aria-current="page"],
  .nav-link-btn:hover {
    background: var(--surface-elevated);
    color: var(--accent-hover);
  }

  .site-header.is-wide .menu-button {
    display: none;
  }

  .site-header.is-wide .site-menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .site-header.is-wide .site-menu::backdrop {
    display: none;
  }

  .site-header.is-measuring * {
    transition: none !important;
  }

  .hero {
    padding-block: clamp(3rem, 7vw, 5.25rem);
    background:
      radial-gradient(60rem 26rem at 15% -5%, rgb(6 182 212 / 0.14), transparent 70%),
      radial-gradient(45rem 22rem at 90% 10%, rgb(16 185 129 / 0.1), transparent 70%);
  }

  .hero-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
  }

  @media (min-width: 56rem) {
    .hero-grid {
      grid-template-columns: 1.35fr 0.95fr;
    }
  }

  .hero-copy {
    display: grid;
    gap: 1.1rem;
  }

  .lead {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    color: #cbd5e1;
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 0.4rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-block-size: 48px;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  }

  .btn-compact {
    min-block-size: 44px;
    padding: 0.45rem 0.9rem;
    font-size: 0.92rem;
  }

  .btn-block {
    inline-size: 100%;
  }

  .btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
  }

  .btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
  }

  .btn-secondary {
    background: var(--surface-elevated);
    color: var(--text);
    border-color: var(--border);
  }

  .btn-secondary:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent-hover);
  }

  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .hero-specs {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.35rem;
    display: grid;
    gap: 0.95rem;
  }

  .spec-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid rgb(51 65 85 / 0.55);
  }

  .spec-row:last-child {
    padding-block-end: 0;
    border-block-end: 0;
  }

  .spec-label {
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  .spec-value {
    color: var(--text);
    font-weight: 700;
    text-align: end;
  }

  .card-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .card-featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgb(6 182 212 / 0.3);
  }

  .badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgb(6 182 212 / 0.14);
    color: var(--accent-hover);
    border: 1px solid rgb(6 182 212 / 0.45);
  }

  .badge-emerald {
    background: rgb(16 185 129 / 0.14);
    color: #6ee7b7;
    border-color: rgb(16 185 129 / 0.45);
  }

  .price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
  }

  .price-amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
  }

  .price-unit {
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  .feature-list {
    display: grid;
    gap: 0.45rem;
    color: #cbd5e1;
    font-size: 0.95rem;
  }

  .feature-list li::before {
    content: "✓ ";
    color: var(--success);
    font-weight: 700;
  }

  .card-actions {
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    display: grid;
    gap: 0.5rem;
  }

  .proof-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(1.35rem, 3vw, 2rem);
    display: grid;
    gap: 1.5rem;
  }

  @media (min-width: 52rem) {
    .proof-panel {
      grid-template-columns: 1.3fr 1fr;
      align-items: center;
    }
  }

  .proof-metrics {
    display: grid;
    gap: 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.15rem;
  }

  .tablist {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    border-block-end: 1px solid var(--border);
    margin-block-end: 1.5rem;
  }

  .tab-btn {
    position: relative;
    flex: none;
    min-block-size: 48px;
    padding: 0.65rem 1.1rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .tab-btn[aria-selected="true"] {
    color: var(--accent-hover);
  }

  .tab-btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    border-block-end: 3px solid var(--accent-hover);
  }

  .tab-panel-inner {
    padding-block-start: 0.25rem;
  }

  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  table {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: start;
    font-size: 0.94rem;
  }

  th,
  td {
    padding: 0.85rem 1rem;
    border-block-end: 1px solid var(--border);
    vertical-align: top;
  }

  th {
    background: var(--bg);
    color: var(--accent-hover);
    font-weight: 700;
    white-space: nowrap;
  }

  tr:last-child td {
    border-block-end: 0;
  }

  .steps-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }

  .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 999px;
    background: rgb(6 182 212 / 0.16);
    color: var(--accent-hover);
    font-weight: 800;
    font-size: 0.95rem;
  }

  .faq-list {
    display: grid;
    gap: 0.75rem;
  }

  .faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.2rem 1.15rem;
  }

  .faq-item summary {
    cursor: pointer;
    min-block-size: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    color: var(--text);
    list-style: none;
  }

  .faq-item summary::after {
    content: "+";
    color: var(--accent-hover);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .faq-item[open] summary::after {
    content: "−";
  }

  .faq-body {
    padding-block-end: 1rem;
    color: var(--text-muted);
  }

  .quote-layout {
    display: grid;
    gap: 1.5rem;
  }

  @media (min-width: 52rem) {
    .quote-layout {
      grid-template-columns: 1.25fr 0.85fr;
      align-items: start;
    }
  }

  .surface-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: clamp(1.25rem, 3vw, 1.75rem);
  }

  .field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-block-end: 1.25rem;
  }

  .field label {
    font-weight: 600;
    color: var(--text);
  }

  .hint {
    font-size: 0.86rem;
    color: var(--text-muted);
  }

  input,
  select,
  textarea {
    font: inherit;
    font-size: max(1rem, 1em);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    min-block-size: 48px;
    inline-size: 100%;
  }

  textarea {
    min-block-size: 6.5rem;
    resize: vertical;
  }

  :is(input, select, textarea):is(:user-invalid, .user-invalid-fallback) {
    border-color: var(--danger);
    background: var(--danger-surface);
  }

  :is(input, select, textarea):is(:user-valid, .user-valid-fallback) {
    border-color: var(--success);
  }

  .error-msg {
    display: none;
    color: #fecaca;
    font-size: 0.88rem;
  }

  :is(input, select, textarea):is(:user-invalid, .user-invalid-fallback) ~ .error-msg {
    display: block;
  }

  .status-banner {
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-block: 0.85rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
  }

  .status-banner.is-success {
    border-color: var(--success);
    background: rgb(16 185 129 / 0.14);
  }

  .status-banner.is-error {
    border-color: var(--danger);
    background: var(--danger-surface);
  }

  .turnstile-slot {
    margin-block-end: 1rem;
    min-block-size: 4.1rem;
  }

  .site-footer {
    border-block-start: 1px solid var(--border);
    background: var(--surface);
    padding-block: 1.5rem;
    margin-block-start: 2rem;
  }

  .footer-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .footer-link-btn {
    background: transparent;
    border: 0;
    color: var(--accent-hover);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    padding: 0.25rem 0;
    min-block-size: 44px;
  }

  .cookie-banner {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline: 1rem;
    z-index: 50;
    max-inline-size: 60rem;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.35rem;
    box-shadow: 0 20px 45px rgb(2 6 23 / 0.8);
    display: grid;
    gap: 1rem;
  }

  @media (min-width: 48rem) {
    .cookie-banner {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }

  .cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  dialog {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    inline-size: min(92dvw, 34rem);
    margin: auto;
  }

  dialog:modal {
    overscroll-behavior: contain;
  }

  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgb(2 6 23 / 0.78);
  }

  .dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .consent-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    margin-block-end: 0.75rem;
  }

  .consent-option input[type="checkbox"] {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    min-block-size: auto;
    accent-color: var(--accent);
    margin-block-start: 0.15rem;
    flex-shrink: 0;
  }

  .legal-doc {
    display: grid;
    gap: 1.25rem;
    padding-block: 2.5rem;
  }

  .legal-doc section {
    display: grid;
    gap: 0.5rem;
  }

  .legal-doc ul {
    list-style: disc;
    padding-inline-start: 1.4rem;
    color: var(--text-muted);
  }

  .admin-panel {
    display: grid;
    gap: 1.25rem;
  }

  .auth-card {
    max-inline-size: 28rem;
    margin-inline: auto;
    text-align: center;
    display: grid;
    gap: 1rem;
    justify-items: center;
  }

  .form-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }

  .inline-price-input {
    max-inline-size: 9rem;
    min-block-size: 40px;
  }

  @media (pointer: coarse) {
    input,
    select,
    textarea,
    .btn {
      min-block-size: 52px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    .btn {
      transition: none;
    }
  }
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .honeypot-field {
    position: absolute;
    inset-inline-start: -9999px;
    opacity: 0;
    pointer-events: none;
  }

  .note-footer {
    margin-block-start: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
  }
}