/* ============================================================
   BARGIEL.AI — one-page personal brand landing
   Light, editorial, restrained. Indigo accent on CTAs + key numbers.
   Brand tokens from bargiel.AI Brand System v2.
   ============================================================ */

/* Tokens, reset, a11y utilities, .wrap, .eyebrow, headings, .lead, .num,
   buttons, footer, reveal and dark-mode tokens now live in brand-base.css
   (shared with /profile). This file holds only home-page-specific rules. */

/* .sec-index core + the HEADER system now live in brand-base.css (shared with
   /profile). Home keeps only the rule-line tweak: home hides the trailing line. */
.sec-index .ln{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:clamp(8px,2vw,24px);padding-bottom:0;overflow:hidden}
.hero-wave{
  position:absolute;top:-12%;right:-18%;width:min(72vw,720px);aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%20width%3D%22600%22%20height%3D%22600%22%20role%3D%22img%22%20aria-label%3D%22bargiel.AI%20wave%20motif%22%3E%0A%20%20%3Cpath%20d%3D%22M%20-37.5%20429.0%20C%20-91.5%20237.0%2C%20-1.5%2027.0%2C%20184.5%20-15.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.041%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-27.2%20435.0%20C%20-81.2%20243.0%2C%208.8%2033.0%2C%20194.8%20-9.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.072%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-16.8%20441.0%20C%20-70.8%20249.0%2C%2019.2%2039.0%2C%20205.2%20-3.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.115%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-6.4%20447.0%20C%20-60.4%20255.0%2C%2029.6%2045.0%2C%20215.6%203.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.168%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%204.0%20453.0%20C%20-50.0%20261.0%2C%2040.0%2051.0%2C%20226.0%209.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.223%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2014.4%20459.0%20C%20-39.6%20267.0%2C%2050.4%2057.0%2C%20236.4%2015.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.270%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2024.8%20465.0%20C%20-29.2%20273.0%2C%2060.8%2063.0%2C%20246.8%2021.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.296%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2035.2%20471.0%20C%20-18.8%20279.0%2C%2071.2%2069.0%2C%20257.2%2027.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.296%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2045.6%20477.0%20C%20-8.4%20285.0%2C%2081.6%2075.0%2C%20267.6%2033.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.270%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2056.0%20483.0%20C%202.0%20291.0%2C%2092.0%2081.0%2C%20278.0%2039.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.223%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2066.4%20489.0%20C%2012.4%20297.0%2C%20102.4%2087.0%2C%20288.4%2045.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.168%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2076.8%20495.0%20C%2022.8%20303.0%2C%20112.8%2093.0%2C%20298.8%2051.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.115%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2087.2%20501.0%20C%2033.2%20309.0%2C%20123.2%2099.0%2C%20309.2%2057.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.072%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2097.5%20507.0%20C%2043.5%20315.0%2C%20133.5%20105.0%2C%20319.5%2063.0%22%20stroke%3D%22%234F46E5%22%20stroke-opacity%3D%220.041%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E") center/contain no-repeat;
  opacity:.95;pointer-events:none;z-index:0;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,56px);align-items:center}
.hero-copy{max-width:640px}
.hero h1{margin:22px 0 0}
/* .hero-quote visual + .hero-ctas flex/responsive are in brand-base.css. */
.hero-quote{margin-top:18px}
.hero-quote cite{display:block;margin-top:12px;font-family:var(--fm);font-size:12px;font-style:normal;letter-spacing:0.08em;color:var(--mu)}
.hero-ctas{margin-top:20px}

/* hero photo — cut-out figure stands on the page (default) / framed dark card */
.hero-photo{position:relative;justify-self:center;width:100%;max-width:440px;display:flex;align-items:flex-end;justify-content:center}
.photo-glow{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:104%;aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(79,70,229,0.10),rgba(79,70,229,0) 72%);
}
.photo-img{position:relative;z-index:1;display:block}

/* CUT-OUT: single composite image (figure + lines + bottom fade baked in) */
body[data-herostyle="cutout"] .photo-img{
  width:auto;max-width:100%;max-height:860px;height:auto;object-fit:contain;
}
body[data-herostyle="cutout"] .tagchip{display:none}

