/* TXL Studio — premium layer. Loaded after each page's own <style>, so it refines rather than replaces.
   Everything motion-related is disabled under prefers-reduced-motion. */

:root{
  --ease-out:cubic-bezier(.16,.7,.1,1);
  --hi:rgba(255,255,255,.055);
  --shadow-1:0 1px 0 var(--hi) inset, 0 18px 40px -26px rgba(0,0,0,.75);
  --shadow-2:0 1px 0 rgba(255,255,255,.07) inset, 0 28px 60px -28px rgba(0,0,0,.85);
}

/* ---------- 1. Page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
@view-transition{ navigation:auto; }
nav{ view-transition-name:site-nav; }
::view-transition-old(root){ animation:vt-out .12s ease both; }
::view-transition-new(root){ animation:vt-in .26s var(--ease-out) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }
::view-transition-group(site-nav){ animation-duration:0s; }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
}

/* ---------- 2. Cursor spotlight cards ---------- */
.spot{ position:relative; }
.spot::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(232,88,47,.12), transparent 62%);
  opacity:0; transition:opacity .4s ease;
}
.spot:not(.check-item)::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55), rgba(232,88,47,.4) 42%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease;
}
.spot.is-lit::before, .spot.is-lit::after{ opacity:1; }
@media (hover:none){ .spot::before, .spot::after{ display:none; } }

/* ---------- 3. Buttons: magnetic pull, press, sheen ---------- */
.btn, .nav-cta{
  position:relative; overflow:hidden;
  transform:translate(var(--tx,0px), var(--ty,0px));
  transition:transform .35s var(--ease-out), box-shadow .3s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.btn:active, .nav-cta:active{ transform:translate(var(--tx,0px), var(--ty,0px)) scale(.965); transition-duration:.08s; }
.btn-primary:hover, .nav-cta:hover{ opacity:1; filter:brightness(1.04); box-shadow:0 16px 34px -14px rgba(232,88,47,.6); }
.btn-primary::after, .nav-cta::after{
  content:""; position:absolute; top:0; bottom:0; left:-90%; width:55%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(232,88,47,.3), transparent); transform:skewX(-18deg);
  transition:left .8s var(--ease-out);
}
.btn-primary:hover::after, .nav-cta:hover::after{ left:140%; }
.btn-ghost:hover{ background:rgba(255,255,255,.04); border-color:#5a6270; }
.btn:disabled{ cursor:progress; }
.contact-form .btn:disabled::before{
  content:""; width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(10,12,15,.25); border-top-color:#0a0c0f; animation:txl-spin .7s linear infinite;
}
@keyframes txl-spin{ to{ transform:rotate(360deg); } }

/* ---------- 4. Typography and rhythm ---------- */
h1.hero-title{ font-size:clamp(40px, 7.4vw, 88px); line-height:.98; letter-spacing:-.045em; max-width:none; margin-bottom:28px; }
.hero-sub{ font-size:clamp(16px,1.6vw,19px); line-height:1.6; }
.page-head h1{ letter-spacing:-.035em; }
section{ padding:104px 0; }
.section-head{ margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px, 4.2vw, 46px); letter-spacing:-.035em; line-height:1.08; }
@media (max-width:640px){ section{ padding:72px 0; } .section-head{ margin-bottom:38px; } }

