/*
Theme Name: Foresight Navigator
Theme URI: https://foresightnavigator.ai
Author: Synaptix
Author URI: https://synaptix.ae
Description: One-page landing theme for Foresight Navigator — an AI-powered foresight methodology for leaders navigating uncertainty.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: foresight-navigator
*/

:root{
  --navy:#0E1C5B;
  --blue:#4C7DF0;
  --slate:#8C95BA;
  --grey:#F1F1F2;
  --lime:#C9F23F;
  --paper:#FFFFFF;
  --ink:#0E1C5B;
  --ink-soft:#3A4376;
  --line:#E2E4ED;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Montserrat",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Playfair Display",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:.7em;margin:0 0 22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--lime);display:inline-block;}
.eyebrow.on-dark{color:var(--slate);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Montserrat";font-weight:600;font-size:.84rem;letter-spacing:.04em;
  padding:14px 26px;border-radius:2px;transition:.25s var(--ease);cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--lime);color:var(--navy);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(201,242,63,.65);}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.btn-ghost.dark{border-color:var(--line);color:var(--navy);}
.btn-ghost.dark:hover{border-color:var(--navy);}
.btn .arrow{transition:transform .25s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* ---------- wordmark ---------- */
.mark{display:flex;align-items:center;gap:13px;}
.mark .word{display:flex;flex-direction:column;line-height:1;}
.mark .word .f{font-family:"Playfair Display";font-weight:600;font-size:1.18rem;letter-spacing:.02em;}
.mark .word .n{font-family:"Montserrat";font-weight:600;font-size:.6rem;letter-spacing:.42em;margin-top:3px;}
.mark.light .f{color:#fff;}
.mark.light .n{color:var(--blue);}
.mark.dark .f{color:var(--navy);}
.mark.dark .n{color:var(--blue);}

/* ---------- nav ---------- */
header.nav{position:absolute;top:0;left:0;right:0;z-index:20;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:26px 0;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:.8rem;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.78);transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav-links .navbtn{
  border:1px solid rgba(255,255,255,.35);padding:11px 20px;border-radius:2px;color:#fff;font-weight:600;
}
.nav-links .navbtn:hover{border-color:var(--lime);color:var(--lime);}

/* admin bar offset when logged in */
body.admin-bar header.nav{top:32px;}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:170px 0 96px;
}
.hero::after{ /* faint compass crosshair grid */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(140,149,186,.07) 1px,transparent 1px) 0 0/100% 50%,
    linear-gradient(90deg,rgba(140,149,186,.07) 1px,transparent 1px) 50% 0/50% 100%;
  opacity:.5;mask-image:radial-gradient(circle at 72% 50%,#000,transparent 70%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:2;}
.hero h1{font-size:clamp(2.9rem,6vw,5rem);font-weight:600;margin:0 0 26px;}
.hero h1 .lime{color:var(--lime);font-weight:500;}
.hero .lede{font-family:"Playfair Display";font-style:italic;font-size:clamp(1.15rem,2vw,1.4rem);color:#dfe3f4;font-weight:400;margin:0 0 22px;max-width:30ch;}
.hero .sub{font-size:1rem;color:#aab2d6;max-width:46ch;margin:0 0 36px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

.hero-stats{display:flex;gap:36px;margin-top:54px;flex-wrap:wrap;position:relative;z-index:2;}
.hero-stats .stat{display:flex;flex-direction:column;gap:4px;}
.hero-stats .num{font-family:"Playfair Display";font-size:1.7rem;color:#fff;font-weight:600;}
.hero-stats .num em{color:var(--lime);font-style:normal;}
.hero-stats .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);}
.hero-stats .stat + .stat{padding-left:36px;border-left:1px solid rgba(140,149,186,.28);}

.compass-stage{display:flex;justify-content:center;align-items:center;}
.compass{width:min(440px,82vw);height:auto;}

/* compass animation */
@keyframes ringIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
@keyframes settle{
  0%{transform:rotate(-26deg);}
  55%{transform:rotate(9deg);}
  78%{transform:rotate(-4deg);}
  100%{transform:rotate(0deg);}
}
@keyframes arcDraw{from{stroke-dashoffset:300;}to{stroke-dashoffset:0;}}
@keyframes dotPulse{0%,100%{r:7;}50%{r:8.4;}}
.compass .ring-grp{transform-origin:100px 100px;animation:ringIn 1s var(--ease) both;}
.compass .needles{transform-origin:100px 100px;animation:settle 2.1s var(--ease) .3s both;}
.compass .arc{stroke-dasharray:300;animation:arcDraw 1.5s var(--ease) .55s both;}
.compass .center{animation:dotPulse 3.4s ease-in-out 2.4s infinite;}

/* ---------- generic section ---------- */
section{padding:108px 0;}
.section-head{max-width:760px;}
.section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:0 0 18px;}
.section-head .intro{font-size:1.04rem;color:var(--ink-soft);max-width:62ch;}

.band-grey{background:var(--grey);}
.band-navy{background:var(--navy);color:#fff;}
.band-navy .section-head .intro{color:#aeb6da;}

/* ---------- principle ---------- */
.principle{text-align:center;}
.principle .statement{
  font-size:clamp(2rem,4.4vw,3.4rem);max-width:18ch;margin:0 auto 14px;font-weight:600;
}
.principle .statement .b{color:var(--blue);}
.principle .statement .l{color:var(--ink);position:relative;}
.principle .statement .l::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.13em;background:var(--lime);z-index:-1;opacity:.85;}
.principle .sub{color:var(--ink-soft);margin:0 auto 64px;max-width:48ch;}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left;max-width:880px;margin:0 auto;}
.contrast .card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:38px 36px;position:relative;}
.contrast .card .tag{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-bottom:18px;}
.contrast .card h3{font-size:1.7rem;margin:0 0 6px;}
.contrast .card .verdict{font-family:"Montserrat";font-weight:600;font-size:.95rem;margin-bottom:14px;}
.contrast .card p{color:var(--ink-soft);font-size:.95rem;}
.contrast .fragile h3{color:var(--slate);}
.contrast .fragile .verdict{color:var(--slate);}
.contrast .resilient{border-color:rgba(76,125,240,.45);box-shadow:0 24px 50px -34px rgba(14,28,91,.45);}
.contrast .resilient h3{color:var(--navy);}
.contrast .resilient .verdict{color:var(--blue);}

/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border-top:1px solid var(--line);}
.caps .cap{padding:42px 34px 42px 0;border-right:1px solid var(--line);}
.caps .cap:last-child{border-right:none;padding-right:0;}
.caps .cap .ic{margin-bottom:24px;}
.caps .cap .k{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.caps .cap h3{font-size:1.4rem;margin:0 0 12px;}
.caps .cap p{color:var(--ink-soft);font-size:.92rem;}

/* ---------- journey ---------- */
.journey-line{font-family:"Playfair Display";font-style:italic;color:var(--slate);font-size:1rem;margin-top:14px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:60px;background:rgba(140,149,186,.28);border:1px solid rgba(140,149,186,.28);}
.step{background:var(--navy);padding:34px 30px;position:relative;transition:.3s var(--ease);}
.step:hover{background:#12246e;}
.step .no{font-family:"Playfair Display";font-size:2.2rem;color:var(--lime);line-height:1;margin-bottom:18px;font-weight:600;}
.step h3{font-size:1.15rem;color:#fff;margin:0 0 14px;font-family:"Montserrat";font-weight:600;letter-spacing:.01em;}
.step .out-k{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:5px;}
.step .out{color:#cfd5ee;font-size:.9rem;}

/* ---------- context / why now ---------- */
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.context-grid .lead h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin:0 0 20px;}
.context-grid .lead p{color:var(--ink-soft);margin-bottom:18px;}
.pull{border-left:2px solid var(--lime);padding:6px 0 6px 24px;margin-top:30px;}
.pull .q{font-family:"Playfair Display";font-style:italic;font-size:1.15rem;color:var(--navy);line-height:1.4;}
.pull .src{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:12px;}
.ctx-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.ctx-stats .cs{background:#fff;padding:34px 28px;}
.ctx-stats .cs .big{font-family:"Playfair Display";font-size:2.6rem;color:var(--navy);font-weight:600;line-height:1;}
.ctx-stats .cs .big em{font-style:normal;color:var(--blue);}
.ctx-stats .cs .cap2{font-size:.84rem;color:var(--ink-soft);margin-top:12px;}
.ctx-stats .cs.accent{background:var(--navy);}
.ctx-stats .cs.accent .big{color:#fff;}
.ctx-stats .cs.accent .big em{color:var(--lime);}
.ctx-stats .cs.accent .cap2{color:#b9c0e0;}

/* ---------- deliverables ---------- */
.delv{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:60px;}
.delv .d{display:flex;gap:22px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:4px;}
.band-grey .delv .d{background:#fff;}
.delv .d .no{font-family:"Playfair Display";font-size:1.5rem;color:var(--blue);line-height:1;font-weight:600;min-width:32px;}
.delv .d h3{font-size:1.2rem;margin:0 0 8px;}
.delv .d p{color:var(--ink-soft);font-size:.92rem;}

/* ---------- engagements ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:60px;background:rgba(140,149,186,.3);border:1px solid rgba(140,149,186,.3);}
.tier{background:var(--paper);padding:36px 28px;display:flex;flex-direction:column;transition:.3s var(--ease);}
.tier:hover{background:#fafbff;}
.tier .lvl{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;}
.tier h3{font-size:1.35rem;margin:0 0 16px;}
.tier p{color:var(--ink-soft);font-size:.9rem;flex:1;}
.tier .dot{width:8px;height:8px;border-radius:50%;background:var(--slate);margin-top:24px;}
.tier.feature .dot{background:var(--lime);width:34px;border-radius:2px;}

/* ---------- closing ---------- */
.closing{text-align:center;position:relative;overflow:hidden;}
.closing .quote{font-size:clamp(2rem,4.6vw,3.3rem);max-width:20ch;margin:0 auto 26px;font-weight:500;font-style:italic;line-height:1.18;}
.closing .quote .lime{color:var(--lime);font-style:italic;}
.closing .attr{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:54px;}
.closing .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- footer ---------- */
footer.site-footer{background:#0a153f;color:#fff;padding:54px 0 40px;}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.foot-inner .tag{font-family:"Playfair Display";font-style:italic;color:#9aa3cf;font-size:.95rem;}
.foot-inner .site{font-size:.82rem;letter-spacing:.1em;color:var(--slate);}
.foot-inner .site a:hover{color:var(--lime);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ---------- voices ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;}
.quote-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:40px 34px 36px;display:flex;flex-direction:column;}
.quote-card .qm{font-family:"Playfair Display";font-weight:700;font-size:3.6rem;line-height:.4;color:var(--lime);height:.34em;margin-bottom:14px;}
.quote-card blockquote{margin:0;font-family:"Playfair Display";font-weight:500;font-size:1.16rem;line-height:1.42;color:var(--navy);}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:8px;}
  .compass-stage{order:-1;margin-bottom:8px;}
  .compass{width:min(320px,70vw);}
  .nav-links a:not(.navbtn){display:none;}
  .context-grid{grid-template-columns:1fr;gap:40px;}
  .caps,.steps,.delv,.tiers,.contrast,.quotes{grid-template-columns:1fr;}
  .caps{border-top:none;}
  .caps .cap{border-right:none;border-bottom:1px solid var(--line);padding:34px 0;}
  .steps,.tiers{grid-template-columns:1fr;}
  .ctx-stats{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .wrap{padding:0 22px;}
  section{padding:74px 0;}
  .hero{padding:140px 0 72px;}
  .hero-stats .stat + .stat{padding-left:0;border-left:none;}
  .hero-stats{gap:24px;}
  .ctx-stats{grid-template-columns:1fr;}
  body.admin-bar header.nav{top:46px;}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
  .compass .arc{stroke-dashoffset:0;}
}