/* ===========================================================================
   Traclie — Landing ("Tram Thief"). Self-contained, no build step.
   =========================================================================== */
:root{
  --bg-000:#190d11;--bg-050:#201317;--bg-100:#2a1a20;--bg-150:#352228;--bg-300:#4a3339;
  --fg-000:#f2e8d4;--fg-100:#dccfb6;--fg-300:#a8977f;--fg-500:#6f6051;
  --accent:#8fbca6;--accent-2:#b9bec4;--status:#7fb39c;--accent-ink:#15261e;--down:#c47a6e;
  --font-display:"Fraunces","Playfair Display","Georgia",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--t:220ms;
  --grain:repeating-linear-gradient(135deg,rgba(242,232,212,.012) 0,rgba(242,232,212,.012) 1px,transparent 1px,transparent 3px);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}:root{--t:0ms}}
img,svg{display:block;max-width:100%}a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
body{
  font-family:var(--font-body);color:var(--fg-000);background-color:var(--bg-000);line-height:1.62;
  background-image:var(--grain),radial-gradient(1100px 640px at 80% -10%,rgba(143,188,166,.06),transparent 60%),radial-gradient(900px 560px at -6% 8%,rgba(196,122,110,.05),transparent 55%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.08;font-weight:600}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* RG bar */
.rg-bar{position:sticky;top:0;z-index:60;display:flex;gap:1rem;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;padding:.5rem 1rem;background:var(--bg-050);border-bottom:1px solid var(--bg-300);font-size:.85rem;color:var(--fg-100)}
.rg-bar [data-rg]::before{content:"⚠ ";color:var(--accent-2)}.rg-bar .mono{color:var(--fg-000)}

/* header */
.lhead{display:flex;align-items:center;gap:1rem;padding:1rem 0}
.lhead .logo-img{height:48px;width:auto;display:block}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:1.5rem;font-weight:600}
.wordmark__mark{width:32px;height:32px;flex:none}
.wordmark b{color:var(--accent)}.wordmark .tram{color:var(--accent-2);font-size:.7em;margin-right:.15em}
.lhead .spacer{margin-left:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.95rem;
  padding:.62em 1.15em;border-radius:6px;border:1px solid transparent;transition:transform 160ms var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--bet{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff 8%),var(--accent) 62%,color-mix(in srgb,var(--accent) 86%,#000 14%));
  color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 60%,#000);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(10,4,6,.45);padding:.85em 1.6em;font-size:1rem}
.btn--bet:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2),0 6px 18px rgba(10,4,6,.4)}
.btn--ghost{border-color:var(--bg-300);color:var(--fg-000)}.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-100)}
.btn--block{width:100%}

/* hero */
.hero{position:relative;overflow:hidden;border:1px solid var(--bg-300);border-top:2px solid var(--accent);border-radius:12px;
  background-color:var(--bg-050);
  background-image:var(--grain),linear-gradient(96deg,rgba(20,10,13,.94) 0%,rgba(20,10,13,.80) 32%,rgba(25,13,17,.46) 62%,rgba(25,13,17,.30) 100%),url("../img/hero.jpg");
  background-image:var(--grain),linear-gradient(96deg,rgba(20,10,13,.94) 0%,rgba(20,10,13,.80) 32%,rgba(25,13,17,.46) 62%,rgba(25,13,17,.30) 100%),image-set(url("../img/hero.avif") type("image/avif"),url("../img/hero.webp") type("image/webp"),url("../img/hero.jpg") type("image/jpeg"));
  background-repeat:repeat,no-repeat,no-repeat;background-size:auto,cover,cover;background-position:center,center,center right;
  padding:clamp(2rem,6vw,4.5rem) clamp(1.5rem,5vw,3.5rem);margin-top:1rem}
