/* ============================================================
   SIAC Ventures — shared styles
   Brand: Navy #0F172A + Deep blue #1F3AA8 + Accent #2E6BFF + Grey
   Type:  Space Grotesk (headings/UI) + Newsreader (editorial accent)
   ============================================================ */
:root{
  --blue:#1F3AA8;        /* brand primary (deep blue, from new logo) */
  --blue-2:#2E6BFF;      /* brighter interactive / accent */
  --blue-d:#152B80;      /* deep brand hover */
  --ink:#0F172A;         /* headings / navy (matches logo bg) */
  --slate:#5B6474;       /* body secondary */
  --slate-l:#8990A0;     /* captions */
  --mist:#F4F6FB;        /* light section bg */
  --mist-2:#EEF2FA;      /* alt tint */
  --line:#E4E8F0;        /* borders */
  --silver:#AEB4BD;      /* logo grey */
  --white:#ffffff;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --shadow-sm:0 2px 10px -4px rgba(16,26,51,.10);
  --shadow-md:0 18px 40px -20px rgba(16,26,51,.20);
  --shadow-lg:0 30px 70px -28px rgba(16,26,51,.30);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; color:var(--ink); letter-spacing:-0.02em; line-height:1.08; font-weight:700; }
p{ margin:0; }
.serif{ font-family:'Newsreader',serif; font-weight:500; letter-spacing:-0.01em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.tint-blue{ color:var(--blue); }
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--blue); display:inline-block; }
.eyebrow.center{ justify-content:center; }
section{ position:relative; }
.sec{ padding:118px 0; }
.sec-sm{ padding:84px 0; }
.bg-mist{ background:var(--mist); }
.bg-ink{ background:var(--ink); color:#dbe2f0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-size:15px; font-weight:600; letter-spacing:0.01em; padding:14px 26px;
  border-radius:var(--r-sm); border:1.5px solid transparent; white-space:nowrap;
  transition:transform .18s var(--ease), background .18s, box-shadow .18s, color .18s, border-color .18s;
}
.btn .arr{ transition:transform .2s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-d); box-shadow:0 14px 30px -12px rgba(31,66,154,.55); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:var(--mist); }
.btn-onink{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn-onink:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.5); }

/* ---------- top nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px; transition:padding .25s var(--ease), box-shadow .25s, transform .35s var(--ease);
  background:#fff; backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav.nav-hide{ transform:translateY(-100%); }
.nav.scrolled{
  padding:12px 40px; box-shadow:var(--shadow-sm);
}
.nav-logo{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--ink); position:relative; padding:4px 0; white-space:nowrap; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--blue); transition:right .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color:var(--blue); font-weight:600; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-burger span{ width:24px; height:2px; background:var(--ink); transition:.25s; }
.mobile-menu{ display:none; }

/* ---------- diamond motif ---------- */
.dmark{ position:relative; display:inline-block; }
.dmark i{ position:absolute; transform:rotate(45deg); transform-origin:center; }

/* ---------- generic cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:30px;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:#d3dbe9; }

/* section heading block */
.head{ max-width:680px; }
.head h2{ font-size:clamp(32px,4vw,50px); margin-top:18px; }
.head p{ font-size:19px; color:var(--slate); margin-top:18px; line-height:1.6; }
.head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* stat number */
.stat-n{ font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-0.03em; line-height:1; color:var(--ink); }
.stat-l{ font-size:14.5px; color:var(--slate); margin-top:9px; }

