/* ============================================================================
   TRAKSHYM SHOWCASE  —  app.css
   ----------------------------------------------------------------------------
   Colours taken straight from the Trakshym deck. EDIT THEM HERE.
   ============================================================================ */
:root{
  /* ---- Brand ---- */
  --brand:       #EC9249;   /* primary orange — icon badges, banners, fills   */
  --brand-deep:  #C76837;   /* darker orange — bold orange text, big numbers  */
  --brand-soft:  #FDF1E7;   /* peach panel background                         */
  --brand-tint:  #FBE7D6;   /* slightly stronger peach, for borders/hovers    */

  /* ---- Neutrals ---- */
  --bg:          #FFFFFF;
  --ink:         #282827;   /* headings                                       */
  --muted:       #6E7278;   /* body text                                      */
  --card:        #F7F8FA;   /* card background                                */
  --card-2:      #F5F6F8;
  --line:        #E3E6EA;   /* borders                                        */
  --line-2:      #D3D8DE;

  /* ---- Sizes ---- */
  --pad:         clamp(18px, 2.2vw, 40px);
  --gap:         clamp(11px, 1.05vw, 17px);
  --radius:      18px;
  --radius-sm:   13px;
  --idle:        90s;       /* auto-return countdown ring                     */

  /* ---- Type ---- */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============================================================================
   BASE
   ============================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; cursor:default; -webkit-user-select:none; user-select:none;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
img,svg{ display:block; max-width:100%; }

/* ============================================================================
   BACKGROUND  — soft warm blooms on white
   ============================================================================ */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg); }
.bloom{ position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.bloom.n1{ width:52vw; height:52vw; left:-16vw; top:-20vw;
           background:radial-gradient(circle, rgba(236,146,73,.30) 0%, transparent 70%);
           animation:drift1 30s ease-in-out infinite; }
.bloom.n2{ width:44vw; height:44vw; right:-14vw; top:8vh;
           background:radial-gradient(circle, rgba(236,146,73,.20) 0%, transparent 70%);
           animation:drift2 36s ease-in-out infinite; }
.bloom.n3{ width:46vw; height:46vw; left:32vw; bottom:-24vw;
           background:radial-gradient(circle, rgba(199,104,55,.13) 0%, transparent 72%);
           animation:drift3 42s ease-in-out infinite; }
@keyframes drift1{ 50%{ transform:translate3d(7vw,5vh,0) scale(1.14); } }
@keyframes drift2{ 50%{ transform:translate3d(-8vw,7vh,0) scale(1.10); } }
@keyframes drift3{ 50%{ transform:translate3d(5vw,-6vh,0) scale(1.16); } }

.mesh{ position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(40,40,39,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,40,39,.045) 1px, transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(115% 80% at 50% 25%, #000 0%, transparent 76%);
          mask-image:radial-gradient(115% 80% at 50% 25%, #000 0%, transparent 76%);
  animation:meshpan 44s linear infinite; }
@keyframes meshpan{ to{ background-position:62px 62px, 62px 62px; } }

/* ============================================================================
   SHARED TYPE
   ============================================================================ */
.eyebrow{ font-size:clamp(9.5px,.74vw,12.5px); letter-spacing:.2em; text-transform:uppercase;
          color:var(--brand-deep); font-weight:700; }
.display{ font-size:clamp(28px,3.6vw,58px); line-height:1.06; letter-spacing:-.028em;
          font-weight:700; color:var(--ink); }
.display .hl{ color:var(--brand-deep); }
.lede{ font-size:clamp(13px,1.08vw,19px); line-height:1.55; color:var(--muted); max-width:76ch; }
.small{ font-size:clamp(10.5px,.82vw,13.5px); color:var(--muted); line-height:1.5; }

/* the orange one-liner the deck ends every slide with */
.kicker{ flex:none; text-align:center; font-weight:700; color:var(--brand-deep);
         font-size:clamp(11.5px,1.02vw,18px); letter-spacing:-.005em; }

/* ============================================================================
   MAIN MENU
   ============================================================================ */
.menu{ position:relative; height:100vh; display:flex; flex-direction:column;
       padding:var(--pad); gap:var(--gap); }

.brandbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex:none; }
.brandbar .lockup{ height:clamp(42px,3.8vw,62px); width:auto;
                   mix-blend-mode:multiply; }  /* hides the white background of the logo art */
.pill{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
       border:1px solid var(--line); background:var(--card);
       font-size:clamp(10px,.76vw,13px); color:var(--muted); font-weight:500; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--brand);
      box-shadow:0 0 0 0 rgba(236,146,73,.55); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ to{ box-shadow:0 0 0 12px rgba(236,146,73,0); } }

.bento{ flex:1; min-height:0; display:grid; gap:var(--gap);
        grid-template-columns:repeat(4,1fr);
        /* three equal tile rows, then a short content-sized row for the QR strip */
        grid-template-rows:repeat(3,1fr) auto; }

.tile{ position:relative; overflow:hidden; isolation:isolate; min-height:0;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:clamp(13px,1.3vw,24px);
  display:flex; flex-direction:column; justify-content:space-between; gap:8px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s, background .4s;
  animation:rise .75s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i,0) * 55ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(20px); } }

