/* ============================================================
   AXEON STUDIO — SYNAPSE PAGE STYLES
   css/synapse.css
   ============================================================ */

/* NAV */
/* SHARED */
/* HERO */
.hero{min-height:100vh;background:var(--bk);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-left{display:flex;flex-direction:column;justify-content:flex-end;padding:0 60px 90px;position:relative;z-index:2}
.hero-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bl);border:1px solid rgba(26,74,255,.4);background:rgba(26,74,255,.1);padding:6px 14px;margin-bottom:22px;width:fit-content}
.hero-pill-dot{width:5px;height:5px;background:var(--bl);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.hero-title{font-family:var(--fd);font-size:clamp(80px,11vw,160px);line-height:.87;color:#f2f0eb;margin-bottom:28px}
.hero-title em{color:var(--bl);font-style:normal;display:block}
.hero-desc{font-size:16px;line-height:1.85;color:rgba(242,240,235,.5);max-width:420px;margin-bottom:36px}
.hero-desc strong{color:rgba(242,240,235,.82);font-weight:400}
.hero-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.2);padding:13px 26px;transition:border-color .25s,background .25s}
.hero-cta:hover{border-color:var(--bl);background:rgba(26,74,255,.15)}
.hero-right{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(255,255,255,.06)}
.hero-stat-stack{display:flex;flex-direction:column;gap:2px;width:100%;padding:60px}
.hstat{border:1px solid rgba(255,255,255,.07);padding:28px 30px;transition:background .25s}
.hstat:hover{background:rgba(26,74,255,.08)}
.hstat-val{font-family:var(--fd);font-size:clamp(38px,4.5vw,62px);line-height:1;color:#f2f0eb;margin-bottom:4px}
.hstat-val em{color:var(--bl);font-style:normal}
.hstat-label{font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,240,235,.3)}

/* WHAT IS SYNAPSE */
.what-section{background:var(--bg)}
.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:52px}
.what-visual{position:relative;height:480px;background:var(--bk);overflow:hidden}
.what-visual canvas{position:absolute;inset:0;width:100%;height:100%}
.what-overlay{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,rgba(13,13,13,.95))}
.what-tag{font-family:var(--fm);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--bl);margin-bottom:6px}
.what-readout{font-family:var(--fm);font-size:11px;color:rgba(242,240,235,.5);line-height:1.7}
.what-readout span{color:var(--bl)}
.what-body p{font-size:15px;line-height:1.9;color:var(--bkl);margin-bottom:20px}
.what-body p strong{color:var(--bkm);font-weight:500}
.what-disclaimer{font-family:var(--fm);font-size:9px;letter-spacing:.1em;color:rgba(13,13,13,.3);border-top:1px solid var(--br);padding-top:14px;margin-top:8px;line-height:1.8}

