/* ============================================================
   Software — the SLKTVES × GiantRex partnership page.
   The whole page now follows the SLKTVES system:
     ink canvas · periwinkle --blue · Merta Sans + Newsreader.
   GiantRex is a CREDITED PARTNER (wordmark · claw glyph · link
   out to giantrex.build), not a separate orange brand world.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
.gxp{
  /* GiantRex sections reskinned to the SLKTVES system:
     periwinkle accent, cool ink, Merta Sans — no orange / Space Grotesk takeover.
     GiantRex stays a credited partner, not a separate brand world. */
  --o:#A8CCFD; --o-d:#7BA9E8; --o-soft:#C4DBFF;
  --d:#0e0f0f; --d2:#1a1b1b; --d3:#26282a; --d4:#33373a;
  --line:#2a2d2f; --line-2:#33373a;
  --cream:#FDFEFF; --cream-2:#e7ebf1; --mut:#8b9096; --mut-d:#6c7177;
  --gxf:var(--sans);
  --gxbrand:'Space Grotesk', system-ui, sans-serif;  /* GiantRex wordmark font — used only on the GiantRex name */
  /* page default = SLKTVES */
  background:var(--ink); color:var(--paper); font-family:var(--sans);
  position:relative; overflow:clip;
}
.gxp ::selection{background:var(--blue);color:var(--ink)}
.gxp .wrap{max-width:1320px;margin:0 auto;padding:0 40px}
@media(max-width:680px){.gxp .wrap{padding:0 22px}}

/* the two GiantRex sections share the SLKTVES sans (--gxf now points to --sans) */
.gx-do,.gx-work{font-family:var(--gxf)}

.gxp .sec-n{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);font-weight:600}
.gx-do .sec-n,.gx-work .sec-n{color:var(--mut-d)}
.gxp h2{font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(34px,5.4vw,68px)}
.gxp h2 .o{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--blue);letter-spacing:-.01em}

/* claw scratch motif (GiantRex) */
.claw{display:inline-flex;gap:5px;transform:skewX(-12deg)}
.claw i{display:block;width:4px;height:var(--ch,26px);background:var(--o);border-radius:3px}
.claw i:nth-child(2){height:calc(var(--ch,26px) + 8px)}
.claw i:nth-child(3){height:var(--ch,26px)}

/* scroll progress bar */
.gx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:500;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue),var(--mist));box-shadow:0 0 12px rgba(168,204,253,.6);will-change:transform}

/* ======================================================= */
/* 1 — HERO (SLKTVES style)                                 */
/* ======================================================= */
.gx-hero{position:relative;z-index:1;padding:200px 0 110px;overflow:hidden;background:#0b0c0c}
.gx-hero .gx-grid{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.gx-hero .glow{position:absolute;right:-6%;top:-16%;width:760px;height:760px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(168,204,253,.18),transparent 62%);filter:blur(16px)}
.gx-hero .inner{position:relative;z-index:2;max-width:1040px}
.gx-hero h1{font-weight:800;letter-spacing:-.04em;line-height:.92;font-size:clamp(46px,8vw,116px);margin-top:24px}
.gx-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--blue);letter-spacing:-.01em}
.gx-hero .lede{margin-top:32px;max-width:620px}
.gx-hero .lede b{color:var(--paper);font-weight:600}
.gx-hero .row{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.gx-hero .creds{margin-top:62px;border-top:1px solid var(--ink-line);padding-top:30px;display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.gx-hero .cred .n{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);font-weight:400;line-height:1;display:flex;align-items:baseline}
.gx-hero .cred .n .suf{color:var(--blue);font-family:var(--sans);font-weight:600;font-size:.46em;margin-left:3px}
.gx-hero .cred .l{font-size:13px;color:var(--muted);margin-top:9px;max-width:190px;line-height:1.45}

@media(max-width:880px){ .gx-hero{padding:150px 0 76px} .gx-hero .creds{gap:28px} }

/* tech marquee strip (SLKTVES style) */
.gx-strip{position:relative;z-index:1;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);background:var(--ink-2)}
.gx-strip .marquee__row{padding:16px 0;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gx-strip .marquee__row span{display:inline-flex;gap:30px;padding:0 30px}
.gx-strip b{color:var(--blue);font-weight:700}

/* ======================================================= */
/* 2 — WHAT WE DO — KEPT AS-IS (GiantRex demo panels)       */
/* ======================================================= */
.gx-do{position:relative;z-index:1;padding:120px 0}
.gx-do .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:54px}
.gx-do .head p{max-width:340px;color:var(--mut);font-size:15.5px;line-height:1.6}
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.panels{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.panel{background:var(--d2);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .4s,transform .5s var(--ease)}
.panel:hover{border-color:var(--line-2);transform:translateY(-4px)}
.panel .screen{position:relative;height:268px;background:var(--d);border-bottom:1px solid var(--line);overflow:hidden}
.panel .meta{padding:24px 24px 28px}
.panel .meta .k{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--o);font-weight:600}
.panel .meta h3{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-top:14px}
.panel .meta p{color:var(--mut);font-size:14.5px;line-height:1.55;margin-top:11px}
.panel .stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.panel .stack span{font-size:11.5px;font-weight:500;color:var(--cream-2);border:1px solid var(--line-2);border-radius:6px;
  padding:5px 10px;background:rgba(244,243,215,.02)}

