/* =========================================================
   MARUPING FINANCE HOUSE
   Design system  |  v1.0  |  Mock site
   Palette derived from the corporate logo.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand */
  --ink:          #08001F;   /* deepest indigo, page base */
  --ink-2:        #0D0039;   /* logo navy */
  --ink-3:        #16064F;   /* raised surface */
  --ink-4:        #1E0A66;   /* border / hairline on dark */
  --violet:       #25238F;   /* logo gradient mid */
  --violet-lt:    #4B47D6;
  --magenta:      #F10495;   /* logo accent */
  --magenta-lt:   #FF3FB2;

  /* Neutrals */
  --paper:        #FFFFFF;
  --paper-2:      #F6F5FA;
  --paper-3:      #EDEBF4;
  --text-dark:    #12002E;
  --text-body:    #3B3457;
  --text-muted:   #6B6389;

  --on-dark:      #F2F0F8;
  --on-dark-mid:  #B7B1D2;
  --on-dark-dim:  #8A83AC;

  /* Gradients */
  --grad-brand:   linear-gradient(135deg, var(--magenta) 0%, var(--violet-lt) 52%, var(--ink-2) 100%);
  --grad-rule:    linear-gradient(90deg, var(--magenta) 0%, var(--violet-lt) 60%, transparent 100%);
  --grad-veil:    linear-gradient(180deg, rgba(8,0,31,.30) 0%, rgba(8,0,31,.72) 55%, rgba(8,0,31,.96) 100%);

  /* Type */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Metrics */
  --shell: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 78px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0; background:var(--paper); color:var(--text-body);
  font-family:var(--font-sans); font-size:17px; line-height:1.62;
  font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
h1,h2,h3,h4,h5{ margin:0; color:var(--text-dark); font-weight:600; letter-spacing:-.022em; line-height:1.08; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--magenta); color:#fff; }

/* ---------- 3. Type scale ---------- */
.t-hero   { font-size:clamp(2.9rem, 6.4vw, 5.4rem); line-height:1.02; letter-spacing:-.035em; font-weight:600; }
.t-display{ font-size:clamp(2.2rem, 4.4vw, 3.6rem); line-height:1.06; letter-spacing:-.03em; }
.t-h2     { font-size:clamp(1.75rem, 3vw, 2.6rem); line-height:1.12; letter-spacing:-.025em; }
.t-h3     { font-size:clamp(1.2rem, 1.7vw, 1.45rem); line-height:1.25; letter-spacing:-.015em; }
.t-lead   { font-size:clamp(1.06rem, 1.5vw, 1.3rem); line-height:1.58; color:var(--text-body); font-weight:400; }
.t-small  { font-size:.875rem; line-height:1.55; }
.t-serif  { font-family:var(--font-serif); font-weight:300; font-style:italic; letter-spacing:-.01em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.7rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--magenta); margin:0 0 1.4rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.85; }
.eyebrow.no-rule::before{ display:none; }
.on-dark .eyebrow, .sec-dark .eyebrow{ color:var(--magenta-lt); }

.num-tag{
  font-family:var(--font-sans); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  color:var(--text-muted);
}