/* ---------- 5. Depth: top-lit hairlines + elevation scale ---------- */
.pillar, .cat-card, .post-card, .report-card, .addons-box, .composer, .stack-grid, .pricing-preview{ box-shadow:var(--shadow-1); }
.pillar:hover, .cat-card:hover, .post-card:hover{ box-shadow:var(--shadow-2); }
.shot-frame{ box-shadow:var(--shadow-2); transition:box-shadow .4s ease, transform .2s ease-out; }
.shot-frame .bar{ position:relative; background:linear-gradient(180deg,#1d2128,#171b21); }
.shot-frame .bar[data-url]::after{
  content:attr(data-url); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font:500 11px 'JetBrains Mono',monospace; color:var(--muted); background:rgba(0,0,0,.28);
  border:1px solid var(--line); padding:3px 14px; border-radius:999px; max-width:55%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shot-frame:hover{ box-shadow:0 36px 70px -30px rgba(0,0,0,.9), 0 0 0 1px #343a44; }

/* ---------- 8. Colour discipline: orange leads, teal is reserved for "success / secure" ---------- */
nav::after{ background:linear-gradient(90deg, transparent, var(--cloud), transparent); background-size:200% 100%; opacity:.5; }
nav ul a::after{ background:var(--cloud); }
.process-track{ --gpt:#e8582f; --gpt-dim:#e8582f22; }

/* ---------- 9. Scroll progress + hero parallax ---------- */
.txl-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:90; pointer-events:none;
  background:linear-gradient(90deg, var(--cloud), #ff9b6b); transform-origin:0 50%; transform:scaleX(0); will-change:transform;
  opacity:0; transition:opacity .3s ease;
}
.txl-progress.on{ opacity:1; }
html{ scroll-padding-top:80px; }

/* ---------- 10. Forms: focus, success ---------- */
:focus-visible{ outline:2px solid var(--cloud); outline-offset:3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:none; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus,
form input:focus, form textarea:focus, form select:focus{
  border-color:var(--cloud) !important; box-shadow:0 0 0 4px rgba(232,88,47,.15); transition:box-shadow .2s ease, border-color .2s ease;
}
.ok-check{ width:22px; height:22px; vertical-align:-5px; margin-right:8px; }
.ok-check circle{ fill:none; stroke:var(--gpt); stroke-width:2; stroke-dasharray:63; stroke-dashoffset:63; animation:ok-draw .6s ease forwards; }
.ok-check path{ fill:none; stroke:var(--gpt); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20; animation:ok-draw .4s .45s ease forwards; }
@keyframes ok-draw{ to{ stroke-dashoffset:0; } }

/* ---------- 14. Mobile sticky action bar ---------- */
.txl-cta-bar{
  position:fixed; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:72; display:none; gap:8px; padding:8px;
  background:rgba(19,22,27,.78); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px -18px rgba(0,0,0,.8), inset 0 1px 0 var(--hi);
  transform:translateY(140%); transition:transform .45s var(--ease-out);
}
.txl-cta-bar.show{ transform:translateY(0); }
.txl-cta-bar a{ text-decoration:none; font:600 14px Inter,sans-serif; border-radius:11px; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; }
.txl-cta-bar .cb-main{ flex:1; background:var(--text); color:#0a0c0f; }
.txl-cta-bar .cb-wa{ width:50px; background:#14b88a; color:#06130e; }
.txl-cta-bar svg{ width:20px; height:20px; }
@media (max-width:720px){
  .txl-cta-bar{ display:flex; }
  body.has-cta-bar .scroll-top-btn{ bottom:86px; right:18px; width:42px; height:42px; }
  .wa-fab{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .btn, .nav-cta, .btn-primary::after, .nav-cta::after, .txl-cta-bar{ transition:none; }
  .ok-check circle, .ok-check path{ animation:none; stroke-dashoffset:0; }
}

/* tall frame stretches to its neighbours: let the screenshot fill it instead of leaving black */
.shot-frame.tall{ display:flex; flex-direction:column; }
.shot-frame.tall img{ flex:1; min-height:0; height:100%; width:100%; object-fit:cover; object-position:30% top; }
@media (max-width:800px){ .shot-frame.tall img{ flex:none; height:auto; } }

/* ---------- Speed: cheaper paint, quicker reveals ---------- */
/* the nav hairline used to repaint every frame forever; a static line costs nothing */
nav::after{ animation:none !important; background:linear-gradient(90deg, transparent, var(--cloud), transparent); opacity:.5; }
/* content should arrive, not drift in: shorter, lighter fade-ins */
.reveal{ transform:translateY(22px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal.in-view{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ transform:none; transition:none; } }
/* keep static layers off the main compositor path */
.cine-vignette, .cine-grain{ contain:strict; }

/* ---------- Brand lockup: TXL mark and "Studio" share one visual height and weight ---------- */
.brand{ font-size:22px; gap:12px; }
.brand-mark{ height:30px; }
.brand-divider{ height:24px; }
.brand-word{ color:#b3bac6; font-weight:500; letter-spacing:.2px; }

/* =====================================================================
   Layout pass: use the full width, give sections a visual counterpart
   ===================================================================== */

/* ---------- Home: selected work as two large cards ---------- */
.work-feature{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; margin-bottom:34px; }
.wf-card{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-1); transition:transform .3s var(--ease-out), box-shadow .3s ease; }
.wf-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.wf-media{ display:block; aspect-ratio:16/10; overflow:hidden; border-radius:15px 15px 0 0; background:#000; }
.wf-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s var(--ease-out); }
.wf-card:hover .wf-media img{ transform:scale(1.04); }
.wf-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.wf-tag{ font:500 11.5px 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.wf-live{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gpt); box-shadow:0 0 8px var(--gpt); margin-right:8px; vertical-align:1px; }
.wf-body h3{ font-size:24px; letter-spacing:-.03em; line-height:1.15; }
.wf-body p{ font-size:15px; color:var(--muted); line-height:1.65; margin:0; max-width:none; }
.wf-links{ display:flex; gap:20px; flex-wrap:wrap; margin-top:auto; padding-top:10px; }
.wf-links a{ font:600 13.5px 'JetBrains Mono',monospace; text-decoration:none; color:var(--cloud); padding:8px 0; }
.wf-links a:hover{ color:var(--text); }
@media (max-width:820px){ .work-feature{ grid-template-columns:1fr; } }

/* ---------- Home: Aegis copy beside a real report ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.split-copy p{ max-width:none; }
.split-visual .shot-frame{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#000; }
.split-visual .shot-frame .bar{ height:34px; background:var(--panel-2); display:flex; align-items:center; padding:0 14px; gap:6px; border-bottom:1px solid var(--line); }
.split-visual .shot-frame .bar span{ width:10px; height:10px; border-radius:50%; background:#333; }
.split-visual .shot-frame img{ display:block; width:100%; height:auto; }
.split-cap{ font-size:13px; color:var(--muted); margin-top:12px; line-height:1.5; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:34px; } }

/* ---------- Readability ---------- */
.process-step h3{ font-size:16px; }
.process-step p{ font-size:14px; color:#a3abb8; line-height:1.55; }
.stack-item .k{ color:#9aa3b0; }
.teaser p{ font-size:16.5px; }
footer h1, footer h2{ font-size:clamp(28px, 4vw, 44px); line-height:1.12; letter-spacing:-.035em; margin-bottom:14px; }
footer .sub{ max-width:620px; }

/* ---------- Contact: form beside what happens next ---------- */
.contact-split{ display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:60px; align-items:start; margin-bottom:60px; }
.contact-split .contact-form{ max-width:none; margin-bottom:0; }
.next-steps{ position:sticky; top:96px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 28px 24px; box-shadow:var(--shadow-1); }
.ns-title{ font:500 11.5px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--cloud); margin-bottom:18px; }
.next-steps ol{ list-style:none; counter-reset:ns; margin:0 0 18px; padding:0; display:grid; gap:16px; }
.next-steps li{ counter-increment:ns; position:relative; padding-left:42px; font-size:15px; line-height:1.55; color:#aab2bf; }
.next-steps li b{ color:var(--text); font-weight:600; }
.next-steps li::before{ content:counter(ns); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font:600 12.5px 'Space Grotesk',sans-serif; color:var(--cloud); background:var(--bg); }
.ns-note{ font-size:13.5px; color:var(--muted); line-height:1.6; border-top:1px solid var(--line); padding-top:16px; margin:0; }
.ns-note a{ color:var(--text); }
@media (max-width:900px){ .contact-split{ grid-template-columns:1fr; gap:34px; } .next-steps{ position:static; } }

/* ---------- About: story beside an at-a-glance card ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,700px) minmax(0,1fr); column-gap:64px; align-items:start; }
.about-grid > .section-head{ grid-column:1 / -1; }
.about-grid > .glance{ grid-column:2; grid-row:2 / span 9; position:sticky; top:96px; }
.about-grid > :not(.section-head):not(.glance){ grid-column:1; }
.glance{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 26px 24px; box-shadow:var(--shadow-1); }
.gl-title{ font:500 11.5px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--cloud); margin-bottom:6px; }
.glance dl{ margin:0 0 22px; }
.glance dt{ font:500 11px 'JetBrains Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:18px; }
.glance dd{ margin:5px 0 0; font-size:15px; line-height:1.55; color:var(--text); }
.glance dd a{ color:var(--text); text-decoration:none; border-bottom:1px solid var(--cloud); }
.gl-cta{ width:100%; justify-content:center; }
@media (max-width:980px){ .about-grid{ grid-template-columns:1fr; } .about-grid > .glance{ grid-column:1; grid-row:auto; position:static; margin-top:10px; order:99; } }

/* ---------- Footer: a real one ---------- */
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding:44px 0 36px; border-top:1px solid var(--line); margin-top:8px; }
.fg-logo{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font:500 22px 'Space Grotesk',sans-serif; color:#b3bac6; }
.fg-logo img{ height:30px; width:auto; }
.fg-brand p{ font-size:14px; color:var(--muted); line-height:1.65; max-width:290px; margin:0; }
.fg-col{ display:flex; flex-direction:column; gap:2px; }
.fg-h{ font:500 11.5px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.fg-col a{ font-size:14.5px; color:#b3bac6; text-decoration:none; padding:6px 0; width:fit-content; }
.fg-col a:hover{ color:var(--text); }
footer .foot-bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } .fg-brand{ grid-column:1 / -1; } }
@media (max-width:420px){ .foot-grid{ grid-template-columns:1fr; } }

/* balanced line breaks: no orphan last word on headings */
h1, h2{ text-wrap:balance; }