.tile::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(236,146,73,.16), transparent 62%); }
.tile:hover{ transform:translateY(-5px); border-color:var(--brand); background:#fff;
             box-shadow:0 18px 40px -22px rgba(199,104,55,.55); }
.tile:hover::before{ opacity:1; }
.tile:active{ transform:translateY(-1px) scale(.994); }

/* orange circular icon badge — the deck's signature element */
.badge{ width:clamp(30px,2.5vw,44px); height:clamp(30px,2.5vw,44px); border-radius:50%; flex:none;
        display:grid; place-items:center; background:var(--brand); color:#fff;
        transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.badge svg{ width:52%; height:52%; }
.tile:hover .badge, .card:hover .badge{ transform:scale(1.1); box-shadow:0 8px 18px -6px rgba(199,104,55,.6); }

.tile-title{ font-size:clamp(14.5px,1.28vw,23px); font-weight:700; letter-spacing:-.014em; line-height:1.16; }
.tile-sub{ font-size:clamp(10px,.78vw,13.5px); color:var(--muted); line-height:1.45; margin-top:4px; }
.tile-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.tile-arrow{ font-size:15px; color:var(--line-2); flex:none;
             transition:transform .4s cubic-bezier(.2,.8,.2,1), color .4s; }
.tile:hover .tile-arrow{ transform:translate(4px,-4px); color:var(--brand); }

/* ---- hero tile ---- */
.tile.hero{ grid-column:span 2; grid-row:span 4; justify-content:center; background:#fff;
            padding:clamp(18px,2.1vw,40px); gap:clamp(10px,1.1vw,18px); }
.tile.hero:hover{ background:#fff; }
.hero-title{ font-size:clamp(24px,2.75vw,46px); line-height:1.1; letter-spacing:-.03em; font-weight:700; }
.hero-title .hl{ color:var(--brand-deep); }
.hero-servs{ font-size:clamp(10px,.8vw,14px); color:var(--muted); }
.hero-servs b{ color:var(--ink); font-weight:600; }

.hero-stats{ display:flex; gap:clamp(14px,2vw,38px); flex-wrap:wrap; }
.hero-stats .n{ font-size:clamp(19px,2vw,36px); font-weight:700; letter-spacing:-.03em; color:var(--brand-deep); line-height:1; }
.hero-stats .l{ font-size:clamp(8.5px,.66vw,11.5px); letter-spacing:.14em; text-transform:uppercase;
                color:var(--muted); margin-top:4px; font-weight:600; }

/* ---- the "Excel / WhatsApp / Paper  ->  ONE SYSTEM" flow ---- */
.flow{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(8px,.9vw,16px); align-items:center; }
.flow-col{ display:flex; flex-direction:column; gap:clamp(5px,.5vw,9px); }
.flow-lab{ font-size:clamp(7.5px,.6vw,10px); letter-spacing:.14em; text-transform:uppercase;
           font-weight:700; color:var(--muted); margin-bottom:2px; }
.flow-lab.on{ color:var(--brand-deep); }
.flow-item{ background:var(--card); border:1px solid var(--line); border-radius:9px;
            padding:clamp(6px,.62vw,11px) clamp(8px,.8vw,14px);
            font-size:clamp(9px,.74vw,13px); color:var(--muted); text-align:center; }
.flow-arrow{ color:var(--brand); font-size:clamp(16px,1.5vw,26px); animation:nudge 2s ease-in-out infinite; }
@keyframes nudge{ 50%{ transform:translateX(5px); } }
.flow-one{ background:var(--brand); color:#fff; border-radius:12px;
           padding:clamp(10px,1.1vw,20px) clamp(8px,.9vw,16px); text-align:center;
           box-shadow:0 12px 26px -14px rgba(199,104,55,.8); }
.flow-one b{ display:block; font-size:clamp(11px,.98vw,17px); letter-spacing:.02em; }
.flow-one span{ display:block; margin-top:5px; font-size:clamp(8.5px,.68vw,12px); opacity:.94; line-height:1.4; }

/* ---- scan-to-connect strip (bottom of the main menu) ----------------------
   Both codes are big enough to scan straight off this screen; the tile also
   opens connect.html, where they are printed about three times this size. */
.tile.connect{ grid-column:span 2; flex-direction:row; align-items:center;
               justify-content:space-between; gap:clamp(12px,1.3vw,26px); }
.tile.connect .say{ display:flex; align-items:center; gap:clamp(10px,1vw,18px); min-width:0; }
.tile.connect .mini{ display:flex; gap:clamp(10px,1vw,18px); flex:none; }
.tile.connect .mini figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.tile.connect .mini img{ height:clamp(80px,8.4vw,132px); width:auto; border-radius:7px; }
.tile.connect .mini .cap{ font-size:clamp(8px,.62vw,10.5px); letter-spacing:.14em;
                          text-transform:uppercase; color:var(--muted); font-weight:700; }

/* ---- footer ticker ---- */
.ticker{ flex:none; border-top:1px solid var(--line); padding-top:clamp(8px,.85vw,14px);
         display:flex; align-items:center; gap:18px; }
.ticker .label{ font-size:clamp(8.5px,.64vw,11.5px); letter-spacing:.2em; text-transform:uppercase;
                color:var(--brand-deep); font-weight:700; flex:none; }
.marquee{ flex:1; overflow:hidden;
  /* soft edges so a part-scrolled word fades out instead of looking chopped */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); }
.marquee-track{ display:flex; width:max-content; gap:30px; animation:slide 40s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-size:clamp(10px,.8vw,13.5px); color:var(--muted); white-space:nowrap;
                     display:flex; align-items:center; gap:30px; font-weight:500; }
.marquee-track span::after{ content:"•"; color:var(--brand); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================================
   SUB-PAGES
   ============================================================================ */
.page{ position:relative; height:100vh; display:flex; flex-direction:column;
       padding:var(--pad); gap:clamp(11px,1.3vw,22px); }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; }
.back{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px 9px 13px;
       border:1px solid var(--line); border-radius:999px; background:var(--card);
       font-size:clamp(11px,.85vw,14.5px); font-weight:600;
       transition:background .3s, border-color .3s, transform .3s; }
.back:hover{ background:#fff; border-color:var(--brand); transform:translateX(-3px); }
.back .ar{ font-size:14px; color:var(--brand-deep); transition:transform .3s; }
.back:hover .ar{ transform:translateX(-3px); }
.crumb{ font-size:clamp(9.5px,.74vw,12.5px); letter-spacing:.18em; text-transform:uppercase;
        color:var(--muted); font-weight:600; }
.topbar .mark{ height:clamp(26px,2.2vw,36px); width:auto; mix-blend-mode:multiply; }

/* idle countdown ring */
.idle{ position:relative; width:36px; height:36px; flex:none; display:grid; place-items:center; }
.idle svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.idle circle{ fill:none; stroke-width:2; }
.idle .track{ stroke:var(--line); }
.idle .run{ stroke:var(--brand); stroke-linecap:round;
            stroke-dasharray:100.5; stroke-dashoffset:0; animation:deplete var(--idle) linear forwards; }
@keyframes deplete{ to{ stroke-dashoffset:100.5; } }
.idle .k{ font-size:8.5px; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.idle.warn .k{ color:var(--brand-deep); font-weight:800; }

.wrap{ flex:1; min-height:0; display:flex; flex-direction:column;
       gap:clamp(11px,1.35vw,22px); overflow:hidden; }
.head{ display:flex; flex-direction:column; gap:clamp(6px,.7vw,11px); flex:none; max-width:1150px; }
.rv{ animation:rise .7s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i,0) * 60ms); }

/* ---- cards ---- */
.cards{ display:grid; gap:var(--gap); flex:1; min-height:0; grid-auto-rows:1fr; }
.cards.col2{ grid-template-columns:repeat(2,1fr); }
.cards.col3{ grid-template-columns:repeat(3,1fr); }
.cards.col4{ grid-template-columns:repeat(4,1fr); }
.cards.col5{ grid-template-columns:repeat(5,1fr); }
.card{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
       background:var(--card); padding:clamp(13px,1.4vw,26px);
       display:flex; flex-direction:column; justify-content:center; gap:clamp(7px,.7vw,12px);
       transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s, background .4s;
       animation:rise .7s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i,0) * 60ms); }