/* screen header chrome */
.scr-bar{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:8px;padding:0 13px;z-index:5;
  border-bottom:1px solid var(--line);background:rgba(19,19,19,.7);font-size:11px;color:var(--mut);font-weight:500;letter-spacing:.02em}
.scr-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--o);box-shadow:0 0 8px var(--o);animation:gxpulse 2s ease-in-out infinite}
@keyframes gxpulse{0%,100%{opacity:1}50%{opacity:.35}}
.scr-bar .right{margin-left:auto}

/* --- WEB demo: live dashboard --- */
.web{position:absolute;inset:34px 0 0;padding:18px 20px;display:flex;flex-direction:column;gap:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.web .topline{display:flex;justify-content:space-between;align-items:flex-end}
.web .big{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1;font-family:var(--gxf);color:var(--cream)}
.web .big small{font-size:13px;color:var(--mut);font-weight:500;margin-left:6px}
.web .delta{font-size:12px;color:#5fd08a;font-weight:600}
.web .bars{display:flex;align-items:flex-end;gap:6px;height:64px}
.web .bars i{flex:1;background:linear-gradient(var(--o),rgba(168,204,253,.25));border-radius:3px 3px 0 0;height:30%;
  transition:height .7s cubic-bezier(.22,1,.36,1)}
.web .log{font-size:10.5px;line-height:1.75;color:var(--mut-d);height:62px;overflow:hidden}
.web .log b{color:#5fd08a}.web .log u{color:var(--o);text-decoration:none}

/* --- MOBILE demo: delivery tracking --- */
.mob{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center}
.mob .ph{width:158px;height:218px;border:6px solid #2a2825;border-bottom:none;border-radius:26px 26px 6px 6px;background:#0d0d0c;
  position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.mob .ph .nt{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:3px;background:#2a2825;z-index:4}
.mob .map{position:absolute;inset:0;background:
  linear-gradient(rgba(168,204,253,.05),transparent),
  repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.025) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.025) 23px 24px),#111}
.mob svg{position:absolute;inset:0;width:100%;height:100%}
.mob .route{fill:none;stroke:var(--line-2);stroke-width:2.5;stroke-dasharray:5 6}
.mob .route-done{fill:none;stroke:var(--o);stroke-width:2.5}
.mob .marker{offset-path:path('M 26 150 C 60 120, 50 80, 92 70 S 130 40, 132 30');offset-rotate:0deg;
  animation:mobmove 6.5s cubic-bezier(.5,0,.5,1) infinite}
.mob .marker circle{fill:var(--o)}
.mob .marker .pulse{fill:var(--o);opacity:.3;animation:mobpulse 1.6s ease-out infinite}
@keyframes mobmove{0%{offset-distance:0%}45%{offset-distance:100%}55%{offset-distance:100%}100%{offset-distance:0%}}
@keyframes mobpulse{0%{r:4;opacity:.5}100%{r:13;opacity:0}}
.mob .pin{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cream);border:2px solid var(--o)}
.mob .status{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(13,13,12,.92);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;backdrop-filter:blur(4px)}
.mob .status .s{font-size:10px;color:var(--mut);letter-spacing:.04em}
.mob .status .v{font-size:12.5px;color:var(--cream);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:6px}
.mob .status .v::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--o)}

/* --- GAME demo: 3D canvas + fallback --- */
.game{position:absolute;inset:34px 0 0}
.game canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.panel.grabbing .game canvas{cursor:grabbing}
.game .hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);pointer-events:none}
.game .fallback{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s}
.game.ready .fallback{opacity:0}
.game .gem{width:96px;height:96px;background:conic-gradient(from 45deg,var(--o),var(--o-d),#3a5a99,var(--o));
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);filter:drop-shadow(0 18px 30px rgba(168,204,253,.4));
  animation:gemfloat 5s ease-in-out infinite}
@keyframes gemfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(6deg)}}

/* ======================================================= */
/* 3 — OUR WORK (GiantRex identity lives here)              */
/* ======================================================= */
.gx-work{position:relative;z-index:1;padding:30px 0 120px}
.gx-work .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.gx-work .head .lhs{display:flex;align-items:center;gap:22px}
.gx-work .head .gx-id{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:999px;
  padding:8px 15px 8px 11px;background:var(--d2)}
