/* ============================================================
   D'Loah marketing site - styles
   Applies the D'Loah Design System (see /design-system/).
   Self-contained so GitLab Pages serves it with no build step.
   Token values mirror /design-system/tokens.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#343a40;
  --bg-deep:#1c1f23;
  --surface-2:#3c434b;
  --surface-3:#2b3036;
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.12);
  --text:#f2f2f3;
  --muted:#9b9ba3;
  --dim:#878790;
  --faint:#5a626b;
  --ink:#0a0a0c;
  --accent:#34e29b;
  --accent-2:#b765ff;
  --accent-3:#22d3c5;
  --radius:3px;
  --radius-lg:10px;
  --font-display:'Sora',sans-serif;
  --font-body:'Manrope',sans-serif;
  --font-mono:'Space Mono',monospace;
  --maxw:1180px;
  --pad-x:max(7vw,24px);
  --sec-y:clamp(70px,8vw,120px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);min-height:100vh;width:100%;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--ink)}
img{max-width:100%;display:block}

@keyframes blazeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes blazeFade{from{opacity:0}to{opacity:1}}

.container{max-width:var(--maxw);margin:0 auto}
.grad{background:linear-gradient(100deg,var(--accent),var(--accent-3) 45%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin:0 0 18px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(28,31,35,0.74);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-mark{display:block;flex-shrink:0;width:26px;height:26px}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-link{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .2s}
.nav-link:hover{color:var(--text)}
.nav-cta{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink);background:var(--accent);
  padding:9px 16px;border-radius:var(--radius);text-decoration:none;font-weight:700;white-space:nowrap;transition:filter .2s}
.nav-cta:hover{filter:brightness(1.08)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:15px 26px;border-radius:var(--radius);text-decoration:none;transition:filter .2s,transform .2s,background .2s,border-color .2s}
.btn .arr{font-family:var(--font-mono)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-ghost{color:var(--text);font-weight:600;border:1px solid rgba(255,255,255,.16)}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03)}

/* ---------- Sections ---------- */
.sec{padding:var(--sec-y) var(--pad-x);border-top:1px solid var(--line);scroll-margin-top:70px}
.num-eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;color:var(--accent);margin-bottom:18px}
.h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4.6vw,56px);line-height:1.02;letter-spacing:-.03em;margin:0}
.lead{font-size:16px;line-height:1.6;color:var(--muted)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(70px,11vw,150px) var(--pad-x) clamp(64px,8vw,110px);overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url('https://yourtrail.run/images/vista-home.jpg');background-size:cover;background-position:center;opacity:.22;pointer-events:none}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,40,45,.4) 0%,rgba(45,50,56,.82) 55%,var(--bg) 100%);pointer-events:none}
.blob{position:absolute;filter:blur(20px);pointer-events:none}
.blob-1{top:-12%;left:-8%;width:46%;height:60%;background:radial-gradient(circle,rgba(52,226,155,.16),transparent 68%)}
.blob-2{top:4%;right:-12%;width:50%;height:70%;background:radial-gradient(circle,rgba(183,101,255,.14),transparent 66%)}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto}
.hero-kicker{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;color:var(--accent);margin-bottom:30px;animation:blazeFade .7s ease both}
.hero-title{font-family:var(--font-display);font-weight:800;font-size:clamp(42px,8.2vw,108px);line-height:.96;letter-spacing:-.035em;margin:0;animation:blazeUp .85s var(--ease) both;animation-delay:.05s}
.hero-sub{font-size:clamp(16px,1.7vw,20px);line-height:1.6;color:var(--muted);max-width:60ch;margin:34px 0 0;font-weight:450;animation:blazeUp .85s var(--ease) both;animation-delay:.16s}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px;animation:blazeUp .85s var(--ease) both;animation-delay:.26s}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:56px;font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--dim);animation:blazeFade 1s ease both;animation-delay:.4s}
.hero-meta .sl{color:var(--accent)}
/* Cycling last word (typewriter) - fixed-width slot so the line never reflows */
.hero-title .hl{display:block}
.cycle{position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap}
.cycle-sizer{visibility:hidden;white-space:nowrap}
.cycle-live{position:absolute;left:0;top:0;white-space:nowrap}
.cycle-text{display:inline}
.cycle-caret{display:inline-block;width:.055em;min-width:3px;height:.78em;margin-left:.05em;background:var(--accent);vertical-align:-.06em;border-radius:1px;animation:caretBlink 1.05s steps(1,end) infinite}
@keyframes caretBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- The gap ---------- */
.gap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:8px}
.gap-cell{background:var(--bg);padding:34px 30px 38px}
.gap-num{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin-bottom:18px}
.gap-cell h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;margin:0 0 10px}
.gap-cell p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
.reactive{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.reactive .lbl{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--dim)}
.reactive .rule{flex:1;min-width:60px;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.reactive .close{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.4vw,26px);letter-spacing:-.02em}

