/* Middletech site.
   Palette: Aztec #051F20 · Tartan #0B2B26 · Gable #163832 · Plantation #235347 · Pale #8EB69B · Pastel #DAF1DE
   Light is the default theme; dark is opt-in via the header toggle ([data-theme="dark"]).
   Every product page swaps only its own colour (--p, scoped by .pc). */
:root{
  --aztec:#051F20; --tartan:#0B2B26; --gable:#163832; --plantation:#235347; --pale:#8EB69B; --pastel:#DAF1DE;

  --surface:#F6FBF7; --raised:#FFFFFF; --sunk:#DAF1DE; --sunk-2:#EAF6EC;
  --ink:#051F20; --muted:#3D6B5C; --line:#C6DFCC; --line-strong:#8EB69B;
  --brand:#235347; --brand-hover:#163832; --on-brand:#DAF1DE; --brand-tint:#DAF1DE;
  --accent:#8EB69B; --on-accent:#051F20;
  --hl:rgba(142,182,155,.6);
  --band:#051F20; --on-band:#DAF1DE; --band-muted:#8EB69B; --band-line:#163832;
  --inv-bg:radial-gradient(80% 120% at 85% 0%,#235347 0%,transparent 55%),linear-gradient(160deg,#0B2B26,#051F20 60%,#163832);
  --inv-ink:#DAF1DE; --inv-muted:#8EB69B; --inv-line:rgba(142,182,155,.22); --inv-card:rgba(22,56,50,.55);
  --tile:#FFFFFF; --tile-line:#C6DFCC; --mk-bar:#8EB69B;
  --chip-bg:#DAF1DE; --chip-ink:#163832;
  --danger:#B42318; --danger-tint:#FDE7E5;
  --on-p:#FFFFFF;
  --shadow:0 1px 0 rgba(5,31,32,.04),0 18px 40px -24px rgba(5,31,32,.35);
  --shadow-lg:0 40px 80px -40px rgba(5,31,32,.55);
  --font:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,system-ui,sans-serif;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:36px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --surface:#051F20; --raised:#0B2B26; --sunk:#0B2B26; --sunk-2:#08251F;
  --ink:#DAF1DE; --muted:#8EB69B; --line:#163832; --line-strong:#235347;
  --brand:#8EB69B; --brand-hover:#DAF1DE; --on-brand:#051F20; --brand-tint:#163832;
  --accent:#DAF1DE; --on-accent:#051F20;
  --hl:rgba(35,83,71,.95);
  --band:#0B2B26; --on-band:#DAF1DE; --band-muted:#8EB69B; --band-line:#235347;
  --inv-bg:radial-gradient(80% 120% at 85% 0%,rgba(142,182,155,.28) 0%,transparent 55%),linear-gradient(160deg,#235347,#163832 55%,#0B2B26);
  --inv-ink:#DAF1DE; --inv-muted:#C2DCC8; --inv-line:rgba(218,241,222,.18); --inv-card:rgba(5,31,32,.35);
  --tile:#DAF1DE; --tile-line:#8EB69B; --mk-bar:#051F20;
  --chip-bg:#163832; --chip-ink:#DAF1DE;
  --danger:#F97066; --danger-tint:#3D1A18;
  --on-p:#051F20;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 22px 44px -24px rgba(0,0,0,.8);
  --shadow-lg:0 40px 80px -40px rgba(0,0,0,.9);
  color-scheme:dark;
}
:root[data-theme="dark"] .pc{--p:var(--pd)}

/* Product colour scope: --pl (light) and --pd (dark) are set inline. */
.pc{--p:var(--pl);--pt:color-mix(in srgb,var(--p) 14%,var(--raised))}

*{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.75;font-weight:400;overflow-x:hidden;transition:background-color .4s var(--ease),color .4s var(--ease)}
[hidden]{display:none!important}
a{color:inherit}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.3;font-weight:700}
p{margin:0}
em{font-style:normal}
::selection{background:var(--pale);color:var(--aztec)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px);position:relative}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;background:var(--brand);color:var(--on-brand);padding:8px 14px;border-radius:var(--r-sm);z-index:60}
.skip:focus{inset-inline-start:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:20px;height:20px;flex-shrink:0}
@media (prefers-reduced-motion:no-preference){html:not(.lenis){scroll-behavior:smooth}}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:40;transform-origin:right;transform:scaleX(0);background:linear-gradient(90deg,var(--pastel),var(--pale),var(--plantation));pointer-events:none}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s,transform .45s var(--ease)}
.top.scrolled{border-bottom-color:var(--line)}
.top.hide{transform:translateY(-100%)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:76px;padding-block:10px}
.top .logo{justify-self:start}
.top-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:22px;direction:ltr;letter-spacing:-.01em}
.logo svg{width:34px;height:34px;transition:transform .5s var(--ease)}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.logo .t{color:var(--brand)}
.nav{display:flex;gap:2px;flex-wrap:nowrap;justify-self:center;padding:4px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--raised) 70%,transparent)}
.nav a{text-decoration:none;padding:7px 15px;border-radius:999px;color:var(--muted);font-weight:500;font-size:15px;transition:color .2s,background-color .25s}
.nav a:hover,.nav a[aria-current]{color:var(--on-brand);background:var(--brand)}
.theme{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .5s var(--ease),border-color .2s,background-color .2s}
.theme:hover{border-color:var(--brand);transform:rotate(-20deg)}
.theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;grid-area:1/1}
.theme .moon{fill:currentColor;stroke:none}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (max-width:900px){
  .top .wrap{grid-template-columns:auto 1fr;row-gap:6px}
  .nav{grid-column:1/-1;grid-row:2;justify-self:stretch;overflow-x:auto;scrollbar-width:none;border:none;background:none;padding:0}
  .nav::-webkit-scrollbar{display:none}
}
@media (max-width:480px){.top .wrap{column-gap:8px}.top-actions{gap:8px}.nav{justify-content:safe center}.nav a{padding:6px 10px;font-size:14px}.logo{font-size:19px}.logo svg{width:28px;height:28px}.top .cta{min-height:42px;padding:8px 14px;font-size:13px}.theme{width:40px;height:40px}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font:600 15px/1.2 var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s;will-change:transform}
.btn .ico{width:18px;height:18px}
.btn-lg{min-height:50px;padding:12px 24px;font-size:15px}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--brand) 90%,transparent)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(218,241,222,.35) 50%,transparent 70%);transform:translateX(120%);transition:transform .8s var(--ease)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:hover::after{transform:translateX(-120%)}
:root[data-theme="dark"] .btn-primary:hover{color:var(--aztec)}
.btn-ghost{background:color-mix(in srgb,var(--raised) 60%,transparent);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--brand);background:var(--sunk)}
.btn-p{background:var(--p);color:var(--on-p)}
.btn-p:hover{filter:brightness(1.08)}