/* ---------- inner page hero (light) ---------- */
.page-hero{ padding:172px 0 64px; background:var(--mist); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero .wrap{ position:relative; z-index:2; }
.ph-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none; }
/* ---------- floating shape motion (shared) ---------- */
@keyframes hvFloat{
  from{ transform:translate(var(--px,0px),calc(var(--py,0px) + var(--sy,0px) - 12px)) rotate(42deg); }
  to{ transform:translate(var(--px,0px),calc(var(--py,0px) + var(--sy,0px) + 14px)) rotate(49deg); }
}
.page-hero .pd{ position:absolute; right:-90px; top:-60px; width:320px; height:320px; transform:rotate(45deg); border:1.5px solid rgba(31,58,168,.10); border-radius:34px; animation:hvFloat 10s ease-in-out infinite alternate; will-change:transform; }
.page-hero .pd.two{ right:60px; top:90px; width:170px; height:170px; background:rgba(31,58,168,.04); border:none; animation-duration:8s; animation-delay:-3s; }
.page-hero h1{ font-size:clamp(38px,5vw,62px); line-height:1.02; margin-top:22px; max-width:760px; color:var(--ink); }
.page-hero p{ font-size:19px; color:var(--slate); max-width:560px; margin-top:22px; line-height:1.6; }
.crumb{ font-size:13px; color:var(--slate-l); font-weight:600; letter-spacing:.04em; }
.crumb a:hover{ color:var(--blue); }
.rule{ width:56px; height:3px; background:var(--blue-2); border-radius:2px; margin-top:18px; margin-bottom:22px; }
.accent-italic{ font-family:'Newsreader',serif; font-style:italic; color:var(--blue); font-weight:500; }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.field input, .field textarea, .field select{
  font-family:inherit; font-size:15.5px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(31,66,154,.10);
}
.field textarea{ resize:vertical; min-height:130px; }
.field .err{ font-size:12.5px; color:#d33; display:none; }
.field.invalid .err{ display:block; }
.field.invalid input, .field.invalid textarea{ border-color:#d33; }

/* ---------- page transitions ---------- */
/* Browsers with cross-document view transitions animate natively: no overlay,
   no scripted delay before the navigation starts. The wipe below is the
   fallback for everything else. */
@view-transition{ navigation:auto; }

.page-wipe{ position:fixed; inset:0; z-index:9999; background:var(--ink); transform:translateX(0); pointer-events:none; }
html.js .page-wipe{ transition:transform .5s var(--ease); }
html:not(.js) .page-wipe{ display:none; }
html.vt .page-wipe{ display:none; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ---------- animated logo mark (badge) ---------- */
.icon-badge{ position:relative; background:linear-gradient(150deg,#28449E,#1F3AA8); border-radius:22%; box-shadow:0 30px 60px -20px rgba(31,58,168,.45); overflow:hidden; transform:translate(var(--px,0px),var(--py,0px)); }
.icon-badge .arrow{ position:absolute; left:16%; top:14%; width:66%; height:72%; background:#fff; clip-path:polygon(66% 4%,100% 4%,38% 50%,100% 96%,66% 96%,4% 50%); opacity:1; transform:translateX(0); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.icon-badge .diamond{ position:absolute; left:46%; top:28%; width:44%; height:44%; background:var(--silver); border-radius:9px; transform:rotate(45deg) scale(1); opacity:1; transition:opacity .5s var(--ease) .3s, transform .55s cubic-bezier(.34,1.56,.64,1) .3s; }
html.js .icon-badge .arrow{ opacity:0; transform:translateX(-30px); }
html.js .icon-badge.in .arrow{ opacity:1; transform:translateX(0); }
html.js .icon-badge .diamond{ opacity:0; transform:rotate(45deg) scale(0); }
html.js .icon-badge.in .diamond{ opacity:1; transform:rotate(45deg) scale(1); }

.icon-real{ opacity:1; transform:scale(1); transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js .icon-real{ opacity:0; transform:scale(.85); }
html.js .icon-real.in{ opacity:1; transform:scale(1); }

/* ---------- animated CTA band (shared) ---------- */
.cta-band{ background:linear-gradient(135deg,#1F3AA8,#0F172A); border-radius:var(--r-xl); padding:64px 56px; color:#fff; position:relative; overflow:hidden; text-align:center; margin-top:52px; }
.cta-band canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; z-index:1; }
.cta-band h2{ color:#fff; font-size:clamp(26px,3.4vw,38px); max-width:640px; margin:0 auto; position:relative; z-index:2; }
.cta-band p{ color:rgba(255,255,255,.78); font-size:16.5px; max-width:560px; margin:18px auto 0; line-height:1.6; position:relative; z-index:2; }
.cta-band .btn{ margin-top:30px; position:relative; z-index:2; }
@media (max-width:920px){ .cta-band{ padding:48px 26px; } }

.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  font-size:14px; font-weight:600; color:var(--slate); background:#fff; border:1.5px solid var(--line);
  padding:9px 18px; border-radius:100px; cursor:pointer; transition:all .18s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color:var(--blue); color:var(--blue); }
.chip.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.footer{ background:var(--ink); color:#aeb9cd; padding:78px 0 30px; }
.footer a{ color:#aeb9cd; transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.10); align-items:start; }
.footer-logo{ height:40px; width:auto; margin-bottom:0; }
.footer-tag{ margin-top:18px; max-width:300px; font-size:14px; line-height:1.6; color:#8f9bb1; }
.footer h5{ color:#fff; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; margin:0 0 18px; font-weight:700; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:15px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13.5px; color:#7c889e; flex-wrap:wrap; gap:14px; }

/* ---------- scroll reveal ---------- */
/* content is visible by default; only hidden once JS marks the doc ready */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity,transform; }
html.js .reveal.in{ opacity:1; transform:none; }
/* drop the layer promotion once the transition has run — otherwise every
   revealed element stays promoted for the life of the page */
html.js .reveal.done{ will-change:auto; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
  .hv-d, .cta-d, .page-hero .pd{ animation:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-burger{ display:flex; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
  .footer-top > :first-child{ grid-column:1 / -1; }
  .footer-tag{ max-width:none; }
  .sec{ padding:80px 0; }
  .wrap{ padding:0 24px; }
  .nav{ padding:16px 24px; }
  .nav.scrolled{ padding:12px 24px; }
  .mobile-menu{
    position:fixed; inset:0; z-index:55; background:#fff; padding:90px 32px 32px;
    display:flex; flex-direction:column; gap:6px; transform:translateY(-100%); transition:transform .35s var(--ease);
  }
  .mobile-menu.open{ transform:none; }
  .mobile-menu a{ font-size:24px; font-weight:700; padding:16px 0; border-bottom:1px solid var(--line); }
  .mobile-menu .btn{ margin-top:20px; justify-content:center; }
}