/* ==========================================================================
   GD SCRIPTS — BRAND LAYER
   --------------------------------------------------------------------------
   Loaded AFTER store.css (the SCRP template theme). Everything that makes the
   GD store look like GD and not like the SCRP store lives here: warm neutrals,
   GD orange, Space Grotesk, sharper corners, a dot grid instead of contour
   rings, and a code-editor hero instead of the logo emblem.
   ========================================================================== */

:root{
  --bg:      #0b0a0a;
  --bg-2:    #100e0d;
  --card:    #171413;
  --card-2:  #1f1b19;
  --line:    rgba(255,236,224,.07);
  --line-2:  rgba(255,236,224,.13);
  --text:    #f7ede7;
  --muted:   #b3a59d;
  --dim:     #7d706a;

  --font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --r: 12px;
  --r-lg: 14px;
}

/* GD orange. #F44917 is their brand colour (from their Tebex theme); a
   lighter partner keeps accent TEXT readable on near-black. */
[data-accent="gd"]{ --a1:#FF7A45; --a2:#F44917; --a-rgb:244,73,23; }

body{ letter-spacing:-.005em; }
.hero__title, .shop__title, .how__title, .cta__title, .dlg__name{ letter-spacing:-.045em; }
.kicker{ font-family:var(--mono); letter-spacing:.14em; font-weight:500; }


/* ── Wordmark ───────────────────────────────────────────────────────────── */
.gd-logo, .brand img.gd-logo{ display:block; flex:none; width:52px; height:52px; object-fit:contain; }
.foot__brand img.gd-logo--lg{ width:64px; height:64px; }
.brand__text small{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }


/* ── Hero: dot grid instead of contour rings ─────────────────────────────── */
.gd-hero .hero__bg::after{
  background:linear-gradient(0deg, var(--bg), transparent 45%);
}
.gd-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,236,224,.12) 1px, transparent 1.2px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 70% at 70% 35%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 70% at 70% 35%, #000 20%, transparent 75%);
}
.gd-hero .hero__glow{
  width:760px; height:760px; right:-160px; top:-260px;
  background:radial-gradient(closest-side, rgba(var(--a-rgb),.28), transparent);
}


/* ── Code-editor visual ─────────────────────────────────────────────────── */
.editor{
  position:relative; width:100%; max-width:560px; justify-self:end;
  padding:44px 0 70px;
  perspective:1400px;
}
.editor__stage{
  position:relative; transform-style:preserve-3d;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .6s var(--ease-out);
}
.editor__win{
  border-radius:14px; overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(#131110, #131110) padding-box,
    linear-gradient(150deg, rgba(var(--a-rgb),.6), rgba(255,236,224,.08) 45%, rgba(var(--a-rgb),.25)) border-box;
  box-shadow:0 50px 90px -40px rgba(0,0,0,1), 0 0 80px -30px rgba(var(--a-rgb),.55);
  transform:translateZ(20px);
}
.editor__bar{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(255,236,224,.025);
}
.editor__dots{ display:flex; gap:6px; }
.editor__dots i{ width:10px; height:10px; border-radius:50%; background:#3a3230; }
.editor__dots i:first-child{ background:var(--a2); }
.editor__file{ font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.editor__code{
  margin:0; padding:22px 22px 26px;
  font-family:var(--mono); font-size:clamp(12.5px,1.2vw,14.5px); line-height:1.75;
  color:#e9ddd6; white-space:pre; overflow:hidden;
}
.t-c{ color:#7d706a; }
.t-k{ color:#ffb08a; }
.t-s{ color:#9fe3b0; }
.t-b{ color:var(--a1); }
.editor__caret{
  display:inline-block; width:8px; height:1.1em; margin-left:4px; vertical-align:-3px;
  background:var(--a1); box-shadow:0 0 12px rgba(var(--a-rgb),.9);
}
.motion .editor__caret{ animation:caret 1.1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }

/* chips reuse store.css .chip; positioned for the editor */
.editor .chip--a{ right:-4%; top:0; left:auto; bottom:auto; transform:translateZ(80px); }
.editor .chip--b{ left:-6%; bottom:14px; top:auto; right:auto; transform:translateZ(110px); }
.motion .editor{ animation:fadein 1.2s var(--ease-out) .2s both; }


/* ── Cards: framework tags + tagline ────────────────────────────────────── */
.tag--fw{
  font-family:var(--mono); letter-spacing:.04em; text-transform:none;
  background:transparent; border-color:rgba(var(--a-rgb),.4); color:var(--a1);
}
.card__tagline{
  margin-top:12px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--a1);
}
.card__tagline + .card__text{ margin-top:6px; }
.card__media > .card__frame{ border-radius:10px; }
.card__media .ph, .card__media img{ border-radius:10px; }


/* ── How it works: numbered in mono ─────────────────────────────────────── */
.steps__n{ font-family:var(--mono); font-weight:500; }


/* ── Closing band ───────────────────────────────────────────────────────── */
.gd-cta{
  background:
    radial-gradient(60% 130% at 100% 50%, rgba(var(--a-rgb),.30), transparent 60%),
    radial-gradient(rgba(255,236,224,.08) 1px, transparent 1.2px) 0 0/24px 24px,
    linear-gradient(120deg, #151211, #0d0b0b);
}
.gd-cta::before{ display:none; }
.gd-cta__mark{
  position:absolute; z-index:-1; right:4%; top:50%; translate:0 -50%;
  font-size:clamp(140px,22vw,300px); font-weight:700; letter-spacing:-.08em; line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(var(--a-rgb),.35);
  pointer-events:none;
}


@media (max-width: 1020px){
  .editor{ justify-self:center; max-width:520px; }
}
@media (max-width: 640px){
  .editor{ padding:36px 0 56px; }
  .editor__code{ font-size:11.5px; padding:16px; }
  .editor .chip small{ display:none; }
  .editor .chip--a{ right:0; }
  .editor .chip--b{ left:0; }
  .gd-cta__mark{ right:-6%; opacity:.6; }
}

/* GD badge in the corner of placeholder art */
.ph img.ph__logo.gd-logo{ width:42px; height:42px; left:10px; bottom:8px; opacity:1; }
.line__media .ph__logo{ display:none; }
.gd-logo--xl{ width:clamp(120px,18vw,200px); height:clamp(120px,18vw,200px); }

/* Headline fits in three lines at desktop widths */
.gd-hero .hero__title{ font-size:clamp(40px, 5.6vw, 72px); }
.editor .chip--b{ bottom:-4px; left:-8%; }
.editor{ padding-bottom:84px; }

/* Final layout pass: headline lines never split mid-phrase; mobile fixes last */
.gd-hero .hero__title{ font-size:clamp(36px, 4.5vw, 64px); }
.gd-hero .hero__title span{ white-space:nowrap; }
@media (max-width: 640px){
  .gd-hero .hero__title{ font-size:clamp(32px, 9vw, 44px); }
  .gd-hero .hero__title span{ white-space:normal; }
  .gd-hero .hero__ctas{ flex-direction:column; }
  .editor .chip--b{ left:2%; bottom:0; }
  .editor .chip--a{ right:2%; }
}