/* ---------- shared ---------- */
section{padding-block:clamp(72px,10vw,128px);position:relative}
.sunk{background:var(--sunk)}
.sunk .pcard,.sunk .case,.sunk .post-card{background:var(--raised)}
.tight{padding-block:clamp(44px,6vw,80px)}
.eyebrow{font-size:14px;font-weight:600;color:var(--brand)}
.pc .eyebrow.p{color:var(--p)}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:680px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head h2{font-size:clamp(32px,4.6vw,54px);font-weight:700;letter-spacing:-.015em;line-height:1.18}
.sec-head p{color:var(--muted);font-size:18px;max-width:56ch}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:500;background:var(--chip-bg);color:var(--chip-ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.by{font-size:12px;color:var(--muted);font-weight:500;direction:ltr}
.muted{color:var(--muted)}

/* brand marks and logo tiles */
.mark{flex-shrink:0}
.tile{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tile);border:1px solid var(--tile-line);overflow:hidden}
.tile img{width:78%;height:78%;object-fit:contain;display:block}
.tile.mono{background:var(--p,var(--brand));border-color:transparent;color:#fff;font-weight:700;font-size:20px;line-height:1}

/* Spotlight cards (React Bits "SpotlightCard", vanilla port) */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--p,var(--pale)) 22%,transparent),transparent 60%)}
.spot:hover::before{opacity:1}

