/* ==========================================================================
   Tekin Works — shared skin (v2, 9 Oct 2026).

   Every page carries its own inline <style> with the same token names; this
   file loads after it and re-skins the whole site in one place.

   The look is taken from two reference renders (glass panels stacked in the
   dark, edges catching a warm key light and a cool rim light; a glass core
   with light flowing in and one beam leaving) — and rebuilt in CSS rather
   than pasted in as pictures, so it stays sharp, light and honest:
     - surfaces are real frosted glass over the ambient light behind them;
     - every edge is lit the same way: amber from the top left, a cool rim
       from the bottom right;
     - lines are beams: a bright point and a falloff, never a flat rule;
     - monospace only for labels, counters and figures, never for prose;
     - motion is slow and small, and prefers-reduced-motion switches it off.
   The site is dark-only on purpose: the light mode could not carry any of
   this, and it was what most Windows visitors were being shown.
   Geist and Geist Mono are self-hosted (SIL Open Font Licence).
   ========================================================================== */

@font-face{
  font-family:"Geist"; src:url("/assets/fonts/geist.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist Mono"; src:url("/assets/fonts/geist-mono.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---- tokens: same names as the pages, so every page picks them up ---- */
:root{
  --sans:"Geist",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:#05070A;
  --bg-glow:rgba(237,177,95,.10);
  --cool-glow:rgba(96,150,255,.085);
  --surface:#0A0E14;
  --surface-hi:#0F141C;
  --line:#18202A;
  --line-hi:#28313E;
  --ink:#EEF2F7;
  --ink-dim:#A6B0BF;
  --muted:#818B9C;
  --accent:#EDB15F;
  --accent-hi:#FAD49A;
  --accent-dim:#BF893D;
  --accent-wash:rgba(237,177,95,.085);
  --accent-ink:#0A0D12;
  --cool:#7FA8FF;
  --signal:#4FD69C;
  --ok:#6FBF8B; --warn:#E0A34A; --bad:#E2725B;
  --grid:rgba(160,176,200,.06);
  --glass:rgba(12,16,23,.58);
  --glass-hi:rgba(255,255,255,.05);
  --edge-key:rgba(237,177,95,.62);
  --edge-rim:rgba(127,168,255,.34);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.9);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4), 0 34px 80px -26px rgba(0,0,0,.95), 0 0 50px -20px rgba(237,177,95,.25);
}

/* ---- base ---- */
html{scrollbar-color:var(--line-hi) var(--bg); color-scheme:dark; background:var(--bg)}
body{font-family:var(--sans); letter-spacing:-.004em; background:var(--bg); overflow-x:clip}
::selection{background:rgba(237,177,95,.32); color:#fff}

/* The light the glass sits in: a warm key from the top left, a cool rim
   from the top right, and a measuring grid that fades out under the fold. */
body::before{
  content:""; position:fixed; inset:0; height:auto; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 560px at 12% -12%, var(--bg-glow), transparent 70%),
    radial-gradient(820px 520px at 96% -8%, var(--cool-glow), transparent 72%),
    radial-gradient(700px 500px at 50% 118%, rgba(237,177,95,.045), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px; background-position:center -1px;
  -webkit-mask-image:radial-gradient(1200px 720px at 50% -4%, #000 10%, transparent 74%);
          mask-image:radial-gradient(1200px 720px at 50% -4%, #000 10%, transparent 74%);
}

h1,h2,h3{font-family:var(--sans); text-wrap:balance}
h1{font-weight:600; letter-spacing:-.045em}
h1 em{
  font-style:normal; color:var(--accent);
  background:linear-gradient(100deg, var(--accent-dim) 0%, var(--accent) 25%, var(--accent-hi) 55%, var(--accent) 85%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(237,177,95,.28));
}
h2{font-weight:600; letter-spacing:-.03em}
h3{font-weight:600; letter-spacing:-.02em}
.lede{text-wrap:pretty}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;
}

/* ---- header: glass, with a beam along its lower edge ---- */
header{
  background:rgba(5,7,10,.62);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 5%, rgba(237,177,95,.15) 30%, rgba(237,177,95,.75) 50%, rgba(127,168,255,.25) 72%, transparent 95%);
}
.brand{font-weight:600; letter-spacing:-.02em; font-size:15.5px}
/* The favicon's T, drawn rather than typed, so the header and the tab match. */
.mark{
  font-size:0; color:transparent; border-radius:8px;
  background:
    linear-gradient(var(--accent), var(--accent)) 6px 7px / 18px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 12px 7px / 6px 16px no-repeat,
    linear-gradient(160deg, #141A24, #05070A);
  border:1px solid var(--line-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px -4px rgba(237,177,95,.55);
}
.bar-cta{
  font-size:13.4px; font-weight:550; letter-spacing:-.005em;
  border-color:transparent; background:transparent; border-radius:8px;
  transition:color .15s, background .15s, border-color .15s;
}
.bar-cta:hover{color:var(--ink); background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.08)}

/* ---- labels: the instrument layer, in mono ---- */
.eyebrow{
  font-family:var(--mono); font-size:11.4px; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-dim); background:rgba(10,14,20,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.09); border-radius:100px; padding:7px 14px 7px 12px;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 30px -10px rgba(237,177,95,.45);
}
.eyebrow .pip, .eyebrow:not(:has(.pip))::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--signal); box-shadow:0 0 10px rgba(79,214,156,.8);
  animation:tw-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes tw-ping{
  0%{box-shadow:0 0 10px rgba(79,214,156,.8), 0 0 0 0 rgba(79,214,156,.5)}
  70%,100%{box-shadow:0 0 10px rgba(79,214,156,.8), 0 0 0 8px transparent}
}
.who{font-family:var(--mono); font-size:11.2px; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
.tag{
  font-family:var(--mono); font-size:11.6px; font-weight:500; letter-spacing:.03em;
  padding:4px 10px; border-radius:100px; color:var(--ink-dim);
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
}
.creds{font-family:var(--mono)}
legend{font-family:var(--mono); font-weight:500; letter-spacing:.11em}
.row .v, .strip .n, .price{font-variant-numeric:tabular-nums}

/* ---- beams: section rules are light, not lines ---- */
main{counter-reset:tw-sec}
.section-head, .sect, .prod{position:relative; border-top-color:transparent}
.section-head::after, .sect::after, .prod::after{
  content:""; position:absolute; top:-5px; left:0; right:0; height:9px; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(237,177,95,0) 0%, rgba(237,177,95,.9) 9%, rgba(237,177,95,.28) 30%, rgba(127,168,255,.12) 62%, transparent 92%) center / 100% 1px no-repeat,
    radial-gradient(120px 4px at 9% 50%, rgba(250,212,154,.9), transparent 70%),
    radial-gradient(260px 9px at 9% 50%, rgba(237,177,95,.28), transparent 70%);
}
.section-head{counter-increment:tw-sec}
.section-head::before{
  content:counter(tw-sec, decimal-leading-zero) " /";
  display:block; margin:0 0 14px;
  font:500 11.4px/1 var(--mono); letter-spacing:.16em; color:var(--accent);
  text-shadow:0 0 14px rgba(237,177,95,.5);
}

/* ---- glass ----
   A translucent pane over the ambient light, its border drawn by a masked
   gradient so the key light and the rim light sit on opposite corners. */
.card, .who-box, .cta, .close, .login, .panel, .nots, body .tier, .how article, .strip, .more, .rows, .faq{
  position:relative; isolation:isolate;
  border-color:transparent;
  background:
    linear-gradient(180deg, var(--glass-hi), rgba(255,255,255,.008) 45%),
    var(--glass);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow);
}
.card::before, .who-box::before, .cta::before, .close::before, .login::before, .panel::before,
.nots::before, body .tier::before, .how article::before, .strip::after, .more::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(140deg, var(--edge-key) 0%, rgba(237,177,95,.14) 18%, rgba(255,255,255,.07) 38%, rgba(255,255,255,.05) 64%, var(--edge-rim) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  height:auto; transition:opacity .2s;
}
/* These clip to their padding box, which would cut a ring drawn on the
   border line, so theirs sits just inside instead. */
