/* Lumiada design system components (copied from the Lumiada design system, components/bundle.css). Fonts load in the page <head>. */

/* Lumiada components. Colors, fonts, spacing, shadows and borders come from tokens.css. */

.lm-page{background-color:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.55;
  background-image:radial-gradient(circle at 1px 1px, var(--dot) .6px, transparent 1.1px);background-size:12px 12px}
.lm-page *{box-sizing:border-box}
.lm-page a{color:inherit}
.lm-page :focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--muted)}
.c-ads{--c:var(--ads)} .c-analytics{--c:var(--analytics)} .c-design{--c:var(--design)} .c-media{--c:var(--media)} .c-ai{--c:var(--ai)}

/* Logo: lowercase wordmark, yellow i-dot (a dotless ı in fg laid over a yellow i) */
.logo{display:inline-flex;align-items:baseline;text-decoration:none;font-family:var(--font-logo);font-weight:900;font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--fg)}
.logo .i{position:relative;color:var(--yellow)}
.logo .i span{position:absolute;left:0;top:0;color:var(--fg);-webkit-text-stroke:.4px var(--fg)}

/* Nav */
.nav{background:var(--bg);border-bottom:var(--border-heavy) solid var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--space-6);padding:14px var(--space-4)}
.nav ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{display:block;padding:8px 12px;text-decoration:none;font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.1em;border:var(--border-mid) solid transparent;transition:border-color .12s,color .12s}
.nav ul a:hover,.nav ul a.is-hover{border-color:var(--yellow);color:var(--yellow)}

/* Button */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;
  color:var(--ink);background:var(--yellow);border:var(--border-heavy) solid var(--line);padding:var(--space-3) 18px;box-shadow:var(--shadow-hard);
  transition:transform .12s ease, box-shadow .12s ease, color .12s, border-color .12s;white-space:nowrap;cursor:pointer}
.btn:hover,.btn.is-hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--muted)}
.btn:active{transform:translate(6px,6px);box-shadow:none}
.btn.ghost{background:var(--bg);color:var(--fg)}
.btn.ghost:hover,.btn.ghost.is-hover{color:var(--yellow);border-color:var(--yellow);box-shadow:8px 8px 0 var(--yellow)}

/* Tag */
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--yellow));padding:5px 9px;border:var(--border-mid) solid var(--c,var(--yellow))}

/* Service card */
.svc{--c:var(--yellow);position:relative;display:flex;flex-direction:column;gap:18px;text-decoration:none;color:var(--fg);
  background:var(--surface);border:var(--border-heavy) solid var(--line);padding:22px 22px 20px;min-height:290px;min-width:0;container-type:inline-size;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.svc::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:8px;background:var(--c)}