/* FRAMED (rounded dark card) */
body[data-herostyle="framed"] .hero-photo{aspect-ratio:4/5;max-width:420px;border-radius:14px;overflow:hidden;background:var(--ink);box-shadow:0 30px 70px -32px rgba(11,17,51,0.45)}
body[data-herostyle="framed"] .photo-glow{display:none}
body[data-herostyle="framed"] .photo-img{width:100%;height:100%;object-fit:cover;object-position:center top;-webkit-mask-image:none;mask-image:none;filter:none}
.tagchip{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:var(--fm);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tx-dk);background:rgba(11,17,51,0.55);backdrop-filter:blur(6px);
  padding:8px 12px;border-radius:6px;border:1px solid var(--line-dk);
  white-space:nowrap;
}

@media(min-width:920px){
  .hero-grid{grid-template-columns:1.08fr 0.92fr;gap:clamp(48px,5vw,80px);align-items:start}
  .hero-copy{max-width:none;align-self:start;margin-top:clamp(56px,12vh,150px)}
  .hero-photo{justify-self:end;max-width:470px;align-self:start;margin-top:-48px}
}

/* banner tagline strip — original desktop layout: sits below the hero with a
   clear gap, no overlap. */
.banner{margin-top:clamp(56px,8vw,96px);position:relative;z-index:1}
/* MOBILE ONLY: pull the banner up so its top edge overlaps the bottom of the
   hero figure (the cut-out hides behind the dark banner). */
@media(max-width:919px){
  .banner{margin-top:calc(-1 * clamp(28px,8vw,64px));z-index:3}
}
.banner-inner{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(26px,4vw,42px) 0;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.banner-inner p{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-0.015em;color:var(--ink);
  text-wrap:balance;flex:1;min-width:260px;
}
.banner-inner .b-mono{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--mu);white-space:nowrap}

/* banner — solid dark card (approved: no wave, no gradient) */
.banner-inner{
  border:none;border-radius:16px;padding:clamp(32px,5vw,56px) clamp(26px,4vw,48px);
  margin-top:8px;position:relative;overflow:hidden;
  background:#0B1133;
}
.banner-inner p{color:#fff;position:relative;z-index:1}
.banner-inner .b-mono{color:rgba(255,255,255,0.72);position:relative;z-index:1}
.banner-inner .b-wave{display:none;position:absolute;inset:0;z-index:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%20width%3D%22600%22%20height%3D%22600%22%20role%3D%22img%22%20aria-label%3D%22bargiel.AI%20wave%20motif%22%3E%0A%20%20%3Cpath%20d%3D%22M%20-37.5%20429.0%20C%20-91.5%20237.0%2C%20-1.5%2027.0%2C%20184.5%20-15.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.057%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-27.2%20435.0%20C%20-81.2%20243.0%2C%208.8%2033.0%2C%20194.8%20-9.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.100%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-16.8%20441.0%20C%20-70.8%20249.0%2C%2019.2%2039.0%2C%20205.2%20-3.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.161%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-6.4%20447.0%20C%20-60.4%20255.0%2C%2029.6%2045.0%2C%20215.6%203.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.235%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%204.0%20453.0%20C%20-50.0%20261.0%2C%2040.0%2051.0%2C%20226.0%209.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.312%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2014.4%20459.0%20C%20-39.6%20267.0%2C%2050.4%2057.0%2C%20236.4%2015.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.378%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2024.8%20465.0%20C%20-29.2%20273.0%2C%2060.8%2063.0%2C%20246.8%2021.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.415%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2035.2%20471.0%20C%20-18.8%20279.0%2C%2071.2%2069.0%2C%20257.2%2027.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.415%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2045.6%20477.0%20C%20-8.4%20285.0%2C%2081.6%2075.0%2C%20267.6%2033.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.378%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2056.0%20483.0%20C%202.0%20291.0%2C%2092.0%2081.0%2C%20278.0%2039.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.312%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2066.4%20489.0%20C%2012.4%20297.0%2C%20102.4%2087.0%2C%20288.4%2045.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.235%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2076.8%20495.0%20C%2022.8%20303.0%2C%20112.8%2093.0%2C%20298.8%2051.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.161%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2087.2%20501.0%20C%2033.2%20309.0%2C%20123.2%2099.0%2C%20309.2%2057.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.100%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2097.5%20507.0%20C%2043.5%20315.0%2C%20133.5%20105.0%2C%20319.5%2063.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.057%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E") right center/cover no-repeat;opacity:.5;pointer-events:none}
body[data-banner="ink"] .banner-inner .b-wave{display:none}

/* ============================================================
   SECTION SHELL
   ============================================================ */
/* Section rhythm — brand "Space & rhythm": exactly one --sec-y unit of
   space sits between adjacent sections (never the sum of two edges).
   Plain sections carry it as margin-top (margins don't double); sections
   that render their own surface also pad internally so the band breathes. */
.section{padding-block:0;margin-top:var(--sec-y)}
.section.dna{padding-block:var(--sec-y)}
.section-head{margin-bottom:clamp(36px,5vw,60px);max-width:720px}
.section-head .h2{margin-top:8px}
.section-head .sub{margin-top:18px}

/* ============================================================
   SERVICES — two-zone card (content zone + tinted result band)
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:1fr;gap:16px}
.svc{
  background:var(--paper2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:grid;grid-template-rows:auto auto auto auto auto 1fr auto;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.svc:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 24px 50px -34px rgba(11,17,51,0.4)}
/* zone is transparent to the grid so every row aligns across adjacent cards */
.svc-zone{display:contents}
.svc h3{padding:clamp(26px,3.4vw,40px) clamp(26px,3.4vw,40px) 0;margin:0}
.svc-tag{padding:9px clamp(26px,3.4vw,40px) 0;font-size:1.04rem;font-weight:500;color:var(--tx);line-height:1.5;text-wrap:pretty;margin:0}
.svc-meta-label{
  padding:22px clamp(26px,3.4vw,40px) 0;margin:0;line-height:1.2;
  font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--tx-soft);
}
.svc-who{padding:2px clamp(26px,3.4vw,40px) 0;margin:0;font-size:1rem;color:var(--tx-soft);line-height:1.55;text-wrap:pretty}
.svc ul{
  padding:3px clamp(26px,3.4vw,40px) clamp(26px,3.4vw,40px);margin:0;
  list-style:none;display:flex;flex-direction:column;gap:11px;align-content:start;
}
.svc ul li{position:relative;padding-left:24px;font-size:0.99rem;line-height:1.5;color:var(--tx-soft)}
.svc ul li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;
  background:var(--accent);opacity:.9;
}
.svc-band{
  background:#1C2350;border-top:1px solid var(--line);
  padding:clamp(22px,2.6vw,30px) clamp(26px,3.4vw,40px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.svc-big{
  font-family:var(--fd);font-weight:700;font-size:clamp(1.7rem,2.4vw,2rem);line-height:1;
  letter-spacing:-0.01em;color:#A5B4FC;white-space:nowrap;flex-shrink:0;
}
.svc-cap{font-size:0.98rem;color:rgba(237,240,253,0.82);line-height:1.4;text-wrap:pretty;flex:1;min-width:180px}

@media(min-width:760px){
  .svc-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,auto auto auto auto auto 1fr auto);gap:16px}
  .svc{grid-template-rows:subgrid;grid-row:span 7}
}

