/* =========================================================
   DLO.IT — brand site
   Palette & type from the official DLO.IT brand pack (Aug 2026)
   ========================================================= */

:root{
  --paper:#F4F0EC;
  --paper-2:#EDE7E0;
  --tint:#FFECDF;
  --line:#E4DFD9;
  --ink:#17110E;
  --ink-70:rgba(23,17,14,.70);
  --ink-55:rgba(23,17,14,.55);
  --ink-40:rgba(23,17,14,.40);
  --terra:#B85029;
  --terra-2:#D06439;
  --green:#1C412D;
  --green-l:#539771;
  --red:#9D0811;
  --red-l:#EC5C52;

  --f-ku:'Vazirmatn',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Naskh serif for headings — the pairing zagrosi.com uses */
  --f-head:'Noto Naskh Arabic','Vazirmatn',Georgia,'Times New Roman',serif;
  /* Plex Mono has no Arabic/Kurdish glyphs — Vazirmatn must catch them,
     otherwise the browser falls back to a mono face that breaks letter joining */
  --f-mono:'IBM Plex Mono','Vazirmatn',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --sh-1:0 1px 2px rgba(23,17,14,.04), 0 8px 24px rgba(23,17,14,.05);
  --sh-2:0 2px 6px rgba(23,17,14,.06), 0 18px 48px rgba(23,17,14,.09);
  --sh-3:0 30px 80px rgba(23,17,14,.18);
  --wrap:1200px;
  --pad:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-ku);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{
  margin:0;font-family:var(--f-head);
  line-height:1.42;font-weight:500;letter-spacing:0;
  text-wrap:balance;
}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--terra);color:#fff}

/* Kurdish/Arabic script must not be letter-spaced apart inside mono labels */
html[dir="rtl"] .tag,
html[dir="rtl"] .kicker span,
html[dir="rtl"] .dc-chip{letter-spacing:.01em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.skip:focus{inset-inline-start:12px}

/* ---------- mono utility ---------- */
.kicker,.eyebrow,.crow-k,.app-cat,.srv-n,.n,.tag,.marq-track,.lang,.hero-stats b,.steps span,.dc-chip,.dc-cell b{
  font-family:var(--f-mono);
  font-feature-settings:"tnum" 1;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(244,240,236,.72);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.site-head.stuck{border-bottom-color:var(--line);background:rgba(244,240,236,.9)}
.head-in{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:var(--sh-1)}
.brand-txt{font-family:var(--f-mono);font-weight:700;font-size:19px;letter-spacing:.02em}

.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{
  position:relative;padding:9px 14px;border-radius:999px;
  font-size:15.5px;font-weight:500;color:var(--ink-70);
  transition:color .2s ease,background .2s ease;
}
.nav a:hover{color:var(--ink);background:rgba(23,17,14,.05)}
.nav a.active{color:var(--terra);background:var(--tint)}

.head-act{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.nav+.head-act{margin-inline-start:0}

.lang{
  width:44px;height:38px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-70);
  background:rgba(255,255,255,.6);transition:.2s ease;
}
.lang:hover{border-color:var(--ink);color:var(--ink)}

.burger{display:none;width:42px;height:38px;border:1px solid var(--line);border-radius:12px;padding:0 10px}
.burger span{display:block;height:1.8px;background:var(--ink);border-radius:2px;margin:4px 0;transition:.25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--paper);
  padding:12px 22px;border-radius:999px;
  font-size:15.5px;font-weight:600;line-height:1.2;
  border:1px solid var(--ink);
  transition:transform .18s ease,background .2s ease,box-shadow .25s ease,color .2s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--terra);border-color:var(--terra);transform:translateY(-2px);box-shadow:0 12px 28px rgba(184,80,41,.28)}
.btn-sm{padding:10px 18px;font-size:14.5px}
.btn-lg{padding:15px 30px;font-size:16.5px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:var(--sh-2)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
.btn-outline{background:transparent;color:var(--paper);border-color:rgba(244,240,236,.35)}
.btn-outline:hover{background:rgba(244,240,236,.12);border-color:var(--paper);color:var(--paper);box-shadow:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:72px 0 90px;overflow:hidden}
.dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(23,17,14,.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  opacity:.7;
}
.hero-in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;
  color:var(--terra);text-transform:uppercase;margin-bottom:22px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 4px rgba(184,80,41,.16)}
.eyebrow-l{color:var(--tint)}
.eyebrow-l .dot{background:var(--terra-2);box-shadow:0 0 0 4px rgba(208,100,57,.25)}