.strip::after, .more::after{inset:0}
/* Rows and FAQ lists keep their 1px dividers: the line colour shows through
   the gaps, so the container stays a solid tone behind them. */
.rows, .faq{background:var(--line)}

.card{
  /* --mx/--my are set by the homepage script; without it the spot sits off-card. */
  background:
    radial-gradient(460px circle at var(--mx,-50%) var(--my,-50%), rgba(237,177,95,.10), transparent 60%),
    linear-gradient(180deg, var(--glass-hi), rgba(255,255,255,.008) 45%),
    var(--glass);
}
.card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-lift)}
.card:hover::before{
  background:linear-gradient(140deg, rgba(250,212,154,.95) 0%, rgba(237,177,95,.3) 22%, rgba(255,255,255,.09) 42%, rgba(255,255,255,.06) 64%, rgba(127,168,255,.55) 100%);
}
.card h3{font-weight:600; letter-spacing:-.028em}

.fact, .look, .verdict{
  border-left-width:1px; border-radius:0 10px 10px 0;
  background:linear-gradient(90deg, rgba(237,177,95,.12), rgba(237,177,95,.02) 70%, transparent);
  box-shadow:inset 1px 0 0 var(--accent), -6px 0 18px -10px rgba(237,177,95,.9);
}

/* Tiles separated by 1px of light. */
.strip{counter-reset:tw-strip; background:rgba(255,255,255,.06)}
.strip div{counter-increment:tw-strip; background:rgba(8,11,16,.78); position:relative}
.strip div::before{
  content:counter(tw-strip, decimal-leading-zero);
  display:block; margin-bottom:10px; font:500 10.8px/1 var(--mono); letter-spacing:.16em; color:var(--accent);
  opacity:.8;
}
.strip .n{font-weight:600; letter-spacing:-.03em}
/* The divider is drawn by each tile rather than by the container showing
   through the gap, so a short last row ends in glass, not in a grey slab. */