@media(max-width:760px){.hero{
  background-image:var(--grain),linear-gradient(178deg,rgba(20,10,13,.74) 0%,rgba(20,10,13,.88) 60%,rgba(20,10,13,.95) 100%),url("../img/hero-mobile.jpg");
  background-image:var(--grain),linear-gradient(178deg,rgba(20,10,13,.74) 0%,rgba(20,10,13,.88) 60%,rgba(20,10,13,.95) 100%),image-set(url("../img/hero-mobile.avif") type("image/avif"),url("../img/hero-mobile.webp") type("image/webp"),url("../img/hero-mobile.jpg") type("image/jpeg"))}}
.kicker{color:var(--accent-2);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700}
.hero h1{font-size:clamp(2.6rem,1.9rem+3vw,4.4rem);margin:.6rem 0;max-width:16ch}
.hero p{color:var(--fg-100);font-size:clamp(1.05rem,1rem+.4vw,1.25rem);max-width:50ch}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.hero .ticket{position:absolute;right:-10px;top:1.5rem;rotate:6deg;opacity:.5;font-family:var(--font-mono);font-size:.72rem;
  color:var(--fg-300);border:1px dashed color-mix(in srgb,var(--accent) 42%,var(--bg-300));border-radius:6px;padding:.75rem;background:var(--bg-000);display:none}
@media(min-width:760px){.hero .ticket{display:block}}

/* offer ticket card */
.offer{margin-top:1rem;display:grid;gap:1.5rem;grid-template-columns:1.4fr 1fr;align-items:stretch}
@media(max-width:760px){.offer{grid-template-columns:1fr}}
.card{position:relative;background:var(--grain),linear-gradient(180deg,var(--bg-100),var(--bg-050));
  border:1px solid var(--bg-300);border-radius:8px;padding:1.5rem;box-shadow:0 6px 18px rgba(10,4,6,.4)}
.card--accent{border-top:2px solid var(--accent)}
.pill{display:inline-flex;align-items:center;gap:.4em;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:.3em .7em;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--bg-300));background:color-mix(in srgb,var(--accent) 16%,var(--bg-100));color:var(--accent)}
.ticket-card{display:grid;gap:.75rem}
.ticket-card h2{font-size:1.5rem}
.ticket-card .terms{font-size:.74rem;color:var(--fg-300)}
.ticket-card::after{content:"";position:absolute;left:0;right:0;bottom:64px;height:1px;background-image:linear-gradient(90deg,var(--bg-300) 50%,transparent 50%);background-size:8px 1px}
.steps{display:grid;gap:.75rem}
.step{display:flex;gap:.75rem;align-items:flex-start}
.step .n{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-weight:700;font-size:.85rem}
.step p{font-size:.9rem;color:var(--fg-100)}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;padding:1rem;margin-top:1.5rem;
  background:var(--bg-050);border:1px solid var(--bg-300);border-radius:8px;font-size:.85rem;color:var(--fg-300)}
.trust strong{color:var(--fg-100)}

