/* ============================================================
   Octawerks — AI Automation Hero design layer
   Replaces Synapse overrides. Base: #070612 dark purple-black.
   ============================================================ */

/* ── Core variables ── */
:root {
  --paper:  #070612;
  --bone:   #0c0b1a;
  --stone:  #1a1828;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --accent-gradient: linear-gradient(135deg, #FDE68A 0%, #F59E0B 55%, #D97706 100%);
}

/* ── Gradient / accent text ── */
.gradient-text,
.accent-text,
.accent-word {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navbar ── */
.nav {
  background: rgba(7,6,18,0.55) !important;
  
  -webkit-
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.nav.scrolled {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
.nav__links li.current-menu-item > a,
.nav__links a.active {
  color: var(--ink) !important;
  font-weight: 500;
  position: relative;
}
.nav__links li.current-menu-item > a::after,
.nav__links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1.5px;
  background: var(--accent-gradient);
  border-radius: 2px;
}
.nav__cta {
  background: linear-gradient(135deg,#fff 0%,#c8c8c8 100%) !important;
  color: #000 !important;
}
.nav__cta:hover { opacity: .82 !important; color: #000 !important; }

/* ── Section label ── */
.section-label {
  color: var(--accent);
}
.section-label::before {
  background: var(--accent) !important;
}

/* ── Eyebrow (services page) ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1.5px;
  background: var(--accent-gradient);
  flex-shrink: 0;
  border-radius: 2px;
}

/* ── Hero v2 (AI Auto Hero) ── */
.hero--v2 {
  background: #070612 !important;
  min-height: 100vh;
  display: flex !important;
  align-items: center;
  padding: 0 !important;
}
.hv2-wrap { position:absolute;inset:0;z-index:0;overflow:hidden; }
.hv2-wrap video {
  position:absolute;top:0;left:200px;
  width:calc(100% - 200px);height:100%;
  object-fit:cover;
  transform:scale(1.2);transform-origin:left center;
}
.hv2-fade-bottom {
  position:absolute;bottom:0;left:0;right:0;height:10rem;
  background:linear-gradient(to top,#070612,transparent);
  z-index:10;pointer-events:none;
}
.hv2-fade-left {
  position:absolute;top:0;bottom:0;left:200px;width:18rem;
  background:linear-gradient(to right,#070612,transparent);
  z-index:1;pointer-events:none;
}
.hv2-content {
  position:relative;z-index:20;
  display:flex;flex-direction:column;gap:3rem;
  align-items:flex-start;text-align:left !important;
  padding:8rem 0 6rem;max-width:620px;
}
.hv2-badge {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .9rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.2);
  -webkit-
  font-size:.85rem;font-weight:500;color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.04);
  cursor:default;user-select:none;
}
.hv2-text { display:flex;flex-direction:column;gap:1.5rem; }
.hv2-h1 {
  font-size:clamp(2.8rem,5.5vw,4.5rem);font-weight:500;
  line-height:1.2;color:#fff;margin:0;letter-spacing:-.03em;
}
.hv2-line { display:block; }
.hv2-serif { font-family:var(--display);font-style:normal;font-weight:500; }
.hv2-sub { font-size:1.1rem;color:rgba(255,255,255,.78);line-height:1.75;max-width:44ch;margin:0; }
.hv2-ctas { display:flex;flex-wrap:wrap;gap:1rem;align-items:center; }
.hv2-btn-primary {
  background:#fff !important;color:#070612 !important;
  border:none !important;border-radius:100px !important;
  padding:.75rem 1.4rem !important;font-weight:600 !important;font-size:.95rem !important;
  display:inline-flex !important;align-items:center !important;gap:.5rem !important;
  transition:opacity .2s,transform .2s !important;text-decoration:none;
}
.hv2-btn-primary:hover { opacity:.88 !important;transform:translateY(-2px) !important;color:#070612 !important; }
.hv2-btn-secondary {
  background:rgba(255,255,255,.15) !important;
  -webkit-
  border:none !important;border-radius:100px !important;
  padding:.75rem 2rem !important;color:#fff !important;
  font-weight:500 !important;font-size:.95rem !important;
  transition:background .2s !important;text-decoration:none;
}
.hv2-btn-secondary:hover { background:rgba(255,255,255,.24) !important;opacity:1 !important;color:#fff !important; }
@media(max-width:960px){
  .hv2-wrap video{left:0;width:100%;transform:scale(1.1);opacity:.35}
  .hv2-fade-left{display:none}
  .hv2-h1{font-size:clamp(2.4rem,7vw,3.6rem)}
  .hv2-sub{max-width:100%}
  .hv2-content{gap:2rem;padding:7rem 0 5rem}
}
@media(max-width:600px){.hv2-h1{font-size:clamp(2rem,8vw,3rem)}}

/* ── Stat strip ── */
.hero-stats {
  background: var(--bone);
  border-top:1px solid var(--stone);
  border-bottom:1px solid var(--stone);
  padding:clamp(3rem,6vh,5rem) 0;
}

/* ── Audience marquee ── */
.audience-bar {
  background: var(--paper) !important;
  border-top:1px solid rgba(255,255,255,0.06) !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
}

/* ── Section cards — bone background ── */
.section--bone { background: var(--bone) !important; border-top:1px solid var(--stone); border-bottom:1px solid var(--stone); }

/* ── Service / tier / feature cards ── */
.svc-tier,
.tier-card,
.service-pkg,
.example-card,
.hw-step,
.ba-card,
.ind-card,
.insight-card,
.privacy-badge {
  background: #0f0e1f !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
}
.svc-tier:hover,
.tier-card:hover,
.service-pkg:hover,
.example-card:hover,
.hw-step:hover,
.ba-card:hover,
.ind-card:hover,
.insight-card:hover,
.privacy-badge:hover {
  background: #13122a !important;
  border-color: rgba(245,158,11,0.3) !important;
}

/* ── How pricing actually works ── */
.pricing-mechanic {
  background: #0f0e1f !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-left: 3px solid #F59E0B !important;
  border-radius: 12px !important;
  padding: 2.5rem !important;
  margin-top: 2.5rem !important;
}
.pricing-mechanic h3 { color: var(--ink) !important; font-size:1.2rem !important; margin-bottom:1.25rem !important; }
.pricing-mechanic p  { color: rgba(255,255,255,.55) !important; line-height:1.8 !important; }
.pricing-mechanic strong { color: #F59E0B !important; font-weight:600 !important; }
.pm-step__tag { background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2); }

/* ── Pricing section header ── */
.pricing-head { grid-template-columns:1fr 1fr !important; gap:3rem !important; margin-bottom:3rem !important; }
.services-head { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:3rem; }
.services-reassure { background:#0f0e1f !important;border:1px solid rgba(255,255,255,.07) !important;border-radius:12px !important; }
@media(max-width:900px){
  .pricing-head,.services-head{grid-template-columns:1fr !important;gap:1.2rem !important}
}

/* ── CTA strip ── */
.cta-strip {
  background: var(--bone) !important;
  position: relative;
}
.cta-strip::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(245,158,11,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.cta-strip__inner { position:relative;z-index:1; }
.cta-strip .section-label { color:var(--accent) !important; }
.cta-strip .section-label::before { background:var(--accent) !important; }
.cta-strip h2 { color:var(--ink) !important; }
.cta-strip p  { color:var(--char-mid) !important; }
.cta-strip .email-link { color:var(--accent) !important; border-bottom-color:rgba(245,158,11,.3) !important; }
.btn--hero-primary {
  background:#fff !important;color:#070612 !important;
  border:none !important;border-radius:100px !important;
  transition:opacity .2s,transform .2s !important;
}
.btn--hero-primary:hover { opacity:.88 !important;transform:translateY(-2px) !important;color:#070612 !important; }

/* Display type */
h1,h2,h3,h4{font-family:var(--display)}