/* ═══════════════════════════════════════════════════════════════════
   OMNIWIRE — modules
   Cards · flows · blocks · chain · method · frames · contact
   ═══════════════════════════════════════════════════════════════════ */

/* ── the live-systems section: the centre of gravity of the site ─── */
.sec--live{
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(23,169,204,.05) 0%, rgba(23,169,204,0) 70%),
    linear-gradient(180deg,var(--wash) 0%,var(--paper-2) 100%);
  border-block:1px solid var(--line);
}

/* ── capability group cards (home) ───────────────────────────────── */
.gcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.gcard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;
}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.gcard__hit{position:absolute;inset:0;border-radius:inherit;z-index:1}
.gcard__hit:focus-visible{outline-offset:-3px}
.gcard__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--teal);letter-spacing:.1em}
.gcard__name{font-size:var(--t-h3)}
.gcard__lede{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68}
.gcard__list{margin-block-start:auto;padding-block-start:var(--s4);border-block-start:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.gcard__list li{font-size:var(--t-xs);color:var(--ink-2);padding-block:3px}

/* ── service cards (services hub) ────────────────────────────────── */
.vcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s5)}
.vcard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s2);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;
}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.vcard__hit{position:absolute;inset:0;border-radius:inherit;z-index:1}
.vcard__name{font-size:var(--t-h3)}
.vcard__tag{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d)}
[dir="rtl"] .vcard__tag{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.78rem}
.vcard__sum{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68;margin-block-start:var(--s2)}
.vcard__go{
  margin-block-start:auto;padding-block-start:var(--s4);
  font-size:var(--t-xs);font-weight:600;color:var(--teal-d);
  display:inline-flex;align-items:center;gap:6px;
}
.vcard__go::after{content:"→";transition:transform .3s var(--ease-out)}
[dir="rtl"] .vcard__go::after{content:"←"}
.vcard:hover .vcard__go::after{transform:translateX(4px)}
[dir="rtl"] .vcard:hover .vcard__go::after{transform:translateX(-4px)}

/* ── solution cards ──────────────────────────────────────────────── */
.solcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s5)}
.solcard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s8) var(--s6);
  display:flex;flex-direction:column;gap:var(--s2);overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;
}
.solcard::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease-out);
}
.solcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.solcard:hover::before{transform:scaleX(1)}
.solcard__hit{position:absolute;inset:0;border-radius:inherit;z-index:1}
.solcard__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink-4);letter-spacing:.1em}
.solcard__name{font-size:var(--t-h3)}
.solcard__tag{font-size:var(--t-xs);color:var(--teal-d);font-weight:600}
.solcard__sum{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68;margin-block-start:var(--s2)}
.solcard__go{margin-block-start:auto;padding-block-start:var(--s5);font-size:var(--t-xs);font-weight:600;color:var(--teal-d);display:inline-flex;gap:6px}
.solcard__go::after{content:"→";transition:transform .3s var(--ease-out)}
[dir="rtl"] .solcard__go::after{content:"←"}
.solcard:hover .solcard__go::after{transform:translateX(4px)}
[dir="rtl"] .solcard:hover .solcard__go::after{transform:translateX(-4px)}

/* ── system cards (the work wall) ────────────────────────────────── */
.swall{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s6)}
.swall--home{grid-template-columns:repeat(2,minmax(0,1fr))}
.swall--single{grid-template-columns:minmax(0,1fr);max-width:560px}

