/* ============================================================
   RE-SKIN — "Cold Instrument"
   futuristic AI automation agency · Singapore
   Additive + scoped. Never edits base markup or the base stylesheet.
   Brand identity (CyberG7 name, mark, copy) is the user's own and is KEPT;
   only the visual treatment changes.
   ============================================================ */

:root{
  --ci-void:#06090C;        /* ground — near-black, blue-green bias, not "dark grey" */
  --ci-panel:#0B1116;       /* raised surface */
  --ci-panel-2:#0F171D;     /* nested surface */
  --ci-rule:#1B262E;        /* hairline */
  --ci-rule-lit:#2C3D48;    /* active hairline */
  --ci-ink:#E6EDF2;         /* primary text */
  --ci-dim:#8FA3B0;         /* secondary text — 7.1:1 on void */
  --ci-faint:#5E717D;       /* tertiary */
  --ci-heat:#FF7A1A;        /* THE brand orange, tuned for a cold ground */
  --ci-heat-soft:#FFA45C;
  --ci-radius:4px;          /* precision, not pillow */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---- typography: the site had NO webfont at all (rendered in Times) ---- */
html,body,button,input,select,textarea,p,li,a,span,div{font-family:var(--font-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.025em;font-weight:600}
h1{letter-spacing:-.035em}
code,pre,.font-mono,[class*="tabular"]{font-family:var(--font-mono)}

/* ---- ground + surfaces ---- */
body,.bg-slate-950,.bg-black{background-color:var(--ci-void)!important}
.bg-slate-900,.bg-slate-800{background-color:var(--ci-panel)!important}

/* engineered grid — the environment reads as instrumentation, not decoration */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--ci-rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ci-rule) 1px,transparent 1px);
  background-size:64px 64px;opacity:.14;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 30%,transparent 75%);
}

/* ---- text ---- */
.text-white{color:var(--ci-ink)!important}
.text-slate-300{color:var(--ci-dim)!important}
.text-slate-400{color:var(--ci-dim)!important}
.text-slate-500{color:var(--ci-faint)!important}
.text-orange-300,.text-orange-400,.text-orange-500{color:var(--ci-heat)!important}

/* ---- hairlines: sharp, thin, lit on hover ---- */
.border-slate-800,.border-slate-700,[class*="border-slate"]{border-color:var(--ci-rule)!important}
.border-orange-500{border-color:var(--ci-heat)!important}
.border-t-2,.border-b-2,.border-l-2,.border-r-2{border-width:1px!important}

/* ---- surface geometry: precision over pillow ---- */
.rounded-2xl,.rounded-xl,.rounded-lg,.rounded-md{border-radius:var(--ci-radius)!important}
.rounded-full{border-radius:999px!important}   /* pills stay pills — structural */

/* cards become instrument panels with corner brackets */
[class*="rounded-2xl"][class*="border"]{
  position:relative;background:var(--ci-panel)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .18s ease, background-color .18s ease;
}
[class*="rounded-2xl"][class*="border"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(var(--ci-heat),var(--ci-heat)) left top/10px 1px no-repeat,
    linear-gradient(var(--ci-heat),var(--ci-heat)) left top/1px 10px no-repeat,
    linear-gradient(var(--ci-heat),var(--ci-heat)) right bottom/10px 1px no-repeat,
    linear-gradient(var(--ci-heat),var(--ci-heat)) right bottom/1px 10px no-repeat;
  opacity:.28;transition:opacity .18s ease;
}
[class*="rounded-2xl"][class*="border"]:hover{border-color:var(--ci-rule-lit)!important;background:var(--ci-panel-2)!important}
[class*="rounded-2xl"][class*="border"]:hover::after{opacity:.7}

/* ---- the one warm thing on the page: the primary action ---- */
a[class*="bg-orange"],button[class*="bg-orange"],[class*="bg-orange-500"]{
  background:var(--ci-heat)!important;color:#0A0600!important;
  border-radius:var(--ci-radius)!important;font-family:var(--font-display);
  font-weight:600;letter-spacing:-.01em;
  box-shadow:0 0 0 1px rgba(255,122,26,.5), 0 8px 30px -10px rgba(255,122,26,.55);
  transition:box-shadow .2s ease, transform .12s ease;
}
a[class*="bg-orange"]:hover,button[class*="bg-orange"]:hover{
  box-shadow:0 0 0 1px rgba(255,122,26,.9), 0 10px 38px -8px rgba(255,122,26,.75);
  transform:translateY(-1px);
}

/* ---- kill the inherited gradient-text tell; use flat ink + heat instead ---- */
[class*="bg-clip-text"]{
  -webkit-background-clip:initial!important;background-clip:initial!important;
  background-image:none!important;color:var(--ci-ink)!important;
  -webkit-text-fill-color:var(--ci-ink)!important;
}
h1 [class*="bg-clip-text"],h1 [class*="from-orange"]{color:var(--ci-heat)!important;-webkit-text-fill-color:var(--ci-heat)!important}

/* ---- decorative gradient washes → cold, restrained ---- */
[class*="bg-gradient-to-br"],[class*="bg-gradient-to-b"],[class*="bg-gradient-to-t"]{
  background-image:linear-gradient(180deg,rgba(20,32,40,.55),rgba(6,9,12,0))!important;
}

/* ---- focus: visible, on-brand, keyboard only ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ci-heat);outline-offset:3px;border-radius:2px;
}

/* ---- motion: restrained, and it stops when asked ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body::before{opacity:.1}
}

/* ============ refinements after first render ============ */

/* 1. the spline-viewer web component injects a "Built with Spline" badge */
spline-viewer::part(logo),spline-viewer #logo,
spline-viewer a[href*="spline.design"]{display:none!important}
spline-viewer{--logo-display:none}

/* 2. the bg-orange rule over-matched: eyebrow pills became solid orange blocks.
      Scope the filled treatment to real actions only; eyebrows get a hairline. */
span[class*="bg-orange"]:not(a):not(button),
div[class*="bg-orange"]:not(a):not(button){
  background:transparent!important;color:var(--ci-heat)!important;
  border:1px solid rgba(255,122,26,.42);border-radius:2px;
  box-shadow:none!important;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.1em;padding:5px 9px;
}

/* 3. the decorative gradient wash was painting a visible slab behind the h1 */
h1 [class*="bg-gradient"],h1::before,
:is(h1,h2) + [class*="bg-gradient-to-br"]{background-image:none!important}
[class*="bg-gradient-to-br"]:not(section):not(body){background-image:none!important}

/* 4. make the engineered grid deliberate rather than a smudge —
      full-height, tighter, and it sits behind content not over it */
body::before{
  background-size:52px 52px;opacity:.20;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.25) 100%);
}

/* 5. a single lit horizon line under the fixed header — instrument framing */
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.55) 22%,rgba(255,122,26,.55) 78%,transparent);
  opacity:.5;
}

/* 6. stray teal link inherited from the base sheet — bring into the palette */
a[class*="text-cyan"],a[class*="text-teal"],a[class*="text-emerald"],
a[class*="text-sky"]{color:var(--ci-dim)!important;text-decoration-color:rgba(255,122,26,.5)}
a[class*="text-cyan"]:hover,a[class*="text-teal"]:hover,
a[class*="text-emerald"]:hover,a[class*="text-sky"]:hover{color:var(--ci-heat)!important}