/* ==========================================================================
   BLUELARK — PLATFORM PAGE TEMPLATE
   One stylesheet, applied to /platforms/salesforce, /platforms/hubspot and
   /platforms/odoo.

   This is a faithful port of the Bluelark design-system components those three
   pages were designed with (Hero, Section, Card, Badge, Button, CtaBand), so
   the pages look as they did — but as static HTML and CSS rather than a
   JavaScript runtime, and scoped to the .bl-platform wrapper so nothing here
   can reach the rest of the site.

   The one piece of behaviour kept from the original is the services picker:
   choosing a service on the left swaps the panel on the right. It is done with
   radio inputs and CSS sibling selectors — no JavaScript, and it works with a
   keyboard.
   ========================================================================== */

/* ==========================================================================
   0 · GLOBAL — the only rule that leaves the wrapper.
   ========================================================================== */
:root{
  --bl-header-h:60px;   /* theme header height — adjust to your theme */
}
html{scroll-padding-top:calc(var(--bl-header-h) + 16px)}

/* ==========================================================================
   1 · TOKENS  (verbatim from the Bluelark design system)
   ========================================================================== */
.bl-platform{
  --blue-600:#2940E7;
  --blue-400:#00A9FF;
  --blue-900:#000084;
  --cyan-400:#2FD8E8;
  --slate-500:#6E747D;
  --ink-900:#151D29;
  --white:#FFFFFF;
  --grey-100:#EBEEF0;
  --grey-050:#F6F8F9;
  --grey-200:#DCE1E6;
  --grey-300:#C3CAD2;
  --grey-700:#3D4652;
  --blue-050:#EEF0FE;
  --blue-100:#D7DCFB;
  --blue-700:#1F33C4;
  --sky-050:#E5F5FF;
  --sky-600:#0089D1;

  --text-heading:var(--ink-900);
  --text-body:var(--grey-700);
  --text-muted:var(--slate-500);
  --text-on-dark-muted:rgba(255,255,255,.72);

  --surface-page:var(--white);
  --surface-muted:var(--grey-100);
  --surface-soft:var(--blue-050);
  --border-subtle:var(--grey-200);

  --gradient-brand:linear-gradient(120deg,var(--blue-900) 0%,var(--blue-600) 55%,var(--blue-400) 100%);

  --font-heading:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Roboto","Helvetica Neue",Arial,sans-serif;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;

  --text-display-2:clamp(38px,4.4vw,48px);
  --text-h1:clamp(28px,3.2vw,40px);
  --text-h2:clamp(24px,2.4vw,32px);
  --text-h3:24px;
  --text-h4:20px;
  --text-lead:clamp(17px,1.4vw,20px);
  --text-body-lg:18px;
  --text-body-md:16px;
  --text-body-sm:14px;
  --text-caption:12px;
  --text-eyebrow:13px;
  --tracking-eyebrow:.22em;
  --tracking-tight:-.02em;
  --tracking-wide:.04em;
  --leading-tight:1.1;
  --leading-heading:1.2;
  --leading-snug:1.4;
  --leading-body:1.6;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
  --space-9:80px; --space-10:120px;
  --section-y:var(--space-10);
  --gutter:24px;
  --container-max:1200px;
  --container-narrow:760px;

  --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --border-width:1px;
  --border-width-thick:2px;

  --shadow-sm:0 2px 8px rgba(21,29,41,.06);
  --shadow-md:0 8px 24px rgba(21,29,41,.08);
  --shadow-brand:0 6px 16px rgba(41,64,231,.16);
  --shadow-panel:0 28px 64px rgba(0,0,80,.22);
  --ring-focus:0 0 0 3px rgba(0,169,255,.45);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --duration-fast:120ms;
  --duration-base:200ms;

  /* base */
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  font-weight:var(--weight-light);
  line-height:var(--leading-body);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:clip;   /* NOT hidden: hidden would make this div its own scroll container */
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
.bl-platform *,.bl-platform *::before,.bl-platform *::after{box-sizing:border-box}
.bl-platform section,.bl-platform figure{margin:0}
.bl-platform h1,.bl-platform h2,.bl-platform h3,.bl-platform h4{
  margin:0;font-family:var(--font-heading);font-weight:var(--weight-light);
  color:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight);
}
.bl-platform p{margin:0}
.bl-platform ul,.bl-platform ol{margin:0;padding:0;list-style:none}
.bl-platform img,.bl-platform svg{display:block;max-width:100%}
.bl-platform a{color:var(--blue-600);text-decoration:none;transition:color var(--duration-fast) var(--ease-out);box-shadow:none}
.bl-platform a:hover{color:var(--blue-900);text-decoration:none}
.bl-platform :focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-md)}
.bl-platform ::selection{background:var(--blue-100);color:var(--blue-900)}