.scard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s;
  transform-style:preserve-3d;
}
.scard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.scard__hit{position:absolute;inset:0;z-index:3;border-radius:inherit}
.scard__hit:focus-visible{outline-offset:-4px}
.scard__vis{padding:var(--s6) var(--s6) 0;background:linear-gradient(180deg,var(--wash) 0%,var(--paper) 100%);display:flex;justify-content:center}
.scard__body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.scard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.scard__cat{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
[dir="rtl"] .scard__cat{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.76rem}
.scard__name{font-size:var(--t-h3);letter-spacing:-.02em}
.scard__type{font-size:var(--t-xs);color:var(--teal-d);font-weight:600}
.scard__sum{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68;margin-block-start:var(--s1)}
.scard__go{
  margin-block-start:auto;padding-block-start:var(--s5);
  font-size:var(--t-xs);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;
}
.scard__go::after{content:"→";color:var(--teal);transition:transform .3s var(--ease-out)}
[dir="rtl"] .scard__go::after{content:"←"}
.scard:hover .scard__go::after{transform:translateX(5px)}
[dir="rtl"] .scard:hover .scard__go::after{transform:translateX(-5px)}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal-d);border:1px solid rgba(14,155,142,.3);background:var(--accent-soft);
  padding:3px 9px;border-radius:100px;
}
.badge--dev{color:var(--amber);border-color:rgba(222,138,42,.32);background:rgba(222,138,42,.07)}
[dir="rtl"] .badge{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.7rem}
/* the live dot is the one thing on the page that breathes — it marks
   the difference between a marketing page and working software */
.badge__dot{
  width:5px;height:5px;border-radius:50%;background:var(--teal);flex-shrink:0;
  animation:livePulse 2.4s var(--ease) infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(14,155,142,.5)}
  50%{box-shadow:0 0 0 4px rgba(14,155,142,0)}
}

/* ── the live-demo call to action ────────────────────────────────
   Says exactly what happens, carries the ↗ "opens the system" cue,
   and is the element the onboarding cursor points at. */
.cta-live{
  margin-block-start:auto;
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:11px 20px;border-radius:100px;
  background:var(--ink);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  align-self:flex-start;position:relative;
  box-shadow:0 1px 2px rgba(12,23,32,.06);
  transition:background .3s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out),gap .3s var(--ease-out);
}
.scard__body > .cta-live{margin-block-start:var(--s5)}
.cta-live__arrow{font-style:normal;font-size:.95em;transition:transform .35s var(--ease-out)}
.scard:hover .cta-live{background:#16303F;transform:translateY(-1px);box-shadow:var(--sh);gap:var(--s3)}
.scard:hover .cta-live__arrow{transform:translate(2px,-2px)}
[dir="rtl"] .cta-live__arrow{transform:scaleX(-1)}
[dir="rtl"] .scard:hover .cta-live__arrow{transform:scaleX(-1) translate(2px,-2px)}

.scard__more{
  margin-block-start:var(--s3);font-size:var(--t-xs);color:var(--ink-3);
  border-block-end:1px solid transparent;align-self:flex-start;
  position:relative;z-index:4;transition:color .25s,border-color .25s;
}
.scard__more:hover{color:var(--ink);border-block-end-color:var(--line-2)}

/* ── systems-index legend ────────────────────────────────────────── */
.legend-bar{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8);
  padding:var(--s5) var(--s6);margin-block-end:var(--s8);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
}
.legend-bar__item{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.legend-bar__t{font-size:var(--t-xs);color:var(--ink-3)}

/* ── onboarding cursor guide ─────────────────────────────────────
   Shown once, only when the section is reached, and cancelled the
   moment the visitor does anything themselves. It is decoration on
   top of a real button — never the only way to understand the CTA. */
.guide{
  position:absolute;z-index:6;inset-block-start:0;inset-inline-start:0;
  width:26px;height:32px;pointer-events:none;
  opacity:0;visibility:hidden;
  transform:translate(var(--gx,0px),var(--gy,0px));
  transition:opacity .4s var(--ease),transform 1.05s var(--ease-out);
  filter:drop-shadow(0 3px 6px rgba(12,23,32,.28));
}
.guide.is-on{opacity:1;visibility:visible}
.guide.is-click .guide__ripple{animation:guideRipple .5s var(--ease-out) both}
.guide__ripple{
  position:absolute;inset-block-start:-9px;inset-inline-start:-9px;
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--teal);opacity:0;
}
@keyframes guideRipple{
  from{transform:scale(.3);opacity:.9}
  to{transform:scale(1.9);opacity:0}
}
.guide__hint{
  position:absolute;inset-block-start:30px;inset-inline-start:16px;
  white-space:nowrap;padding:4px 10px;border-radius:100px;
  background:var(--ink);color:#fff;
  font-family:var(--font-display);font-size:.68rem;font-weight:600;
}
[dir="rtl"] .guide__hint{inset-inline-start:auto;inset-inline-end:16px}
/* the button the cursor lands on gets a matching pulse */
.cta-live.is-guided{box-shadow:0 0 0 0 rgba(14,155,142,.45);animation:guidedPulse 1.1s var(--ease-out) 2}
@keyframes guidedPulse{
  0%{box-shadow:0 0 0 0 rgba(14,155,142,.45)}
  70%{box-shadow:0 0 0 12px rgba(14,155,142,0)}
  100%{box-shadow:0 0 0 0 rgba(14,155,142,0)}
}