/* ---------- hero ---------- */
.hero{padding-block:clamp(20px,3vw,36px) clamp(36px,4vw,52px);overflow:hidden;min-height:min(calc(100svh - 76px - 80px),760px);display:flex;align-items:center}
.hero > .wrap{width:100%}
.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.aurora .b1{width:46vw;height:46vw;top:-18vw;inset-inline-end:-10vw;background:var(--pastel)}
.aurora .b2{width:34vw;height:34vw;bottom:-14vw;inset-inline-start:22vw;background:color-mix(in srgb,var(--pale) 60%,transparent)}
.aurora .b3{width:22vw;height:22vw;top:30%;inset-inline-end:34vw;background:color-mix(in srgb,var(--plantation) 18%,transparent)}
:root[data-theme="dark"] .aurora .b1{background:var(--gable)}
:root[data-theme="dark"] .aurora .b2{background:color-mix(in srgb,var(--plantation) 70%,transparent)}
:root[data-theme="dark"] .aurora .b3{background:color-mix(in srgb,var(--pale) 22%,transparent)}
.aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--plantation) 28%,transparent) 1px,transparent 1.2px);background-size:22px 22px;mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent 75%);opacity:.5}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 6px;border-radius:999px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--raised) 75%,transparent);font-size:13px;color:var(--ink);font-weight:500;max-width:100%}
.pill .dot{position:relative;width:18px;height:18px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex-shrink:0}
.pill .dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pastel)}
.pill .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--pale);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.7);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
.display{font-size:clamp(34px,4.3vw,60px);font-weight:700;line-height:1.2;letter-spacing:-.02em;margin-top:18px;color:var(--ink);max-width:16ch}
.display em{position:relative;display:inline-block;color:var(--brand);z-index:0}
.display em::after{content:"";position:absolute;inset-inline:-.08em;bottom:.08em;height:.32em;border-radius:.12em;background:var(--hl);z-index:-1;transform:scaleX(var(--hl-s,1));transform-origin:right;transition:transform 1s var(--ease)}
:root[data-theme="dark"] .display em{color:var(--pastel)}
.hero .lead{font-size:clamp(15px,1.15vw,17px);line-height:1.8;color:var(--muted);max-width:52ch;margin-top:16px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
[data-blur] .w{display:inline-block;will-change:filter,transform,opacity}
.stats{display:flex;gap:clamp(20px,3.5vw,44px);margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap;max-width:520px}
.stats div{display:flex;flex-direction:column-reverse;gap:2px}
.stats dt{font-size:13px;color:var(--muted)}
.stats dd{margin:0;font-size:clamp(26px,2.6vw,34px);font-weight:700;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
:root[data-theme="dark"] .stats dd{color:var(--pastel)}

/* dark stage panel holding the orbit — always dark, in both themes */
.stage-panel{position:relative;width:min(100%,460px);margin-inline:auto;border-radius:var(--r-xl);padding:clamp(18px,2.4vw,30px);background:radial-gradient(70% 60% at 50% 45%,#235347 0%,transparent 70%),linear-gradient(155deg,#163832,#051F20 70%);border:1px solid rgba(142,182,155,.25);box-shadow:var(--shadow-lg);overflow:visible;
  --tile:#DAF1DE; --tile-line:rgba(218,241,222,.6); --ink:#DAF1DE; --muted:#8EB69B; --line:rgba(142,182,155,.25); --brand:#8EB69B; --mk-bar:#051F20}
:root[data-theme="dark"] .stage-panel{background:radial-gradient(70% 60% at 50% 45%,#235347 0%,transparent 70%),linear-gradient(155deg,#0B2B26,#163832 70%);border-color:#235347}
.panel-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(142,182,155,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(142,182,155,.12) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 80%);-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 80%)}
.float{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:14px;background:rgba(218,241,222,.96);color:#051F20;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font-size:12px;line-height:1.35}
.float .ico{width:30px;height:30px;padding:6px;border-radius:9px;background:#235347;color:#DAF1DE}
.float b{display:block;font-size:13px}
.float small{color:#235347}
.float.f1{top:-18px;inset-inline-start:-22px}
.float.f2{bottom:-18px;inset-inline-end:-22px}
.panel-grid{border-radius:inherit}

/* orbit of product logos */
.orbit{position:relative;width:100%;aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.ring{position:absolute;border-radius:50%;border:1px dashed rgba(142,182,155,.45);animation:spin 60s linear infinite}
.ring-in{inset:22%;animation-duration:46s;animation-direction:reverse;border-style:solid;border-color:rgba(142,182,155,.25)}
.ring-out{inset:3%}
.ring-out::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(218,241,222,.65) 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))}
.orb{--o:clamp(38px,12.5cqi,56px);position:absolute;top:50%;left:50%;width:var(--o);height:var(--o);margin:calc(var(--o) / -2) 0 0 calc(var(--o) / -2);transform:rotate(var(--a)) translateY(calc(var(--orbit-r) * -1)) rotate(calc(var(--a) * -1));text-decoration:none}
.ring-in .orb{--orbit-r:28cqi}
.ring-out .orb{--orbit-r:47cqi}
.orb-in{display:block;width:100%;height:100%;animation:spin 46s linear infinite}
.ring-in .orb-in{animation-direction:normal}
.ring-out .orb-in{animation-duration:60s;animation-direction:reverse}
.orb .tile{width:100%;height:100%;border-radius:28%;box-shadow:0 12px 26px -10px rgba(0,0,0,.65);transition:transform .35s var(--ease),box-shadow .3s}
.orb .tile.mono{font-size:calc(var(--o) * .4)}
.orb:hover .tile,.orb:focus-visible .tile{transform:scale(1.16);box-shadow:0 0 0 3px #8EB69B,0 16px 30px -10px rgba(0,0,0,.7)}
.orb::after{content:attr(data-name);position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;white-space:nowrap;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:#DAF1DE;color:#051F20;opacity:0;pointer-events:none;transition:opacity .2s}
.orb:hover::after,.orb:focus-visible::after{opacity:1}
.orbit:hover .ring,.orbit:hover .orb-in,.orbit:focus-within .ring,.orbit:focus-within .orb-in{animation-play-state:paused}
.core{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#8EB69B,#235347 70%);box-shadow:0 0 0 10px rgba(142,182,155,.12),0 0 60px rgba(142,182,155,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:8px;color:#DAF1DE}
.core svg{width:32%;height:auto;--mk:#DAF1DE;--mk-bar:#163832}
.core b{font-size:clamp(22px,3cqi + 8px,34px);line-height:1;margin-top:6px}
.core span{font-size:11px;line-height:1.35;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:980px){
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr}
  .display{max-width:none}
  .stage-panel{margin-top:24px;width:min(100%,420px)}
}
@media (max-width:520px){
  .ring-out{inset:8%}
  .ring-out .orb{--orbit-r:42cqi}
  .ring-in{inset:26%}
  .ring-in .orb{--orbit-r:24cqi}
  .float{font-size:12px;padding:8px 10px}
  .float small{display:none}
  .float .ico{width:28px;height:28px;padding:5px}
  .float.f1{top:-18px;inset-inline-start:-6px}
  .float.f2{bottom:-18px;inset-inline-end:-6px}
}

/* logo loop (React Bits "LogoLoop", CSS port) */
.loop{direction:ltr;border-block:1px solid var(--line);background:var(--raised);overflow:hidden;padding-block:20px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.loop-track{display:flex;width:max-content;direction:ltr;animation:loop 60s linear infinite;will-change:transform}
.loop-set{display:flex;gap:12px;margin:0;padding:0 6px;list-style:none}
.loop-set a{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;direction:rtl;transition:border-color .2s,transform .3s var(--ease),background-color .2s}
.loop-set a:hover{border-color:var(--p);transform:translateY(-3px);background:var(--pt)}
.loop-set .tile{width:36px;height:36px;border-radius:50%}
.loop-set .tile.mono{font-size:16px}
@keyframes loop{to{transform:translateX(calc(-100% / 3))}}

/* ---------- products ---------- */
.pgroups{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.pgroup{display:grid;grid-template-columns:minmax(200px,290px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.pgroup-h{position:sticky;top:110px;display:flex;flex-direction:column;gap:10px}
.pgroup-h .gi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand)}
.pgroup-h .gi .ico{width:26px;height:26px}
.pgroup-h h3{font-size:26px}
.pgroup-h p{color:var(--muted);font-size:15px}
.pgroup-h .count{align-self:flex-start;font-size:13px;color:var(--chip-ink);background:var(--chip-bg);font-weight:600;padding:2px 12px;border-radius:999px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;perspective:1200px}
.pcard{display:flex;flex-direction:column;gap:14px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;text-decoration:none;min-width:0;transform-style:preserve-3d;transition:border-color .3s,box-shadow .4s}
.pcard::after{content:"";position:absolute;inset-inline:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--p);transform:scaleX(0);transition:transform .5s var(--ease)}
.pcard:hover{border-color:color-mix(in srgb,var(--p) 55%,var(--line));box-shadow:var(--shadow)}
.pcard:hover::after{transform:scaleX(1)}
.pcard .id{display:flex;align-items:center;gap:14px}
.pcard .tile{width:54px;height:54px;border-radius:15px;transition:transform .5s var(--ease)}
.pcard:hover .tile{transform:rotate(-6deg) scale(1.06)}
.pcard h4{font-size:21px;line-height:1.3}
.pcard .sector{font-size:13px;color:var(--muted)}
.pcard .sum{color:var(--muted);font-size:15px}
.pcard .chip{background:var(--pt);color:var(--ink)}
.pcard .more{margin-top:auto;color:var(--p);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.pcard .more .ico{width:16px;height:16px;transition:transform .4s var(--ease)}
.pcard:hover .more .ico{transform:translate(-4px,-4px)}
@media (max-width:900px){.pgroup{grid-template-columns:1fr}.pgroup-h{position:static;flex-direction:row;flex-wrap:wrap;align-items:center}.pgroup-h p{flex-basis:100%}}

/* inverse band: principles — dark green in light theme, plantation in dark */
.inverse{background:var(--inv-bg);color:var(--inv-ink);overflow:hidden}
.inverse .sec-head p{color:var(--inv-muted)}
.inverse::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--inv-line) 1px,transparent 1px),linear-gradient(90deg,var(--inv-line) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);opacity:.35;pointer-events:none}
.pr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative;z-index:1}
.pr > div{padding:28px 24px;display:flex;flex-direction:column;gap:10px;border-radius:var(--r-md);background:var(--inv-card);border:1px solid var(--inv-line);backdrop-filter:blur(6px);transition:transform .5s var(--ease),border-color .3s}
.pr > div:hover{transform:translateY(-6px);border-color:var(--pale)}
.pr .pi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--pastel);color:var(--aztec);margin-bottom:8px}
.pr .pi .ico{width:26px;height:26px}
.pr b{font-size:19px}
.pr p{color:var(--inv-muted);font-size:15px}
@media (max-width:980px){.pr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pr{grid-template-columns:1fr}}

/* work */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.case{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;background:var(--raised);min-width:0;overflow:hidden;transition:border-color .3s,box-shadow .4s}
.case:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.case .ci{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--plantation),var(--aztec));color:var(--pastel)}
.case .ci .ico{width:28px;height:28px}
.case .tag{align-self:flex-start;font-size:13px;font-weight:600;color:var(--chip-ink);background:var(--chip-bg);padding:3px 12px;border-radius:999px}
.case h3{font-size:25px}
.case p{color:var(--muted)}
.case ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.case li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.case li .ico{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--chip-bg);color:var(--brand);margin-top:3px}
.case .note{font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:14px;margin-top:auto}
@media (max-width:760px){.cases{grid-template-columns:1fr}}

/* services: a five-stage journey, so the numbering is real */
.svc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px);align-items:start}
.svc-wrap .sec-head{position:sticky;top:110px}
.svc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.svc li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line);transition:border-color .3s,transform .5s var(--ease)}
.svc li:hover{border-color:var(--line-strong);transform:translateX(-6px)}
.svc .si{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--sunk-2);color:var(--brand);position:relative}
.svc .si .ico{width:24px;height:24px}
.svc .si small{position:absolute;top:-6px;inset-inline-end:-6px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700;display:grid;place-items:center}
.svc b{font-size:18px;display:block}
.svc .d{font-size:14px;color:var(--muted)}
.svc .from{font-size:13px;color:var(--muted);white-space:nowrap;text-align:end}
.svc .from strong{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:900px){.svc-wrap{grid-template-columns:1fr}.svc-wrap .sec-head{position:static}}
@media (max-width:480px){.svc li{grid-template-columns:44px minmax(0,1fr);padding:16px}.svc .si{width:44px;height:44px}.svc .from{grid-column:2;text-align:start}}

