:root{
  --bg: #000000;
  --bg-2: #030303;
  --ink: #EAF6FF;
  --ink-dim: #6E8291;
  --cyan: #4DE8FF;
  --blue: #1F8FE8;
  --amber: #FF9F45;
  --line: rgba(77,232,255,0.14);
  --ink-dim-hero: #B7CCD9;
}

/* ---- Aura Sites brand tokens (logo kit, tokens.css) ---- */
:root {
  --aura-void: #0A0C10;      /* primary dark background */
  --aura-void-soft: #12161D; /* elevated dark surface */
  --aura-cyan: #4DE8FF;      /* accent — signal, hot end of the gradient */
  --aura-blue: #1F8FE8;      /* accent — signal, cool end of the gradient */
  --aura-line: #242B34;      /* hairlines / borders on dark */
  --aura-dim: #4A5A6B;       /* unlit ring ticks */
  --aura-ink: #F4F6F8;       /* primary text on dark */
  --aura-ink-dim: #8A94A0;   /* secondary text on dark ("SITES") */
  --aura-ink-faint: #565F6B; /* tertiary / captions on dark */

  /* on-light equivalents */
  --aura-ink-on-light: #12161D;
  --aura-ink-dim-on-light: #6B7482;
  --aura-line-on-light: #D7DCE2;
}

.aura-font-display {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.aura-ring--spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .aura-ring--spin {
    animation: aura-spin 90s linear infinite;
  }
}
@keyframes aura-spin {
  to { transform: rotate(360deg); }
}

/* Aura Sites logo lockup (icon + wordmark), from logo-vanilla.html */
.aura-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.aura-logo--stacked {
  flex-direction: column;
  gap: 8px;
}
.aura-logo__mark {
  display: block;
  flex-shrink: 0;
}
.aura-logo__word {
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: var(--aura-ink);
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(77,232,255,0.35);
}
.aura-logo__word--dim {
  font-weight: 500;
  color: var(--aura-ink-dim);
}
.aura-logo--on-light .aura-logo__word{ color: var(--aura-ink-on-light); text-shadow:none; }
.aura-logo--on-light .aura-logo__word--dim{ color: var(--aura-ink-dim-on-light); }

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  overflow-x:hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.display{ font-family:'Space Grotesk', sans-serif; }

nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px 48px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 65%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nav-links{ display:flex; gap:36px; font-size:14px; color: var(--ink-dim); }
.nav-links a{ color: var(--ink); text-decoration:none; opacity:0.7; transition: opacity 0.3s ease; }
.nav-links a:hover{ opacity:1; }
.lang-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  padding-left:20px;
  border-left:1px solid var(--line);
}
.lang-btn{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  color: rgba(234,246,255,0.62);
  background:transparent;
  border:none;
  padding:10px 6px;
  margin:-10px -6px;
  cursor:pointer;
  transition: color 0.3s ease;
}
.lang-btn:hover{ color: var(--ink); }
.lang-btn.active{ color: var(--cyan); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:100%; height:2px;
  border-radius:2px;
  background: var(--ink);
  transition: transform 0.3s cubic-bezier(0.19,1,0.22,1), opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px){
  nav{ padding: 20px 24px; }
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    padding: 28px 24px 32px;
    background: rgba(3,3,3,0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    opacity:0;
    transform: translateY(-8px);
    pointer-events:none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.19,1,0.22,1);
  }
  .nav-links.open{
    opacity:1;
    transform:none;
    pointer-events:all;
  }
  .lang-toggle{ margin-left:0; padding-left:0; border-left:none; }
}
.lang-sep{ color: rgba(234,246,255,0.32); font-size:12px; }

/* ---- hero: fly through the aura ---- */
.hero{
  position:relative;
  height: 240vh;
}
.hero-stage{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* Promotes this to its own compositing layer. Without it, some mobile
     Safari versions can ghost/duplicate-paint absolutely-positioned,
     transformed children of a sticky element (like .hero-loader below)
     during scroll or class-driven style changes. */
  transform: translateZ(0);
}
#aura-canvas{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:1;
}
.light-wash{
  position:absolute; inset:0;
  z-index:1;
  background: radial-gradient(circle at 50% 50%, rgba(77,232,255,0.08), rgba(31,143,232,0.03) 40%, rgba(0,0,0,0) 65%);
  opacity:0;
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:760px;
  padding: 0 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  transform: translateY(14px);
  pointer-events:none;
}