/* ── About · connection point ────────────────────────────────────── */
.connect{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);padding:var(--s6);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
}
.connect__label{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-block-end:var(--s2);
}
[dir="rtl"] .connect__label{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.8rem;font-weight:600}
.connect__t{font-size:var(--t-sm);color:var(--ink-2);max-width:44ch}
.connect__li{gap:var(--s2)}

/* ── demo hand-off ───────────────────────────────────────────────
   A ~380ms confirmation that the real system is opening, so the
   click never feels like a dead link. */
.handoff{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.handoff.is-on{opacity:1;pointer-events:auto}
.handoff__inner{text-align:center}
.handoff__name{font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,3vw,1.8rem);letter-spacing:-.02em}
.handoff__t{
  margin-block-start:var(--s3);font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
[dir="rtl"] .handoff__t{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.82rem}
.handoff__bar{
  width:132px;height:2px;margin:var(--s5) auto 0;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.handoff__bar::after{
  content:"";display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  animation:handoffBar .38s var(--ease-out) forwards;
}
@keyframes handoffBar{from{transform:translateX(-100%)}to{transform:translateX(280%)}}

/* ── browser frame + live preview ────────────────────────────────── */
.frame{
  width:100%;border-radius:10px 10px 0 0;overflow:hidden;
  border:1px solid var(--line-2);border-block-end:0;background:var(--paper);
  box-shadow:0 10px 30px rgba(12,23,32,.08);
}
.frame--lg{border-radius:10px;border-block-end:1px solid var(--line-2)}
.frame__bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--wash-2);border-block-end:1px solid var(--line)}
.frame__bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.frame__bar span{
  margin-inline-start:var(--s3);font-family:var(--font-mono);font-size:.6rem;color:var(--ink-4);
  letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.frame__view{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.frame--lg .frame__view{aspect-ratio:16/9}
.frame__view iframe{
  position:absolute;inset-block-start:0;inset-inline-start:0;border:0;
  width:1440px;height:900px;transform-origin:top left;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
}
[dir="rtl"] .frame__view iframe{transform-origin:top right}
.frame__view iframe.is-ready{opacity:1}

/* CSS placeholder shown until (or instead of) a live preview */
.ghost{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;gap:7px;background:var(--paper)}
.ghost::before{content:"";height:18px;border-radius:4px;background:var(--wash-2);flex-shrink:0}
.ghost::after{content:"";flex:1;border-radius:5px;border:1px solid var(--line);background:linear-gradient(180deg,var(--wash) 0%,var(--paper-2) 100%)}
.ghost--grid::after{background:
  repeating-linear-gradient(90deg,var(--wash) 0 46%,transparent 46% 50%),
  repeating-linear-gradient(0deg,transparent 0 52px,var(--paper) 52px 58px),var(--paper)}
.ghost--flow::after{background:
  radial-gradient(circle at 18% 50%,var(--wash-2) 0 18px,transparent 19px),
  radial-gradient(circle at 50% 50%,rgba(23,169,204,.12) 0 18px,transparent 19px),
  radial-gradient(circle at 82% 50%,var(--accent-soft) 0 18px,transparent 19px),var(--paper)}
.ghost--spine::after{background:
  linear-gradient(90deg,var(--wash) 0 32%,transparent 32%),
  repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 26px),var(--paper)}
.ghost--wall::after{background:repeating-linear-gradient(180deg,var(--paper) 0 20px,var(--wash) 20px 21px),var(--paper)}

/* ── flow ────────────────────────────────────────────────────────── */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) 0}
.flow li{
  display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-xs);color:var(--ink-2);background:var(--paper);border:1px solid var(--line);
  border-radius:100px;padding:8px 15px;transition:background .3s,color .3s,border-color .3s;
}
.sec--wash .flow li{background:var(--paper)}
.flow li:hover{background:var(--accent-soft);color:var(--teal-d);border-color:rgba(14,155,142,.3)}
.flow li:not(:last-child)::after{content:"→";margin-inline:var(--s2);color:var(--ink-4);font-weight:400}
[dir="rtl"] .flow li:not(:last-child)::after{content:"←"}
.flow--mini li{font-size:.72rem;padding:5px 11px}