.card:hover{ transform:translateY(-4px); border-color:var(--brand); background:#fff;
             box-shadow:0 16px 36px -22px rgba(199,104,55,.5); }
.card h3{ font-size:clamp(13.5px,1.2vw,21px); font-weight:700; letter-spacing:-.012em; line-height:1.2; }
.card p{ font-size:clamp(10.5px,.84vw,14.5px); line-height:1.5; color:var(--muted); }
.card .tagline{ color:var(--brand-deep); font-weight:700;
                font-size:clamp(10.5px,.86vw,15px); line-height:1.35; }
.card .forwho{ margin-top:auto; padding-top:clamp(7px,.7vw,12px); border-top:1px solid var(--line); }
.card .forwho .lab{ font-size:clamp(8px,.62vw,10.5px); letter-spacing:.16em; text-transform:uppercase;
                    color:var(--muted); font-weight:700; }
.card .forwho .val{ font-size:clamp(10px,.8vw,13.5px); font-weight:700; margin-top:3px; }

/* horizontal card: badge beside the text (the deck's "Sound familiar?" layout) */
.card.row{ flex-direction:row; align-items:center; gap:clamp(11px,1.1vw,20px); }
.card.row .body{ display:flex; flex-direction:column; gap:5px; }

/* ---- stats ---- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); flex:none; }
.statbox{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card);
          padding:clamp(11px,1.1vw,20px); text-align:center;
          animation:rise .7s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i,0) * 70ms); }
.statbox .n{ font-size:clamp(22px,2.5vw,44px); font-weight:700; letter-spacing:-.03em;
             color:var(--brand-deep); line-height:1; }
.statbox .l{ font-size:clamp(8.5px,.66vw,11.5px); letter-spacing:.14em; text-transform:uppercase;
             color:var(--muted); margin-top:7px; font-weight:600; }

/* ---- peach panel ---- */
.panel{ background:var(--brand-soft); border-radius:var(--radius); padding:clamp(13px,1.4vw,26px);
        display:flex; flex-direction:column; gap:7px; }