.svc:hover,.svc.is-hover,.svc:focus-visible{transform:translate(-6px,-6px);box-shadow:8px 8px 0 var(--c);border-color:var(--c);outline:none}
.svc-top{display:flex;align-items:flex-start;margin-top:8px}
.svc-icon{width:52px;height:52px;border:var(--border-heavy) solid var(--line-hi);display:grid;place-items:center;transition:border-color .12s}
.svc:hover .svc-icon,.svc.is-hover .svc-icon{border-color:var(--c)}
.svc-icon svg{width:28px;height:28px;stroke:var(--c);fill:none;stroke-width:2.5;stroke-linecap:square}
.svc h3{margin:auto 0 0;font-family:var(--font-display);font-weight:900;font-stretch:122%;font-size:clamp(26px,10.5cqi,46px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.svc p{margin:0;color:var(--muted);max-width:40ch}
.svc-foot{display:flex;justify-content:space-between;align-items:center;border-top:var(--border-mid) solid var(--line);padding-top:14px}
.svc-foot .chips{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.arrow{width:38px;height:38px;border:var(--border-heavy) solid var(--line-hi);display:grid;place-items:center;transition:border-color .12s, transform .12s}
.arrow svg{width:18px;height:18px;stroke:var(--fg);stroke-width:3;fill:none;transition:stroke .12s}
.svc:hover .arrow,.svc.is-hover .arrow{border-color:var(--c);transform:rotate(-45deg)}
.svc:hover .arrow svg,.svc.is-hover .arrow svg{stroke:var(--c)}

/* Case card */
.case{--c:var(--yellow);text-decoration:none;color:var(--fg);display:flex;flex-direction:column;background:var(--surface);border:var(--border-heavy) solid var(--line);transition:transform .12s, box-shadow .12s, border-color .12s;min-width:0}
.case:hover,.case.is-hover,.case:focus-visible{transform:translate(-6px,-6px);box-shadow:8px 8px 0 var(--c);border-color:var(--c);outline:none}
.case-art{position:relative;aspect-ratio:16/9;max-width:100%;border-bottom:var(--border-heavy) solid var(--line);overflow:hidden;background:var(--surface-2)}
.case-art .coord{position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);background:var(--bg);padding:4px 8px;border:var(--border-mid) solid var(--line-hi)}
.case-body{padding:18px var(--space-5) 22px;display:grid;gap:10px}
.case .tag{justify-self:start}
.case h3{margin:0;font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:clamp(22px,2.2vw,28px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.case p{margin:0;color:var(--muted)}
.case .kpi{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-top:var(--border-mid) solid var(--line);padding-top:12px;margin-top:4px}
.case .kpi b{color:var(--c)}

/* Stat panel */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:var(--border-heavy) solid var(--line);background:var(--surface)}
.stat{padding:28px var(--space-6) 26px;border-right:var(--border-heavy) solid var(--line);display:grid;gap:10px;align-content:start;min-width:0}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(40px,5vw,72px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat .num sup{font-size:.42em;color:var(--yellow);vertical-align:top;margin-left:4px}
.stat p{margin:0;color:var(--muted);font-size:15px;max-width:26ch}
.stat .delta{display:flex;justify-content:space-between;border-top:var(--border-hair) dashed var(--line);padding-top:10px}
.stat .delta b{color:var(--yellow);font-weight:500}

/* Radial histogram */
.radial{display:grid;gap:14px;justify-items:center}
.radial canvas{width:100%;max-width:440px;aspect-ratio:1/1;display:block}
.radial-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.radial-key span{display:inline-flex;align-items:center;gap:7px}
.radial-key i{width:8px;height:8px;display:block}

/* Ticker */
.ticker{border-block:var(--border-heavy) solid var(--line);background:var(--surface);color:var(--muted);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;animation:lm-scroll 34s linear infinite;padding-block:12px}
.ticker-track span{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:20px;text-transform:uppercase;padding-right:36px;display:inline-flex;align-items:center;gap:36px}
.ticker-track span::after{content:"";width:9px;height:9px;background:var(--yellow);transform:rotate(45deg)}
@keyframes lm-scroll{to{transform:translateX(-50%)}}

/* Client banner */
.clients{border-block:var(--border-heavy) solid var(--line);background:var(--bg)}
.clients-row{display:flex;align-items:stretch}
.clients-label{flex:none;display:flex;align-items:center;padding:14px 24px 14px var(--space-4);border:var(--border-mid) solid var(--yellow);color:var(--fg);background:var(--bg);position:relative;z-index:2}
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.marquee-track{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:lm-scroll 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.client{display:grid;place-items:center;padding:14px 40px;border-right:var(--border-mid) solid var(--line);color:var(--muted);white-space:nowrap;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:20px;letter-spacing:-.02em}

/* CTA panel */
.cta-box{position:relative;background:var(--surface);border:var(--border-heavy) solid var(--line);box-shadow:var(--shadow-panel);padding:var(--space-18) var(--space-12);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6);align-items:end}
.cta-box::before{content:"";position:absolute;left:-3px;top:-3px;width:min(240px,40%);height:6px;background:var(--yellow)}
.cta-box .label{color:var(--yellow);grid-column:1/-1}
.cta-box h2{grid-column:1/9;margin:0;font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(36px,6vw,96px);line-height:.88;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.cta-side{grid-column:9/13;display:grid;gap:18px}
.cta-side p{margin:0;font-size:18px;color:var(--muted)}
.cta-box .mail{font-family:var(--font-mono);font-size:15px;font-weight:700;border-bottom:var(--border-heavy) solid var(--yellow);justify-self:start;padding-bottom:2px}

/* Footer */
.foot{background:var(--surface);border-top:var(--border-hair) solid var(--line)}
.foot-in{padding:var(--space-12) var(--space-4) 28px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}
.f-brand{grid-column:1/5;display:grid;gap:14px;align-content:start}
.f-brand p{margin:0;color:var(--muted);max-width:34ch;font-size:15px}
.f-col{grid-column:span 2;display:grid;gap:var(--space-2);align-content:start;font-size:15px}
.f-col a{text-decoration:none;transition:color .12s}
.f-col a:hover{color:var(--yellow)}
.f-col .dotc{display:inline-block;width:8px;height:8px;margin-right:10px;vertical-align:1px}
.f-bottom{grid-column:1/-1;text-align:center;border-top:var(--border-hair) solid var(--line);padding-top:16px;margin-top:16px}

@media (max-width:700px){
  .cta-box{padding:44px 20px}
  .cta-box h2,.cta-side{grid-column:1/-1}
  .f-brand{grid-column:1/-1}.f-col{grid-column:span 6}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.marquee-track{animation:none}
  .btn,.svc,.case,.arrow{transition:none}
}