/* ============================================================
   ABOUT / ENGINEERING DNA
   ============================================================ */
.dna{background:var(--ink);color:var(--tx-dk);position:relative;overflow:hidden}
.dna .section-head .h2{color:#fff}
.dna .sec-index{color:var(--mu-dk)}
.dna .sec-index b{color:var(--acc)}
.dna .eyebrow{color:var(--mu-dk)}
.dna-wave{position:absolute;top:-10%;left:-14%;width:min(60vw,560px);aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%20width%3D%22600%22%20height%3D%22600%22%20role%3D%22img%22%20aria-label%3D%22bargiel.AI%20wave%20motif%22%3E%0A%20%20%3Cpath%20d%3D%22M%20-37.5%20429.0%20C%20-91.5%20237.0%2C%20-1.5%2027.0%2C%20184.5%20-15.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.057%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-27.2%20435.0%20C%20-81.2%20243.0%2C%208.8%2033.0%2C%20194.8%20-9.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.100%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-16.8%20441.0%20C%20-70.8%20249.0%2C%2019.2%2039.0%2C%20205.2%20-3.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.161%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-6.4%20447.0%20C%20-60.4%20255.0%2C%2029.6%2045.0%2C%20215.6%203.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.235%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%204.0%20453.0%20C%20-50.0%20261.0%2C%2040.0%2051.0%2C%20226.0%209.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.312%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2014.4%20459.0%20C%20-39.6%20267.0%2C%2050.4%2057.0%2C%20236.4%2015.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.378%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2024.8%20465.0%20C%20-29.2%20273.0%2C%2060.8%2063.0%2C%20246.8%2021.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.415%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2035.2%20471.0%20C%20-18.8%20279.0%2C%2071.2%2069.0%2C%20257.2%2027.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.415%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2045.6%20477.0%20C%20-8.4%20285.0%2C%2081.6%2075.0%2C%20267.6%2033.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.378%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2056.0%20483.0%20C%202.0%20291.0%2C%2092.0%2081.0%2C%20278.0%2039.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.312%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2066.4%20489.0%20C%2012.4%20297.0%2C%20102.4%2087.0%2C%20288.4%2045.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.235%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2076.8%20495.0%20C%2022.8%20303.0%2C%20112.8%2093.0%2C%20298.8%2051.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.161%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2087.2%20501.0%20C%2033.2%20309.0%2C%20123.2%2099.0%2C%20309.2%2057.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.100%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2097.5%20507.0%20C%2043.5%20315.0%2C%20133.5%20105.0%2C%20319.5%2063.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.057%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E") center/contain no-repeat;opacity:.6;pointer-events:none;z-index:0}
.dna .wrap{position:relative;z-index:1}
.dna-grid{display:grid;grid-template-columns:1fr;gap:clamp(38px,4vw,44px)}
.dna-block{display:grid;grid-template-rows:auto auto auto;row-gap:0}
.dna-block .ico{
  width:64px;height:64px;border-radius:16px;
  background:rgba(124,118,240,0.15);
  border:1px solid rgba(165,180,252,0.28);
  display:flex;align-items:center;justify-content:center;
  color:#C7D2FE;margin-bottom:26px;
}
.dna-block .ico svg{width:32px;height:32px;display:block}
.dna-block h3{color:#fff;margin-bottom:14px;font-size:clamp(1.22rem,1.9vw,1.5rem);line-height:1.16}
.dna-block p{color:var(--mu-dk);font-size:1.0rem;line-height:1.62;text-wrap:pretty}
.dna-block p .hl{color:var(--tx-dk);font-weight:500}
@media(min-width:820px){
  .dna-grid{grid-template-columns:repeat(3,1fr);gap:clamp(32px,3.4vw,48px)}
  .dna-block{grid-template-rows:subgrid;grid-row:span 3}
}

/* ============================================================
   PROOF — two-zone card (content zone + tinted result band)
   ============================================================ */
.proof-grid{display:grid;grid-template-columns:1fr;gap:16px}
.proof{
  background:var(--paper2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:grid;grid-template-rows:auto auto 1fr auto auto;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.proof:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 24px 50px -34px rgba(11,17,51,0.4)}
/* zone is transparent to the grid so every row aligns across adjacent cards */
.proof-zone{display:contents}
.proof-type{
  padding:clamp(26px,3vw,34px) clamp(26px,3vw,34px) 0;margin:0;
  font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--tx-soft);
  display:flex;align-items:center;gap:9px;line-height:1.2;
}
.proof-type .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.proof-challenge{padding:10px clamp(26px,3vw,34px) 0;margin:0;font-size:1.04rem;font-weight:500;line-height:1.5;color:var(--tx);text-wrap:pretty}
.proof-quote{
  padding:20px clamp(26px,3vw,34px) clamp(26px,3vw,34px);margin:0;border-top:1px solid var(--line);
  font-size:0.98rem;line-height:1.55;color:var(--tx-soft);text-wrap:pretty;
}
.proof-band{
  background:#1C2350;border-top:1px solid var(--line);
  padding:clamp(22px,2.6vw,28px) clamp(26px,3vw,34px);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.proof-big{
  font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,2.1vw,1.85rem);line-height:1;
  letter-spacing:-0.01em;color:#A5B4FC;white-space:nowrap;
}
.proof-cap{font-size:0.96rem;color:rgba(237,240,253,0.82);line-height:1.4;text-wrap:pretty}
@media(min-width:880px){
  .proof-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr auto auto;gap:16px}
  .proof{grid-template-rows:subgrid;grid-row:span 5}
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{margin-top:var(--sec-y);padding-block:clamp(56px,8vw,90px) 36px}
.foot .eyebrow{color:var(--mu-dk);white-space:nowrap}
.cta-final{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,56px);padding-bottom:clamp(44px,6vw,72px);border-bottom:1px solid var(--line-dk)}
.cta-final-copy .h2{color:#fff;margin-top:16px;max-width:17ch}
.cta-final-sub{margin-top:20px;color:var(--mu-dk);font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.6;max-width:48ch;text-wrap:pretty}
.cta-final-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta-direct{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line-dk);
}
.cta-direct-label{
  font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:#707AA6;width:100%;
}
.cta-direct a{
  font-family:var(--fm);font-size:13.5px;letter-spacing:0.02em;color:var(--tx-dk);
  transition:color .18s ease;display:inline-flex;align-items:center;min-height:24px;
}
.cta-direct a:hover{color:#A5B4FC}
.cta-direct-sep{color:#475084}
.expect-card{background:none;border:none;border-radius:0;padding:0;align-self:center}
.expect-label{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:#9AA4C8;margin-bottom:24px}
.expect-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.expect-list li{display:flex;gap:14px;align-items:flex-start}
.expect-list .ebul{flex-shrink:0;width:7px;height:7px;border-radius:2px;background:#A5B4FC;margin-top:9px}
.expect-list .tx{font-size:0.99rem;line-height:1.55;color:var(--tx-dk);text-wrap:pretty}
.expect-list .num{color:#A5B4FC}
@media(min-width:900px){
  .cta-final{grid-template-columns:1.06fr 0.94fr;gap:clamp(48px,5vw,76px);align-items:center}
}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(244,245,251,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .3s cubic-bezier(.4,0,.2,1),background .25s ease,border-color .25s ease;
}
.mobile-cta.show{transform:translateY(0)}
.mobile-cta .btn{width:100%}
/* CTA bar adopts the colour of the dark section it overlaps (e.g. footer) */
.mobile-cta.over-dark{
  background:rgba(7,10,20,0.94);
  border-top-color:rgba(255,255,255,0.10);
}
@media(min-width:720px){.mobile-cta{display:none}}

/* ============================================================
   MOTION — reduced (home-specific additions; base covers the rest)
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .svc:hover,.proof:hover{transform:none!important}
}

/* tweak mount safety */
#tweak-root{position:fixed;z-index:90}

/* ============================================================
   DARK MODE — automatic, follows the OS / browser preference.
   No toggle: activates via prefers-color-scheme: dark.
   ============================================================ */
@media (prefers-color-scheme: dark){
  /* shared tokens, heading/num colours, ghost buttons, header & wordmark
     invert live in brand-base.css. Home-specific dark tweaks below. */
  .svc ul li::before{opacity:1}

  /* services & proof two-zone cards — lighter band for contrast vs dark card */
  .svc-band,.proof-band{background:#242E62;border-top-color:rgba(255,255,255,0.10)}
  .svc-big,.proof-big{color:#A5B4FC}

  /* header dark glass + wordmark invert now live in brand-base.css. */
  /* hero */
  .hero-wave{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%20width%3D%22600%22%20height%3D%22600%22%20role%3D%22img%22%20aria-label%3D%22bargiel.AI%20wave%20motif%22%3E%0A%20%20%3Cpath%20d%3D%22M%20-37.5%20429.0%20C%20-91.5%20237.0%2C%20-1.5%2027.0%2C%20184.5%20-15.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.057%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-27.2%20435.0%20C%20-81.2%20243.0%2C%208.8%2033.0%2C%20194.8%20-9.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.100%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-16.8%20441.0%20C%20-70.8%20249.0%2C%2019.2%2039.0%2C%20205.2%20-3.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.161%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%20-6.4%20447.0%20C%20-60.4%20255.0%2C%2029.6%2045.0%2C%20215.6%203.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.235%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%204.0%20453.0%20C%20-50.0%20261.0%2C%2040.0%2051.0%2C%20226.0%209.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.312%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2014.4%20459.0%20C%20-39.6%20267.0%2C%2050.4%2057.0%2C%20236.4%2015.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.378%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2024.8%20465.0%20C%20-29.2%20273.0%2C%2060.8%2063.0%2C%20246.8%2021.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.415%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2035.2%20471.0%20C%20-18.8%20279.0%2C%2071.2%2069.0%2C%20257.2%2027.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.415%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2045.6%20477.0%20C%20-8.4%20285.0%2C%2081.6%2075.0%2C%20267.6%2033.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.378%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2056.0%20483.0%20C%202.0%20291.0%2C%2092.0%2081.0%2C%20278.0%2039.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.312%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2066.4%20489.0%20C%2012.4%20297.0%2C%20102.4%2087.0%2C%20288.4%2045.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.235%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2076.8%20495.0%20C%2022.8%20303.0%2C%20112.8%2093.0%2C%20298.8%2051.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.161%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2087.2%20501.0%20C%2033.2%20309.0%2C%20123.2%2099.0%2C%20309.2%2057.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.100%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20d%3D%22M%2097.5%20507.0%20C%2043.5%20315.0%2C%20133.5%20105.0%2C%20319.5%2063.0%22%20stroke%3D%22%23A0AAFF%22%20stroke-opacity%3D%220.057%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");opacity:.85}
  /* dark sections keep depth against the darker page */
  .dna{background:#0B1133}
  .foot{background:#04060C}

  /* sticky mobile cta */
  .mobile-cta{background:rgba(7,10,20,0.92);border-top-color:var(--line)}
}