/* ---------- 4. Layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding-inline:var(--gutter); }
.shell-wide{ max-width:1520px; }
.sec{ padding-block:clamp(64px, 9vw, 132px); }
.sec-tight{ padding-block:clamp(48px, 6vw, 84px); }
.sec-dark{ background:var(--ink); color:var(--on-dark); }
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{ color:var(--on-dark); }
.sec-dark .t-lead{ color:var(--on-dark-mid); }
.sec-ink2{ background:var(--ink-2); color:var(--on-dark); }
.sec-ink2 h1,.sec-ink2 h2,.sec-ink2 h3{ color:var(--on-dark); }
.sec-tint{ background:var(--paper-2); }

.grid{ display:grid; gap:clamp(24px,3.2vw,48px); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,88px); align-items:start; }
.split-even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.measure{ max-width:62ch; }
.measure-sm{ max-width:48ch; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; } .mt-4{ margin-top:4rem; }

.rule{ height:1px; background:var(--paper-3); border:0; margin:0; }
.sec-dark .rule, .sec-ink2 .rule{ background:rgba(255,255,255,.11); }
.rule-brand{ height:2px; width:64px; background:var(--grad-rule); border:0; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.92rem 1.6rem; border-radius:var(--r-sm);
  font-size:.83rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:all .35s var(--ease);
}
.btn svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{ background:var(--grad-brand); color:#fff; background-size:180% 180%; background-position:0% 50%; }
.btn-primary:hover{ background-position:100% 50%; box-shadow:0 12px 34px -12px rgba(241,4,149,.6); }
.btn-ghost{ border-color:rgba(255,255,255,.28); color:var(--on-dark); }
.btn-ghost:hover{ border-color:var(--magenta); color:#fff; background:rgba(241,4,149,.12); }
.btn-dark{ border-color:rgba(18,0,46,.2); color:var(--text-dark); }
.btn-dark:hover{ border-color:var(--magenta); color:var(--magenta); }
.btn-sm{ padding:.7rem 1.15rem; font-size:.74rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--magenta); transition:gap .3s var(--ease);
}
.link-arrow:hover{ gap:.95rem; }
.sec-dark .link-arrow{ color:var(--magenta-lt); }

/* ---------- 6. Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.nav.solid{
  background:rgba(8,0,31,.88); backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:rgba(255,255,255,.09);
}
.nav-inner{ width:100%; max-width:1520px; margin:0 auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:flex; align-items:center; gap:.85rem; flex-shrink:0; }
.brand img{ height:38px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.05rem); }
.nav-links a{
  position:relative; font-size:.79rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.76); padding-block:.4rem; transition:color .3s var(--ease); white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--grad-rule); transition:width .38s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:#fff; }
.nav-cta{ display:flex; align-items:center; gap:.9rem; }
.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:1.6px; background:#fff; margin:5px 0; transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:110;
  background:var(--ink); padding:2.4rem var(--gutter) 3rem;
  transform:translateY(-101%); transition:transform .5s var(--ease);
  overflow-y:auto; display:none;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  display:block; padding:1.05rem 0; border-bottom:1px solid rgba(255,255,255,.09);
  color:var(--on-dark); font-size:1.22rem; font-weight:500; letter-spacing:-.01em;
}
.mobile-menu a:hover{ color:var(--magenta-lt); }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height:clamp(600px, 96vh, 940px);
  display:flex; align-items:flex-end; padding-top:var(--nav-h);
  background:var(--ink); overflow:hidden; color:var(--on-dark);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.5;
  filter:saturate(.55) contrast(1.06); transform:scale(1.06); animation:driftIn 16s var(--ease) forwards; }
@keyframes driftIn{ to{ transform:scale(1); } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:var(--grad-veil), radial-gradient(90% 70% at 78% 12%, rgba(37,35,143,.55) 0%, transparent 62%);
}
.hero-body{ position:relative; z-index:2; width:100%; padding-bottom:clamp(52px,7vw,104px); }
.hero h1{ color:#fff; max-width:17ch; }
.hero .t-lead{ color:var(--on-dark-mid); max-width:58ch; margin-top:1.9rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.6rem; }

.hero-strip{
  position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.13);
  background:rgba(8,0,31,.55); backdrop-filter:blur(10px);
}
.hero-strip .shell{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.strip-item{ padding:1.7rem 1.4rem 1.7rem 0; }
.strip-item .k{ font-size:clamp(1.35rem,2.2vw,1.9rem); font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1; }
.strip-item .k em{ font-family:var(--font-serif); font-style:italic; font-weight:300; color:var(--magenta-lt); }
.strip-item .v{ margin-top:.55rem; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-dim); }

/* page hero (interior) */
.phero{
  position:relative; background:var(--ink); color:var(--on-dark);
  padding-top:calc(var(--nav-h) + clamp(70px,9vw,130px)); padding-bottom:clamp(56px,7vw,104px);
  overflow:hidden;
}
.phero-media{ position:absolute; inset:0; z-index:0; }
.phero-media img{ width:100%; height:100%; object-fit:cover; opacity:.28; filter:saturate(.5); }
.phero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,0,31,.72), rgba(8,0,31,.94)),
             radial-gradient(80% 90% at 88% 0%, rgba(241,4,149,.20), transparent 60%); }
