:root{
  --brand:#A90E14;
  --brand-700:#7E0A0F;
  --brand-300:#E4545A;
  --brand-soft:#FCF1F1;
  --brand-line:#F2DADB;

  --ink:#111519;
  --ink-2:#2B323B;
  --ink-3:#4A5460;
  --muted:#6B7683;
  --line:#E7E9ED;
  --line-2:#F0F2F5;
  --bg:#FFFFFF;
  --bg-soft:#F7F8FA;
  --bg-ink:#0E1216;

  --ok:#1FA855;
  --warn:#B45309;

  --r-sm:.5rem; --r:.875rem; --r-lg:1.25rem; --r-xl:1.75rem;
  --shadow-sm:0 1px 2px rgba(17,21,25,.05), 0 1px 3px rgba(17,21,25,.04);
  --shadow:0 4px 12px rgba(17,21,25,.06), 0 12px 32px -8px rgba(17,21,25,.08);
  --shadow-lg:0 8px 24px rgba(17,21,25,.08), 0 32px 64px -16px rgba(17,21,25,.16);

  --nav-h:76px;
}

*{ -webkit-tap-highlight-color:transparent }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px) }
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--ink-2); background:var(--bg);
  font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100% }
::selection{ background:var(--brand); color:#fff }

h1,h2,h3,h4,h5,.h1,.h2,.h3{ color:var(--ink); font-weight:700; letter-spacing:-.022em; line-height:1.18 }
h1,.h1{ font-size:clamp(2rem, 1.3rem + 2.6vw, 3.3rem); font-weight:800; letter-spacing:-.034em; line-height:1.1 }
h2,.h2{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); letter-spacing:-.028em; line-height:1.16 }
h3,.h3{ font-size:clamp(1.1rem, 1.02rem + .3vw, 1.28rem) }
h4{ font-size:1rem }
p{ margin-bottom:0 }
a{ text-decoration:none; color:var(--brand) }
a:hover{ color:var(--brand-700) }
hr.soft{ border-color:var(--line); opacity:1 }

.lead-sm{ font-size:1.0625rem; color:var(--muted); line-height:1.7 }
.lead-lg{ font-size:clamp(1.0625rem,1rem + .4vw,1.2rem); color:var(--ink-3); line-height:1.65 }
.text-muted-2{ color:var(--muted) !important }
.container{ max-width:1200px }
.measure{ max-width:64ch }
.measure-sm{ max-width:52ch }