/* faq */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);padding:0 22px;transition:border-color .3s,background-color .3s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;padding:20px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:linear-gradient(var(--on-brand),var(--on-brand)) center/11px 1.8px no-repeat,linear-gradient(var(--on-brand),var(--on-brand)) center/1.8px 11px no-repeat,var(--brand);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{color:var(--muted);padding-bottom:22px;max-width:62ch}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}}

/* posts */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.post-card{display:flex;flex-direction:column;gap:10px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;transition:border-color .3s,transform .5s var(--ease),box-shadow .4s}
.post-card:hover{border-color:var(--line-strong);transform:translateY(-5px);box-shadow:var(--shadow)}
.post-card img{aspect-ratio:1200/630;object-fit:cover;width:100%;background:var(--sunk)}
.post-card .b{padding:22px;display:flex;flex-direction:column;gap:8px}
.post-card h3{font-size:20px}
.post-card p{color:var(--muted);font-size:15px}
.post-card time{font-size:13px;color:var(--brand);font-weight:600}

/* prose (blog posts, pages) */
.prose{max-width:70ch;font-size:18px;line-height:1.95}
.prose h2{font-size:28px;margin:40px 0 12px}
.prose h3{font-size:22px;margin:30px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 18px}
.prose a{color:var(--brand);text-underline-offset:3px}
.prose img{border-radius:var(--r-md)}
.prose blockquote{margin:0 0 18px;padding:10px 18px;border-inline-start:3px solid var(--brand);background:var(--sunk);border-radius:0 var(--r-sm) var(--r-sm) 0}
.prose code{background:var(--sunk);padding:2px 6px;border-radius:6px;font-size:.9em}
.article-head{padding-block:clamp(40px,6vw,72px) 28px}
.article-head h1{font-size:clamp(34px,5vw,58px);max-width:22ch;letter-spacing:-.015em}
.article-head .meta{color:var(--muted);margin-top:14px;font-size:15px}
.cover{border-radius:var(--r-lg);margin-bottom:36px;width:100%}