.phero .shell{ position:relative; z-index:2; }
.phero h1{ color:#fff; max-width:20ch; }
.phero .t-lead{ color:var(--on-dark-mid); max-width:66ch; margin-top:1.5rem; }
.crumb{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:1.5rem; }
.crumb a:hover{ color:var(--magenta-lt); }

/* ---------- 8. Cards ---------- */
.card{
  position:relative; background:var(--paper); border:1px solid var(--paper-3);
  padding:clamp(26px,2.6vw,40px); border-radius:var(--r-md);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  height:100%;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; border-radius:var(--r-md) var(--r-md) 0 0;
  background:var(--grad-rule); opacity:0; transition:opacity .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 26px 60px -34px rgba(18,0,46,.42); border-color:transparent; }
.card:hover::before{ opacity:1; }
.card .idx{ font-size:.72rem; letter-spacing:.18em; color:var(--magenta); font-weight:600; }
.card h3{ margin:1.1rem 0 .8rem; }
.card p{ font-size:.96rem; color:var(--text-body); }

.card-dark{
  background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.11); color:var(--on-dark-mid);
}
.card-dark h3{ color:#fff; }
.card-dark:hover{ background:rgba(255,255,255,.06); box-shadow:0 26px 60px -30px rgba(0,0,0,.7); border-color:rgba(255,255,255,.2); }
.card-dark p{ color:var(--on-dark-mid); }

/* icon */
.ico{
  width:46px; height:46px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:linear-gradient(135deg, rgba(241,4,149,.14), rgba(75,71,214,.14));
  border:1px solid rgba(241,4,149,.22);
}
.ico svg{ width:22px; height:22px; stroke:var(--magenta); fill:none; stroke-width:1.4; }
.card-dark .ico{ background:linear-gradient(135deg, rgba(241,4,149,.2), rgba(75,71,214,.2)); border-color:rgba(255,255,255,.16); }
.card-dark .ico svg{ stroke:var(--magenta-lt); }

/* ---------- 9. Feature list / capability rows ---------- */
.cap-row{
  display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(18px,3vw,46px); align-items:start;
  padding-block:clamp(28px,3.4vw,46px); border-top:1px solid var(--paper-3);
  transition:background .4s var(--ease);
}
.cap-row:last-child{ border-bottom:1px solid var(--paper-3); }
.cap-row:hover{ background:linear-gradient(90deg, rgba(241,4,149,.04), transparent 55%); }
.cap-row .idx{ font-size:.75rem; font-weight:600; letter-spacing:.16em; color:var(--magenta); padding-top:.45rem; }
.cap-row p{ font-size:.98rem; }
.cap-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.15rem; }
.tag{
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; font-weight:600;
  padding:.38rem .68rem; border-radius:999px; border:1px solid var(--paper-3); color:var(--text-muted);
}
.sec-dark .cap-row{ border-color:rgba(255,255,255,.1); }
.sec-dark .tag{ border-color:rgba(255,255,255,.16); color:var(--on-dark-dim); }

/* ---------- 10. Stats ---------- */
.stat{ padding:1.9rem 0; border-top:1px solid var(--paper-3); }
.stat .k{ font-size:clamp(2.1rem,3.6vw,3.1rem); font-weight:600; letter-spacing:-.04em; color:var(--text-dark); line-height:1; }
.stat .k em{ font-family:var(--font-serif); font-style:italic; font-weight:300; color:var(--magenta); }
.stat .v{ margin-top:.7rem; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); }
.sec-dark .stat{ border-color:rgba(255,255,255,.12); }
.sec-dark .stat .k{ color:#fff; }
.sec-dark .stat .v{ color:var(--on-dark-dim); }

/* ---------- 11. Media ---------- */
.media{ position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--ink-2); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.media:hover img{ transform:scale(1.045); }
.media-duo img{ filter:saturate(.35) contrast(1.05); }
.media-duo::after{
  content:""; position:absolute; inset:0; mix-blend-mode:screen; opacity:.42;
  background:linear-gradient(150deg, rgba(37,35,143,.95) 0%, rgba(241,4,149,.5) 100%);
  pointer-events:none;
}
.media-tall{ aspect-ratio:4/5; }
.media-wide{ aspect-ratio:16/10; }
.media-frame{ position:relative; }
.media-frame::before{
  content:""; position:absolute; inset:auto auto 16px 16px; width:38%; height:34%;
  border-left:1px solid var(--magenta); border-bottom:1px solid var(--magenta);
  opacity:.75; z-index:3; pointer-events:none;
}

/* ---------- 12. Quote ---------- */
.quote{ border-left:2px solid var(--magenta); padding-left:clamp(20px,3vw,38px); }
.quote p{ font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,2.5vw,2.05rem); line-height:1.34; color:var(--text-dark); letter-spacing:-.015em; }
.sec-dark .quote p{ color:#fff; }
.quote .by{ margin-top:1.5rem; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); }
.sec-dark .quote .by{ color:var(--on-dark-dim); }