/* ── chips ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips li{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line);background:var(--paper-2);border-radius:100px;padding:5px 12px;
}
[dir="rtl"] .chips li{font-family:var(--font-body);letter-spacing:0;font-size:.76rem}
.capblock{margin-block-start:var(--s10)}
.capblock__t{font-size:var(--t-h3);margin-block-end:var(--s4)}

/* ── numbered blocks ─────────────────────────────────────────────── */
.blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s6) var(--s8)}
.block{border-block-start:2px solid var(--line);padding-block-start:var(--s5);transition:border-color .4s}
.block:hover{border-block-start-color:var(--teal)}
.block__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--teal);letter-spacing:.1em;display:block;margin-block-end:var(--s3)}
.block__t{font-size:var(--t-h3);margin-block-end:var(--s2)}
.block__d{font-size:var(--t-sm);color:var(--ink-3);line-height:1.7}

/* ── narrative stages (solutions / systems) ──────────────────────── */
.stage{padding-block:var(--s6);border-block-end:1px solid var(--line)}
.stage:last-child{border-block-end:0}
.stage__label{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-d);margin-block-end:var(--s4);
}
[dir="rtl"] .stage__label{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.82rem;font-weight:700}
.stage__body{font-size:clamp(1rem,.35vw + .92rem,1.16rem);line-height:1.8;color:var(--ink-2)}

.outcomes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
.outcomes li{
  position:relative;padding:var(--s5) var(--s5) var(--s5) var(--s10);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink);
}
[dir="rtl"] .outcomes li{padding:var(--s5) var(--s10) var(--s5) var(--s5)}
.outcomes li::before{
  content:"";position:absolute;inset-inline-start:var(--s5);inset-block-start:calc(var(--s5) + 8px);
  width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--accent-soft);
}

/* ── method / process ────────────────────────────────────────────── */
.method{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s6) var(--s8)}
.method__step{border-block-start:2px solid var(--line);padding-block-start:var(--s5);transition:border-color .5s}
.method__step:hover{border-block-start-color:var(--teal)}
.method__n{font-family:var(--font-mono);font-size:var(--t-label);color:var(--teal);letter-spacing:.1em;display:block;margin-block-end:var(--s3)}
.method__name{font-size:var(--t-h3);margin-block-end:var(--s2)}
.method__desc{font-size:var(--t-sm);color:var(--ink-3);line-height:1.68}

/* ── layer visual (home philosophy) ──────────────────────────────── */
.layerviz{
  position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3.5vw,48px);box-shadow:var(--sh-sm);
}
.layerviz .scene{
  position:relative;width:100%;aspect-ratio:1/1;max-width:420px;
  margin-inline:auto;min-height:240px;
}
.layerviz__list{display:flex;flex-direction:column;gap:0}
.layerviz__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);
  align-items:baseline;padding-block:var(--s4);border-block-end:1px solid var(--line);
}
.layerviz__list li:last-child{border-block-end:0}
.layerviz__list b{font-family:var(--font-display);font-size:.98rem;color:var(--ink);min-width:104px}
.layerviz__list span{font-size:var(--t-sm);color:var(--ink-3);line-height:1.6}