/* ---- hero: loading state, shown until the 3D scene draws its first frame ---- */
.hero-loader{
  position:absolute;
  top:62%; left:50%;
  z-index:3;
  transform:translate(-50%,-50%) translateZ(0);
  will-change: opacity;
  transition: opacity 0.6s cubic-bezier(0.19,1,0.22,1), visibility 0s linear 0.6s;
}
.hero-loader.hero-loader--hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.hero-loader__dot{
  display:block;
  width:10px; height:10px;
  border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 18px 4px rgba(77,232,255,0.55);
  animation: hero-loader-pulse 1.4s ease-in-out infinite;
}
@keyframes hero-loader-pulse{
  0%, 100% { transform: scale(0.8); opacity:0.5; }
  50% { transform: scale(1.2); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero-loader__dot{ animation:none; opacity:0.85; }
}

/* ---- hero: fallback when the 3D scene never becomes ready in time ---- */
html.no-3d-scene .hero{ height:100vh; }
html.no-3d-scene .hero-stage{ position:relative; }
html.no-3d-scene .hero-content{ opacity:1; transform:none; pointer-events:all; }
html.no-3d-scene .light-wash,
html.no-3d-scene #intro-caption,
html.no-3d-scene #aura-canvas{ display:none; }
h1{
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.02em;
  margin-bottom:26px;
}
h1 em{
  font-style:normal;
  color: var(--ink);
  background: linear-gradient(90deg, var(--cyan), var(--blue) 80%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
}
.intro-caption .word{ text-shadow: 0 0 24px rgba(77,232,255,0.4); }
.sub{
  font-size:18px;
  line-height:1.6;
  color: var(--ink-dim-hero);
  max-width:480px;
  margin-bottom:40px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.5);
}
.cta-row{
  display:flex;
  gap:14px;
}
.btn{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:500;
  padding:14px 26px;
  border-radius:100px;
  cursor:pointer;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  transition: border-color 0.35s cubic-bezier(0.19,1,0.22,1), transform 0.35s cubic-bezier(0.19,1,0.22,1);
}
.btn:hover{ border-color: rgba(234,246,255,0.4); transform: translateY(-2px); }
.btn.primary{
  background: var(--ink);
  color: var(--bg);
  border:1px solid var(--ink);
}
.btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 0 22px rgba(77,232,255,0.28); }

.intro-caption{
  position:absolute;
  z-index:2;
  top:44%; left:50%;
  transform: translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
  will-change: opacity;
  perspective: 600px;
  /* purely decorative, sits centered over the orb; must not block clicks
     meant for the canvas underneath (e.g. the ripple interaction) */
  pointer-events:none;
}
.intro-caption__mark{
  display:block;
  width:68px; height:68px;
}
.intro-caption .word{
  display:inline-block;
  font-family:'Space Grotesk', sans-serif;
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#EAF6FF;
  transform: rotateX(24deg);
  transform-style: preserve-3d;
  text-shadow:
    0 1px 0 #1a5064,
    0 2px 0 #164257,
    0 3px 0 #12354a,
    0 4px 0 #0f2d40,
    0 5px 0 #0c2436,
    0 8px 14px rgba(0,0,0,0.65),
    0 0 26px rgba(77,232,255,0.55);
}

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--ink-dim); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition: opacity 0.4s ease;
}
.scroll-cue .line{ width:1px; height:36px; background: linear-gradient(var(--ink-dim), transparent); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

/* assembly section */
.assembly{
  padding: 140px 24px 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:3;
  background: var(--bg);
}
.assembly-head{
  text-align:center;
  max-width:700px;
  margin-bottom:56px;
}
.assembly-head h2{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.assembly-head p{
  max-width:520px;
  margin:0 auto;
  color: var(--ink-dim);
  font-size:16px;
  line-height:1.6;
}

/* tier toggle above the assembly stage */
.tier-toggle{
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:100px;
  margin-bottom:22px;
  background: var(--bg-2);
}
.tier-tab{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  color: var(--ink-dim);
  background:transparent;
  border:none;
  border-radius:100px;
  padding:9px 20px;
  cursor:pointer;
  transition: color 0.3s ease, background 0.3s ease;
}
.tier-tab:hover{ color: var(--ink); }
.tier-tab.active{
  color: var(--bg);
  background: var(--ink);
}

/* timeline: 3-step process with per-tier day labels */
.timeline{
  width:100%;
  max-width:860px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  margin-bottom:44px;
}
.timeline-step{
  position:relative;
  padding:22px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  background: var(--bg-2);
  text-align:left;
}
.timeline-step .step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid rgba(77,232,255,0.4);
  color: var(--cyan);
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  font-weight:600;
  margin-bottom:14px;
}
.timeline-step .step-label{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:15px;
  font-weight:600;
  margin-bottom:6px;
}
.timeline-step .step-day{
  display:block;
  font-size:13px;
  color: var(--cyan);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.19,1,0.22,1);
}
.timeline-step .step-day.swap{
  opacity:0;
  transform: translateY(-4px) scale(0.94);
}
.timeline-step .step-day.pop{
  animation: stepDayPop 0.42s cubic-bezier(0.19,1,0.22,1);
}
@keyframes stepDayPop{
  0%{ color: var(--ink); text-shadow: 0 0 14px rgba(77,232,255,0.9); transform: translateY(-2px) scale(1.12); }
  100%{ color: var(--cyan); text-shadow: 0 0 0 rgba(77,232,255,0); transform: translateY(0) scale(1); }
}
.timeline-connector{
  display:none;
}
@media (max-width: 720px){
  .timeline{ grid-template-columns:1fr; }
}