.gx-work .head .gx-id .claw{--ch:13px}
.gx-work .head .gx-id b{font-family:var(--gxbrand);font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:14px;color:var(--cream)}
.gx-work .head p{max-width:360px;color:var(--mut);font-size:15.5px;line-height:1.6}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.work-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
.proj{position:relative;background:var(--d2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
  transition:transform .4s var(--ease),border-color .4s}
.proj:hover{border-color:var(--o)}
.proj::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:0;z-index:4;transition:opacity .45s;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(168,204,253,.16),transparent 60%)}
.proj:hover::after{opacity:1}
.proj .shot{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:
  radial-gradient(120% 120% at 80% 0,rgba(168,204,253,.18),transparent 55%),var(--d3)}
.proj image-slot{display:block;width:100%;height:100%;transition:transform .6s var(--ease)}
.proj:hover image-slot{transform:scale(1.04)}
.proj .tagn{position:absolute;top:12px;left:12px;z-index:3;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);background:rgba(19,19,19,.7);border:1px solid var(--line);border-radius:6px;padding:5px 9px;backdrop-filter:blur(4px);pointer-events:none}
.proj .body{position:relative;z-index:2;padding:20px 20px 22px}
.proj .body .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.proj .body h3{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.08;transition:color .35s}
.proj:hover .body h3{color:var(--o)}
.proj .body .reg{font-size:11px;color:var(--mut-d);font-weight:500;white-space:nowrap}
.proj .body .desc{color:var(--mut);font-size:14px;line-height:1.55;margin-top:9px;min-height:43px}
.proj .body .stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.proj .body .stack span{font-size:11px;font-weight:500;color:var(--cream-2);border:1px solid var(--line-2);border-radius:5px;padding:4px 9px}

/* link out to the full GiantRex portfolio — this page is the teaser, giantrex.build the deep dive */
.gx-work .gx-more{display:inline-flex;align-items:center;gap:8px;margin-top:42px;font-size:14.5px;font-weight:600;
  color:var(--blue);transition:gap .4s var(--ease)}
.gx-work .gx-more:hover{gap:13px}

/* ── a restrained touch of GiantRex orange — scoped to the portfolio ONLY,
      so the page reads SLKTVES (periwinkle) and the work flags its maker. ── */
.gx-work{--gxo:#E54E20}
.gx-work h2 .o{font-family:var(--gxbrand);font-style:normal;font-weight:700;letter-spacing:-.02em;color:var(--gxo)}  /* GiantRex wordmark in its own font + orange */
.gx-work .gx-id .claw i{background:var(--gxo)}  /* the GiantRex brand glyph in the badge */
.gx-work .proj:hover{border-color:var(--gxo)}   /* and on card interaction ↓ */
.gx-work .proj:hover .body h3{color:var(--gxo)}
.gx-work .proj::after{background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(229,78,32,.15),transparent 60%)}

/* cursor "view" follower over the work grid */
.gx-cursor{position:fixed;top:0;left:0;z-index:600;pointer-events:none;transform:translate(-50%,-50%) scale(.4);opacity:0;
  font-family:var(--gxf);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:#E54E20;padding:9px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 24px rgba(229,78,32,.4);
  transition:opacity .3s,transform .3s var(--ease)}
.gx-cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ======================================================= */
/* 4 — CTA (SLKTVES style)                                  */
/* ======================================================= */
.gx-cta{position:relative;z-index:1;overflow:hidden;background:
  radial-gradient(120% 160% at 50% 0,rgba(168,204,253,.14),transparent 60%),var(--ink-2);
  border-top:1px solid var(--ink-line)}
.gx-cta .inner{max-width:1320px;margin:0 auto;padding:130px 40px;text-align:center;position:relative;z-index:2}
.gx-cta h2{font-size:clamp(40px,7vw,104px);font-weight:800;letter-spacing:-.035em;line-height:.96;text-transform:none}
.gx-cta h2 em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--blue)}
.gx-cta p{margin-top:26px;color:#c9cdd2;font-size:clamp(16px,1.5vw,19px);max-width:520px;margin-left:auto;margin-right:auto;line-height:1.55}
.gx-cta .row{display:flex;gap:14px;justify-content:center;margin-top:42px;flex-wrap:wrap}
.gx-cta .site{margin-top:28px;font-size:14px;color:var(--muted);font-family:ui-monospace,monospace;letter-spacing:.02em}
.gx-cta .site a{color:var(--blue)}
.gx-cta .site a:hover{text-decoration:underline}
@media(max-width:680px){.gx-cta .inner{padding:90px 22px}}

@media(prefers-reduced-motion:reduce){
  .stamp svg,.scr-bar .dot,.game .gem,.mob .marker,.mob .marker .pulse{animation:none}
  .proj{transform:none}
}