.bl-platform .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.bl-platform .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Opt-in: if your theme wraps page content in a max-width or padded container,
   add bl-platform--fullbleed alongside bl-platform on the wrapper. */
.bl-platform--fullbleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:auto}

/* ==========================================================================
   3 · PRIMITIVES
   ========================================================================== */
.bl-platform .eyebrow{
  font-family:var(--font-heading);font-size:var(--text-eyebrow);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;line-height:1.3;color:var(--blue-600);
}
.bl-platform .eyebrow--white{color:var(--white)}

.bl-platform .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-heading);font-weight:var(--weight-medium);line-height:1;
  font-size:var(--text-body-lg);padding:16px 32px;
  border:var(--border-width-thick) solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out),transform var(--duration-fast) var(--ease-out);
}
.bl-platform .btn:active{transform:scale(.97)}
.bl-platform .btn-md{font-size:var(--text-body-md);padding:13px 26px}
.bl-platform .btn-primary{background:var(--blue-600);color:var(--white);border-color:var(--blue-600);box-shadow:var(--shadow-brand)}
.bl-platform .btn-primary:hover{background:var(--blue-700);border-color:var(--blue-700);color:var(--white)}
.bl-platform .btn-inverse{background:var(--white);color:var(--blue-600);border-color:var(--white)}
.bl-platform .btn-inverse:hover{background:var(--blue-050);border-color:var(--blue-050);color:var(--blue-700)}
.bl-platform .btn-inverse-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.bl-platform .btn-inverse-outline:hover{background:rgba(255,255,255,.14);border-color:var(--white);color:var(--white)}

.bl-platform .ico-circle{
  width:56px;height:56px;border-radius:var(--radius-pill);background:var(--blue-050);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.bl-platform .ico-circle svg{width:26px;height:26px;stroke:var(--blue-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-platform .ico-circle--onbrand{background:rgba(255,255,255,.14);width:64px;height:64px}
.bl-platform .ico-circle--onbrand svg{width:30px;height:30px;stroke:var(--white)}

/* ==========================================================================
   4 · SECTIONS
   ========================================================================== */
.bl-platform .sec{padding:var(--section-y) var(--gutter)}
.bl-platform .sec>.inner{max-width:var(--container-max);margin:0 auto}
.bl-platform .sec--page{background:var(--surface-page);color:var(--text-body)}
.bl-platform .sec--soft{background:var(--surface-soft);color:var(--text-body)}
.bl-platform .sec--muted{background:var(--surface-muted);color:var(--text-body)}

.bl-platform .sec-head{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-8);align-items:flex-start}
.bl-platform .sec-head h2{font-size:var(--text-h1)}
.bl-platform .sec-head p.intro{font-size:var(--text-lead);line-height:var(--leading-snug);font-weight:var(--weight-light);color:var(--text-body);max-width:var(--container-narrow)}
.bl-platform .sec-head--center{align-items:center;text-align:center;max-width:var(--container-narrow);margin-inline:auto}

/* ==========================================================================
   5 · HERO
   ========================================================================== */
.bl-platform .hero{
  position:relative;overflow:hidden;
  background:var(--gradient-brand);color:var(--white);
  /* Extra air above the eyebrow so the hero breathes under the sticky header. */
  padding:calc(var(--space-9) + 30px) var(--gutter) var(--space-9);
}
.bl-platform .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 78% 44%,rgba(255,255,255,.12),transparent 33%),
             linear-gradient(90deg,rgba(0,0,50,.15),transparent 80%);
}
/* The hero shares the 1200px container with every section below it, so its left
   edge lines up with the rest of the page. The reading measure is set on the
   type itself rather than on the box — a 1200px line of lead copy is unreadable,
   but a 1200px box with a 60ch paragraph in it still aligns correctly. */
