/* =============================================
   SyndetAI Marketing Site — Shared Styles
   Loaded on every page. Page-specific styles live in css/<page>.css
   ============================================= */

/* RESET & TOKENS */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --dark-1:#060d1a;
  --dark-2:#0a1628;
  --dark-3:#0f2847;
  --dark-surface:#0c1424;
  --dark-border:#1a2a42;
  --blue:#0044EE;
  --cta:#0044EE;
  --cta-hover:#0033cc;
  --green:#22c55e;
  --green-light:#4ade80;
  --amber:#EF9F27;
  --red:#ef4444;
  --red-light:#f87171;
  --text-h:#dce4f0;
  --text-b:#8ba3c1;
  --text-m:#4A6080;
  --text-d:#3A4F6E;
  --text-dd:#2a3f5c;
  --sans:'DM Sans',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
body{font-family:var(--sans);color:#1a1a1a;background:#fff;-webkit-font-smoothing:antialiased}

/* =============================================
   NAVIGATION
   ============================================= */
.nav{display:flex;justify-content:space-between;align-items:center;padding:23px 60px;background:var(--dark-1);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--dark-border)}
.nav-logo{display:inline-flex;align-items:center;text-decoration:none}
.nav-logo img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:35px;align-items:center;font-size:16px;color:var(--text-d)}
.nav-links a{color:inherit;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text-h)}
.nav-links .active{color:var(--text-h)}
.nav-dd{position:relative;cursor:pointer}
.nav-dd::after{content:'';position:absolute;top:100%;left:0;right:0;height:20px}
.nav-dd:hover .dd-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.dd-menu{position:absolute;top:35px;left:-15px;background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:10px;padding:10px 0;min-width:200px;opacity:0;pointer-events:none;transform:translateY(-5px);transition:all .2s}
.dd-item{display:block;padding:10px 25px;font-size:15px;color:var(--text-b);text-decoration:none;transition:color .15s}
.dd-item:hover{color:#fff}
.nav-login{color:#fff;padding:8px 23px;border:1px solid rgba(0,68,238,.4);border-radius:8px;text-decoration:none;font-size:15px;font-weight:500;transition:all .2s}
.nav-login:hover{border-color:var(--blue);background:rgba(0,68,238,.08)}

/* Hamburger toggle (mobile only — hidden on desktop) */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin:-10px}
.nav-toggle span{display:block;width:28px;height:3px;background:var(--text-h);border-radius:3px;margin:6px 0;transition:transform .25s ease,opacity .2s ease}

/* =============================================
   SHARED COMPONENTS
   ============================================= */
.s-label{font-size:16px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.hero .s-label,.cta-end .s-label{color:#fff}

/* Buttons */
.btn-p{display:inline-block;padding:16px 40px;background:var(--cta);color:#fff;font-size:18px;font-weight:500;border-radius:10px;text-decoration:none;transition:background .2s;cursor:pointer;border:none;font-family:var(--sans)}
.btn-p:hover{background:var(--cta-hover)}
.btn-g{font-size:18px;color:var(--text-m);text-decoration:none;transition:color .2s;cursor:pointer}
.btn-g:hover{color:var(--text-b)}
.btn-outline{display:inline-block;padding:16px 40px;border:1px solid rgba(0,68,238,.4);color:var(--blue);font-size:18px;font-weight:500;border-radius:10px;text-decoration:none;transition:all .2s}
.btn-outline:hover{border-color:var(--blue);background:rgba(0,68,238,.08)}

/* =============================================
   HERO
   Default: left-aligned, 110px bottom padding, 750px h1 max-width
   Modifiers:
     .hero-center  — centered content, centered glow
     .hero-tight   — reduced bottom padding (for pages with immediate content below)
   ============================================= */
.hero{background:linear-gradient(160deg,var(--dark-1) 0%,var(--dark-2) 50%,var(--dark-3) 100%);padding:100px 60px 110px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-250px;right:-125px;width:750px;height:750px;background:radial-gradient(circle,rgba(0,68,238,.06) 0%,transparent 70%);pointer-events:none}
.hero h1{font-size:55px;font-weight:500;color:var(--text-h);line-height:1.15;margin-bottom:20px;letter-spacing:-1px;max-width:750px}
.hero h1 em{font-style:normal;color:#fff}
.hero-sub{font-size:21px;color:#fff;line-height:1.7;max-width:650px;margin-bottom:40px}

.hero.hero-center{text-align:center}
.hero.hero-center::before{right:auto;left:50%;transform:translateX(-50%)}
.hero.hero-center h1{max-width:none;margin-left:auto;margin-right:auto}
.hero.hero-center .hero-sub{margin:0 auto;max-width:700px}

.hero.hero-tight{padding-bottom:25px}

.cta-row{display:flex;gap:20px;align-items:center;margin-bottom:70px}

/* =============================================
   CLOSING CTA
   Default: 125px padding, 45px heading
   Modifier: .cta-end-sm — smaller variant (for insights page)
   ============================================= */
.cta-end{padding:125px 60px;text-align:center;background:linear-gradient(160deg,var(--dark-1) 0%,var(--dark-2) 50%,var(--dark-3) 100%);position:relative;overflow:hidden}
.cta-end::before{content:'';position:absolute;bottom:-125px;left:50%;transform:translateX(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(0,68,238,.05) 0%,transparent 70%);pointer-events:none}
.cta-end h2{font-size:45px;font-weight:500;color:var(--text-h);margin-bottom:15px;letter-spacing:-0px}
.cta-end p{font-size:20px;color:var(--text-m);margin:0 auto 45px;line-height:1.7;max-width:600px}

.cta-end.cta-end-sm{padding:100px 60px}
.cta-end.cta-end-sm h2{font-size:35px}
.cta-end.cta-end-sm p{font-size:19px;margin:0 auto 40px;max-width:575px}

/* =============================================
   FOOTER
   ============================================= */
.footer{padding:50px 60px;background:var(--dark-1);border-top:1px solid var(--dark-border)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}
.footer-logo{display:inline-block;margin-bottom:18px;line-height:0}
.footer-logo img{height:30px;width:auto;display:block}
.footer-contact{font-size:15px;color:var(--text-d);line-height:2}
.footer-contact a{color:var(--text-d);text-decoration:none;transition:color .2s}
.footer-contact a:hover{color:var(--text-b)}
.footer-nav{display:flex;flex-direction:column;gap:13px;text-align:right}
.footer-nav a{font-size:15px;color:var(--text-d);text-decoration:none;transition:color .2s}
.footer-nav a:hover{color:var(--text-b)}
.footer-line{height:1px;background:var(--dark-border);margin-bottom:25px}
.footer-bottom{display:flex;justify-content:space-between;font-size:14px;color:var(--text-dd)}
.footer-bottom a{color:var(--text-dd);text-decoration:none;margin-left:30px;transition:color .2s}
.footer-bottom a:hover{color:var(--text-d)}

/* =============================================
   MOBILE (shared)
   ============================================= */
@media(max-width:960px){
  .nav{padding:18px 25px}
  .nav-toggle{display:block}
  /* Hamburger → X when open */
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  /* Mobile menu: hidden drawer below nav */
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 25px 20px;background:var(--dark-1);border-bottom:1px solid var(--dark-border);font-size:19px}
  .nav.open .nav-links{display:flex}
  .nav-links > a,.nav-links .dd-item{display:block;padding:18px 0;font-size:19px;color:var(--text-h);border-bottom:1px solid var(--dark-border)}
  .nav-links > a:last-child{border-bottom:none}
  .nav-links .nav-login{border:none;border-radius:0;padding:18px 0;color:#fff;font-size:19px}
  .nav-links .nav-login:hover{background:none}
  /* Flatten the "What you get" dropdown on mobile */
  .nav-dd{display:block;cursor:auto}
  .nav-dd>a{display:none}
  .nav-dd::after{display:none}
  .dd-menu{position:static;opacity:1;pointer-events:auto;transform:none;background:transparent;border:0;padding:0;min-width:0;display:block}
  .dd-item{padding:18px 0;font-size:19px;color:var(--text-h);border-bottom:1px solid var(--dark-border)}

  .hero{padding:60px 25px 70px}
  .hero.hero-tight{padding-bottom:20px}
  .hero h1{font-size:38px}
  .hero-sub{font-size:19px}
  .cta-end{padding:70px 25px}
  .cta-end h2{font-size:33px}
  .cta-end.cta-end-sm{padding:70px 25px}
  .cta-end.cta-end-sm h2{font-size:30px}
  .footer{padding:40px 25px}
}

/* =============================================
   SCROLL-TRIGGERED REVEAL
   .reveal           — section fades + slides up once on scroll
   .reveal-stagger   — same for container's direct children, staggered
   js/reveal.js wires these up via IntersectionObserver.
   Respects prefers-reduced-motion (handled in JS: reduced = immediate in-view).
   ============================================= */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.reveal.in-view{opacity:1;transform:none}

.reveal-stagger>*{opacity:0;transform:translateY(25px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.reveal-stagger.in-view>*{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1;transform:none;transition:none}
}