/* === Vectaga FULL FIX (2025-09-15) === */

/* 1) Spacing fix for "Why Vectaga" cards and the panel below */
section[id*="why"], .why, .why-vectaga, .why-section { padding-block: clamp(24px, 4vw, 56px); }
.why-grid, .cards-grid, .why-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
}
@media (min-width: 720px){ .why-grid, .cards-grid, .why-cards { grid-template-columns: repeat(2,1fr);}}
@media (min-width: 1024px){ .why-grid, .cards-grid, .why-cards { grid-template-columns: repeat(3,1fr);}}

.why-card, .feature-card {
  background: var(--panel, #12181d);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  min-height: 100%;
}

/* Ensure consistent gap between the 3 cards and the full-width "Power of Vectaga" box */
.why-grid + .power, .cards-grid + .power, .why-cards + .power,
.why-grid + .power-panel, .cards-grid + .power-panel, .why-cards + .power-panel {
  margin-top: clamp(16px, 2.4vw, 24px);
}

/* Block margin-collapsing that caused sticking */
section, .why-grid, .power, .power-panel, .why-card, .feature-card { overflow: clip; }

/* Full-width power panel style fallback */
.power, .power-panel {
  background: var(--panel, #12181d);
  border-radius: 14px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* 2) Burger menu toggle */
.nav-toggle{ appearance:none; border:0; background:transparent; width:44px; height:44px; display:inline-grid; place-items:center; cursor:pointer;}
.nav-toggle .bar{width:22px;height:2px;background:currentColor;display:block;transition:transform .2s ease,opacity .2s ease;}
.nav-toggle .bar + .bar{margin-top:6px;}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.nav-menu{ display:none; }
.nav-menu.open{ display:block; }
@media (min-width: 960px){
  .nav-toggle{ display:none; }
  .nav-menu{ display:flex !important; gap: clamp(8px,1.2vw,16px); }
}

.nav-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); }
.nav-overlay.open{ display:block; z-index:40; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11,15,18,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(88vw,360px); background:var(--panel,#12181d); transform:translateX(100%); transition:transform .25s ease; }
.mobile-drawer.open{ transform:translateX(0); }


/* --- Site-specific hooks --- */
.cards.three{ display:grid; grid-template-columns:1fr; gap: clamp(16px, 2.4vw, 24px); }
@media (min-width: 720px){ .cards.three{ grid-template-columns: repeat(2,1fr);} }
@media (min-width: 1024px){ .cards.three{ grid-template-columns: repeat(3,1fr);} }

/* enforce gap between the three cards and the panel card below */
.cards.three + .card{ margin-top: clamp(16px, 2.4vw, 24px); }

/* stop margin-collapse in the section */
.who-we-are .card, .who-we-are .cards, .who-we-are { overflow: clip; }


/* --- Sticky header & click safety --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11,15,18,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-canvas{ pointer-events: none; } /* prevent canvas from eating clicks above header */

/* Ensure header content sits above hero or other positioned elements */
.header-inner, .nav, .nav-toggle{ position: relative; z-index: 1; }

/* Scroll-to-top button */
#scrollUpBtn{
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(16px, 2.4vw, 24px);
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--accent, #A2EBCC);
  color: #0b0f12;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
#scrollUpBtn:focus-visible{ outline: 3px solid rgba(162,235,204,.6); outline-offset: 2px; }
#scrollUpBtn.show{ display: inline-flex; }

/* --- Mobile nav visibility & professional panel --- */
@media (max-width: 959.98px){
  .nav{ display: none; }
  .nav.open{ display: block; }
  .nav-toggle{ display: inline-grid !important; place-items:center; width:44px; height:44px; }
  .site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11,15,18,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
  .header-inner{ position: relative; }
  .nav{
    position: absolute;
    top: calc(100% + 8px);
    left: 8px;
    right: 8px;
    background: color-mix(in oklab, var(--panel, #12181d) 92%, black 8%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    transform-origin: top right;
    transform: translateY(-8px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav.open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .nav a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 4px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text, #e6f1ee);
    font-weight: 600;
    letter-spacing: .15px;
  }
  .nav a:hover,
  .nav a:focus-visible{
    background: color-mix(in oklab, var(--a2, rgba(162,235,204,.15)) 60%, transparent);
    outline: none;
  }
  .nav a.btn, .nav a.btn-accent{
    background: var(--accent, #A2EBCC);
    color: #0b0f12 !important;
    font-weight: 700;
    justify-content: center;
  }
  .nav a + a{
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
}

@media (min-width: 960px){
  .nav{ display: flex !important; gap: clamp(8px,1.2vw,16px); align-items: center; }
  .nav-toggle{ display: none !important; }
}

/* --- Misc & Fallbacks --- */
.pricing .currency #currency option { color:#0b0f12; background:#fff; }
.pricing .currency #currency option:checked { background:#A2EBCC; color:#0b0f12; }
.reveal{opacity:1;transform:none}
.js-has-reveal .reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
.js-has-reveal .reveal.visible{opacity:1;transform:none}

/*
================================================================
  ONBOARDING PAGE — RESPONSIVE FIXES
================================================================
*/

/* --- CRITICAL: Responsive Container Override --- */
/* This overrides the fixed width from your main stylesheet, allowing the page to shrink. */
.container {
  width: min(1100px, 94vw); /* Use a modern, responsive width instead of a fixed one */
  margin-left: auto;
  margin-right: auto;
}

/* --- Onboarding Page: Main Layout Grid --- */
.onboard-layout {
  display: grid;
  grid-template-columns: 1fr; /* Mobile-first: single column */
  gap: 24px;
  align-items: start;
}

/* Switches to a two-column layout on larger screens */
@media (min-width: 960px) {
  .onboard-layout {
    grid-template-columns: minmax(0, 1fr) 380px; /* Form on left, summary on right */
  }
  /* Makes the order summary "stick" to the top when scrolling on desktop */
  .onboard-layout > aside {
    position: sticky;
    top: 88px;
  }
}

/* --- Onboarding Page: Form Elements & Spacing --- */

/* Creates space for a floating-style label */
.field {
  position: relative;
  padding-top: 1.5em;
}

/* Positions the label neatly in the space created above */
.field label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8em;
  color: var(--muted);
}

/* Adds padding to the bottom of the summary card to prevent text cutoff */
aside.card {
  padding-bottom: 24px;
}

/* --- Onboarding Page: General Responsive Behavior --- */

/* Allows the top progress bar steps to wrap on small screens */
.progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.progress .step {
  flex-grow: 1; /* Allow steps to fill space */
  flex-basis: 180px; /* Set a base size to trigger wrapping */
}

/* Ensures form field rows wrap correctly */
.row {
  display: flex;
  flex-wrap: wrap; /* This is key for allowing fields to stack */
  gap: 16px;
}

/* Fields default to full width on mobile, and are given a min-width */
.field {
  flex: 1 1 100%;
  min-width: 240px;
}

/* On medium screens, allow two fields per row */
@media (min-width: 600px) {
  .field {
    flex: 1 1 calc(50% - 8px); /* Two-column layout for fields */
  }
}

/* --- Onboarding Page: Center Action Button on Mobile --- */
@media (max-width: 959.98px) {
  #onboard-form .actions {
    text-align: center !important;
  }
}

/* --- Fix: prevent cut-off on anchor scroll --- */
section[id] { scroll-margin-top: 100px; }
@media (max-width: 900px) { section[id] { scroll-margin-top: 120px; } }