.skip-link{
  position:absolute; left:.75rem; top:-100px; z-index:2000;
  background:var(--ink); color:#fff; padding:.65rem 1.1rem; border-radius:var(--r-sm);
  font-weight:600; font-size:.875rem; transition:top .2s;
}
.skip-link:focus{ top:.75rem; color:#fff }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); border-radius:2px }
.eyebrow.on-dark{ color:var(--brand-300) }
.eyebrow.on-dark::before{ background:var(--brand-300) }
.section{ padding:clamp(3.5rem, 2.4rem + 4.4vw, 6.25rem) 0 }
.section-tight{ padding:clamp(2.75rem, 2rem + 3.2vw, 4.5rem) 0 }
.section-soft{ background:var(--bg-soft) }
.section-line{ border-top:1px solid var(--line) }

.btn{
  font-weight:600; letter-spacing:-.01em; border-radius:100px;
  padding:.72rem 1.45rem; font-size:.9375rem; border-width:1.5px;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background-color .18s, color .18s, border-color .18s;
}
.btn-lg{ padding:.9rem 1.85rem; font-size:1rem }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 6px 18px -6px rgba(169,14,20,.55) }
.btn-brand:hover,.btn-brand:focus{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(169,14,20,.6) }
.btn-ink{ background:var(--ink); border-color:var(--ink); color:#fff }
.btn-ink:hover{ background:#000; border-color:#000; color:#fff; transform:translateY(-2px) }
.btn-outline-ink{ background:transparent; border-color:var(--line); color:var(--ink) }
.btn-outline-ink:hover{ background:var(--ink); border-color:var(--ink); color:#fff; transform:translateY(-2px) }
.btn-outline-light-2{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff }
.btn-outline-light-2:hover{ background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-2px) }
.btn-wa{ background:var(--ok); border-color:var(--ok); color:#fff }
.btn-wa:hover{ background:#188945; border-color:#188945; color:#fff; transform:translateY(-2px) }

.topbar{
  background:var(--ink); color:rgba(255,255,255,.72);
  font-size:.8125rem; padding:.55rem 0;
  padding-top:calc(.55rem + env(safe-area-inset-top, 0px));
}
.topbar a{ color:rgba(255,255,255,.72) }
.topbar a:hover{ color:#fff }
.topbar .sep{ width:1px; height:12px; background:rgba(255,255,255,.18) }

.site-nav{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s;
  padding:.85rem 0;
}
.site-nav.is-stuck{ box-shadow:0 6px 24px -12px rgba(17,21,25,.18) }
.navbar-brand{ display:flex; align-items:center; gap:.7rem; padding:0 }
.brand-mark{ width:38px; height:38px; flex:0 0 38px }
.brand-name{ font-weight:800; font-size:1.22rem; letter-spacing:-.04em; color:var(--ink); line-height:1 }
.brand-sub{ display:block; font-size:.5625rem; font-weight:600; letter-spacing:.13em; color:var(--muted); text-transform:uppercase; margin-top:3px }
.site-nav .nav-link{
  color:var(--ink-2); font-weight:600; font-size:.9375rem;
  padding:.5rem .85rem !important; border-radius:100px; transition:color .18s, background-color .18s;
}
.site-nav .nav-link:hover,.site-nav .nav-link:focus{ color:var(--brand) }
.site-nav .nav-link.active{ color:var(--brand); background:var(--brand-soft) }
.dropdown-menu{
  border:1px solid var(--line); border-radius:var(--r); padding:.5rem;
  box-shadow:var(--shadow); font-size:.9375rem; min-width:300px; margin-top:.5rem !important;
}
.dropdown-item{ border-radius:.6rem; padding:.6rem .75rem; font-weight:600; color:var(--ink-2); white-space:normal }
.dropdown-item small{ display:block; font-weight:500; font-size:.75rem; color:var(--muted); margin-top:1px }
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item.active{ background:var(--brand-soft); color:var(--brand) }
.dropdown-item.active small{ color:var(--brand-300) }
.dropdown-item .di-ico{ color:var(--brand); width:22px; display:inline-block; float:left; line-height:1.5 }
.dropdown-item .di-txt{ display:block; overflow:hidden }
.navbar-toggler{ border:1px solid var(--line); border-radius:.6rem; padding:.4rem .6rem }
.navbar-toggler:focus{ box-shadow:none }
@media (max-width:991.98px){
  .site-nav .navbar-collapse{ max-height:72vh; overflow-y:auto; margin-top:.75rem; padding-top:.5rem; border-top:1px solid var(--line) }
  .dropdown-menu{ border:0; box-shadow:none; padding-left:.5rem; min-width:0 }
}

.page-head{
  background:var(--bg-ink); color:rgba(255,255,255,.66);
  padding:clamp(2.75rem,2rem + 3.4vw,4.75rem) 0;
  position:relative; overflow:hidden;
}
.page-head::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(820px 460px at 84% -10%, rgba(169,14,20,.32), transparent 62%);
}
.page-head::after{
  content:""; position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(660px 380px at 12% 40%, #000 0%, transparent 72%);
          mask-image:radial-gradient(660px 380px at 12% 40%, #000 0%, transparent 72%);
}
.page-head > *{ position:relative }
.page-head h1{ color:#fff; margin:1.15rem 0 0 }
.page-head .ph-sub{ color:rgba(255,255,255,.62); font-size:clamp(1rem,.95rem + .35vw,1.14rem); margin-top:1rem; max-width:60ch; line-height:1.65 }
.crumb{ font-size:.8125rem; font-weight:600 }
.crumb a{ color:rgba(255,255,255,.55) }
.crumb a:hover{ color:#fff }
.crumb .sepx{ color:rgba(255,255,255,.3); margin:0 .5rem }
.crumb .now{ color:var(--brand-300) }

.hero{ position:relative; overflow:hidden; padding:clamp(3rem,2rem + 4.5vw,5.75rem) 0 clamp(3.25rem,2rem + 5vw,6rem) }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(169,14,20,.09), transparent 62%),
    radial-gradient(700px 420px at 2% 8%, rgba(17,21,25,.05), transparent 60%),
    linear-gradient(180deg,#fff 0%, #FAFBFC 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(760px 480px at 30% 20%, #000 10%, transparent 75%);
          mask-image:radial-gradient(760px 480px at 30% 20%, #000 10%, transparent 75%);
}
.pill{
  display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:100px;
  padding:.4rem .95rem .4rem .5rem; font-size:.8125rem; font-weight:600; color:var(--ink-2);
  box-shadow:var(--shadow-sm); margin-bottom:1.5rem;
}
.pill .tag{ background:var(--brand-soft); color:var(--brand); border-radius:100px; padding:.16rem .6rem; font-size:.6875rem; font-weight:700; letter-spacing:.04em }
.hero h1 em{ font-style:normal; color:var(--brand); position:relative }
@media (min-width:576px){ .hero h1 em{ white-space:nowrap } }
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.28em;
  background:var(--brand); opacity:.14; border-radius:3px; z-index:-1;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem }
.hero-proof{ display:flex; flex-wrap:wrap; gap:.5rem 1.65rem; margin-top:1.8rem; font-size:.875rem; color:var(--muted); font-weight:500 }
.hero-proof i{ color:var(--ok); margin-right:.4rem }

.mock{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden }
.mock-bar{ display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; background:var(--bg-soft); border-bottom:1px solid var(--line) }
.mock-dot{ width:9px; height:9px; border-radius:50%; background:#D9DDE3 }
.mock-url{ margin-left:.55rem; background:#fff; border:1px solid var(--line); border-radius:100px; font-size:.6875rem; color:var(--muted); padding:.2rem .7rem; font-weight:500 }
.mock-body{ display:flex; min-height:320px }
.mock-side{ width:168px; flex:0 0 168px; background:var(--bg-ink); padding:1rem .75rem; display:none }
@media (min-width:576px){ .mock-side{ display:block } }
.mock-side .ms-logo{ display:flex; align-items:center; gap:.45rem; color:#fff; font-weight:800; font-size:.8125rem; letter-spacing:-.03em; padding:.25rem .5rem 1rem }
.mock-side .ms-logo span.d{ width:8px; height:8px; background:var(--brand); border-radius:2px }
.mock-nav{ display:flex; align-items:center; gap:.55rem; padding:.45rem .55rem; border-radius:.5rem; font-size:.75rem; color:rgba(255,255,255,.5); font-weight:500; margin-bottom:.15rem }
.mock-nav i{ font-size:.85rem }
.mock-nav.on{ background:rgba(255,255,255,.09); color:#fff }
.mock-nav.on i{ color:var(--brand-300) }
.mock-main{ flex:1; padding:1.1rem; background:#FCFCFD; min-width:0 }
.mock-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.9rem }
.mock-title{ font-size:.875rem; font-weight:700; color:var(--ink) }
.mock-chip{ font-size:.625rem; font-weight:700; padding:.2rem .55rem; border-radius:100px; background:var(--brand-soft); color:var(--brand); white-space:nowrap }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:.7rem; padding:.7rem .75rem; height:100% }
.kpi .k-lab{ font-size:.625rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em }
.kpi .k-val{ font-size:1.05rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.3 }
.kpi .k-up{ font-size:.625rem; font-weight:700; color:var(--ok) }
.kpi .k-down{ font-size:.625rem; font-weight:700; color:var(--brand) }
.chartbox{ background:#fff; border:1px solid var(--line); border-radius:.7rem; padding:.85rem; height:100% }
.bars{ display:flex; align-items:stretch; gap:6px; height:92px; margin-top:.6rem }
.bars span{ flex:1; height:100%; background:var(--line-2); border-radius:3px 3px 0 0; position:relative; overflow:hidden }
.bars span::after{ content:""; position:absolute; inset:auto 0 0 0; background:linear-gradient(180deg,var(--brand-300),var(--brand)); height:var(--h,40%); border-radius:3px 3px 0 0 }
.rowline{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.42rem 0; border-bottom:1px dashed var(--line-2); font-size:.6875rem }
.rowline:last-child{ border-bottom:0 }
.rowline .nm{ color:var(--ink-2); font-weight:600 }
.badge-soft{ font-size:.5625rem; font-weight:700; padding:.16rem .5rem; border-radius:100px; white-space:nowrap }
.b-ok{ background:#E9F7EF; color:#15803D }
.b-wait{ background:#FFF4E5; color:var(--warn) }
.b-new{ background:var(--brand-soft); color:var(--brand) }

.float-card{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:.8rem;
  box-shadow:var(--shadow); padding:.7rem .9rem; font-size:.75rem; font-weight:600; color:var(--ink); display:none;
}
@media (min-width:992px){ .float-card{ display:block } }
.float-a{ left:-28px; bottom:56px; animation:bob 5s ease-in-out infinite }
.float-b{ right:-30px; top:-26px; animation:bob 5s ease-in-out infinite .8s }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

.statbar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff }
.stat{ padding:1.6rem .5rem; text-align:center; position:relative }
.stat + .stat::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line) }
.stat .s-val{ font-size:clamp(1.5rem,1.2rem + 1vw,2.05rem); font-weight:800; color:var(--ink); letter-spacing:-.04em; line-height:1.1 }
.stat .s-val i{ color:var(--brand); font-style:normal }
.stat .s-lab{ font-size:.8125rem; color:var(--muted); font-weight:500; margin-top:.25rem }

.card-x{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem; height:100%; position:relative; overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.card-x:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#DDE0E5 }
.card-x.flat:hover{ transform:none; box-shadow:none }
.ico{
  width:46px; height:46px; border-radius:.75rem; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); font-size:1.2rem; margin-bottom:1.05rem;
  border:1px solid var(--brand-line); flex:0 0 auto;
}
.ico-sm{ width:38px; height:38px; font-size:1rem; border-radius:.6rem; margin-bottom:.85rem }
.card-x h3{ margin-bottom:.5rem }
.card-x p{ font-size:.9375rem; color:var(--muted); line-height:1.65 }
.card-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-size:.8125rem; font-weight:700; color:var(--brand) }
.card-link i{ transition:transform .2s }
.card-x:hover .card-link i{ transform:translateX(4px) }

.card-tap{ display:block; color:inherit }
.card-tap:hover{ color:inherit }
.card-tap::after{ content:""; position:absolute; inset:0 }

.feat-list{ list-style:none; padding:0; margin:.9rem 0 0; font-size:.875rem; color:var(--ink-3) }
.feat-list li{ padding-left:1.35rem; position:relative; margin-bottom:.34rem }
.feat-list li::before{ content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:0; color:var(--brand); font-size:.75rem }
.feat-list.tight li{ margin-bottom:.2rem }

.pain{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:.75rem; padding:1.15rem 1.25rem; height:100% }
.pain h4{ font-size:.9375rem; font-weight:700; color:var(--ink); margin-bottom:.3rem }
.pain p{ font-size:.875rem; color:var(--muted); line-height:1.6 }

.gate{
  display:block; position:relative; overflow:hidden; height:100%; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem;
  background:#fff; transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.gate:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#DDE0E5; color:inherit }
.gate::before{
  content:""; position:absolute; right:-70px; top:-70px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(169,14,20,.09), transparent 68%);
}
.gate h3{ font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem); margin:.85rem 0 .6rem }
.gate p{ color:var(--muted); font-size:.9375rem }
.gate-list{ list-style:none; padding:0; margin:1.15rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem }
.gate-list li{ font-size:.75rem; font-weight:600; color:var(--ink-3); background:var(--bg-soft); border:1px solid var(--line); border-radius:100px; padding:.28rem .7rem }
.gate-cta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.4rem; font-weight:700; font-size:.875rem; color:var(--brand) }
.gate:hover .gate-cta i{ transform:translateX(4px) }
.gate-cta i{ transition:transform .2s }

.step{ position:relative; padding-left:3.35rem; padding-bottom:2.15rem }
.step:last-child{ padding-bottom:0 }
.step::before{ content:""; position:absolute; left:17px; top:38px; bottom:-4px; width:2px; background:linear-gradient(180deg,var(--brand-line),var(--line)) }
.step:last-child::before{ display:none }
.step .num{
  position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  background:#fff; border:2px solid var(--brand); color:var(--brand);
  display:grid; place-items:center; font-weight:800; font-size:.8125rem; z-index:1;
}
.step h3{ font-size:1.0625rem; margin-bottom:.3rem }
.step p{ font-size:.9375rem; color:var(--muted) }
.step .out{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; font-size:.75rem; font-weight:700; color:var(--ink-3); background:var(--bg-soft); border:1px solid var(--line); border-radius:100px; padding:.28rem .75rem }
.step .out i{ color:var(--brand) }

.techgrp{ border:1px solid var(--line); border-radius:var(--r); padding:1.35rem; background:#fff; height:100% }
.techgrp h4{ font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem }
.tech{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:600; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line); border-radius:100px; padding:.34rem .8rem; margin:0 .3rem .45rem 0 }
.tech i{ color:var(--brand); font-size:.75rem }

.case{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; height:100%; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s }
.case:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.case-top{ padding:1.4rem 1.4rem 1.1rem; border-bottom:1px solid var(--line-2) }
.case-sector{ font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand) }
.case-top h3{ font-size:1rem; margin:.5rem 0 .45rem }
.case-top p{ font-size:.875rem; color:var(--muted); line-height:1.6 }
.case-metrics{ padding:1.1rem 1.4rem 1.4rem; display:flex; gap:1.4rem; margin-top:auto; flex-wrap:wrap }
.case-metrics .m-val{ font-size:1.35rem; font-weight:800; color:var(--ink); letter-spacing:-.035em; line-height:1.2 }
.case-metrics .m-lab{ font-size:.6875rem; color:var(--muted); font-weight:500; line-height:1.4 }

.band-dark{ background:var(--bg-ink); color:rgba(255,255,255,.7); position:relative; overflow:hidden }
.band-dark::before{ content:""; position:absolute; inset:0; background:radial-gradient(760px 420px at 82% 0%, rgba(169,14,20,.28), transparent 62%) }
.band-dark > *{ position:relative }
.band-dark h2,.band-dark h3{ color:#fff }
.commit{ border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); border-radius:var(--r); padding:1.5rem; height:100% }
.commit .ico{ background:rgba(169,14,20,.18); border-color:rgba(228,84,90,.28); color:var(--brand-300) }
.commit h3{ font-size:1rem; margin-bottom:.45rem }
.commit p{ font-size:.875rem; color:rgba(255,255,255,.58); line-height:1.65 }

.nav-seg{ display:inline-flex; background:var(--bg-soft); border:1px solid var(--line); border-radius:100px; padding:.3rem; gap:.2rem; flex-wrap:wrap; justify-content:center }
.nav-seg .nav-link{ border:0; border-radius:100px; padding:.5rem 1.05rem; font-size:.875rem; font-weight:600; color:var(--muted) }
.nav-seg .nav-link:hover{ color:var(--ink) }
.nav-seg .nav-link.active{ background:#fff; color:var(--brand); box-shadow:var(--shadow-sm) }

.accordion-item{ border:1px solid var(--line); border-radius:var(--r) !important; margin-bottom:.7rem; overflow:hidden; background:#fff }
.accordion-button{ font-weight:700; font-size:1rem; color:var(--ink); padding:1.15rem 1.35rem; background:#fff; letter-spacing:-.015em }
.accordion-button:not(.collapsed){ background:var(--brand-soft); color:var(--brand); box-shadow:none }
.accordion-button:focus{ box-shadow:none; border-color:var(--line) }
.accordion-button::after{ width:1rem; height:1rem; background-size:1rem }
.accordion-body{ padding:0 1.35rem 1.3rem; font-size:.9375rem; color:var(--muted); line-height:1.7 }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,1rem + 1.6vw,2.25rem); box-shadow:var(--shadow-lg) }
.form-card h3,.form-card .form-label,.form-card label{ color:var(--ink) }
.form-label{ font-size:.8125rem; font-weight:700; color:var(--ink-2); margin-bottom:.35rem }
.form-label .req{ color:var(--brand) }
.form-control,.form-select{ border:1px solid var(--line); border-radius:.65rem; padding:.7rem .9rem; font-size:.9375rem; color:var(--ink); background-color:#fff; transition:border-color .16s, box-shadow .16s }
.form-control::placeholder{ color:#A8B0BA }
.form-control:focus,.form-select:focus{ border-color:var(--brand-300); box-shadow:0 0 0 3.5px rgba(169,14,20,.1) }
.form-text{ font-size:.75rem; color:var(--muted) }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.tick{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.9rem }
.tick i{ color:var(--brand-300); font-size:1.05rem; line-height:1.5; flex:0 0 auto }
.tick div{ font-size:.9375rem; color:rgba(255,255,255,.72) }
.tick strong{ color:#fff; font-weight:700; display:block; font-size:.9375rem }
.tick.on-light i{ color:var(--brand) }
.tick.on-light div{ color:var(--muted) }
.tick.on-light strong{ color:var(--ink) }

.site-footer{ background:var(--bg-ink); color:rgba(255,255,255,.55); padding-top:clamp(3rem,2rem + 3vw,4.5rem) }
.site-footer h5{ font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem }
.site-footer a:not(.btn):not(.soc){ color:rgba(255,255,255,.55); font-size:.9375rem; display:inline-block; padding:.22rem 0; transition:color .16s }
.site-footer a:not(.btn):not(.soc):hover{ color:#fff }
.site-footer .f-about{ font-size:.9375rem; line-height:1.7; max-width:34ch }
.soc{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7) !important; font-size:.95rem; transition:background-color .18s, border-color .18s, color .18s, transform .18s }
.soc:hover{ background:var(--brand); border-color:var(--brand); color:#fff !important; transform:translateY(-2px) }
.f-bottom{ border-top:1px solid rgba(255,255,255,.09); margin-top:clamp(2rem,1.5rem + 2vw,3rem); padding:1.4rem 0; font-size:.8125rem }
.f-bottom a{ font-size:.8125rem }

.fab{ position:fixed; right:clamp(.9rem,2vw,1.5rem); z-index:1040; bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:.6rem; align-items:center }
.fab-wa{ width:54px; height:54px; border-radius:50%; background:var(--ok); color:#fff !important; display:grid; place-items:center; font-size:1.55rem; box-shadow:0 10px 26px -6px rgba(31,168,85,.6); transition:transform .2s }
.fab-wa:hover{ transform:scale(1.07) }
.to-top{ width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); color:var(--ink) !important; display:grid; place-items:center; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s }
.to-top.on{ opacity:1; visibility:visible; transform:translateY(0) }

.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1) }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .rv{ opacity:1; transform:none }
}

.legal{ font-size:1rem; line-height:1.78; color:var(--ink-3) }
.legal > section{ scroll-margin-top:calc(var(--nav-h) + 24px) }
.legal h2{
  font-size:clamp(1.25rem,1.12rem + .5vw,1.5rem); color:var(--ink);
  margin:2.75rem 0 .9rem; padding-top:2.25rem; border-top:1px solid var(--line);
}
.legal > section:first-child h2{ margin-top:0; padding-top:0; border-top:0 }
.legal h3{ font-size:1.0625rem; color:var(--ink); margin:1.75rem 0 .5rem }
.legal p{ margin-bottom:1rem }
.legal p:last-child{ margin-bottom:0 }
.legal ul,.legal ol{ margin:0 0 1rem; padding-left:1.35rem }
.legal li{ margin-bottom:.5rem }
.legal li::marker{ color:var(--brand) }
.legal strong{ color:var(--ink-2); font-weight:700 }
.legal a{ text-decoration:underline; text-underline-offset:2px }
.legal .lead-in{ font-size:1.0625rem; color:var(--ink-2) }

.legal-table{ width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:.9375rem }
.legal-table th,.legal-table td{ border:1px solid var(--line); padding:.7rem .85rem; text-align:left; vertical-align:top }
.legal-table th{ background:var(--bg-soft); font-weight:700; color:var(--ink); font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.06em }
.legal-table td{ color:var(--ink-3) }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

.callout{
  background:var(--brand-soft); border:1px solid var(--brand-line); border-left:3px solid var(--brand);
  border-radius:.75rem; padding:1.1rem 1.25rem; margin:0 0 1.25rem; font-size:.9375rem; color:var(--ink-3);
}
.callout strong{ color:var(--ink) }
.callout p:last-child{ margin-bottom:0 }

.todo{
  background:#FFF4CC; border-bottom:2px dotted #B45309; color:#7A4B00;
  padding:0 .2rem; border-radius:3px; font-weight:600; font-style:normal;
}

.toc{ position:sticky; top:calc(var(--nav-h) + 24px) }
.toc ol{ list-style:none; counter-reset:toc; padding:0; margin:0; font-size:.875rem }
.toc li{ counter-increment:toc; margin-bottom:.1rem }
.toc ol a{
  display:flex; gap:.6rem; padding:.42rem .6rem; border-radius:.5rem;
  color:var(--ink-3); font-weight:500; line-height:1.45; transition:background-color .16s, color .16s;
}
.toc ol a::before{ content:counter(toc) "."; color:var(--muted); font-weight:700; flex:0 0 1.35rem }
.toc ol a:hover{ background:var(--bg-soft); color:var(--brand) }
.toc ol a:hover::before{ color:var(--brand) }
.legal-meta{ font-size:.8125rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.4rem 1.25rem }
.legal-meta i{ color:var(--brand); margin-right:.3rem }

.form-alert{ display:flex; gap:.75rem; align-items:flex-start; padding:.9rem 1rem; margin-bottom:1.25rem; border-radius:12px; background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; font-size:.875rem; line-height:1.55 }
.form-alert i{ font-size:1.05rem; margin-top:.05rem }
.form-done{ text-align:center; padding:1.5rem .5rem }
.form-done h3{ font-size:1.35rem; margin-top:.5rem }
.form-done p{ color:var(--ink-3); max-width:44ch; margin:.6rem auto 0 }
.btn.is-loading{ pointer-events:none; opacity:.75 }

.page-head .ph-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.page-head .ph-back{ display:inline-flex; align-items:center; gap:.45rem; color:var(--brand-300); font-size:.875rem; font-weight:700; text-decoration:none }
.page-head .ph-back:hover{ color:#fff }
.page-head .ph-back i{ font-size:1.15rem }
.page-head .ph-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; margin-top:1rem; color:rgba(255,255,255,.62); font-size:.9375rem; font-weight:600 }
.page-head .ph-meta i{ margin-right:.35rem; color:var(--brand-300) }

.empty-state{ max-width:520px; margin:0 auto; text-align:center; padding:2rem 0 }
.empty-state h2{ font-size:1.35rem; margin-top:.25rem }
.empty-state p{ color:var(--muted); margin-top:.6rem }
.preview-note{ display:flex; gap:.6rem; align-items:center; padding:.75rem 1rem; border-radius:12px; background:#FFF7E8; border:1px solid #F7DDB0; color:var(--warn); font-size:.875rem; font-weight:600 }
.pager .pagination{ justify-content:center; gap:.35rem; flex-wrap:wrap }
.pager .page-link{ border-radius:10px !important; border:1px solid var(--line); color:var(--ink-2); font-weight:600; min-width:40px; text-align:center }
.pager .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); color:#fff }
.pager .page-link:focus{ box-shadow:0 0 0 .2rem rgba(169,14,20,.15) }
.pager p.small{ display:none }

.gcard{ display:block; color:inherit; text-decoration:none }
.gcard-img{ display:block; position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--line-2) }
.media-poster-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; background:#171b20; color:rgba(255,255,255,.72); font-size:.8rem; font-weight:700 }
.media-poster-placeholder i{ color:var(--brand-300); font-size:2rem }
.gcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.gcard:hover .gcard-img img{ transform:scale(1.04) }
.gcard-count{ position:absolute; right:.75rem; bottom:.75rem; display:inline-flex; gap:.35rem; align-items:center; padding:.25rem .65rem; border-radius:100px; background:rgba(14,18,22,.72); color:#fff; font-size:.75rem; font-weight:700; backdrop-filter:blur(4px) }
.gcard-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:1.1rem; font-size:1.15rem; font-weight:700; line-height:1.45; color:var(--ink); letter-spacing:-.01em; transition:color .2s }
.gcard:hover .gcard-title{ color:var(--brand) }
.gcard-date{ display:block; margin-top:.6rem; color:var(--muted); font-size:.875rem; font-weight:600 }

.gallery-desc{ max-width:74ch; font-size:clamp(1.05rem,1rem + .3vw,1.2rem); line-height:1.85; color:var(--ink-2); margin-bottom:2rem }
.gallery-desc p{ margin-bottom:1rem }
.gallery-hero{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.25rem }
.gallery-hero button{ border:0; padding:0; background:var(--line-2); position:relative; overflow:hidden; border-radius:var(--r-lg); cursor:zoom-in; display:block; width:100% }
.gallery-hero img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.gallery-hero button:hover img{ transform:scale(1.03) }
.gallery-hero .media-poster-placeholder{ border-radius:var(--r-lg) }
.gh-main{ aspect-ratio:4/3 }
.gh-main.gh-solo{ grid-column:1 / -1; aspect-ratio:16/8 }
.gh-side{ display:grid; grid-template-rows:1fr 1fr; gap:1.25rem }
.gh-side .gh-item:only-child{ grid-row:1 / -1 }
.gh-zoom{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); width:64px; height:64px; border-radius:50%; background:rgba(14,18,22,.45); color:#fff; display:grid; place-items:center; font-size:1.6rem; opacity:0; transition:opacity .25s, transform .25s; backdrop-filter:blur(4px) }
.gh-main:hover .gh-zoom{ opacity:1; transform:translate(-50%,-50%) scale(1) }
.gh-cap{ position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1.25rem 1rem; background:linear-gradient(transparent, rgba(14,18,22,.78)); color:#fff; text-align:left; font-size:.9375rem; font-weight:500 }
.gh-more{ position:absolute; inset:0; background:rgba(14,18,22,.58); color:#fff; display:grid; place-items:center; font-size:1.35rem; font-weight:800; letter-spacing:-.01em }
@media (max-width: 767.98px){
  .gallery-hero{ grid-template-columns:1fr; gap:.75rem }
  .gh-side{ grid-template-rows:none; grid-template-columns:1fr 1fr; gap:.75rem }
  .gh-side .gh-item{ aspect-ratio:4/3 }
  .gh-main.gh-solo{ aspect-ratio:4/3 }
}

.photo-wall{ columns:3 260px; column-gap:1.25rem }
.pw-item{ break-inside:avoid; margin:0 0 1.25rem }
.pw-item button{ border:0; padding:0; display:block; width:100%; border-radius:var(--r); overflow:hidden; background:var(--line-2); cursor:zoom-in }
.pw-item img{ width:100%; display:block; transition:transform .4s ease }
.pw-item button:hover img{ transform:scale(1.03) }
.pw-item button{ position:relative }
.pw-item .media-poster-placeholder{ position:relative; aspect-ratio:16/9; border-radius:var(--r) }
.pw-item figcaption{ font-size:.8125rem; color:var(--muted); margin-top:.5rem; line-height:1.5 }

.lightbox .modal-content{ background:#0B0E11; color:#fff; border:0; border-radius:0 }
.lb-top{ display:flex; align-items:center; gap:1rem; padding:.9rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.08) }
.lb-count{ font-weight:800; font-size:.875rem; color:#fff; min-width:64px }
.lb-title{ flex:1; font-size:.875rem; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center }
.lb-close{ border:0; background:rgba(255,255,255,.08); color:#fff; width:40px; height:40px; border-radius:50%; font-size:1.05rem }
.lb-close:hover{ background:var(--brand) }
.lb-stage{ flex:1; position:relative; min-height:0 }
.lb-stage .carousel-inner, .lb-stage .carousel-item{ height:100% }
.lb-figure{ height:100%; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.25rem 4.5rem }
.lb-figure img{ max-width:100%; max-height:calc(100vh - 250px); width:auto; height:auto; object-fit:contain; border-radius:6px; user-select:none }
.lb-figure video{ max-width:100%; max-height:calc(100vh - 250px); width:auto; height:auto; object-fit:contain; border-radius:6px; background:#000 }
.lb-figure figcaption{ margin-top:1rem; max-width:70ch; text-align:center; color:rgba(255,255,255,.82); font-size:.9375rem; line-height:1.6; min-height:1.5em }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:#fff; font-size:1.35rem; display:grid; place-items:center; z-index:3; transition:background .2s }
.lb-nav:hover{ background:var(--brand) }
.lb-prev{ left:1rem }
.lb-next{ right:1rem }
.lb-thumbs{ display:flex; gap:.5rem; padding:.85rem 1.25rem 1.1rem; overflow-x:auto; justify-content:safe center; border-top:1px solid rgba(255,255,255,.08); scrollbar-width:thin }
.lb-thumbs button{ flex:0 0 auto; width:72px; height:52px; border:2px solid transparent; border-radius:8px; padding:0; overflow:hidden; opacity:.5; background:#1a1f25; transition:opacity .2s, border-color .2s }
.lb-thumbs button img{ width:100%; height:100%; object-fit:cover }
.video-thumb-placeholder{ display:grid; place-items:center; width:100%; height:100%; background:#171b20; color:var(--brand-300); font-size:1.35rem }
.lb-thumbs button:hover{ opacity:.85 }
.lb-thumbs button.active{ opacity:1; border-color:var(--brand-300) }
.lightbox .modal-content{ display:flex; flex-direction:column; height:100% }
@media (max-width: 767.98px){
  .lb-figure{ padding:1rem .75rem }
  .lb-figure img{ max-height:calc(100vh - 230px) }
  .lb-figure video{ max-height:calc(100vh - 230px); width:100% }
  .lb-nav{ width:42px; height:42px; font-size:1.1rem; top:auto; bottom:.25rem; transform:none }
  .lb-prev{ left:.75rem }
  .lb-next{ right:.75rem }
  .lb-thumbs button{ width:56px; height:42px }
}

.blog-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{ padding:.45rem 1rem; border-radius:100px; border:1px solid var(--line); color:var(--ink-3); font-size:.875rem; font-weight:600; text-decoration:none; background:#fff; transition:all .15s }
.chip:hover{ border-color:var(--ink-3); color:var(--ink) }
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff }
.blog-search{ position:relative; flex:0 1 300px }
.blog-search i{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:var(--muted) }
.blog-search input{ width:100%; border:1px solid var(--line); border-radius:100px; padding:.55rem 1rem .55rem 2.5rem; font-size:.9375rem; background:var(--bg-soft) }
.blog-search input:focus{ outline:0; border-color:var(--brand-300); background:#fff; box-shadow:0 0 0 .2rem rgba(169,14,20,.1) }
.blog-result{ color:var(--muted); margin:-1rem 0 1.75rem }

.post-cat{ font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); text-decoration:none }
.post-cat:hover{ color:var(--brand-700) }
.post-meta{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.8125rem; color:var(--muted); font-weight:600 }
.post-meta span + span::before{ content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; margin-right:.9rem; vertical-align:middle }

.bfeat{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-sm) }
.bfeat-img{ display:block; position:relative; min-height:340px; background:var(--line-2); overflow:hidden }
.bfeat-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.bfeat:hover .bfeat-img img{ transform:scale(1.03) }
.bfeat-body{ padding:clamp(1.5rem,1rem + 2vw,2.75rem); display:flex; flex-direction:column; justify-content:center }
.bfeat-body h2{ font-size:clamp(1.4rem,1.2rem + .9vw,2rem); margin:.9rem 0 .75rem; line-height:1.25 }
.bfeat-body h2 a{ color:var(--ink); text-decoration:none }
.bfeat-body h2 a:hover{ color:var(--brand) }
.bfeat-body p{ color:var(--muted); margin-bottom:1.1rem }
.bfeat-tag{ font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--brand); color:#fff; padding:.22rem .6rem; border-radius:100px }
@media (max-width: 991.98px){
  .bfeat{ grid-template-columns:1fr }
  .bfeat-img{ min-height:0; aspect-ratio:16/9 }
}

.bcard{ height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .2s, box-shadow .2s }
.bcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.bcard-img{ display:block; aspect-ratio:16/9; background:var(--line-2); overflow:hidden; position:relative }
.bcard-img img{ width:100%; height:100%; object-fit:cover }
.bcard-ph{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(135deg, var(--bg-ink), #2a1113) }
.bcard-ph .brand-mark{ width:56px; height:56px; opacity:.85 }
.bcard-body{ padding:1.3rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1 }
.bcard-body h3{ font-size:1.075rem; line-height:1.4; margin:.55rem 0 .5rem }
.bcard-body h3 a{ color:var(--ink); text-decoration:none }
.bcard-body h3 a:hover{ color:var(--brand) }
.bcard-body p{ font-size:.9rem; color:var(--muted); line-height:1.6; margin-bottom:1rem }
.bcard-body .post-meta{ margin-top:auto }

.article-cover{ width:100%; border-radius:var(--r-lg); margin-bottom:2rem; aspect-ratio:16/9; object-fit:cover }
.article-lead{ font-size:clamp(1.1rem,1.05rem + .3vw,1.25rem); line-height:1.75; color:var(--ink-2); font-weight:500; margin-bottom:1.75rem; padding-bottom:1.75rem; border-bottom:1px solid var(--line) }
.article{ font-size:1.0625rem; line-height:1.85; color:var(--ink-3) }
.article > *:first-child{ margin-top:0 }
.article h2{ font-size:clamp(1.3rem,1.2rem + .5vw,1.6rem); color:var(--ink); margin:2.4rem 0 .9rem; line-height:1.3 }
.article h3{ font-size:1.2rem; color:var(--ink); margin:2rem 0 .75rem }
.article h4{ font-size:1.05rem; color:var(--ink); margin:1.5rem 0 .5rem }
.article p{ margin-bottom:1.25rem }
.article a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px }
.article strong{ color:var(--ink-2) }
.article ul, .article ol{ padding-left:1.4rem; margin-bottom:1.25rem }
.article li{ margin-bottom:.5rem }
.article li::marker{ color:var(--brand) }
.article img{ border-radius:var(--r); margin:.5rem 0 1.5rem; height:auto }
.article blockquote{ margin:1.75rem 0; padding:1rem 1.4rem; border-left:4px solid var(--brand); background:var(--brand-soft); border-radius:0 var(--r) var(--r) 0; color:var(--ink-2); font-size:1.1rem }
.article blockquote p:last-child{ margin-bottom:0 }
.article hr{ margin:2.5rem 0; border-color:var(--line); opacity:1 }
.article code{ background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:.1rem .4rem; font-size:.9em; color:var(--brand-700) }
.article pre{ background:var(--bg-ink); color:#E5E7EB; border-radius:var(--r); padding:1.1rem 1.25rem; overflow-x:auto; margin-bottom:1.5rem; font-size:.875rem }
.article pre code{ background:none; border:0; padding:0; color:inherit }
.article table{ width:100%; border-collapse:collapse; margin-bottom:1.5rem; font-size:.9375rem; display:block; overflow-x:auto }
.article th, .article td{ border:1px solid var(--line); padding:.6rem .85rem; text-align:left }
.article th{ background:var(--bg-soft); color:var(--ink); font-weight:700 }

.article-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.25rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line) }
.article-author{ display:flex; align-items:center; gap:.8rem }
.dash-avatar-sm{ width:44px; height:44px; border-radius:50%; background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand); display:grid; place-items:center; font-weight:800 }
.share{ display:flex; align-items:center; gap:.45rem }
.share span{ font-size:.8125rem; font-weight:700; color:var(--muted); margin-right:.3rem }
.share a, .share button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink-3); display:grid; place-items:center; text-decoration:none; transition:all .15s }
.share a:hover, .share button:hover{ background:var(--brand); border-color:var(--brand); color:#fff }

.article-side{ position:sticky; top:calc(var(--nav-h) + 24px); display:flex; flex-direction:column; gap:1.5rem }
.side-cta{ background:var(--bg-ink); border-radius:var(--r-lg); padding:1.6rem; color:rgba(255,255,255,.65) }
.side-cta h3{ color:#fff; font-size:1.2rem; margin:.65rem 0 .5rem; line-height:1.35 }
.side-cta p{ font-size:.9rem; margin-bottom:1.1rem }
.side-list{ border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem 1.4rem .6rem }
.side-list h3{ font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem }
.side-list a{ display:block; padding:.8rem 0; border-bottom:1px solid var(--line-2); text-decoration:none }
.side-list a:last-child{ border-bottom:0 }
.side-list .t{ display:block; font-weight:700; color:var(--ink); line-height:1.4; font-size:.9375rem }
.side-list a:hover .t{ color:var(--brand) }
.side-list .d{ display:block; font-size:.75rem; color:var(--muted); margin-top:.25rem; font-weight:600 }
.article img{ display:block; max-height:640px; width:auto; margin-left:auto; margin-right:auto }

.app-abbr{ display:inline-block; align-self:flex-start; font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:100px; padding:.18rem .6rem; margin-bottom:.6rem }

.ind-tabs{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem }
.ind-tab{ display:flex; gap:.85rem; align-items:flex-start; text-align:left; padding:1.1rem 1.15rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); color:var(--ink-2); transition:border-color .2s, box-shadow .2s, background .2s }
.ind-tab .ico{ margin:0; flex-shrink:0 }
.ind-tab strong{ display:block; font-size:.975rem; color:var(--ink); line-height:1.35 }
.ind-tab small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:.3rem; font-size:.78rem; color:var(--muted); line-height:1.5 }
.ind-tab:hover{ border-color:#D5D9DF; box-shadow:var(--shadow-sm) }
.ind-tab.active{ border-color:var(--brand-300); background:var(--brand-soft); box-shadow:0 0 0 3px rgba(169,14,20,.08) }
.ind-tab.active strong{ color:var(--brand) }
.ind-label{ font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.ind-quote{ display:flex; gap:.75rem; padding:1rem 1.15rem; border-radius:var(--r); background:var(--bg-soft); border:1px solid var(--line); font-size:.9375rem; color:var(--ink-3); font-style:italic; line-height:1.6 }
.ind-quote i{ font-size:1.6rem; color:var(--brand); line-height:1 }
.ind-quote strong{ display:block; font-style:normal; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.3rem }
.ind-block{ background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(1.5rem,1rem + 2vw,2.75rem); margin-bottom:3rem }
.ind-h3{ font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem); margin-top:.5rem }
.ind-case{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; position:sticky; top:calc(var(--nav-h) + 24px) }
.ind-metric{ border:1px solid var(--line-2); background:var(--bg-soft); border-radius:12px; padding:1.1rem 1rem; height:100% }
.ind-metric .v{ font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem); font-weight:800; color:var(--brand); letter-spacing:-.03em; line-height:1.15 }
.ind-metric .l{ font-size:.8125rem; font-weight:700; color:var(--ink); margin-top:.25rem }
.ind-metric .d{ font-size:.75rem; color:var(--muted) }
@media (max-width: 991.98px){ .ind-tabs{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 575.98px){ .ind-tabs{ gap:.6rem } .ind-tab{ padding:.8rem; flex-direction:column; gap:.5rem } .ind-tab small{ display:none } }

@media (max-width: 575.98px){
  .container{ padding-left:20px; padding-right:20px }
  .row.g-5, .row.gx-5{ --bs-gutter-x:1.5rem }
  .pill{ flex-wrap:nowrap; gap:.45rem; font-size:.75rem; padding:.35rem .8rem .35rem .4rem }
  .pill .tag{ font-size:.625rem; padding:.14rem .5rem; white-space:nowrap; flex-shrink:0 }
  .pill > span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
}

.client-strip{ padding:clamp(2rem,1.5rem + 2vw,3rem) 0; background:#fff; border-top:1px solid var(--line-2) }
.cs-title{ text-align:center; font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1.75rem }
.cs-logos{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:1.75rem clamp(1.75rem,1rem + 3vw,3.5rem) }
.cs-logos li{ display:flex; flex-direction:column; align-items:center; gap:.5rem; max-width:170px; text-align:center }
.cs-logo{ display:flex; align-items:center; justify-content:center; height:52px }
.cs-logo img{ max-height:52px; max-width:150px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .25s, opacity .25s }
.cs-logos li:hover .cs-logo img{ filter:none; opacity:1 }
.cs-project{ font-size:.75rem; color:var(--muted); line-height:1.4 }
@media (max-width: 575.98px){
  .cs-logos{ gap:1.25rem 1.5rem }
  .cs-logos li{ max-width:42% }
  .cs-logo{ height:44px }
  .cs-logo img{ max-height:44px; max-width:120px }
}
.internal-note{ position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); z-index:1080; display:flex; gap:.6rem; align-items:center; max-width:calc(100% - 2rem); background:var(--bg-ink); color:#fff; font-size:.875rem; padding:.75rem 1rem; border-radius:12px; box-shadow:var(--shadow-lg); animation:internalNote 6s ease forwards }
.internal-note i{ color:#4ADE80; font-size:1.1rem }
@keyframes internalNote{ 0%{ opacity:0; transform:translate(-50%,10px) } 8%,85%{ opacity:1; transform:translate(-50%,0) } 100%{ opacity:0; visibility:hidden } }