/* ---------- Work ---------- */
.work-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:54px}
.work-head .h2{max-width:18ch}
.work-head .lead{max-width:34ch;margin:0;font-size:15px}
.work-list{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.work-row{display:grid;grid-template-columns:88px 1.2fr 1fr;gap:28px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--text);transition:padding-left .4s var(--ease),background .4s}
.work-row:hover{padding-left:22px}
.work-row.t1:hover{background:linear-gradient(90deg,rgba(52,226,155,.06),transparent 70%)}
.work-row.t2:hover{background:linear-gradient(90deg,rgba(34,211,197,.06),transparent 70%)}
.work-row.t3:hover{background:linear-gradient(90deg,rgba(183,101,255,.06),transparent 70%)}
.work-num{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;color:var(--faint)}
.work-title{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,34px);letter-spacing:-.025em;margin:0 0 6px}
.work-desc{font-size:14px;line-height:1.55;color:var(--muted);margin:0;max-width:42ch}
.work-right{display:flex;align-items:center;justify-content:space-between;gap:18px}
.work-tags{display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}
.work-tags .cat{color:var(--accent)}
.work-tags .cat.c2{color:var(--accent-3)}
.work-tags .cat.c3{color:var(--accent-2)}
.work-tags .st{color:var(--dim)}
.work-thumb{width:128px;height:80px;border-radius:var(--radius-lg);flex-shrink:0;border:1px solid var(--line);background-size:cover;background-position:center}
.work-thumb.ph{display:flex;align-items:flex-end;padding:9px;background:var(--surface-3)}
.work-thumb.ph span{font-family:var(--font-mono);font-size:11px;color:#cfcfd4}

/* ---------- Services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.service{background:var(--bg);padding:36px 30px 40px;transition:background .3s}
.service:hover{background:var(--surface-2)}
.service-label{font-family:var(--font-mono);font-size:13px;color:#868d96;margin-bottom:24px}
.service h3{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.02em;margin:0 0 12px}
.service p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
.also{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.also .k{font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.04em}
.also .v{font-size:13.5px;color:var(--muted)}
.also .dot{color:#3a3a40}

/* ---------- Voices ---------- */
.voices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.voice{margin:0;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface-2);padding:32px 30px 28px;display:flex;flex-direction:column;gap:22px}
.stars{display:flex;gap:3px;color:var(--accent);font-size:15px}
.voice-quote{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.2vw,23px);line-height:1.35;letter-spacing:-.015em}
.voice-cap{display:flex;align-items:center;gap:12px;margin-top:auto}
.avatar{width:38px;height:38px;border-radius:var(--radius-lg);border-radius:100px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)}
.avatar.a1{background:linear-gradient(135deg,#34e29b,#22d3c5)}
.avatar.a2{background:linear-gradient(135deg,#22d3c5,#b765ff)}
.avatar.a3{background:linear-gradient(135deg,#b765ff,#34e29b)}
.voice-cap .nm{display:block;font-weight:600;font-size:14.5px}
.voice-cap .ro{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--dim);margin-top:2px}
.voices-note{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:#6f767f;margin:24px 0 0}

/* ---------- Contact ---------- */
.cta{padding:clamp(110px,14vw,200px) var(--pad-x);border-top:1px solid var(--line);position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;background-image:url('https://yourtrail.run/images/cta-home.jpg');background-size:cover;background-position:center 30%;pointer-events:none}
.cta-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,31,35,.82),rgba(28,31,35,.72) 50%,rgba(52,58,64,.96));pointer-events:none}
.cta-glow{position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);width:80%;height:90%;background:radial-gradient(circle,rgba(52,226,155,.12),rgba(183,101,255,.08) 45%,transparent 70%);filter:blur(30px);pointer-events:none}
.cta-inner{position:relative;max-width:var(--maxw);margin:0 auto;text-align:center}
.cta h2{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,7vw,90px);line-height:.98;letter-spacing:-.035em;margin:0 auto;max-width:16ch}
.cta p{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:#d4d6da;max-width:48ch;margin:28px auto 0}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}

/* ---------- Footer ---------- */
.footer{padding:46px var(--pad-x);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand .logo-mark{width:22px;height:22px}
.footer-brand .brand-name{font-size:16px}
.footer-brand .tag{font-family:var(--font-mono);font-size:11.5px;color:var(--dim);margin-left:8px}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim)}
.footer-links a{color:var(--dim);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .nav-links{gap:16px}
  .nav-links .nav-link{display:none}
  .services-grid{grid-template-columns:1fr}
  .work-row{grid-template-columns:48px 1fr;row-gap:14px}
  .work-right{grid-column:1 / -1;justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}