.bl-platform .hero .inner{
  position:relative;max-width:var(--container-max);margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);
}
.bl-platform .hero h1{font-size:var(--text-display-2);line-height:var(--leading-tight);color:var(--white);max-width:22ch}
.bl-platform .hero .intro{font-size:var(--text-lead);font-weight:var(--weight-light);line-height:var(--leading-snug);color:var(--text-on-dark-muted);max-width:62ch}
.bl-platform .hero .btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2)}
.bl-platform .hero .badge-row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-4)}
.bl-platform .hero .badge-row img{width:120px;height:auto;background:var(--white);border-radius:var(--radius-md);padding:6px}
.bl-platform .hero .badge-row span{font-size:var(--text-body-sm);line-height:var(--leading-snug);color:var(--white);max-width:320px}

/* ==========================================================================
   6 · SERVICES PICKER  (radio-driven, no JavaScript)
   ========================================================================== */
.bl-platform .picker{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-7);align-items:start}
.bl-platform .picker-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.bl-platform .picker-list{display:flex;flex-direction:column;border-top:var(--border-width) solid var(--border-subtle)}
.bl-platform .picker-list label{
  display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:var(--space-4);align-items:center;
  padding:var(--space-4) 0;border-bottom:var(--border-width) solid var(--border-subtle);
  cursor:pointer;transition:all var(--duration-base) var(--ease-out);
}
.bl-platform .picker-list .n{
  font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);color:var(--text-muted);transition:color var(--duration-base) var(--ease-out);
}
.bl-platform .picker-list .t{
  font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--weight-light);
  letter-spacing:var(--tracking-tight);color:var(--text-heading);
  transition:color var(--duration-base) var(--ease-out),font-weight var(--duration-base) var(--ease-out);
}
.bl-platform .picker-list .arw{display:flex;justify-content:flex-end;opacity:0;transition:opacity var(--duration-base) var(--ease-out)}
.bl-platform .picker-list .arw svg{width:22px;height:22px;stroke:var(--blue-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-platform .picker-list label:hover .t{color:var(--blue-600)}

.bl-platform .picker-panel{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:var(--gradient-brand);color:var(--white);
  padding:var(--space-7);min-height:360px;
  display:none;flex-direction:column;gap:var(--space-4);justify-content:flex-end;
  box-shadow:var(--shadow-panel);
}
.bl-platform .picker-panels{position:sticky;top:calc(var(--bl-header-h) + 24px)}
.bl-platform .picker-panel .mark{position:absolute;width:420px;right:-130px;top:-110px;opacity:.13;pointer-events:none;color:var(--white)}
.bl-platform .picker-panel>*{position:relative;z-index:1}
.bl-platform .picker-panel .cnt{
  font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--white);
}
.bl-platform .picker-panel h3{font-size:var(--text-h2);font-weight:var(--weight-light);color:var(--white)}
.bl-platform .picker-panel p{font-size:var(--text-body-lg);font-weight:var(--weight-light);line-height:var(--leading-body);color:var(--white)}
.bl-platform .picker-panel .btn{align-self:flex-start;margin-top:var(--space-2)}

/* selection wiring — one rule per index, up to six services */
.bl-platform .picker-radio:nth-of-type(1):checked ~ .picker-panels .picker-panel:nth-child(1),
.bl-platform .picker-radio:nth-of-type(2):checked ~ .picker-panels .picker-panel:nth-child(2),
.bl-platform .picker-radio:nth-of-type(3):checked ~ .picker-panels .picker-panel:nth-child(3),
.bl-platform .picker-radio:nth-of-type(4):checked ~ .picker-panels .picker-panel:nth-child(4),
.bl-platform .picker-radio:nth-of-type(5):checked ~ .picker-panels .picker-panel:nth-child(5),
.bl-platform .picker-radio:nth-of-type(6):checked ~ .picker-panels .picker-panel:nth-child(6){display:flex}

.bl-platform .picker-radio:nth-of-type(1):checked ~ .picker-list li:nth-child(1) .t,
.bl-platform .picker-radio:nth-of-type(2):checked ~ .picker-list li:nth-child(2) .t,
.bl-platform .picker-radio:nth-of-type(3):checked ~ .picker-list li:nth-child(3) .t,
.bl-platform .picker-radio:nth-of-type(4):checked ~ .picker-list li:nth-child(4) .t,
.bl-platform .picker-radio:nth-of-type(5):checked ~ .picker-list li:nth-child(5) .t,
.bl-platform .picker-radio:nth-of-type(6):checked ~ .picker-list li:nth-child(6) .t{color:var(--blue-600);font-weight:var(--weight-medium)}

.bl-platform .picker-radio:nth-of-type(1):checked ~ .picker-list li:nth-child(1) .n,
.bl-platform .picker-radio:nth-of-type(2):checked ~ .picker-list li:nth-child(2) .n,
.bl-platform .picker-radio:nth-of-type(3):checked ~ .picker-list li:nth-child(3) .n,
.bl-platform .picker-radio:nth-of-type(4):checked ~ .picker-list li:nth-child(4) .n,
.bl-platform .picker-radio:nth-of-type(5):checked ~ .picker-list li:nth-child(5) .n,
.bl-platform .picker-radio:nth-of-type(6):checked ~ .picker-list li:nth-child(6) .n{color:var(--blue-600)}

.bl-platform .picker-radio:nth-of-type(1):checked ~ .picker-list li:nth-child(1) .arw,
.bl-platform .picker-radio:nth-of-type(2):checked ~ .picker-list li:nth-child(2) .arw,
.bl-platform .picker-radio:nth-of-type(3):checked ~ .picker-list li:nth-child(3) .arw,
.bl-platform .picker-radio:nth-of-type(4):checked ~ .picker-list li:nth-child(4) .arw,
.bl-platform .picker-radio:nth-of-type(5):checked ~ .picker-list li:nth-child(5) .arw,
.bl-platform .picker-radio:nth-of-type(6):checked ~ .picker-list li:nth-child(6) .arw{opacity:1}

/* keyboard focus on the hidden radio highlights its row */
.bl-platform .picker-radio:nth-of-type(1):focus-visible ~ .picker-list li:nth-child(1) label,
.bl-platform .picker-radio:nth-of-type(2):focus-visible ~ .picker-list li:nth-child(2) label,
.bl-platform .picker-radio:nth-of-type(3):focus-visible ~ .picker-list li:nth-child(3) label,
.bl-platform .picker-radio:nth-of-type(4):focus-visible ~ .picker-list li:nth-child(4) label,
.bl-platform .picker-radio:nth-of-type(5):focus-visible ~ .picker-list li:nth-child(5) label,
.bl-platform .picker-radio:nth-of-type(6):focus-visible ~ .picker-list li:nth-child(6) label{box-shadow:var(--ring-focus)}

@media(max-width:860px){
  .bl-platform .picker-panels{position:static}
  .bl-platform .picker-panel{min-height:0;padding:var(--space-5)}
}

/* ==========================================================================
   7 · PRODUCT CARDS
   ========================================================================== */
.bl-platform .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));grid-auto-rows:1fr;gap:var(--space-4)}
.bl-platform .products--tight{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.bl-platform .product{
  height:100%;min-height:240px;display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6);background:var(--white);
  border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
.bl-platform .product:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bl-platform .product h3{font-size:var(--text-h4);font-weight:var(--weight-medium)}
.bl-platform .product p{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-body)}