.panel .lab{ font-size:clamp(8.5px,.66vw,11.5px); letter-spacing:.16em; text-transform:uppercase;
             color:var(--brand-deep); font-weight:700; }
.panel .txt{ font-size:clamp(12px,1vw,18px); font-weight:700; line-height:1.4; color:var(--ink); }

/* ---- solid orange block ---- */
.solid{ background:var(--brand); color:#fff; border-radius:var(--radius);
        padding:clamp(13px,1.4vw,26px); display:flex; flex-direction:column; gap:7px;
        box-shadow:0 16px 34px -20px rgba(199,104,55,.85); }
.solid .lab{ font-size:clamp(8.5px,.66vw,11.5px); letter-spacing:.16em; text-transform:uppercase;
             font-weight:700; opacity:.92; }
.solid .txt{ font-size:clamp(12.5px,1.06vw,19px); font-weight:700; line-height:1.4; }
.solid p{ font-size:clamp(10.5px,.84vw,14.5px); line-height:1.5; opacity:.95; }

/* ---- split ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,38px); flex:1; min-height:0; }
.split.wide-left{ grid-template-columns:1.15fr .85fr; }
.colstack{ display:flex; flex-direction:column; justify-content:center;
           gap:clamp(11px,1.3vw,22px); min-height:0; }
.vcenter{ display:flex; flex-direction:column; justify-content:center; min-height:0; }
/* .fill makes a column's blocks share the full height instead of hugging content */
.colstack.fill{ justify-content:stretch; }
.colstack.fill > .quote{ flex:1; display:flex; align-items:center; }

