/* =====================================================
   GROWTH VAULT — STYLESHEET
   Clean consolidated version. One rule per component.
===================================================== */

/* ── Variables ── */
:root {
  --bg:      #F5F0E8;
  --surface: #FAF7F2;
  --surface-2:#EFE7DC;
  --text:    #111111;
  --soft:    #5F564B;
  --gold:    #9E7B4F;
  --line:    rgba(0,0,0,.09);
  --card:    #FAF7F2;
}

/* ── Reset ── */
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",sans-serif;
  overflow-x:hidden;
}

/* ── Background textures ── */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 78% 18%,rgba(158,123,79,.12),transparent 34%),
    radial-gradient(circle at 12% 82%,rgba(158,123,79,.06),transparent 30%);
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.035;
  background-image:
    linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.12) 1px,transparent 1px);
  background-size:90px 90px;
}

/* ── Layout ── */
.container { width:min(94%,1500px); margin:auto }

/* ── Nav ── */
nav {
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
  background:rgba(245,240,232,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-inner {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img { width:315px; display:block }
.nav-links {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.nav-links a { color:var(--text); text-decoration:none; opacity:.72 }
.nav-links a:hover { opacity:1 }
.nav-cta { border:1px solid var(--line); padding:14px 22px; opacity:1!important }
.language-switch { display:flex; border:1px solid var(--line) }
.language-switch button {
  background:transparent;
  border:0;
  color:var(--soft);
  padding:12px 15px;
  cursor:pointer;
  font-size:11px;
  letter-spacing:2px;
}
.language-switch .active { background:var(--text); color:var(--bg) }

/* ── Typography ── */
.label, .eyebrow {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:3.5px;
  font-size:11px;
  margin-bottom:24px;
}
.eyebrow { display:flex; align-items:center; gap:12px }
h1,h2,h3 { font-family:"Cormorant Garamond",serif; font-weight:400; color:var(--text) }
h1 { font-size:clamp(38px,4vw,62px); line-height:1; letter-spacing:-1.5px; max-width:760px }
h2 { font-size:clamp(32px,4vw,56px); line-height:1.03; letter-spacing:-1px; max-width:800px }
h3 { font-size:24px; line-height:1.1 }

body.fr h1,
body.fr h2,
body.fr h3,
body.fr .faq-item h3 { font-family:"EB Garamond",serif; letter-spacing:-0.5px }
p  { color:var(--soft); font-size:15.5px; line-height:1.8 }
.gradient {
  background:linear-gradient(90deg,#111111,#3B342C,var(--gold));
  -webkit-background-clip:text;
  color:transparent;
}

/* ── Buttons ── */
.primary {
  display:inline-block;
  background:var(--text);
  color:var(--bg);
  padding:15px 24px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10.5px;
  border:1px solid var(--text);
}
.primary:hover { background:transparent; color:var(--text) }
.secondary {
  color:var(--text);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10.5px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(0,0,0,.18);
}

/* ── Language switching ── */
[data-lang="fr"]                          { display:none }
body.fr [data-lang="en"]                  { display:none }
body.fr [data-lang="fr"]                  { display:block }
body.fr span[data-lang="fr"],
body.fr a[data-lang="fr"]                 { display:inline }
body:not(.fr) .metric-label[data-lang="fr"] { display:none }
body.fr .metric-label[data-lang="en"]    { display:none }
body.fr .metric-label[data-lang="fr"]    { display:block }

/* ── Sections ── */
section {
  padding:110px 0;
  border-bottom:1px solid rgba(0,0,0,.04);
}

/* ── Hero ── */
.hero {
  min-height:100vh;
  padding-top:125px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 75% 25%,rgba(158,123,79,.10),transparent 35%),
    linear-gradient(180deg,#F5F0E8 0%,#EFE7DC 100%);
}
.hero-grid {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:38px;
  align-items:center;
}
.hero p, .section-text {
  margin-top:28px;
  max-width:660px;
  color:var(--soft);
  font-size:16px;
}
.actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:40px;
  flex-wrap:wrap;
}

/* ── Split layout ── */
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}

/* ── Section backgrounds ── */
.section-alt { background:#EFE7DC }
.why-section  { background:#F5F0E8 }

/* ── Service cards ── */
.cards {
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  background:var(--card);
}
.card {
  padding:36px;
  border-right:1px solid var(--line);
  min-height:230px;
  background:var(--card);
}
.card:last-child { border-right:0 }
.card h3 { font-size:28px; margin-bottom:20px }
.card p  { font-size:15.5px; line-height:1.85 }
.service-card { min-height:520px; display:flex; flex-direction:column }
.card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:34px;
}
.card-number { color:var(--gold); font-size:11px; letter-spacing:3px }
.data-icon {
  width:44px; height:44px;
  border:1px solid rgba(158,123,79,.26);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  background:rgba(245,240,232,.55);
}
.data-icon svg {
  width:23px; height:23px;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.service-list {
  list-style:none;
  padding:0;
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.service-list li {
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:13px;
  font-size:14.5px;
  line-height:1.55;
  color:#55504A;
}
.check {
  font-family:"Cormorant Garamond",serif;
  font-size:25px;
  line-height:1;
  margin-top:-2px;
  color:#B08A57;
  flex-shrink:0;
}
.card-outcome {
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(168,131,84,.15);
}
.card-outcome p {
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:#4A4A4A;
}

/* ── Why section ── */
.why-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:start;
}
.why-content { border-top:1px solid var(--line) }
.why-item { padding:32px 0; border-bottom:1px solid var(--line) }
.why-item span { display:block; color:var(--gold); font-size:12px; letter-spacing:2px; margin-bottom:18px }
.why-item h3 { font-size:28px; margin-bottom:14px }
.why-item p  { max-width:560px }
.why-btn {
  display:flex;
  justify-content:flex-start;
  margin-top:72px;
}
.why-btn .primary { display:inline-flex; align-items:center; justify-content:center }

/* ── Opportunity section ── */
.opportunity-section h2 { max-width:900px; margin-bottom:60px }
.opportunity-intro {
  max-width:620px;
  margin:0 0 22px 0;
  font-size:17px;
  line-height:1.85;
  color:var(--soft);
}
.opportunity-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  background:#FAF7F2;
  overflow:hidden;
}
.opportunity-card {
  padding:40px 34px;
  border-right:1px solid var(--line);
  min-width:0;
  min-height:250px;
}
.opportunity-card:last-child { border-right:none }
.metric-label {
  display:block;
  font-family:"Inter",sans-serif;
  font-size:10px;
  line-height:1.35;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}
.opportunity-card > span {
  display:block;
  font-family:"Inter",sans-serif;
  font-weight:300;
  letter-spacing:-.055em;
  font-size:48px;
  line-height:1;
  color:var(--gold);
  margin-bottom:22px;
}
.opportunity-card p { max-width:225px; font-size:14px; line-height:1.8; color:var(--soft) }
.metric-source { display:block; font-size:10px; color:var(--soft); opacity:0.45; margin-top:10px; font-family:"Inter",sans-serif; letter-spacing:0.5px; font-style:italic }
.opportunity-cta { margin-top:50px; text-align:center }
.opportunity-cta p { font-size:18px; color:var(--soft); margin-bottom:24px }
.opportunity-cta .btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:240px;
  height:56px;
  background:#0A0A0A;
  color:#F5F0E8;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
  transition:.3s ease;
}
.opportunity-cta .btn-primary:hover { transform:translateY(-2px) }

/* ── FAQ section ── */
.faq-section {
  background:
    radial-gradient(circle at 75% 25%,rgba(158,123,79,.10),transparent 35%),
    linear-gradient(180deg,#F5F0E8 0%,#EFE7DC 100%);
}
.faq-section h2 { max-width:700px; margin-bottom:70px }
.faq-list { border-top:1px solid var(--line) }
.faq-item { padding:38px 0; border-bottom:1px solid var(--line); transition:padding .3s ease }
.faq-item.open { padding-left:10px }
.faq-item h3 {
  font-size:32px;
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  line-height:1.2;
  color:var(--text);
  margin-bottom:0;
  cursor:pointer;
  position:relative;
  padding-right:48px;
}
.faq-item h3::after {
  content:'+';
  font-family:"Inter",sans-serif;
  font-size:24px;
  font-weight:300;
  position:absolute;
  right:0;
  top:0;
  transition:transform .3s ease;
  color:var(--soft);
}
.faq-item.open h3::after { transform:rotate(45deg) }
.faq-item p {
  max-width:900px;
  font-size:18px;
  line-height:1.9;
  color:var(--soft);
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .4s ease, opacity .3s ease, margin-top .3s ease;
  margin-top:0;
}
.faq-item.open p { max-height:400px; opacity:1; margin-top:18px }

/* ── Book audit section ── */
.book-audit-section {
  background:
    radial-gradient(circle at 75% 25%,rgba(158,123,79,.10),transparent 35%),
    linear-gradient(180deg,#F5F0E8 0%,#EFE7DC 100%);
}
.book-audit-section h2 { max-width:900px; margin-bottom:24px }
.audit-subtitle { font-size:22px; color:var(--soft); margin-bottom:28px }
.audit-note {
  margin-bottom:50px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.calendly-inline-widget {
  border:1px solid var(--line);
  background:#FAF7F2;
  overflow:hidden;
}

/* ── Founder section ── */
.founder-section { padding:120px 0; border-top:1px solid rgba(0,0,0,.08) }
.founder-container { max-width:760px; margin:0 auto; text-align:center }
.section-eyebrow {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:3.5px;
  font-size:11px;
  margin-bottom:20px;
}
.founder-title { font-size:56px; line-height:1.1; margin:20px 0 30px }
.founder-description { max-width:650px; margin:0 auto 18px; color:#5d5d5d; font-size:18px; line-height:1.8 }
.founder-cta { margin-top:50px; display:flex; justify-content:center }

/* ── Footer ── */
footer { padding:50px 0; color:var(--soft); font-size:13px; background:#EFE7DC }
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  padding-top:32px;
}

/* =====================================================
   HERO RADAR VISUAL
===================================================== */

.visual.hero-radar {
  height:640px;
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.035));
}

/* Diagonal line */
.visual.hero-radar .visual-line {
  position:absolute;
  width:660px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);
  transform:rotate(-28deg);
  z-index:1;
}

/* Orbit rings */
.visual.hero-radar .orbit {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(0,0,0,.095);
  border-radius:50%;
  z-index:2;
}
.visual.hero-radar .orbit.one   { width:520px; height:520px }
.visual.hero-radar .orbit.two   { width:380px; height:380px }
.visual.hero-radar .orbit.three { width:240px; height:240px }

/* Core sphere */
.visual.hero-radar .core {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:110px; height:110px;
  border-radius:50%;
  background:radial-gradient(circle,#EDE5D8,#D8CCBC);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 0 55px rgba(158,123,79,.10),0 0 95px rgba(158,123,79,.05);
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
}
.core-email {
  width:42px; height:42px;
  flex-shrink:0;
  display:block;
}

/* Static labels — no connector lines */
.visual.hero-radar .radar-label {
  position:absolute;
  z-index:7;
  font-family:"Inter",sans-serif;
  font-size:10px;
  letter-spacing:3.6px;
  line-height:1;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  white-space:nowrap;
}
.radar-label::before, .radar-label::after { display:none; content:none }
.visual.hero-radar .label-1 { top:168px;    left:-45px  }
.visual.hero-radar .label-2 { top:300px;    right:-50px }
.visual.hero-radar .label-3 { bottom:168px; left:-25px  }

/* Hide unused dot elements */
.orbit-dot, .spark, .dot { display:none }

/* ── Inner orbit (Shopify + Klaviyo) ── */
/* CSS rotates the layer; JS counter-rotates each card to stay upright */
.tech-orbit-inner {
  display:block;
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  z-index:9;
  pointer-events:none;
  transform-origin:0 0;
  animation:gvOrbitLayer 26s linear infinite;
}
@keyframes gvOrbitLayer {
  from { transform:rotate(0deg) }
  to   { transform:rotate(360deg) }
}

/* ── Outer orbit (GA + Meta) ── */
/* JS drives both position and counter-rotation — no CSS animation needed */
.tech-orbit-outer {
  display:block;
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  z-index:9;
  pointer-events:none;
  transform-origin:0 0;
}

/* Logo anchors — positioned by CSS (inner) or JS (outer) */
.logo-anchor { position:absolute; top:0; left:0; width:0; height:0 }
.logo-shopify { transform:rotate(60deg)  translateX(120px) }
.logo-klaviyo { transform:rotate(240deg) translateX(120px) }

/* Logo card container — transparent, no background */
.logo-card,
.logo-klaviyo-card,
.logo-shopify-card,
.logo-ga-card,
.logo-meta-card {
  position:absolute;
  top:0; left:0;
  border:0; outline:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  animation:none;
}
.logo-card::before, .logo-card::after { display:none; content:none }

/* Logo images */
.logo-card img {
  display:block;
  object-fit:contain;
  filter:none;
  mix-blend-mode:multiply;
  opacity:1;
  background:transparent;
  border:0;
  box-shadow:none;
}
.logo-shopify img { width:94px;  height:94px }
.logo-klaviyo img { width:150px; height:auto }
.logo-ga-card  img { width:130px; height:auto; mix-blend-mode:multiply; opacity:.88 }
.logo-meta-card img { width:90px;  height:auto; mix-blend-mode:multiply; opacity:.88 }
.logo-tiktok-card img { width:54px; height:auto; display:block }

/* ── Label orbit (orbit.three) ── */
.tech-orbit-labels {
  display:block;
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  z-index:6;
  pointer-events:none;
  transform-origin:0 0;
}
.label-anchor {
  position:absolute;
  top:0; left:0;
  width:0; height:0;
}
.label-pill {
  position:absolute;
  top:0; left:0;
  transform:translate(-50%,-50%);
  white-space:normal;
  text-align:center;
  font-family:"Inter",sans-serif;
  font-size:9px;
  letter-spacing:2.4px;
  line-height:1.7;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(158,123,79,.35);
  background:rgba(245,240,232,.75);
  backdrop-filter:blur(6px);
  padding:8px 14px;
  border-radius:20px;
}

/* ── Hide middle orbit layer (unused) ── */
.tech-orbit-middle { display:none }

/* ── Hamburger menu ── */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px;
}
.hamburger span {
  display:block;
  width:22px;
  height:1.5px;
  background:var(--text);
  transition:all .25s ease;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

.mobile-menu {
  display:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(245,240,232,.97);
  backdrop-filter:blur(18px);
  z-index:998;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
}
.mobile-menu.open { display:flex }
.mobile-menu a {
  font-family:"Cormorant Garamond",serif;
  font-size:40px;
  color:var(--text);
  text-decoration:none;
  letter-spacing:-0.5px;
}
.mobile-menu a:hover { color:var(--gold) }
.mobile-menu .mobile-cta {
  margin-top:8px;
  font-family:"Inter",sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  border:1px solid var(--text);
  padding:14px 28px;
}
.mobile-menu .mobile-lang {
  display:flex;
  gap:0;
  border:1px solid var(--line);
  margin-top:8px;
}
.mobile-menu .mobile-lang button {
  background:transparent;
  border:0;
  color:var(--soft);
  padding:12px 20px;
  cursor:pointer;
  font-size:11px;
  letter-spacing:2px;
}
.mobile-menu .mobile-lang .active { background:var(--text); color:var(--bg) }

/* =====================================================
   ADD-ONS SECTION
===================================================== */
.addons-inner {
  margin: 80px 0 0;
  padding-top: 60px;
  border-top: 1px solid var(--line);
}
.addons-header {
  margin-bottom: 52px;
}
.addons-header h2 {
  margin: 12px 0 20px;
}
.addons-requirement {
  margin-top: 20px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--soft);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  line-height: 1.7;
}
.addons-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 44px;
}
.addon-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px;
  background: var(--card);
  border: 1px solid var(--line);
  transition: border-color .2s;
}
.addon-card:hover {
  border-color: var(--gold);
}
.addon-arrow {
  font-size: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.addon-card h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 4px;
}
.addon-card p {
  font-size: 13.5px;
  color: var(--soft);
  line-height: 1.6;
  margin: 0;
}
.addons-cta {
  text-align: center;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:900px) {
  /* Nav */
  .nav-links { display:none }
  .hamburger { display:flex }
  .logo img  { width:185px }
  .nav-inner { height:70px }

  /* Sections */
  section { padding:70px 0 }

  /* Hero */
  .hero { padding-top:90px; min-height:auto; padding-bottom:60px }
  .hero-grid { grid-template-columns:1fr; gap:0 }

  /* Hero radar — scaled down on mobile */
  .visual.hero-radar {
    display:flex;
    transform:scale(0.55);
    transform-origin:center center;
    height:360px;
    margin-top:0px;
    margin-bottom:-60px;
  }
  .hero { overflow:hidden }

  /* Split */
  .split { grid-template-columns:1fr; gap:0 }

  /* Service cards */
  .cards { grid-template-columns:1fr }
  .card  { border-right:0; border-bottom:1px solid var(--line) }
  .service-card { min-height:auto }
  .card-meta    { margin-bottom:24px }

  /* Footer */
  .footer-inner { flex-direction:column }

  /* Why */
  .why-grid { grid-template-columns:1fr; gap:40px }
  .why-btn  { margin-top:42px }

  /* Opportunity */
  .opportunity-grid { grid-template-columns:1fr }
  .opportunity-card {
    border-right:none;
    border-bottom:1px solid var(--line);
    min-height:auto;
  }
  .opportunity-card:last-child { border-bottom:none }
  .opportunity-card > span { font-size:40px }

  /* FAQ */
  .faq-section h2 { margin-bottom:50px }
  .faq-item       { padding:30px 0 }
  .faq-item h3    { font-size:24px }
  .faq-item p     { font-size:15px; line-height:1.8 }

  /* Founder */
  .founder-title { font-size:clamp(32px,8vw,46px); margin:16px 0 24px }
  .founder-description { font-size:16px }
  .founder-section { padding:80px 0 }

  /* Book audit */
  .audit-subtitle { font-size:18px; line-height:1.7 }
  .calendly-inline-widget { height:850px !important }

  /* Typography */
  h2 { font-size:clamp(28px,7vw,48px) }
}

@media(max-width:480px) {
  section { padding:55px 0 }
  .hero   { padding-top:80px }
  h1 { font-size:clamp(32px,8vw,48px) }
  h2 { font-size:clamp(26px,7vw,40px) }
  .founder-title { font-size:clamp(28px,8vw,38px) }
  .opportunity-card > span { font-size:36px }
  .faq-item h3 { font-size:22px }
}