/* ncpf */
.ncpf{background:#fff;color:#000;border-radius:6px;padding:.75rem 1rem;display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:center;border:1px solid #d9d9d9;margin-top:1.5rem}
.ncpf .tag{font-family:var(--font-display);font-weight:700}
.ncpf .sub{font-size:.85rem}.ncpf .sub a{color:#0b3d91;font-weight:600}

/* footer */
.lfoot{background:#000;border-top:2px solid var(--accent);margin-top:2.5rem;color:var(--fg-100)}
.lfoot .wrap{padding-block:2.5rem}
.licence{display:grid;gap:.25rem;padding:1rem;border:1px dashed var(--accent-2);border-radius:6px;background:var(--bg-050);font-size:.85rem}
.licence strong{color:var(--fg-000)}.licence .mono{color:var(--accent-2)}
.legal-text{font-size:.74rem;color:var(--fg-500);line-height:1.7;margin-top:1.5rem}
.legal-text a{color:var(--fg-300)}
.badge18{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--accent-2);color:var(--accent-2);font-family:var(--font-display);font-weight:700}
.lfoot .row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.lfoot .foot-logo{display:inline-flex;align-items:center;opacity:.85;transition:opacity .15s ease}
.lfoot .foot-logo:hover{opacity:1}
.lfoot .foot-logo img{display:block;height:30px;width:auto}

/* overlays */
.overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(8,3,5,.86);padding:1rem}
.overlay[hidden]{display:none}
.age{max-width:460px;width:100%;text-align:center;background:linear-gradient(180deg,var(--bg-100),var(--bg-050));
  border:1px solid var(--bg-300);border-top:3px solid var(--accent);border-radius:12px;padding:3rem 2rem;box-shadow:0 18px 48px rgba(8,3,5,.55)}
.age .mark{font-family:var(--font-display);font-size:1.5rem;color:var(--accent)}
.age .o18{display:inline-grid;place-items:center;width:64px;height:64px;margin:1rem auto;border:2px solid var(--accent-2);border-radius:50%;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--accent-2)}
.age h2{margin:1rem 0 .5rem}.age p{font-size:.9rem;color:var(--fg-100)}
.age .acts{display:flex;gap:.75rem;margin-top:1.5rem}.age .acts .btn{flex:1}
.age .deny{display:none;margin-top:1rem;color:var(--down);font-size:.85rem}
.cookie{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:900;width:min(700px,calc(100% - 2rem));
  background:linear-gradient(180deg,var(--bg-150),var(--bg-100));border:1px solid var(--bg-300);border-radius:8px;box-shadow:0 18px 48px rgba(8,3,5,.55);padding:1.25rem;display:grid;gap:1rem}
.cookie[hidden]{display:none}.cookie .row{display:flex;gap:.75rem;flex-wrap:wrap}.cookie .row .btn{flex:1;min-width:130px}
.review{background:#3a2a14;border:1px dashed #c9a23a;color:#f0d68a;padding:.05em .4em;border-radius:4px;font-size:.9em}

/* ---- Cinematic motion layer (gated behind reduced-motion) -------------- */
.mo-aurora{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;opacity:.9;filter:blur(8px);
  background:radial-gradient(38vmax 30vmax at 18% 14%,rgba(143,188,166,.10),transparent 60%),
            radial-gradient(42vmax 34vmax at 84% 8%,rgba(185,190,196,.07),transparent 62%),
            radial-gradient(46vmax 38vmax at 70% 96%,rgba(196,122,110,.08),transparent 60%)}
.hero{isolation:isolate}
.hero .atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit;transform:translate3d(var(--px,0),var(--py,0),0)}
.hero .chrome{position:absolute;inset:0;mix-blend-mode:screen;opacity:.7;background:linear-gradient(115deg,transparent 40%,rgba(185,190,196,.08) 50%,transparent 60%)}
.card--accent{position:relative}
.card--accent::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.8;background:linear-gradient(135deg,rgba(242,232,212,.06),transparent 38%)}
@media(prefers-reduced-motion:no-preference){
  .mo-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--mo-delay,0ms)}
  .mo-reveal.is-in{opacity:1;transform:none}
  .btn--bet{overflow:hidden}
  .btn--bet::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%)}
  .btn--bet:hover::after{animation:mo-sweep .9s var(--ease)}
  @keyframes mo-sweep{to{transform:translateX(130%)}}
  .hero .beam{position:absolute;top:-40%;right:-10%;width:70%;height:180%;filter:blur(14px);transform:rotate(8deg);
    background:conic-gradient(from 210deg at 50% 50%,transparent 0deg,rgba(143,188,166,.10) 24deg,transparent 60deg);
    animation:mo-beam 16s var(--ease) infinite alternate}
  @keyframes mo-beam{from{opacity:.5;transform:rotate(6deg) translateY(0)}to{opacity:.9;transform:rotate(11deg) translateY(-18px)}}
  .hero .smoke{position:absolute;inset:0;animation:mo-drift 22s var(--ease) infinite alternate;
    background:radial-gradient(60% 50% at 20% 90%,rgba(242,232,212,.05),transparent 60%),radial-gradient(50% 40% at 90% 20%,rgba(185,190,196,.06),transparent 60%)}
  @keyframes mo-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.05)}}
}