/* ---- chips ---- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card);
       font-size:clamp(10px,.78vw,13.5px); color:var(--muted); font-weight:500;
       transition:border-color .3s, color .3s, background .3s, transform .3s;
       animation:rise .55s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i,0) * 30ms); }
.chip:hover{ border-color:var(--brand); color:var(--ink); background:var(--brand-soft); transform:translateY(-2px); }

/* ---- quote lines ("what to listen for") ---- */
.quote{ background:var(--brand-soft); border-radius:var(--radius-sm);
        padding:clamp(12px,1.2vw,24px) clamp(13px,1.4vw,28px);
        font-size:clamp(12.5px,1.12vw,21px); font-weight:700; color:var(--ink); line-height:1.35;
        animation:rise .7s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i,0) * 70ms);
        transition:transform .35s, background .35s; }
.quote:hover{ transform:translateX(5px); background:var(--brand-tint); }

/* ---- numbered case-study columns ---- */
.stepnum{ display:flex; align-items:center; gap:10px; }
.stepnum .circ{ width:clamp(22px,1.9vw,32px); height:clamp(22px,1.9vw,32px); border-radius:50%;
                background:var(--brand); color:#fff; display:grid; place-items:center; flex:none;
                font-size:clamp(9.5px,.76vw,13px); font-weight:700; }
.stepnum .lab{ font-size:clamp(8.5px,.66vw,11.5px); letter-spacing:.16em; text-transform:uppercase;
               color:var(--muted); font-weight:700; }