.hero h1{
  font-size:clamp(34px,4.9vw,62px);
  font-weight:400;line-height:1.36;letter-spacing:0;
  margin-bottom:24px;
}
.hero h1 em{font-style:normal;color:var(--terra)}
.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--ink-70);max-width:56ch;line-height:1.85}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.hero-stats{display:flex;flex-wrap:wrap;gap:30px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.hero-stats li{display:flex;flex-direction:column;gap:2px}
.hero-stats b{font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate}
.hero-stats span{font-size:14px;color:var(--ink-55)}

/* ---- hero art ---- */
.hero-art{position:relative;min-height:640px}
.glow{
  position:absolute;inset:-10% -6% 6% -6%;
  background:radial-gradient(58% 52% at 50% 42%, rgba(184,80,41,.20), transparent 70%);
  filter:blur(10px);
}
.dark-card{
  position:relative;
  background:linear-gradient(160deg,#221913 0%,#17110E 55%,#120D0A 100%);
  border-radius:var(--r-xl);
  padding:30px 30px 168px;
  box-shadow:var(--sh-3);
  overflow:hidden;
  color:var(--paper);
  max-width:520px;
  margin-inline-start:auto;
}
.contour{
  position:absolute;inset:-22% -14% auto -14%;height:150%;
  -webkit-mask-image:url(../img/contour.svg?v=10);mask-image:url(../img/contour.svg?v=10);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:var(--terra);
  opacity:.5;pointer-events:none;
}
/* Safari paints an element that carries a mask-image on its own compositing layer
   and then forgets to clip it to the ancestor's overflow:hidden, so .contour escapes
   the card and washes the contour rings over the whole hero. Paint containment puts
   the clip back; Chrome and Firefox clipped correctly either way. */
.dark-card,.sum{contain:paint;isolation:isolate}

.dc-head{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.dc-label{font-size:14.5px;color:rgba(244,240,236,.72)}
.dc-chip{
  font-size:11px;letter-spacing:.14em;font-weight:600;
  color:var(--green-l);border:1px solid rgba(83,151,113,.45);
  padding:4px 10px;border-radius:999px;background:rgba(83,151,113,.10);
}
.dc-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dc-cell{
  background:rgba(244,240,236,.06);
  border:1px solid rgba(244,240,236,.10);
  border-radius:var(--r);padding:14px 16px;
}
.dc-cell span{display:block;font-size:13px;color:rgba(244,240,236,.6);margin-bottom:5px}
.dc-cell b{font-size:14.5px;font-weight:600;letter-spacing:0;direction:ltr;display:block;text-align:start}
.dc-cell b.up{color:var(--green-l)}
.dc-cell b.down{color:var(--red-l)}

.ph{
  position:absolute;width:190px;border-radius:26px;
  border:5px solid #17110E;background:#17110E;
  box-shadow:0 26px 60px rgba(23,17,14,.34);
}
.ph-2{
  inset-block-end:46px;inset-inline-start:206px;transform:rotate(4.5deg);
  width:172px;opacity:.98;overflow:hidden;
}
.ph-2 img{display:block;width:100%;height:auto;border-radius:21px}

/* the scanner beam sweeping the barcode inside the viewfinder */
.scan{
  position:absolute;inset-inline:22% 23%;top:7.5%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#FF6A4D 16%,#FFD9C9 50%,#FF6A4D 84%,transparent);
  box-shadow:0 0 18px 6px rgba(255,106,77,.55);
  opacity:0;
  animation:scanline 9s cubic-bezier(.45,0,.35,1) infinite;
}
.scan::before{
  content:"";position:absolute;inset-inline:-6%;top:-13px;height:29px;
  background:linear-gradient(180deg,transparent,rgba(255,106,77,.28),transparent);
  border-radius:50%;
}
@keyframes scanline{
  0%  {top:7.5%;  opacity:0}
  3%  {opacity:1}
  15% {top:31.5%; opacity:1}
  27% {top:7.5%;  opacity:1}
  31% {top:7.5%;  opacity:0}
  100%{top:7.5%;  opacity:0}
}

/* ---------- thermal printer + printed receipt ---------- */
.printer{position:absolute;inset-block-end:-86px;inset-inline-end:2px;width:130px;z-index:2}
.pr-body{
  position:relative;height:60px;border-radius:16px 16px 8px 8px;
  background:linear-gradient(180deg,#2C211A 0%,#191210 70%,#120D0A 100%);
  box-shadow:0 20px 40px rgba(23,17,14,.38), inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.pr-body img{width:26px;height:26px;border-radius:8px}
.pr-led{
  width:7px;height:7px;border-radius:50%;background:var(--green-l);
  box-shadow:0 0 9px var(--green-l);
  animation:led 9s ease-in-out infinite;
}
@keyframes led{
  0%,26%   {background:#4A423C;box-shadow:none}
  28%,58%  {background:var(--green-l);box-shadow:0 0 9px var(--green-l)}
  60%,100% {background:#4A423C;box-shadow:none}
}
.pr-pw{
  flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;color:var(--terra-2);
  background:linear-gradient(180deg,#3A322B,#241D18);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 2px 5px rgba(0,0,0,.55), 0 0 7px rgba(208,100,57,.30);
}
.pr-pw svg{width:9px;height:9px;display:block}
.pr-slot{
  position:absolute;inset-block-end:7px;inset-inline:15px;height:4px;border-radius:3px;
  background:#080604;box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
}
.receipt{
  position:relative;z-index:-1;width:110px;margin-inline:auto;margin-top:-13px;
  background:#FFFDFA;color:#17110E;
  padding:17px 9px 14px;text-align:center;
  box-shadow:0 16px 30px rgba(23,17,14,.24);
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,
    radial-gradient(6px at 50% 0, #0000 96%, #000) bottom/12px 6px repeat-x;
  mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,
    radial-gradient(6px at 50% 0, #0000 96%, #000) bottom/12px 6px repeat-x;
  clip-path:inset(0 0 100% 0);
  animation:print 9s cubic-bezier(.35,0,.25,1) infinite;
}
@keyframes print{
  0%,30%  {clip-path:inset(0 0 100% 0);transform:translateY(0);opacity:1}
  56%     {clip-path:inset(0 0 0 0);  transform:translateY(0);opacity:1}
  88%     {clip-path:inset(0 0 0 0);  transform:translateY(0);opacity:1}
  97%     {clip-path:inset(0 0 0 0);  transform:translateY(24px);opacity:0}
  98%,100%{clip-path:inset(0 0 100% 0);transform:translateY(0);opacity:0}
}
.rc-logo{width:20px;height:20px;border-radius:6px;margin:0 auto 5px}
.rc-name{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;font-weight:700}
.rc-sub{display:block;font-style:normal;font-size:7px;color:var(--ink-55);margin-top:1px}
.rc-rule{display:block;height:0;border-top:1px dashed #CFC7BE;margin:7px 0}
.rc-line{display:flex;justify-content:space-between;gap:6px;font-size:7.5px;line-height:1.9}
.rc-line i{font-style:normal;color:var(--ink-70)}
.rc-line b{font-family:var(--f-mono);font-weight:600}
.rc-total b,.rc-total i{font-weight:700;font-size:8.5px;color:var(--terra)}
.rc-bars{
  display:block;height:20px;margin:8px 0 5px;
  background:repeating-linear-gradient(90deg,
    #17110E 0 1px,#0000 1px 3px,#17110E 3px 5px,#0000 5px 6px,
    #17110E 6px 7px,#0000 7px 10px,#17110E 10px 12px,#0000 12px 13px);
}
.rc-thanks{display:block;font-style:normal;font-size:6.5px;color:var(--ink-40)}

/* ---------- live accounting phone (real markup, not a screenshot) ---------- */
.phone{
  position:absolute;inset-block-end:-30px;inset-inline-start:0;
  width:258px;
  transform:rotate(-5deg) scale(.74);transform-origin:bottom right;
  /* Galaxy S26 Ultra — squared corners, flat titanium rail, hairline bezel */
  border-radius:22px;padding:4px;
  background:
    linear-gradient(115deg,#8E8A85 0%,#4A4540 14%,#2A2622 32%,#1A1613 55%,#3A342F 78%,#7E7A74 100%);
  box-shadow:
    0 30px 70px rgba(23,17,14,.42),
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 1px 2px rgba(255,255,255,.22) inset;
}
.screen{
  position:relative;
  border-radius:18px;overflow:hidden;background:#F8F6F3;
  direction:rtl;font-family:var(--f-ku);color:var(--ink);
  padding-bottom:18px;
}
/* centred punch-hole camera */
.cam{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 34% 30%,#3A3E45,#0A0C0F 62%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.35);
}

/* status bar */
.sbar{
  direction:ltr;display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px 4px;font-size:12px;font-weight:600;letter-spacing:.01em;
}
.sb-i{display:flex;align-items:center;gap:5px}
.sb-i i{width:5px;height:9px;border-radius:1.5px;background:var(--ink);display:block}
.sb-i i:nth-child(2){height:11px}
.sb-i i:nth-child(3){height:7px;background:rgba(23,17,14,.45)}
.sb-i b{
  font-size:9px;font-weight:700;color:#fff;background:#3BA55C;
  border-radius:4px;padding:1px 4px;line-height:1.3;
}

/* header */
.ph-head{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 14px}
.ph-head b{font-size:17px;font-weight:700}
.ph-ic{display:flex;gap:9px}
.ph-ic i{width:15px;height:15px;border-radius:4px;background:var(--terra);opacity:.9;display:block}
.ph-ic i:nth-child(2){opacity:.6}

/* chips */
.chips{display:flex;gap:6px;padding:0 16px 14px;justify-content:flex-start}
.chips i{
  font-style:normal;font-size:10.5px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink-70);white-space:nowrap;
}
.chips i.on{background:var(--tint);border-color:var(--terra);color:var(--terra);font-weight:600}

/* dark summary card */
.sum{
  position:relative;overflow:hidden;
  margin:0 14px 14px;padding:14px 16px 16px;border-radius:20px;
  background:linear-gradient(150deg,#241A14,#17110E 60%,#120D0A);color:var(--paper);
}
.sum .contour{
  position:absolute;inset:-60% -30% auto -30%;height:280%;
  -webkit-mask-image:url(../img/contour.svg?v=10);mask-image:url(../img/contour.svg?v=10);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:var(--terra);opacity:.45;pointer-events:none;
}
.sum em,.tile em{
  position:relative;display:block;font-style:normal;
  font-size:9.5px;color:rgba(244,240,236,.6);margin-bottom:3px;
}
.sum-big{position:relative;display:block;font-size:21px;font-weight:700;letter-spacing:-.01em;direction:ltr;text-align:start}
.sum-row{position:relative;display:flex;gap:12px;margin-top:12px}
.sum-row>div{flex:1}
.sum-row b{font-size:12.5px;font-weight:700;direction:ltr;display:block;text-align:start}
.sum .up{color:#6FBE8E}
.sum .down{color:var(--red-l)}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 12px}
.tile{background:#fff;border:1px solid #EFEAE4;border-radius:13px;padding:9px 10px}
.tile em{color:var(--ink-40);font-size:9px}
/* the figures must stay on one line at this narrower Galaxy width */
.tile b{font-size:11.5px;font-weight:700;direction:ltr;display:block;text-align:start;white-space:nowrap}
.tile .up{color:#1C6B42}
.tile .down{color:var(--red)}
html[dir="ltr"] .phone{transform-origin:bottom left}

/* =========================================================
   CLIENTS
   ========================================================= */
.clients{
  border-block:1px solid var(--line);
  background:var(--paper-2);
  padding:28px 0 24px;
}
.cl-lab{
  font-size:13.5px;color:var(--ink-40);text-align:center;margin-bottom:20px;
}
/* the logos drift past in one continuous, unhurried line */
.cl-marq{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cl-track{
  display:flex;align-items:flex-start;gap:22px;width:max-content;
  animation:clmarq 42s linear infinite;
}
.cl-marq:hover .cl-track{animation-play-state:paused}
@keyframes clmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .cl-track{animation-name:clmarqR}
@keyframes clmarqR{from{transform:translateX(0)}to{transform:translateX(50%)}}

.cl{display:flex;flex-direction:column;align-items:center;gap:10px;width:92px;flex:0 0 auto}
.cl img{
  width:58px;height:58px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(23,17,14,.07);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.cl:hover img{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 28px rgba(23,17,14,.16)}
.cl b{
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.07em;line-height:1.5;color:var(--ink-55);text-align:center;
}

/* ---------- owner badge on a case card ---------- */
.owner{display:flex;align-items:center;gap:13px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.owner img{width:48px;height:48px;border-radius:50%;flex:0 0 auto;border:2px solid var(--tint);box-shadow:0 3px 10px rgba(23,17,14,.12)}
.owner b{display:block;font-size:15.5px;font-weight:600;line-height:1.4}
.owner span{font-size:13px;color:var(--ink-55)}

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{padding:100px 0}
.sec-line{border-top:1px solid var(--line)}
.sec-tint{background:linear-gradient(180deg,var(--tint) 0%, #FFF4EA 100%)}
.sec-dark{background:var(--ink);color:var(--paper)}
.sec-dark .sub{color:rgba(244,240,236,.62)}
.sec-dark .kicker{color:var(--terra-2)}

.sec-head{max-width:64ch;margin-bottom:52px}
.kicker{font-size:12.5px;letter-spacing:.16em;font-weight:600;color:var(--terra);text-transform:uppercase;margin-bottom:16px}
.sec-head h2{font-size:clamp(27px,3.3vw,43px);font-weight:400;line-height:1.4;letter-spacing:0}
.sub{margin-top:16px;font-size:17px;color:var(--ink-55);line-height:1.85}

/* ---------- feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--sh-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#DCD4CB}
.ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--tint);color:var(--terra);margin-bottom:18px;
}
.ic svg{width:24px;height:24px}
.card h3{font-size:20.5px;font-weight:600;margin-bottom:9px}
.card p{font-size:15.5px;color:var(--ink-55);line-height:1.8}

/* ---------- system / modules ---------- */
.sys-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:start}
/* ---- the foldable, built to iPhone Duo's own proportions ----
   Apple gives the body as 164.6 x 117.8 mm open and 84.1 x 117.8 mm shut,
   so the ratios here are 1.40 open and 0.70 shut. The inner camera is under
   the display, so that screen carries nothing; the Dynamic Island belongs to
   the outer one. ---- */
.sys-stage{perspective:1700px;perspective-origin:50% 45%}
.fold{
  --fw:422px;--fh:302px;--hw:211px;
  --in:8px;--rad:30px;--edge:1.2px;
  --sw:calc(var(--fw) - var(--in)*2);
  --shw:calc((var(--fw) - var(--in)*2)/2);
  --ti:linear-gradient(162deg,#BCB6AE 0%,#837C75 13%,#5E5852 27%,#ADA69E 45%,#575049 62%,#8D867E 79%,#B6B0A8 100%);
  position:relative;width:var(--fw);height:var(--fh);margin-inline:auto;
  transform-style:preserve-3d;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.fold:focus-visible{outline:2px solid var(--terra-2);outline-offset:16px;border-radius:28px}
.fold-dev{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.45,.05,.2,1)}
.fold.closed .fold-dev{transform:translateX(calc(var(--hw) / 2))}

.fold-half{position:absolute;top:0;height:100%;width:var(--hw)}
.fold-r{left:var(--hw);transform-style:preserve-3d;transform-origin:left center;
        transition:transform .95s cubic-bezier(.45,.05,.2,1)}
.fold.closed .fold-r{transform:rotateY(-180deg) translateZ(-1.5px)}
.fold-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* the titanium edge — on the real thing it is about a millimetre of metal,
   and everything inside it is black glass, not more metal */
.fold-l,.fold-in,.fold-out{
  background:var(--ti);
  box-shadow:0 34px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.13);
}
.fold-l {left:0;border-radius:var(--rad) 0 0 var(--rad)}
/* shut, this half is completely covered — keeping it visible only let its
   own metal edge show alongside the cover's */
.fold.closed .fold-l{visibility:hidden;transition:visibility 0s .9s}
.fold-in{border-radius:0 var(--rad) var(--rad) 0}
.fold-out{transform:rotateY(180deg);border-radius:var(--rad)}
.fold-l::before,.fold-in::before,.fold-out::before{
  content:"";position:absolute;inset:var(--edge);background:#08080A;
  border-radius:calc(var(--rad) - var(--edge));
}
.fold-l::before {right:0;border-radius:calc(var(--rad) - var(--edge)) 0 0 calc(var(--rad) - var(--edge))}
.fold-in::before{left:0;border-radius:0 calc(var(--rad) - var(--edge)) calc(var(--rad) - var(--edge)) 0}

/* the glass — flush where the halves meet, so the picture runs across both */
.fold-scr{position:absolute;top:var(--in);bottom:var(--in);overflow:hidden;background:#000}
.fold-l  .fold-scr{left:var(--in);right:0;border-radius:calc(var(--rad) - var(--in)) 0 0 calc(var(--rad) - var(--in))}
.fold-in .fold-scr{left:0;right:var(--in);border-radius:0 calc(var(--rad) - var(--in)) calc(var(--rad) - var(--in)) 0}
.fold-out .fold-scr{left:var(--in);right:var(--in);border-radius:calc(var(--rad) - var(--in))}

.fold-scr img{position:absolute;top:0;height:100%;width:var(--sw);max-width:none;object-fit:cover;display:block}
.fold-l  .fold-scr img{left:0}
.fold-in .fold-scr img{left:calc(-1 * var(--shw))}

/* the crease, and the hinge showing at the top and bottom of it */
.fold-hinge{
  position:absolute;top:var(--in);bottom:var(--in);left:calc(var(--hw) - 7px);width:14px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.07) 46%,rgba(255,255,255,.05) 50%,rgba(0,0,0,.07) 54%,rgba(0,0,0,0));
  transition:opacity .5s ease;
}
.fold.closed .fold-hinge{opacity:0}

/* the buttons stand just proud of the band */
.bt{position:absolute;z-index:4;width:2.5px;border-radius:2px;
    background:linear-gradient(180deg,#E2DED8,#8A847D 55%,#C6C0B8);
    box-shadow:0 1px 2px rgba(0,0,0,.42)}
.bt-act{left:-1.5px;top:22%;height:8%}
.bt-vu {left:-1.5px;top:34%;height:11%}
.bt-vd {left:-1.5px;top:48%;height:11%}
.bt-side{right:-1.5px;top:30%;height:16%}

/* the outer display */
.cover{display:flex;flex-direction:column;align-items:center;
  background:
    radial-gradient(130% 70% at 50% 0%,rgba(184,80,41,.30),transparent 62%),
    linear-gradient(170deg,#241A14 0%,#16100D 54%,#0E0A08 100%);
}
.di{
  position:absolute;top:calc(var(--hw)*.038);left:50%;transform:translateX(-50%);z-index:3;
  width:31%;height:calc(var(--hw)*.086);border-radius:999px;background:#07070A;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.cv-sb{position:absolute;top:calc(var(--hw)*.055);right:calc(var(--hw)*.10);
       font-size:calc(var(--hw)*.052);font-weight:600;color:rgba(244,240,236,.9);direction:ltr}
.cv-time{margin-top:calc(var(--hw)*.30);font-size:calc(var(--hw)*.27);font-weight:300;line-height:1.02;
         color:var(--paper);letter-spacing:-.02em;font-variant-numeric:tabular-nums;direction:ltr}
.cv-date{margin-top:calc(var(--hw)*.02);font-size:calc(var(--hw)*.052);color:rgba(244,240,236,.66)}
.cv-brand{margin-top:auto;margin-bottom:calc(var(--hw)*.10);
          font-family:var(--f-mono);font-size:calc(var(--hw)*.046);letter-spacing:.24em;color:rgba(244,240,236,.4)}
.cv-bar{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
        width:34%;height:3px;border-radius:4px;background:rgba(244,240,236,.75)}

@media (max-width:1080px){.fold{--fw:366px;--fh:262px;--hw:183px}}
@media (max-width:560px){.fold{--fw:292px;--fh:209px;--hw:146px}}
.shot-hint{
  margin-top:16px;text-align:center;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  color:rgba(244,240,236,.34);
  transition:color .25s ease;
}
.sys-stage:hover .shot-hint{color:rgba(244,240,236,.6)}
.mods{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.mods li{
  position:relative;display:flex;gap:16px;align-items:baseline;
  padding:16px 4px;
}
.mods li::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:rgba(244,240,236,.16);
  transform:scaleX(0);transform-origin:right;
  transition:transform .85s cubic-bezier(.2,.7,.2,1);
}
html[dir="ltr"] .mods li::after{transform-origin:left}
.mods li.in::after{transform:scaleX(1)}
.mods li:nth-child(1),.mods li:nth-child(2){border-top:1px solid rgba(244,240,236,.16)}
/* the rows walk in from the reading edge rather than simply fading */
.mods li.rv{transform:translateX(28px)}
html[dir="ltr"] .mods li.rv{transform:translateX(-28px)}
.mods li.rv.in{transform:none}
.mods .n{font-size:12.5px;color:var(--terra-2);letter-spacing:.08em;flex:0 0 auto}
/* the list walks in line by line instead of drifting up as a block */
.mods li.rv{transform:translateX(28px)}
html[dir="ltr"] .mods li.rv{transform:translateX(-28px)}
.mods li.rv.in{transform:none}
.mods b{display:block;font-family:var(--f-head);font-size:18.5px;font-weight:600;margin-bottom:2px}
.mods em{font-style:normal;font-size:14.5px;color:rgba(244,240,236,.55)}

/* ---------- work / cases ---------- */
/* each card keeps its own natural height — a short screenshot must not
   leave a block of dead space under its neighbour's text */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:start}
.case{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .3s ease,box-shadow .3s ease;
}
.case:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.case-img{background:var(--paper-2);overflow:hidden;border-bottom:1px solid var(--line)}
.case-img img{width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case:hover .case-img img{transform:scale(1.035)}
.case-body{padding:28px}
.tag{
  display:inline-block;font-size:11.5px;letter-spacing:.12em;font-weight:600;
  color:var(--terra);background:var(--tint);border:1px solid rgba(184,80,41,.18);
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.case h3{font-size:24px;font-weight:600;letter-spacing:0}
.case-body>p{font-size:15.5px;color:var(--ink-55);margin-top:6px;margin-bottom:18px}
.case ul{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:18px}
.case li{position:relative;padding-inline-start:20px;font-size:15px;color:var(--ink-70);line-height:1.7}
.case li::before{
  content:"";position:absolute;inset-inline-start:2px;top:.72em;
  width:7px;height:7px;border-radius:2px;background:var(--terra);opacity:.85;
}

/* ---------- apps ---------- */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.app{
  background:#fff;border:1px solid rgba(184,80,41,.16);border-radius:var(--r-xl);
  padding:32px;box-shadow:var(--sh-1);
  transition:transform .25s ease,box-shadow .25s ease;
}
.app:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.app-top{display:flex;align-items:center;gap:18px;margin-bottom:20px}
/* the real store icons, not stand-ins */
.app-ic{
  flex:0 0 auto;width:70px;height:70px;border-radius:16px;display:block;
  box-shadow:0 12px 26px rgba(23,17,14,.18);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.app:hover .app-ic{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 34px rgba(23,17,14,.24)}
.app h3{font-size:23px;font-weight:600;letter-spacing:0}
.app-cat{font-size:12.5px;letter-spacing:.1em;color:var(--ink-40);margin-top:4px}
.app-d{font-size:15.5px;color:var(--ink-70);line-height:1.85;margin-bottom:24px}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:14.5px;font-weight:600;
  background:var(--paper);transition:.2s ease;
}
.badge svg{width:17px;height:17px}
.badge:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}

/* ---------- services ---------- */
.srv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.srv-i{background:var(--paper);padding:34px 30px;transition:background .25s ease}
.srv-i:hover{background:#fff}
.srv-n{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--terra);margin-bottom:14px}
.srv-i h3{font-size:20.5px;font-weight:600;margin-bottom:10px}
.srv-i p{font-size:15.5px;color:var(--ink-55);line-height:1.8}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.steps li{position:relative;padding-top:20px}
.steps li::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;
  transition:transform .9s cubic-bezier(.2,.7,.2,1) .1s;
}
html[dir="ltr"] .steps li::before{transform-origin:left}
.steps li.in::before{transform:scaleX(1)}
.steps span{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--terra);margin-bottom:10px}
.steps b{display:block;font-family:var(--f-head);font-size:20.5px;font-weight:600;margin-bottom:8px}
.steps p{font-size:15px;color:var(--ink-55);line-height:1.8}

/* ---------- contact ---------- */
.contact{padding-bottom:110px}
.cta-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:#151010;
  color:var(--paper);border-radius:var(--r-xl);
  padding:64px 56px;box-shadow:var(--sh-3);
  border:1px solid rgba(184,80,41,.28);
}
/* warm light thrown from one corner — replaces the old full-bleed contour */
.cta-glow{
  position:absolute;z-index:-1;inset-block-start:-40%;inset-inline-start:-15%;
  width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(184,80,41,.42), rgba(184,80,41,0) 70%);
  filter:blur(26px);
}
/* barely-there engineering grid, so the panel reads as a product surface */
.cta-mesh{
  position:absolute;z-index:-1;inset:0;
  background-image:
    linear-gradient(rgba(244,240,236,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,240,236,.05) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(115% 90% at 15% 0%, #000 15%, transparent 72%);
  mask-image:radial-gradient(115% 90% at 15% 0%, #000 15%, transparent 72%);
}
.cta-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cta-card h2{font-size:clamp(28px,3.6vw,48px);font-weight:400;line-height:1.36;letter-spacing:0}
.cta-sub{margin-top:18px;font-size:17px;color:rgba(244,240,236,.68);line-height:1.85;max-width:44ch}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.cta-cards{display:grid;gap:12px}
.ccard{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:15px;row-gap:2px;align-items:center;
  padding:18px 20px;border-radius:var(--r);
  background:rgba(244,240,236,.05);
  border:1px solid rgba(244,240,236,.11);
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.ccard:hover{background:rgba(184,80,41,.14);border-color:rgba(208,100,57,.5);transform:translateY(-2px)}
.ccard-ic{
  grid-row:1 / 3;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;color:var(--terra-2);
  background:rgba(184,80,41,.16);border:1px solid rgba(184,80,41,.28);
}
.ccard-ic svg{width:20px;height:20px}
.ccard-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:rgba(244,240,236,.45)}
.ccard-v{font-size:16.5px;font-weight:600;letter-spacing:.01em;direction:ltr;unicode-bidi:isolate;word-break:break-all}
html[dir="rtl"] .ccard-v{text-align:right}
html[dir="ltr"] .ccard-v{text-align:left}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{border-top:1px solid var(--line);background:var(--paper-2);padding:40px 0}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{width:36px;height:36px;border-radius:10px}
.foot-brand b{display:block;font-family:var(--f-mono);font-size:16px;letter-spacing:.02em}
.foot-brand span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--ink-40)}
.foot-nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-nav a{font-size:15px;color:var(--ink-55);transition:color .2s ease}
.foot-nav a:hover{color:var(--terra)}
.foot-c{font-size:14px;color:var(--ink-40)}

/* ---------- whatsapp fab ---------- */
.wa-fab{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:45;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#539771,#1C412D);
  box-shadow:0 12px 30px rgba(28,65,45,.38);
  transition:transform .22s ease;
}
.wa-fab svg{width:28px;height:28px}
.wa-fab:hover{transform:scale(1.08)}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:64px}
  .hero-art{min-height:620px;max-width:560px;margin-inline:auto;width:100%}
  .dark-card{margin-inline:auto}
  .sys-grid{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .srv{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{
    position:fixed;inset-block-start:74px;inset-inline:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:14px var(--pad) 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.24s ease;box-shadow:var(--sh-2);
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:13px 14px;font-size:17px;border-radius:var(--r-sm)}
  .head-act{margin-inline-start:auto}
  .burger{display:block}
  .head-in .btn-sm{display:none}
}
@media (max-width:820px){
  .sec{padding:76px 0}
  .sec-dark{width:calc(100% - 32px);border-radius:var(--r-lg)}
  .work-grid,.apps,.cards{grid-template-columns:1fr}
  .cta-card{padding:48px 28px}
  .cta-in{grid-template-columns:1fr;gap:32px}
  .cta-sub{max-width:none}
  .ccard{padding:15px 16px;column-gap:13px}
  .ccard-ic{width:38px;height:38px;border-radius:11px}
  .ccard-ic svg{width:18px;height:18px}
  .ccard-v{font-size:15px}
  .case-body,.app{padding:26px 22px}
  .hero{padding:48px 0 70px}
  .hero-stats{gap:22px}
  .hero-stats b{font-size:24px}
}
@media (max-width:700px){
  /* ---- the hero props are re-composed for a narrow screen: the layered
     desktop arrangement collapses into a card with the scanner and the
     printer standing side by side beneath it. The dense live phone is
     dropped here — the dark card already carries the same figures. ---- */
  .hero-art{
    min-height:0;display:grid;justify-content:center;align-items:end;
    grid-template-columns:auto auto;
    grid-template-areas:"card card" "scan printer";
    gap:22px 14px;width:100%;
  }
  .glow{inset:-6% -8% 22% -8%}
  .dark-card{
    grid-area:card;position:relative;max-width:none;margin:0;
    padding:22px 18px 24px;border-radius:var(--r-lg);
  }
  .dc-head{margin-bottom:16px}
  .dc-label{font-size:13.5px}
  .dc-grid{gap:8px}
  .dc-cell{padding:11px 12px}
  .dc-cell span{font-size:11.5px;margin-bottom:3px}
  .dc-cell b{font-size:13.5px;white-space:nowrap}

  .phone{display:none}

  .ph{position:relative;inset:auto;transform:none;width:auto}
  .ph-2{
    grid-area:scan;position:relative;inset:auto;
    width:148px;transform:rotate(-3deg);margin:0;
  }
  .printer{
    grid-area:printer;display:block;position:relative;inset:auto;
    width:112px;margin:0 0 6px;
  }
  .pr-body{height:52px;border-radius:14px 14px 7px 7px;gap:7px}
  .pr-body img{width:22px;height:22px}
  .receipt{width:96px;padding:15px 8px 12px;margin-top:-11px}
}

@media (max-width:560px){
  :root{--pad:18px}
  body{font-size:16px}
  .srv,.steps{grid-template-columns:1fr}
  .srv{border-radius:var(--r)}
  .hero-cta .btn{flex:1 1 100%}
  .cl-track{gap:16px}
  .cl{width:76px;gap:8px}
  .cl img{width:50px;height:50px}
  .cl b{font-size:9px;letter-spacing:.04em}
  .clients{padding:22px 0 20px}
  .cl-lab{margin-bottom:16px;font-size:11.5px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:18px}
  .crow{flex-direction:column;align-items:flex-start;gap:2px}
  .crow-v{font-size:17px}
  .hero-art{gap:18px 10px}
  .ph-2{width:136px}
  .printer{width:104px}
  .receipt{width:90px}
  .dc-cell b{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  /* the print/scan loop must rest in its finished state, not its empty one */
  .receipt{clip-path:none !important;opacity:1 !important;transform:none !important}
  .scan{opacity:.85 !important;top:20% !important}
  .pr-led{background:var(--green-l) !important;box-shadow:0 0 9px var(--green-l) !important}
}


/* =========================================================
   AMBIENT MOTION — the hero props keep a slow, shallow drift.
   `translate` is used (not `transform`) so it composes with the
   rotations already set on the phones.
   ========================================================= */
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes driftB{0%,100%{translate:0 0}50%{translate:0 -6px}}
.ph-2{animation:drift 7s ease-in-out infinite}
.phone{animation:driftB 8.5s ease-in-out infinite .6s}
.printer{animation:drift 9.5s ease-in-out infinite 1.2s}
.cl img{animation:driftB 6s ease-in-out infinite}
.cl:nth-child(2n) img{animation-duration:7.5s;animation-delay:.5s}
.cl:nth-child(3n) img{animation-duration:8.5s;animation-delay:1s}

@media (prefers-reduced-motion:reduce){
  .ph-2,.phone,.printer,.cl img{animation:none !important;translate:none !important}
  .mods li::after,.steps li::before{transform:scaleX(1) !important}
  .mods li.rv{transform:none !important}
}


/* =========================================================
   SYSTEM SECTION — the contour breathes behind the screenshot
   and a slow glare crosses the screen, so the panel reads as
   something live rather than a flat still.
   ========================================================= */
/* the dark panel is inset from the page edges so the paper shows either side */
.sec-dark{
  position:relative;overflow:hidden;padding:52px 0 48px;
  width:calc(100% - 96px);max-width:1360px;margin-inline:auto;
  border-radius:var(--r-xl);
}
/* On a wide screen `clip` with a margin keeps the contour background inside the
   panel while still letting the spun screenshot lean out past its edge. Narrow
   screens keep the plain clip so nothing can widen the page. */
@media (min-width:900px){
  .sec-dark{overflow:clip;overflow-clip-margin:150px}
}
.sec-dark .sec-head{margin-bottom:28px}
.sec-dark .mods li{padding:12px 4px}
.sec-dark>.wrap{position:relative;z-index:1}
/* the pattern is pinned to the panel's own box and only ever breathes
   inward, so it can never bleed onto the paper above or below it */
.sec-bg{
  position:absolute;inset:0;height:auto;
  opacity:.20;
  animation:breathe 16s ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes breathe{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(.93)}
}

@media (prefers-reduced-motion:reduce){
  .sec-bg{animation:none !important}
  .fold-dev,.fold-r,.fold-hinge{transition:none !important}
}