/* ==========================================================================
   8 · CAPABILITIES + RESULTS
   ========================================================================== */
.bl-platform .caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-5) var(--space-8)}
.bl-platform .cap{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-4);align-items:start;
  padding:var(--space-4) 0;border-bottom:var(--border-width) solid var(--border-subtle);
}
.bl-platform .cap .txt{display:flex;flex-direction:column;gap:var(--space-1)}
.bl-platform .cap h3{font-size:var(--text-h4);font-weight:var(--weight-medium)}
.bl-platform .cap p{font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-body)}

.bl-platform .results{margin-top:var(--space-8);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-4)}
.bl-platform .result{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-6);border-radius:var(--radius-lg);
  background:var(--blue-050);color:var(--text-heading);text-decoration:none;
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);
}
.bl-platform .result:hover{background:var(--white);box-shadow:var(--shadow-md);transform:translateY(-4px);color:var(--text-heading)}
.bl-platform .result .sector{
  align-self:flex-start;font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
  padding:6px 12px;border-radius:var(--radius-pill);background:var(--blue-600);color:var(--white);
}
.bl-platform .result .val{
  font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);line-height:var(--leading-heading);
}
.bl-platform .result .txt{font-size:var(--text-body-sm);line-height:var(--leading-body)}
.bl-platform .result .more{margin-top:auto;padding-top:var(--space-3);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--blue-600)}