/* ---------- contact band (dark in both themes) ---------- */
.band{background:var(--band);color:var(--on-band);overflow:hidden;--line:var(--band-line);--brand:#8EB69B;--mk-bar:#051F20}
.band .blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.band .blob.a{width:40vw;height:40vw;inset:auto -10vw -18vw auto;background:rgba(35,83,71,.8)}
.band .blob.b{width:26vw;height:26vw;top:-10vw;inset-inline-end:-6vw;background:rgba(142,182,155,.18)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.band h2{font-size:clamp(34px,4.8vw,58px);letter-spacing:-.015em;line-height:1.15}
.band .lead{color:var(--band-muted);margin-top:16px;max-width:44ch;font-size:18px}
.contacts{display:flex;flex-direction:column;gap:10px;margin-top:36px}
.ct{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r-md);background:rgba(22,56,50,.6);border:1px solid var(--band-line)}
.ct .ico{width:40px;height:40px;padding:9px;border-radius:12px;background:#235347;color:#DAF1DE}
.ct span{font-size:13px;color:var(--band-muted)}
.ct b{font-size:18px;direction:ltr;user-select:all;font-weight:600;display:block}
.ct a{color:inherit;text-decoration:none}
.copy{margin-inline-start:auto;background:transparent;border:1px solid var(--band-line);color:var(--on-band);border-radius:999px;padding:4px 14px;font:500 13px var(--font);cursor:pointer;min-height:32px;transition:border-color .2s,background-color .2s}
.copy:hover{border-color:var(--pale);background:rgba(142,182,155,.12)}
.form{--line:#C6DFCC;position:relative;background:#F6FBF7;color:#051F20;border-radius:var(--r-xl);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;box-shadow:0 40px 80px -36px rgba(0,0,0,.7)}
:root[data-theme="dark"] .form{--line:#235347;background:#051F20;color:#DAF1DE;border:1px solid #235347}
.form h3{grid-column:1/-1;font-size:24px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-size:13px;font-weight:600}
.f input,.f select,.f textarea{font:400 15px var(--font);padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:inherit;min-height:50px;width:100%;transition:border-color .2s,box-shadow .2s}
.f select option{color:#051F20}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:#8EB69B;box-shadow:0 0 0 4px rgba(142,182,155,.35)}
.f textarea{min-height:100px;resize:vertical}
.f .err{color:var(--danger);font-size:13px}
.f [aria-invalid="true"]{border-color:var(--danger)}
.form .btn{grid-column:1/-1;background:#235347;color:#DAF1DE;min-height:54px}
.form .btn:hover{background:#163832;color:#DAF1DE}
:root[data-theme="dark"] .form .btn{background:#8EB69B;color:#051F20}
:root[data-theme="dark"] .form .btn:hover{background:#DAF1DE}
.hp{position:absolute!important;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.out{grid-column:1/-1;background:rgba(142,182,155,.25);border-radius:var(--r-sm);padding:14px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.out pre{margin:0;white-space:pre-wrap;font:inherit}
.out .row{display:flex;gap:8px;flex-wrap:wrap}
.alert{grid-column:1/-1;background:var(--danger-tint);color:#051F20;border-radius:var(--r-sm);padding:12px 14px;font-size:14px}
@media (max-width:900px){.band .wrap{grid-template-columns:1fr}}
@media (max-width:480px){.form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding-block:64px 28px;color:var(--muted);font-size:14px;background:var(--sunk-2);border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
footer h2{font-size:14px;color:var(--ink);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--brand)}
footer .base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}footer .brand{grid-column:1/-1;padding-bottom:8px}}

/* ---------- product page ---------- */
.ph{padding-block:clamp(36px,5vw,64px) 0;position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:-30% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--p) 22%,transparent),transparent);pointer-events:none}
.crumb{font-size:14px;color:var(--muted);margin-bottom:8px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.crumb li+li::before{content:"/";margin-inline-end:6px;opacity:.6}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.ph-id{display:flex;align-items:center;gap:16px}
.ph-id .tile{width:72px;height:72px;border-radius:20px;box-shadow:var(--shadow)}
.ph-id .tile.mono{font-size:32px}
.ph-id svg{width:56px;height:56px}
.ph-id .nm{font-size:30px;font-weight:700;line-height:1.2}
.ph h1{font-size:clamp(34px,5vw,60px);font-weight:700;max-width:20ch;letter-spacing:-.015em;line-height:1.2}
.ph .lead{font-size:19px;color:var(--muted);max-width:60ch}
.ph .actions{display:flex;gap:12px;flex-wrap:wrap}
.ph .chip{background:var(--pt);border-color:transparent;color:var(--ink)}
.stage{margin-top:16px;background:linear-gradient(180deg,var(--pt),color-mix(in srgb,var(--p) 6%,var(--surface)));border:1px solid color-mix(in srgb,var(--p) 18%,var(--line));border-bottom:none;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) 0}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(80%,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:clamp(16px,3vw,36px)}
.shots img{scroll-snap-align:center;border-radius:12px;border:1px solid var(--line);background:var(--raised)}
.shots:has(img:only-child){grid-auto-columns:100%}

/* mock app */
.mock{background:var(--raised);border:1px solid var(--line);border-bottom:none;border-radius:14px 14px 0 0;overflow:hidden;font-size:13px;line-height:1.5;box-shadow:var(--shadow)}
.mock-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.mock-bar svg{width:22px;height:22px}
.mock-bar .tile,.phone .ttl .tile{width:26px;height:26px;border-radius:8px}
.mock-bar .tile.mono,.phone .ttl .tile.mono{font-size:13px}
.mock-bar b{font-size:14px}
.mock-bar .u{margin-inline-start:auto;display:flex;align-items:center;gap:8px;color:var(--muted)}
.mock-bar .av{width:26px;height:26px;border-radius:50%;background:var(--pt);color:var(--p);display:grid;place-items:center;font-weight:700;font-size:12px}
.mock-body{display:grid;grid-template-columns:180px minmax(0,1fr)}
.mock-side{border-inline-end:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.mock-side span{padding:7px 10px;border-radius:8px;color:var(--muted)}
.mock-side span.on{background:var(--pt);color:var(--p);font-weight:600}
.mock-main{padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.mock-main h4{margin:0;font-size:16px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kpi small{display:block;color:var(--muted);font-size:12px}
.kpi strong{font-size:22px;font-variant-numeric:tabular-nums}
.kpi strong.p{color:var(--p)}
.tbl{border:1px solid var(--line);border-radius:10px;overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;min-width:420px}
.tbl th,.tbl td{text-align:start;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{font-weight:500;color:var(--muted);font-size:12px}
.tbl tr:last-child td{border-bottom:none}
.tbl td.num{font-variant-numeric:tabular-nums}
.st{display:inline-block;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--pt);color:var(--p)}
.st.done{background:var(--brand-tint);color:var(--brand)}
.st.warn{background:var(--pastel);color:var(--aztec)}
.bars{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.bars .h{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:8px}
.bars .cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:end;height:110px;border-bottom:1px solid var(--line)}
.bars .cols i{display:block;background:var(--p);border-radius:6px 6px 0 0;transform-origin:bottom}
.bars .lbl{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;text-align:center;color:var(--muted);font-size:11px;padding-top:4px}
.kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kan .col{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.kan .col.p{background:var(--pt);border-color:transparent}
.kan .ch{display:flex;justify-content:space-between;font-weight:600;font-size:12px}
.kan .ch span{color:var(--muted);font-variant-numeric:tabular-nums}
.kan .tk{background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:8px;font-size:12px}
.kan .prg{height:5px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.kan .prg i{display:block;height:100%;width:70%;background:var(--p)}
.phone-stage{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.phone{width:min(300px,100%);background:var(--raised);border:1px solid var(--line);border-bottom:none;border-radius:32px 32px 0 0;padding:14px 14px 0;font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.phone .notch{width:90px;height:6px;border-radius:3px;background:var(--line);margin:0 auto 4px}
.phone .ttl{display:flex;justify-content:space-between;align-items:center}
.phone .ttl b{font-size:15px}
.phone .ttl svg{width:22px;height:22px}
.phone .srch{border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--muted)}
.phone .cats{display:flex;gap:6px;flex-wrap:wrap}
.phone .cats span{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px}
.phone .cats span.on{background:var(--p);color:var(--on-p);border-color:transparent}
.phone .itm{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center}
.phone .thumb{width:46px;height:46px;border-radius:10px;background:var(--pt);flex-shrink:0;display:grid;place-items:center;color:var(--p)}
.phone .thumb svg{width:22px;height:22px}
.phone .itm div{min-width:0;flex:1}
.phone .itm small{display:block;color:var(--muted);font-size:11px}
.phone .price{font-weight:700;color:var(--p);font-variant-numeric:tabular-nums;white-space:nowrap}
.phone .cta{background:var(--p);color:var(--on-p);text-align:center;border-radius:10px;padding:9px;font-weight:600}
.phone .pnav{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:8px 0;color:var(--muted);font-size:11px}
.phone .pnav .on{color:var(--p);font-weight:600}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mini{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}
.mini b{font-size:14px}
.mini small{color:var(--muted)}
.mini .row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
@media (max-width:640px){.kan{grid-template-columns:1fr}.mock-side{display:none}.mock-body{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cards2{grid-template-columns:1fr}}

.ps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ps > div{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:10px}
.ps .k{font-size:14px;font-weight:700;color:var(--muted)}
.ps .k.p{color:var(--p)}
.ps p{font-size:18px}
@media (max-width:760px){.ps{grid-template-columns:1fr}}
.roles{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.roles span{padding:8px 16px;border-radius:999px;background:var(--pt);font-weight:600;font-size:14px}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feat{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--raised)}
.feat .ic{width:46px;height:46px;border-radius:14px;background:var(--pt);color:var(--p);display:grid;place-items:center}
.feat .ic svg{width:22px;height:22px}
.feat p{color:var(--muted);font-size:15px}
@media (max-width:900px){.feats{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.feats{grid-template-columns:1fr}}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;counter-reset:s}
.steps li{counter-increment:s;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:8px}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--p);color:var(--on-p);display:grid;place-items:center;font-weight:700}
.steps b{font-size:18px}
.steps p{color:var(--muted);font-size:15px}
.mods{display:flex;flex-wrap:wrap;gap:8px}
.mods span{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--raised);font-size:14px;font-weight:500}
.mods span.soon{border-style:dashed;color:var(--muted);background:transparent}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:stretch}
.plan{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:10px;position:relative}
.plan.hl{border:2px solid var(--p);box-shadow:var(--shadow)}
.plan .badge{position:absolute;top:-13px;inset-inline-start:24px;background:var(--p);color:var(--on-p);font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px}
.plan h3{font-size:20px}
.plan .price{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.plan .price small{font-size:14px;color:var(--muted);font-weight:500}
.plan .note{font-size:13px;color:var(--muted)}
.plan ul{margin:8px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.pcta{background:var(--p);color:var(--on-p);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.pcta h2{font-size:clamp(24px,3.2vw,34px)}
.pcta p{opacity:.9;margin-top:6px}
.pcta .btns{display:flex;gap:10px;flex-wrap:wrap}
.pcta .btn{background:var(--surface);color:var(--ink)}
.pcta .btn.ol{background:transparent;color:var(--on-p);border-color:currentColor}
.next{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:20px}
.next a{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;background:var(--raised);transition:border-color .25s,transform .35s var(--ease)}
.next a:hover{border-color:var(--p);transform:translateY(-2px)}
.next .tile{width:40px;height:40px}
.next svg{width:28px;height:28px}
.next .by{direction:rtl}
.pager{display:flex;gap:8px;justify-content:center;margin-top:32px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .loop-track{animation:none}
}

/* ---------- Middletech logo: two pillars joined by a bridge ---------- */
:root{--mk1:#235347;--mk2:#051F20;--mkb1:#8EB69B;--mkb2:#DAF1DE;--mk-cut:var(--surface)}
:root[data-theme="dark"]{--mk1:#8EB69B;--mk2:#235347;--mkb1:#DAF1DE;--mkb2:#DAF1DE}
.stage-panel,.band{--mk1:#DAF1DE;--mk2:#8EB69B;--mkb1:#235347;--mkb2:#163832}
.core{--mk-cut:#3E7A62}
footer{--mk-cut:var(--sunk-2)}
.mk-s1{stop-color:var(--mk1)}
.mk-s2{stop-color:var(--mk2)}
.mk-b1{stop-color:var(--mkb1)}
.mk-b2{stop-color:var(--mkb2)}
.mk-bridge{stroke:var(--mk-cut)}
.mk-p,.mk-bridge{transform-box:fill-box;transition:transform .55s var(--ease)}
.mk-p{transform-origin:50% 100%}
.mk-bridge{transform-origin:50% 50%}
.logo{gap:12px}
.logo .mt-mark{width:40px;height:40px;filter:drop-shadow(0 6px 10px rgba(5,31,32,.22))}
:root[data-theme="dark"] .logo .mt-mark{filter:drop-shadow(0 6px 14px rgba(142,182,155,.18))}
.logo:hover .mk-p1{transform:translateY(-2px)}
.logo:hover .mk-p2{transform:translateY(2px)}
.logo:hover .mk-bridge{transform:scaleX(1.12)}
.wm{display:flex;align-items:baseline;line-height:1}
.wm-n{font-size:25px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.wm-n .t{color:var(--brand);font-weight:600}
footer .brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
footer .brand .logo{display:inline-flex;margin-top:-10px}
footer .brand p{max-width:30ch}
footer .logo .mt-mark{width:44px;height:44px}
.btn-sm{min-height:40px;padding:8px 18px;font-size:14px}
footer .btn-primary{color:var(--on-brand)}
footer .btn-primary:hover{color:var(--on-brand)}
@media (max-width:480px){.logo .mt-mark{width:32px;height:32px}.wm-n{font-size:21px}}