/* HOW IT WORKS */
.how-section{background:var(--bk);border-top:1px solid rgba(255,255,255,.04)}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:52px}
.how-step{border:1px solid rgba(255,255,255,.07);padding:36px 28px 40px;position:relative;overflow:hidden;transition:background .25s}
.how-step:hover{background:rgba(26,74,255,.07)}
.how-step::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--bl),transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.how-step:hover::after{transform:scaleX(1)}
.how-num{font-family:var(--fd);font-size:52px;line-height:1;color:rgba(26,74,255,.18);margin-bottom:20px}
.how-name{font-family:var(--fd);font-size:22px;color:#f2f0eb;margin-bottom:10px;letter-spacing:.01em}
.how-desc{font-size:13px;line-height:1.8;color:rgba(242,240,235,.4)}

/* CAPABILITIES */
.cap-section{background:var(--bg2)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px}
.cap-card{background:#fff;border:1px solid var(--br);padding:36px 30px 40px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.cap-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.07)}
.cap-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--bl);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.cap-card:hover::before{transform:scaleX(1)}
.cap-icon{width:40px;height:40px;border:1px solid rgba(26,74,255,.25);background:var(--blp);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cap-icon svg{width:18px;height:18px;stroke:var(--bl);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cap-name{font-family:var(--fd);font-size:24px;color:var(--bk);margin-bottom:8px}
.cap-desc{font-size:13px;line-height:1.85;color:var(--bkl)}
.cap-tag{font-family:var(--fm);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--bl);margin-top:18px;padding-top:14px;border-top:1px solid var(--br)}

/* HUMAN LED */
.human-section{background:var(--bk)}
.human-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.human-quote{font-family:var(--fd);font-size:clamp(32px,4vw,58px);line-height:1.05;color:#f2f0eb;margin-bottom:28px}
.human-quote em{color:var(--bl);font-style:normal}
.human-sub{font-size:15px;line-height:1.85;color:rgba(242,240,235,.45)}
.human-sub strong{color:rgba(242,240,235,.75);font-weight:400}
.human-right{display:flex;flex-direction:column;gap:2px}
.human-row{display:flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.07);padding:20px 24px;transition:background .2s}
.human-row:hover{background:rgba(26,74,255,.07)}
.human-dot{width:8px;height:8px;background:var(--bl);border-radius:50%;flex-shrink:0}
.human-row-text{font-size:14px;color:rgba(242,240,235,.6);line-height:1.55}
.human-row-text strong{color:rgba(242,240,235,.85);font-weight:400;display:block}

/* CTA */
.cta-section{background:var(--bld);position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px}
.cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:52px}
.cta-t{font-family:var(--fd);font-size:clamp(38px,5vw,72px);line-height:.91;color:#f2f0eb}
.cta-sub{font-size:15px;color:rgba(242,240,235,.42);margin-top:14px;line-height:1.8;max-width:440px}
.cta-sub strong{color:rgba(242,240,235,.72);font-weight:400}
/* FOOTER */

/* ============================================================
   RESPONSIVE — SYNAPSE (synapse.css)
   ============================================================ */

@media (max-width: 1024px) {
  /* Hero: stack */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 80px 32px 64px; }
  .hero-right { display: none; } /* stat stack moves to after hero on mobile */
  .hero-stat-stack-mobile { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; padding: 0; }

  /* What section */
  .what-grid { grid-template-columns: 1fr; gap: 40px; }
  .what-visual { height: 280px; }

  /* How it works: 2 col */
  .how-steps { grid-template-columns: repeat(2,1fr); }

  /* Capabilities: 2 col */
  .cap-grid { grid-template-columns: repeat(2,1fr); }

  /* Human led */
  .human-inner { grid-template-columns: 1fr; gap: 40px; }

  /* CTA */
  .cta-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {
  .hero-left { padding: 72px 24px 56px; }
  .hero-title { font-size: clamp(60px, 14vw, 110px); }
  .how-steps { grid-template-columns: 1fr; padding: 0 24px; }
  .how-step { border-right: none !important; }
  .cap-grid { grid-template-columns: 1fr; }
  .what-section .section-pad,
  .how-section .section-pad,
  .cap-section .section-pad,
  .human-section .section-pad { padding: 60px 24px; }
  .hero-stat-stack { display: none; }
}

@media (max-width: 480px) {
  .hero-left { padding: 64px 20px 48px; }
  .hero-title { font-size: clamp(52px, 15vw, 88px); }
  .how-steps, .cap-grid { padding: 0; }
  .what-section .section-pad,
  .how-section .section-pad,
  .cap-section .section-pad,
  .human-section .section-pad { padding: 48px 20px; }
}

/* ── 1200px: large laptop tightening ── */
@media (max-width: 1200px) {
  .hero-left  { padding: 0 40px 64px; }
  .hero-right { padding: 40px; }
  .what-section .section-pad,
  .how-section .section-pad,
  .cap-section .section-pad,
  .human-section .section-pad,
  .faq-section .section-pad { padding: 80px 40px; }
}