/* ---- work / portfolio ---- */
.work{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 40px 24px 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.work-head{
  text-align:center;
  max-width:700px;
  margin-bottom:64px;
}
.work-head h2{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.work-head p{
  max-width:520px;
  margin:0 auto;
  color: var(--ink-dim);
  font-size:16px;
  line-height:1.6;
}
.work-grid{
  width:100%;
  max-width:1180px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:32px;
}
.work-card{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--bg-2);
  transition: translate 0.4s cubic-bezier(0.19,1,0.22,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.work-card:hover{
  translate: 0 -6px;
  border-color: rgba(77,232,255,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 0 30px rgba(77,232,255,0.08);
}
.mock{ aspect-ratio: 4/3; display:flex; flex-direction:column; background: var(--bg-2); }
.mock-chrome{
  display:flex; gap:6px;
  padding:10px 14px;
  background: rgba(0,0,0,0.15);
}
.mock-chrome span{ width:7px; height:7px; border-radius:50%; background: rgba(0,0,0,0.25); }
.mock-shot{ flex:1; display:block; overflow:hidden; }
.mock-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

.work-meta{ padding:20px 22px 24px; }
.work-meta h3{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:600; margin-bottom:6px; }
.work-meta p{ color: var(--ink-dim); font-size:14px; line-height:1.5; margin-bottom:14px; }
.tags{ display:flex; gap:8px; }
.tags span{
  font-size:11px; color: var(--ink-dim);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:100px;
}
.work-link{
  display:inline-block;
  margin-top:14px;
  font-size:13px;
  color: var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(77,232,255,0.3);
  transition: border-color 0.3s ease;
}
.work-link:hover{ border-color: rgba(77,232,255,0.8); }
.work-status{
  display:inline-block;
  margin-top:14px;
  font-size:12px;
  color: var(--ink-dim);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:100px;
}

/* ---- pricing ---- */
.pricing{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 20px 24px 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.pricing-head{
  text-align:center;
  max-width:700px;
  margin-bottom:64px;
}
.pricing-head h2{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.pricing-head p{
  max-width:520px;
  margin:0 auto;
  color: var(--ink-dim);
  font-size:16px;
  line-height:1.6;
}
.pricing-payment-note{
  margin-top:28px;
  font-size:13px;
  color: var(--ink-dim);
  text-align:center;
}
.pricing-grid{
  width:100%;
  max-width:1000px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:28px;
  align-items:stretch;
}
.price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:32px 28px;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--bg-2);
  transition: translate 0.4s cubic-bezier(0.19,1,0.22,1), border-color 0.4s ease;
}
.price-card:hover{ translate: 0 -4px; border-color: rgba(77,232,255,0.3); }
.price-card.featured{
  border-color: rgba(77,232,255,0.55);
  box-shadow: 0 0 40px rgba(77,232,255,0.12);
}
.price-badge{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  background: var(--cyan);
  color: var(--bg);
  font-size:11px;
  font-weight:600;
  padding:5px 14px;
  border-radius:100px;
  letter-spacing:0.02em;
}
.price-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:18px;
  font-weight:600;
  margin-bottom:8px;
}
.price-desc{
  color: var(--ink-dim);
  font-size:14px;
  line-height:1.5;
  margin-bottom:24px;
  min-height:42px;
}
.price-amount{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 10px;
  font-family:'Space Grotesk', sans-serif;
  font-size:30px;
  font-weight:600;
  margin-bottom:4px;
}
/* Scoped to the tilde span nested inside a price string (either the plain
   price or, on Launch/Grow, the .price-founding/.price-regular wrapper
   spans below) -- not to those wrapper spans themselves. */
.price-amount span span{ font-size:16px; color: var(--ink-dim); font-weight:400; }
.price-founding{ color: var(--cyan); }
.price-founding span{ color: rgba(77,232,255,0.7); }
.price-regular{
  font-size:17px;
  font-weight:500;
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(110,130,145,0.6);
}
.price-founding-label{
  font-size:11px;
  color: var(--ink-dim);
  letter-spacing:0.02em;
  margin-bottom:14px;
}
.price-turnaround{
  font-size:13px;
  color: var(--cyan);
  margin-bottom:24px;
}
.price-features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-bottom:28px;
  flex:1;
}
.price-features li{
  font-size:14px;
  color: var(--ink);
  padding-left:22px;
  position:relative;
}
.price-features li::before{
  content:'';
  position:absolute;
  left:0; top:5px;
  width:12px; height:12px;
  border-radius:50%;
  background: rgba(77,232,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(77,232,255,0.4);
}
.price-btn{ width:100%; text-align:center; }

/* ---- hosting add-on ---- */
.hosting-addon{
  width:100%;
  max-width:1000px;
  margin-top:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px 32px;
  border:1px solid var(--line);
  border-radius:14px;
  background: var(--bg-2);
  flex-wrap:wrap;
}
.hosting-addon-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
}
.hosting-addon-text p{
  color: var(--ink-dim);
  font-size:14px;
  line-height:1.6;
  max-width:520px;
}
.hosting-addon-price{
  text-align:right;
  white-space:nowrap;
}
.hosting-amount{
  font-family:'Space Grotesk', sans-serif;
  font-size:22px;
  font-weight:600;
  color: var(--ink);
}
.hosting-period{
  font-size:13px;
  color: var(--ink-dim);
  margin-left:4px;
}
@media (max-width:640px){
  .hosting-addon{ flex-direction:column; align-items:flex-start; }
  .hosting-addon-price{ text-align:left; }
}

/* ---- info-tap tooltips ---- */
.info-tap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:27px;
  height:27px;
  margin: -6px -4px -6px -2px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  vertical-align:middle;
  flex-shrink:0;
}
.info-tap-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background: rgba(77,232,255,0.16);
  border:1px solid rgba(77,232,255,0.6);
  color: var(--cyan);
  font-size:11px;
  font-weight:700;
  line-height:1;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.info-tap:hover .info-tap-icon{
  background: rgba(77,232,255,0.3);
  border-color: var(--cyan);
}
.info-tap.active .info-tap-icon{
  background: rgba(77,232,255,0.3);
  border-color: var(--cyan);
  transform: scale(0.92);
}
.info-tooltip{
  position:absolute;
  z-index:60;
  max-width:220px;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  font-size:12.5px;
  line-height:1.5;
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  opacity:0;
  transform: translateY(4px);
  pointer-events:none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.info-tooltip.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* ---- global reach / translation ---- */
.global-reach{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 20px 24px 100px;
  text-align:center;
  max-width:700px;
  margin:0 auto;
}
.global-reach h2{
  /* Capped at 38px rather than the 42px other section headings use --
     verified empirically that "Speak your customers' language." wraps to
     two lines at 42px within this section's 700px container, and stays on
     one line from 38px down. */
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.global-reach p{
  max-width:560px;
  margin:0 auto;
  color: var(--ink-dim);
  font-size:16px;
  line-height:1.6;
}

/* ---- why not a template ---- */
.why-not-template{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 20px 24px 100px;
  text-align:center;
  max-width:700px;
  margin:0 auto;
}
.why-not-template h2{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.why-not-template p{
  max-width:560px;
  margin:0 auto;
  color: var(--ink-dim);
  font-size:16px;
  line-height:1.6;
}

/* ---- social proof ---- */
.social-proof{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 20px 24px 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.social-stats{
  width:100%;
  max-width:900px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  text-align:center;
}
.stat-number{
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight:600;
  color: var(--cyan);
  margin-bottom:8px;
}
.stat-label{
  font-size:13px;
  color: var(--ink-dim);
  line-height:1.5;
}

/* ---- founding clients ---- */
.eyebrow{
  font-size:12px;
  font-weight:600;
  color: var(--cyan);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.founding-clients{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 20px 24px 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.founding-clients-head{
  text-align:center;
  max-width:640px;
  margin-bottom:48px;
}
.founding-clients-head h2{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.founding-clients-head p{
  color: var(--ink-dim);
  font-size:16px;
  line-height:1.6;
}
.founding-points{
  width:100%;
  max-width:920px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
  margin-bottom:40px;
}
.founding-point{
  border:1px solid var(--line);
  border-radius:14px;
  background: var(--bg-2);
  padding:24px 22px;
  text-align:left;
}
.founding-point h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:600;
  color: var(--cyan);
  margin-bottom:8px;
}
.founding-point p{
  font-size:14px;
  line-height:1.6;
  color: var(--ink-dim);
}
.founding-cta{
  text-align:center;
}
.founding-note{
  margin-top:14px;
  font-size:13px;
  color: var(--ink-dim);
}
.founding-quotes{
  width:100%;
  max-width:900px;
  margin-top:64px;
  text-align:center;
}
.founding-quotes-heading{
  font-family:'Space Grotesk', sans-serif;
  font-size:18px;
  font-weight:500;
  margin-bottom:24px;
}
.founding-quotes-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:24px;
  text-align:left;
}
.founding-quote-card{
  border:1px solid var(--line);
  border-radius:14px;
  background: var(--bg-2);
  padding:28px 26px;
}
.founding-quote-text{
  font-size:15px;
  line-height:1.65;
  color: var(--ink);
  margin-bottom:16px;
}
.founding-quote-attr{
  font-size:13px;
  color: var(--ink-dim);
}

/* ---- FAQ ---- */
.faq{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 20px 24px 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.faq-head{
  text-align:center;
  margin-bottom:48px;
}
.faq-head h2{
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight:500;
  letter-spacing:-0.01em;
}
.faq-list{
  width:100%;
  max-width:700px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:12px;
  background: var(--bg-2);
  overflow:hidden;
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  background:transparent;
  border:none;
  color: var(--ink);
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
}
.faq-chevron{
  flex-shrink:0;
  color: var(--cyan);
  font-size:18px;
  transition: transform 0.35s cubic-bezier(0.19,1,0.22,1);
}
.faq-item.open .faq-chevron{ transform: rotate(180deg); }
.faq-answer{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.19,1,0.22,1);
}
.faq-item.open .faq-answer{ grid-template-rows: 1fr; }
.faq-answer p{
  overflow:hidden;
  color: var(--ink-dim);
  font-size:14px;
  line-height:1.65;
  padding:0 22px;
}
.faq-item.open .faq-answer p{ padding:0 22px 20px; }

/* ---- footer ---- */
footer{
  position:relative;
  z-index:3;
  background: var(--bg);
  padding: 64px 48px 40px;
  border-top: 1px solid rgba(77,232,255,0.4);
  box-shadow: 0 -1px 24px rgba(77,232,255,0.08);
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  max-width:1180px;
  margin:0 auto 40px;
}
.footer-logo{
  margin-bottom:8px;
}
.footer-tagline{
  color: var(--ink-dim);
  font-size:14px;
  max-width:320px;
}
.footer-links{
  display:flex;
  gap:28px;
  font-size:14px;
}
.footer-links a{
  color: var(--ink);
  text-decoration:none;
  opacity:0.7;
  transition: opacity 0.3s ease;
}
.footer-links a:hover{ opacity:1; }
.footer-email{
  font-size:14px;
  color: var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(77,232,255,0.3);
  transition: border-color 0.3s ease;
}
.footer-email:hover{ border-color: rgba(77,232,255,0.8); }
.footer-bottom{
  max-width:1180px;
  margin:0 auto;
  padding-top:28px;
  border-top:1px solid var(--line);
  text-align:center;
  color: var(--ink-dim);
  font-size:13px;
}
.footer-bottom-sep{ margin:0 8px; opacity:0.5; }
.footer-bottom-link{
  color: var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.footer-bottom-link:hover{ color: var(--cyan); border-color: rgba(77,232,255,0.4); }

@media (max-width: 640px){
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .social-stats{ grid-template-columns: 1fr; gap:32px; }
}

/* ---- project questionnaire modal ---- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background: rgba(0,0,0,0.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition: opacity 0.3s ease;
}
.modal-overlay.open{
  display:flex;
}
.modal-overlay.show{
  opacity:1;
}
.modal{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:86vh;
  overflow-y:auto;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:44px 40px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(77,232,255,0.06);
  transform: translateY(10px) scale(0.98);
  opacity:0;
  transition: transform 0.35s cubic-bezier(0.19,1,0.22,1), opacity 0.35s ease;
}
.modal-overlay.show .modal{
  transform: translateY(0) scale(1);
  opacity:1;
}
.modal-close{
  position:absolute;
  top:18px; right:18px;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color: var(--ink-dim);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.modal-close:hover{ color: var(--ink); border-color: rgba(234,246,255,0.4); }

.quiz-progress-track{
  width:100%;
  height:3px;
  border-radius:100px;
  background: var(--line);
  overflow:hidden;
  margin-bottom:18px;
}
.quiz-progress-fill{
  height:100%;
  width:10%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width 0.4s cubic-bezier(0.19,1,0.22,1);
}
.quiz-phase{
  font-size:12px;
  color: var(--cyan);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:24px;
}

.quiz-step{ display:none; }
.quiz-step.active{ display:block; animation: quizFadeIn 0.35s cubic-bezier(0.19,1,0.22,1); }
@keyframes quizFadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

.quiz-question{
  font-family:'Space Grotesk', sans-serif;
  font-size:23px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-0.01em;
  margin-bottom:26px;
}
.quiz-subtext{
  color: var(--ink-dim);
  font-size:14px;
  line-height:1.6;
}

.quiz-input{
  width:100%;
  font-family:'Inter', sans-serif;
  font-size:15px;
  color: var(--ink);
  background: rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  outline:none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.quiz-input::placeholder{ color: var(--ink-dim); }
.quiz-input:focus{ border-color: rgba(77,232,255,0.5); box-shadow: 0 0 0 3px rgba(77,232,255,0.08); }
textarea.quiz-input{ resize:vertical; min-height:88px; line-height:1.5; }

.quiz-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.quiz-options-stack{ flex-direction:column; }
.quiz-options-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

.option-card{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:500;
  color: var(--ink);
  background: rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
  text-align:left;
  cursor:pointer;
  flex:1;
  min-width:120px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.option-card:hover{ border-color: rgba(77,232,255,0.35); }
.option-card.selected{
  border-color: var(--cyan);
  background: rgba(77,232,255,0.08);
  color: var(--cyan);
}
.quiz-options.error .option-card{ border-color: rgba(255,120,120,0.6); }

.quiz-checklist{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.check-card{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color: var(--ink);
  background: rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 16px;
  cursor:pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.check-card.checked,
.check-card:has(input:checked){
  border-color: var(--cyan);
  background: rgba(77,232,255,0.08);
}
.check-card input{ accent-color: var(--cyan); width:15px; height:15px; }

.quiz-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:32px;
}

.quiz-skip-to-booking{
  display:block;
  width:100%;
  margin-top:20px;
  padding:0;
  background:none;
  border:none;
  font-family:'Inter', sans-serif;
  font-size:13px;
  color: var(--ink-dim);
  text-align:center;
  text-decoration:underline;
  text-decoration-color:rgba(110,130,145,0.4);
  cursor:pointer;
  transition: color 0.3s ease;
}
.quiz-skip-to-booking:hover{ color: var(--cyan); }

.recommend-card{
  border:1px solid rgba(77,232,255,0.4);
  border-radius:14px;
  padding:26px 24px;
  background: rgba(77,232,255,0.05);
  box-shadow: 0 0 30px rgba(77,232,255,0.08);
}
.recommend-tier{
  font-family:'Space Grotesk', sans-serif;
  font-size:20px;
  font-weight:600;
  margin-bottom:4px;
}
.recommend-price{
  font-family:'Space Grotesk', sans-serif;
  font-size:22px;
  font-weight:600;
  color: var(--cyan);
  margin-bottom:2px;
}
.recommend-turnaround{
  font-size:13px;
  color: var(--ink-dim);
  margin-bottom:14px;
}
.recommend-blurb{
  font-size:14px;
  line-height:1.6;
  color: var(--ink);
}

.quiz-consent{
  margin-top:14px;
  font-size:12px;
  line-height:1.5;
  color: var(--ink-dim);
  text-align:center;
}
.quiz-consent a{
  color: var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(77,232,255,0.3);
}
.quiz-consent a:hover{ border-color: rgba(77,232,255,0.6); }

.dropzone{
  border:1px dashed var(--line);
  border-radius:12px;
  padding:28px 20px;
  text-align:center;
  cursor:pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.dropzone:hover, .dropzone.dragover{
  border-color: rgba(77,232,255,0.5);
  background: rgba(77,232,255,0.04);
}
.dropzone-label{
  font-size:13.5px;
  color: var(--ink-dim);
}
.dropzone-files{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.dropzone-files span{
  font-size:12px;
  color: var(--ink);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:100px;
}

.quiz-cal-embed{
  margin-top:20px;
  min-height:480px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--bg);
}

.modal:has(.quiz-step[data-step="booking"].active){
  max-width:720px;
}

@media (max-width: 520px){
  .modal{ padding:36px 24px 28px; }
  .quiz-question{ font-size:20px; }
  .quiz-checklist{ grid-template-columns: 1fr; }
  .quiz-options-grid{ grid-template-columns: 1fr; }
}

/* ---- first-visit build-in reveal ---- */
.build-el{
  opacity:0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.55s cubic-bezier(0.19,1,0.22,1), transform 0.55s cubic-bezier(0.19,1,0.22,1);
}
.build-el.build-in{
  opacity:1;
  transform:none;
}
.build-el.instant{
  transition:none !important;
}

@media (prefers-reduced-motion: reduce){
  .hero{ height:100vh; }
  .hero-stage{ position:relative; }
  .hero-content{ opacity:1; transform:none; pointer-events:all; }
  .light-wash{ display:none; }
  .build-el{ opacity:1 !important; transform:none !important; transition:none !important; }
  #intro-caption{ display:none; }
}

/* ---- standalone legal page (privacy policy) ---- */
.legal-body{
  background: var(--bg);
  color: var(--ink);
}
.legal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 28px 48px;
  border-bottom: 1px solid var(--line);
}
.legal-doc{
  max-width:720px;
  margin:0 auto;
  padding:64px 24px 120px;
}
.legal-back{
  display:inline-block;
  margin-bottom:32px;
  font-size:14px;
  color: var(--ink-dim);
  text-decoration:none;
  transition: color 0.3s ease;
}
.legal-back:hover{ color: var(--cyan); }
.legal-title{
  font-family:'Space Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:12px;
}
.legal-effective{
  color: var(--ink-dim);
  font-size:14px;
  margin-bottom:40px;
}
.legal-doc p{
  font-size:16px;
  line-height:1.7;
  color: var(--ink);
  margin-bottom:20px;
}
.legal-doc h2{
  font-family:'Space Grotesk', sans-serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:-0.005em;
  margin-top:48px;
  margin-bottom:16px;
}
.legal-doc ul{
  margin:0 0 20px;
  padding-left:22px;
}
.legal-doc li{
  font-size:16px;
  line-height:1.7;
  color: var(--ink);
  margin-bottom:8px;
}
.legal-doc a{
  color: var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(77,232,255,0.3);
  transition: border-color 0.3s ease;
}
.legal-doc a:hover{ border-color: rgba(77,232,255,0.6); }
.legal-footer{
  max-width:720px;
  margin:0 auto;
  padding:32px 24px 64px;
  border-top:1px solid var(--line);
  color: var(--ink-dim);
  font-size:13px;
  text-align:center;
}

@media (max-width:520px){
  .legal-header{ padding:20px 24px; }
  .legal-doc{ padding:48px 20px 96px; }
}