/* ---------- 13. People ---------- */
.person{ display:block; }
.person .media{ aspect-ratio:4/5; margin-bottom:1.4rem; }
.person .media img{ filter:grayscale(1) contrast(1.06); transition:filter .6s var(--ease), transform 1.1s var(--ease); }
.person:hover .media img{ filter:grayscale(0) contrast(1); transform:scale(1.04); }
.person h3{ margin-bottom:.3rem; }
.person .role{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--magenta); }
.person .bio{ margin-top:1rem; font-size:.94rem; color:var(--text-body); }
.sec-dark .person .bio{ color:var(--on-dark-mid); }

/* ---------- 14. Accordion ---------- */
.acc{ border-top:1px solid var(--paper-3); }
.acc:last-of-type{ border-bottom:1px solid var(--paper-3); }
.acc-head{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.5rem 0; color:var(--text-dark);
}
.acc-head h3{ font-size:1.1rem; }
.acc-sign{ position:relative; width:16px; height:16px; flex-shrink:0; }
.acc-sign::before,.acc-sign::after{
  content:""; position:absolute; background:var(--magenta); transition:transform .38s var(--ease);
}
.acc-sign::before{ inset:7.2px 0 auto 0; height:1.6px; }
.acc-sign::after{ inset:0 7.2px auto auto; width:1.6px; height:16px; }
.acc.open .acc-sign::after{ transform:rotate(90deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.acc-body-inner{ padding:0 0 1.7rem; max-width:74ch; color:var(--text-body); font-size:.97rem; }
.sec-dark .acc{ border-color:rgba(255,255,255,.11); }
.sec-dark .acc-head{ color:#fff; }
.sec-dark .acc-body-inner{ color:var(--on-dark-mid); }

/* ---------- 15. Table ---------- */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:640px; }
table.tbl th{
  text-align:left; padding:.95rem 1.1rem .95rem 0; font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);
  border-bottom:1px solid var(--paper-3); white-space:nowrap;
}
table.tbl td{ padding:1.05rem 1.1rem 1.05rem 0; border-bottom:1px solid var(--paper-3); vertical-align:top; }
table.tbl tr:hover td{ background:rgba(241,4,149,.03); }
.sec-dark table.tbl th{ color:var(--on-dark-dim); border-color:rgba(255,255,255,.13); }
.sec-dark table.tbl td{ border-color:rgba(255,255,255,.1); color:var(--on-dark-mid); }
.sec-dark table.tbl tr:hover td{ background:rgba(255,255,255,.035); }
.pill{ display:inline-block; padding:.24rem .6rem; border-radius:999px; font-size:.68rem;
  font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.pill-low{ background:rgba(30,160,110,.12); color:#0F7A52; }
.pill-med{ background:rgba(217,138,14,.14); color:#96620A; }
.sec-dark .pill-low{ background:rgba(46,214,150,.14); color:#5BE3AE; }
.sec-dark .pill-med{ background:rgba(255,183,58,.14); color:#FFC86B; }

/* ---------- 16. Process timeline ---------- */
.steps{ counter-reset:step; }
.step{ position:relative; padding-left:clamp(52px,6vw,84px); padding-bottom:clamp(34px,4vw,54px); }
.step:last-child{ padding-bottom:0; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; left:0; top:-2px; font-size:.75rem; font-weight:600; letter-spacing:.14em; color:var(--magenta);
}
.step::after{
  content:""; position:absolute; left:15px; top:20px; bottom:-6px; width:1px;
  background:linear-gradient(180deg, rgba(241,4,149,.5), rgba(255,255,255,.06));
}
.step:last-child::after{ display:none; }
.step h3{ margin-bottom:.55rem; }
.step p{ font-size:.96rem; }

/* ---------- 17. Forms ---------- */
.field{ margin-bottom:1.25rem; }
.field label{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:.55rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.92rem 1rem; font:inherit; font-size:.96rem; color:var(--text-dark);
  background:var(--paper); border:1px solid var(--paper-3); border-radius:var(--r-sm);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(241,4,149,.12);
}
.sec-dark .field label{ color:var(--on-dark-dim); }
.sec-dark .field input,.sec-dark .field select,.sec-dark .field textarea{
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.16); color:#fff;
}
.sec-dark .field input::placeholder,.sec-dark .field textarea::placeholder{ color:rgba(255,255,255,.4); }
.sec-dark .field select option{ background:var(--ink-2); color:#fff; }
.form-note{ font-size:.78rem; color:var(--text-muted); line-height:1.6; }
/* Netlify Forms honeypot. Must stay hidden and must not be removed. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sec-dark .form-note{ color:var(--on-dark-dim); }
.check{ display:flex; gap:.75rem; align-items:flex-start; font-size:.82rem; color:var(--text-muted); }
.check input{ width:auto; margin-top:.25rem; flex-shrink:0; }
.sec-dark .check{ color:var(--on-dark-dim); }

/* ---------- 18. Gate panel ---------- */
.gate{
  position:relative; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,52px); overflow:hidden;
  background:linear-gradient(150deg, rgba(37,35,143,.34), rgba(8,0,31,.5));
}
.gate::before{
  content:""; position:absolute; inset:-40% -10% auto auto; width:60%; height:120%;
  background:radial-gradient(circle at 60% 40%, rgba(241,4,149,.24), transparent 62%);
  pointer-events:none;
}
.gate > *{ position:relative; }
.locked{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.locked .blurred{ filter:blur(7px); opacity:.32; pointer-events:none; user-select:none; padding:1.6rem; }
.locked .lock-overlay{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:2rem;
  background:linear-gradient(180deg, rgba(8,0,31,.55), rgba(8,0,31,.85));
}

/* ---------- 19. Insights ---------- */
.post{ display:block; height:100%; }
.post .media{ aspect-ratio:16/10; margin-bottom:1.3rem; }
.post .meta{ display:flex; gap:.8rem; align-items:center; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:.85rem; }
.post .meta .cat{ color:var(--magenta); font-weight:600; }
.post h3{ transition:color .3s var(--ease); }
.post:hover h3{ color:var(--magenta); }
.sec-dark .post .meta{ color:var(--on-dark-dim); }

/* ---------- 20. CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--ink-2); color:#fff; }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 12% 108%, rgba(241,4,149,.34), transparent 58%),
             radial-gradient(60% 100% at 92% -10%, rgba(75,71,214,.42), transparent 62%);
}
.cta-band .shell{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; }

/* ---------- 21. Footer ---------- */
.foot{ background:var(--ink); color:var(--on-dark-dim); padding-top:clamp(56px,6vw,88px); }
.foot a{ color:var(--on-dark-mid); transition:color .3s var(--ease); }
.foot a:hover{ color:var(--magenta-lt); }
.foot-top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(28px,4vw,60px); padding-bottom:clamp(40px,5vw,64px); }
.foot h4{ color:#fff; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; margin-bottom:1.3rem; font-weight:600; }
.foot li{ margin-bottom:.72rem; font-size:.9rem; }
.foot .brand img{ height:52px; }
.foot-note{ font-size:.84rem; line-height:1.7; margin-top:1.5rem; max-width:38ch; }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.09); padding-block:1.7rem;
  display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; align-items:center;
  font-size:.78rem;
}
.foot-legal{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.disclaimer{
  border-top:1px solid rgba(255,255,255,.09); padding-block:1.6rem 4.6rem;
  font-size:.74rem; line-height:1.72; color:#6E668F; max-width:100%;
}

/* ---------- 22. Mock banner ---------- */
.mockbar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--grad-brand); color:#fff; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.6rem var(--gutter); display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.mockbar button{ background:none; border:1px solid rgba(255,255,255,.5); color:#fff; border-radius:99px;
  width:22px; height:22px; line-height:1; cursor:pointer; flex-shrink:0; }
.mockbar.hide{ display:none; }

/* ---------- 23. Reveal animation ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; }
.rv-d3{ transition-delay:.27s; } .rv-d4{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .hero-media img{ animation:none; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- 24. Responsive ---------- */
@media (max-width:1080px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .mobile-menu{ display:block; }
  .nav-cta .btn{ display:none; }
  .foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .split,.split-even{ grid-template-columns:1fr; }
  .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-strip .shell{ grid-template-columns:repeat(2,1fr); }
  .cap-row{ grid-template-columns:1fr; }
  .cap-row .idx{ padding-top:0; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .hero-strip .shell{ grid-template-columns:1fr 1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
  .mockbar{ font-size:.62rem; }
}