.card.result{ background:var(--brand); border-color:var(--brand); color:#fff; }
.card.result:hover{ background:var(--brand); border-color:var(--brand-deep); }
.card.result .stepnum .circ{ background:#fff; color:var(--brand-deep); }
.card.result .stepnum .lab{ color:#fff; opacity:.92; }
.card.result p{ color:#fff; opacity:.95; }
.bignum{ font-size:clamp(34px,4vw,74px); font-weight:700; line-height:1; letter-spacing:-.04em; }
.bignum-unit{ font-size:clamp(9.5px,.76vw,13px); letter-spacing:.16em; text-transform:uppercase;
              font-weight:700; margin-top:4px; }

/* ---- client logo wall ---- */
.logos{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);
        gap:var(--gap); flex:1; min-height:0; }
.logocard{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
           display:grid; place-items:center; padding:clamp(12px,1.4vw,30px); overflow:hidden;
           transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s, background .4s;
           animation:rise .7s cubic-bezier(.2,.75,.2,1) both; animation-delay:calc(var(--i,0) * 70ms); }
.logocard:hover{ transform:translateY(-4px); border-color:var(--brand);
                 box-shadow:0 16px 36px -22px rgba(199,104,55,.5); }
/* Logos are trimmed to their artwork, so cap BOTH axes — otherwise a wide
   wordmark and a square badge end up at very different visual sizes.
   The artwork's own backing is exactly var(--card) (#F7F8FA), so the card
   must keep that colour in every state or the logo shows as a grey box. */
.logocard img{ max-height:58%; max-width:78%; width:auto; height:auto; object-fit:contain; }

/* ---- contact rows ---- */
.crow{ display:flex; align-items:center; gap:13px; padding:clamp(7px,.72vw,13px) 0;
       border-bottom:1px solid var(--line); }
.crow:last-child{ border-bottom:none; }
.crow .lab{ font-size:clamp(8.5px,.64vw,11px); letter-spacing:.16em; text-transform:uppercase;
            color:var(--muted); font-weight:700; }
.crow .val{ font-size:clamp(12.5px,1.02vw,18px); font-weight:700; margin-top:2px; }
.qrpair{ display:flex; gap:var(--gap); min-height:0; min-width:0; }
.qrbox{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
        border:1px solid var(--line); border-radius:var(--radius); background:#fff;
        padding:clamp(10px,1.05vw,18px); }
.qrbox img{ width:100%; max-width:clamp(110px,11vw,180px); height:auto; border-radius:8px; }
.qrbox .cap{ font-size:clamp(9.5px,.74vw,13px); font-weight:700; text-align:center; }
.qrbox .cap span{ display:block; margin-top:4px; font-weight:600; color:var(--muted);
                  font-size:clamp(8.5px,.66vw,11.5px); }
/* .big = the dedicated Scan page, where the code is the whole point */
.qrbox.big{ min-height:0; gap:clamp(9px,.9vw,15px); }
/* the code fills whatever height the box has — object-fit keeps it square */
.qrbox.big img{ flex:1 1 auto; min-height:0; width:100%; max-width:none; height:auto;
                object-fit:contain; }

/* ---- photo ---- */
.photo{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:0;
        display:flex; }
.photo img{ width:100%; height:100%; object-fit:cover; }

/* ---- key/value strip ---- */
.kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); flex:none; }
.kvi{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card);
      padding:clamp(10px,1vw,18px); }
.kvi .k{ font-size:clamp(8.5px,.64vw,11px); letter-spacing:.16em; text-transform:uppercase;
         color:var(--brand-deep); font-weight:700; }
.kvi .v{ font-size:clamp(11.5px,.92vw,16px); margin-top:5px; line-height:1.4; font-weight:600; }

/* ---- footer hint ---- */
.hint{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
       border-top:1px solid var(--line); padding-top:clamp(7px,.75vw,13px); }
.hint .k{ font-size:clamp(9px,.7vw,12px); color:var(--muted); }
kbd{ font-family:var(--mono); font-size:.92em; padding:2px 7px; border-radius:5px;
     border:1px solid var(--line-2); background:var(--card); color:var(--ink); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1100px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(5,1fr) auto; }
  .tile.hero{ grid-column:span 2; grid-row:span 2; }   /* narrow screens: 2 cols x 5 rows */
  .cards.col4,.cards.col3,.cards.col5{ grid-template-columns:repeat(2,1fr); }
  .stats,.kv{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); }
  .split,.split.wide-left{ grid-template-columns:1fr; }
}
@media (max-height:620px){
  .page,.menu{ height:auto; min-height:100vh; }
  body{ overflow-y:auto; }
}

/* ============================================================================
   ACCESSIBILITY — respect the OS "reduce motion" setting
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important; }
  .idle .run{ animation:deplete var(--idle) linear forwards !important; }
}