/* ==========================================================================
   9 · FIT
   ========================================================================== */
.bl-platform .fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-5);align-items:stretch}
.bl-platform .fit-card{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--white);border:var(--border-width) solid var(--border-subtle);box-shadow:var(--shadow-sm);
}
.bl-platform .fit-card--brand{background:var(--gradient-brand);border:0;color:var(--white);box-shadow:var(--shadow-panel)}
.bl-platform .fit-card .mark{position:absolute;width:420px;right:-130px;bottom:-120px;opacity:.12;pointer-events:none;color:var(--white)}
.bl-platform .fit-card>*{position:relative;z-index:1}
.bl-platform .fit-card h3{font-size:var(--text-h3);font-weight:var(--weight-light)}
.bl-platform .fit-card--brand h3{color:var(--white)}
.bl-platform .fit-card li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-body)}
.bl-platform .fit-card--brand li{color:var(--white)}
.bl-platform .fit-card ul{display:flex;flex-direction:column;gap:var(--space-3)}
.bl-platform .fit-card li svg{width:20px;height:20px;flex-shrink:0;margin-top:4px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:var(--text-muted)}
.bl-platform .fit-card--brand li svg{stroke:var(--white)}
.bl-platform .fit-card li a{font-weight:var(--weight-medium);white-space:nowrap}

/* ==========================================================================
   10 · PROCESS STAGES
   ========================================================================== */
.bl-platform .stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--space-6) var(--space-5)}
.bl-platform .stage{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4)}
.bl-platform .stage .line{position:absolute;left:calc(50% + 28px);right:calc(-50% + 28px);top:19px;height:2px;background:var(--border-subtle)}
.bl-platform .stage:last-child .line{display:none}
.bl-platform .stage .i{
  width:40px;height:40px;border-radius:var(--radius-pill);background:var(--blue-600);color:var(--white);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-medium);line-height:1;
}
.bl-platform .stage h3{font-size:var(--text-h4);font-weight:var(--weight-medium)}
.bl-platform .stage p{font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-body)}
@media(max-width:860px){.bl-platform .stage .line{display:none}}

/* ==========================================================================
   11 · CTA BAND
   ========================================================================== */
.bl-platform .cta{
  position:relative;overflow:hidden;
  background:var(--gradient-brand);color:var(--white);
  padding:var(--space-9) var(--gutter);
}
.bl-platform .cta::after{
  content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 68%);pointer-events:none;
}
.bl-platform .cta .inner{
  position:relative;z-index:1;max-width:var(--container-narrow);margin:0 auto;
  display:flex;flex-direction:column;gap:var(--space-5);align-items:center;text-align:center;
}
.bl-platform .cta h2{font-size:var(--text-display-2);font-weight:var(--weight-light);color:var(--white)}
.bl-platform .cta p{font-size:var(--text-lead);font-weight:var(--weight-light);line-height:var(--leading-snug);color:var(--text-on-dark-muted)}
.bl-platform .cta .btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center;margin-top:var(--space-2)}

/* ==========================================================================
   12 · RESPONSIVE + MOTION
   ========================================================================== */
@media(max-width:700px){
  .bl-platform{--section-y:var(--space-9);--gutter:20px}
  .bl-platform .hero{padding:calc(var(--space-8) + 20px) var(--gutter) var(--space-8)}
  .bl-platform .fit-card{padding:var(--space-5)}
  .bl-platform .product{padding:var(--space-5);min-height:0}
  .bl-platform .sec-head{margin-bottom:var(--space-7)}
  .bl-platform .hero .btn,.bl-platform .cta .btn{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .bl-platform *,.bl-platform *::before,.bl-platform *::after{transition:none !important;animation:none !important}
  .bl-platform .product:hover,.bl-platform .result:hover{transform:none !important}
}
@media print{
  .bl-platform .hero,.bl-platform .cta,.bl-platform .fit-card--brand,.bl-platform .picker-panel{
    background:var(--white) !important;color:var(--ink-900) !important;box-shadow:none !important;
  }
  .bl-platform .picker-panel{display:flex !important}
}