/* ── chain (about) ───────────────────────────────────────────────── */
.chain{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3.5vw,48px);box-shadow:var(--sh-sm);
}
.chain__i{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:100px;
  background:var(--paper-2);position:relative;
  transition:transform .4s var(--ease-out),border-color .3s,box-shadow .3s;
}
.chain__i:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--sh-sm)}
.chain__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--paper);border:2px solid var(--ink-4)}
.chain__i[data-tone="cyan"] .chain__dot{border-color:var(--cyan)}
.chain__i[data-tone="teal"] .chain__dot{border-color:var(--teal)}
.chain__i[data-tone="amber"] .chain__dot{border-color:var(--amber)}
.chain__l{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.chain__i:not(:last-child)::after{content:"→";margin-inline-start:var(--s3);color:var(--ink-4);font-size:.85rem}
[dir="rtl"] .chain__i:not(:last-child)::after{content:"←"}

/* ── demo band (system detail) ───────────────────────────────────── */
.demoband{margin-block-start:var(--s10)}
.demoband__cta{display:flex;justify-content:center;margin-block-start:var(--s6)}

/* ── contact page ────────────────────────────────────────────────── */
.contact{
  position:relative;min-height:calc(100svh - var(--nav-h));
  display:grid;place-items:center;overflow:hidden;
  padding-block:calc(var(--nav-h) + var(--s16)) var(--s16);
  background:radial-gradient(100% 70% at 50% 40%,#FFFFFF 0%,#F5FAFC 55%,var(--wash) 100%);
}
.contact .scene--bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.contact__inner{position:relative;z-index:1;text-align:center;max-width:720px}
.contact .crumb{justify-content:center}
.contact__title{font-size:var(--t-h1);letter-spacing:-.03em}
.contact__lede{margin-block-start:var(--s5);color:var(--ink-2);font-size:1.08rem;line-height:1.75;max-width:48ch;margin-inline:auto}
.contact__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-block-start:var(--s10)}
.contact__mail{margin-block-start:var(--s6)}
.contact__mail a{
  font-family:var(--font-mono);font-size:.9rem;color:var(--ink-3);
  border-block-end:1px solid var(--line-2);padding-block-end:3px;transition:color .3s,border-color .3s;
}
.contact__mail a:hover{color:var(--teal-d);border-block-end-color:var(--teal)}
.contact__status{
  min-height:24px;margin-block-start:var(--s3);font-size:var(--t-xs);font-weight:600;
  color:var(--teal-d);opacity:0;transition:opacity .3s;
}
.contact__status.is-on{opacity:1}
.contact__links{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:center;margin-block-start:var(--s16)}
.contact__links a{
  font-size:var(--t-xs);color:var(--ink-3);border-block-end:1px solid transparent;
  padding-block-end:2px;transition:color .25s,border-color .25s;
}
.contact__links a:hover{color:var(--ink);border-block-end-color:var(--line-2)}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1024px){
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layerviz{grid-template-columns:minmax(0,1fr)}
  .layerviz .scene{order:2;max-width:340px}
}
@media (max-width:860px){
  .swall--home{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .gcards{grid-template-columns:minmax(0,1fr)}
  .swall,.vcards,.solcards,.blocks,.method,.outcomes{grid-template-columns:minmax(0,1fr)}
  .flow li{font-size:.72rem;padding:6px 12px}
  .flow li:not(:last-child)::after{margin-inline:5px}
  .chain{flex-direction:column;align-items:stretch}
  .chain__i{justify-content:flex-start}
  .chain__i:not(:last-child)::after{content:"↓";margin-inline-start:auto}
  [dir="rtl"] .chain__i:not(:last-child)::after{content:"↓"}
  .layerviz__list li{grid-template-columns:minmax(0,1fr)}
  .contact__actions .btn{flex:1 1 100%}
  .contact__links{gap:var(--s4)}
}

/* ── 3D tilt, desktop pointers only ──────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .scard[data-tilt]{will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  .scard[data-tilt]{transform:none !important}
}