.more{background:linear-gradient(180deg, var(--glass-hi), transparent 45%), var(--glass)}
.more article{background:transparent; box-shadow:1px 0 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.06); transition:background .2s}
.more article:hover{background:rgba(237,177,95,.04)}

/* Step counters and numbers: square, mono, lit from inside. */
.how .num, ol.steps > li::before{
  font-family:var(--mono); font-weight:500; border-radius:7px; color:var(--accent-hi);
  background:radial-gradient(circle at 50% 120%, rgba(237,177,95,.35), rgba(10,14,20,.9) 70%);
  border:1px solid rgba(237,177,95,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px -4px rgba(237,177,95,.6);
}
ol.steps > li::before{content:counter(s, decimal-leading-zero); font-size:12.5px}

/* ---- buttons: a light source, not a sticker ---- */
.btn{
  position:relative; font-weight:600; letter-spacing:-.01em; border-radius:10px;
  color:var(--accent-ink);
  background:linear-gradient(180deg, var(--accent-hi), var(--accent) 50%, var(--accent-dim));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 0 1px rgba(120,80,30,.9),
    0 0 26px -4px rgba(237,177,95,.55),
    0 12px 30px -12px rgba(237,177,95,.8);
  transition:transform .16s, box-shadow .2s, filter .16s;
}
.btn:hover{
  filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 1px rgba(120,80,30,.9),
    0 0 40px -2px rgba(237,177,95,.7),
    0 16px 40px -12px rgba(237,177,95,.9);
}
.btn.ghost{
  color:var(--ink); background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.ghost:hover{filter:none; color:#fff; box-shadow:inset 0 0 0 1px rgba(237,177,95,.6), 0 0 30px -8px rgba(237,177,95,.5)}

.f input, .f select{
  font-family:var(--sans); background:rgba(3,5,8,.7); border-color:rgba(255,255,255,.1);
  transition:border-color .15s, box-shadow .15s;
}
.f input:focus, .f select:focus{
  border-color:rgba(237,177,95,.7);
  box-shadow:0 0 0 3px rgba(237,177,95,.14), 0 0 24px -6px rgba(237,177,95,.5);
}
.f input{font-variant-numeric:tabular-nums}

/* ---- footer ---- */
footer{position:relative; z-index:1; border-top-color:transparent}
footer::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(237,177,95,.35) 50%, transparent);
}
footer a{transition:color .15s}

@media (prefers-reduced-motion:reduce){
  .eyebrow .pip, .eyebrow::before{animation:none}
}