/* Codesavory hub. Every colour, length, radius and duration comes from tokens.css (generated from the Codesavory design language).
   The .cs-btn and .cs-badge rules mirror shared/design-language/core/components.css without its Google Fonts import,
   because the language says fonts are self-hosted. Keep them in step when the core changes. */

/* ---- one global type scale ----
   Everything below is in rem, so html's font-size is the single dial: 112.5% is 18px. Raise it to make the whole page larger. */
html{font-size:112.5%;-webkit-text-size-adjust:100%}
:root{
  --fs-xs:.8125rem;   /* labels, footer */
  --fs-s:.9375rem;    /* card text */
  --fs-m:1rem;        /* body, buttons */
  --fs-l:1.25rem;     /* intro line */
  --fs-xl:1.625rem;   /* card titles */
  --fs-hero:clamp(2.5rem,7.5vw,4rem);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);font:400 var(--fs-m)/1.6 var(--font-text);-webkit-font-smoothing:antialiased;transition:background-color var(--dur-base) var(--ease-settle),color var(--dur-base) var(--ease-settle)}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
img{display:block}
.wrap{width:min(46rem,calc(100% - 2.5rem));margin-inline:auto}
.wide{width:min(66rem,calc(100% - 2.5rem));margin-inline:auto}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}
.label{font:600 var(--fs-xs)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-subtle)}
.mono{font:400 var(--fs-xs)/1.6 var(--font-data);letter-spacing:.06em;text-transform:uppercase}

/* ---- components (mirrors core/components.css, sized in rem) ---- */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:3rem;padding:0 var(--space-6);border:1.5px solid transparent;border-radius:var(--radius-pill);font:600 var(--fs-m)/1 var(--font-text);cursor:pointer;transition:transform var(--dur-instant) var(--ease-whistle),background-color var(--dur-quick) var(--ease-settle),border-color var(--dur-quick) var(--ease-settle)}
.cs-btn:hover{transform:translateY(-1px)}
.cs-btn:active{transform:scale(.97)}
.cs-btn--primary{background:var(--brand);color:var(--on-brand)}
.cs-btn--primary:hover{background:var(--brand-hover)}
.cs-btn--line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.cs-btn--line:hover{background:var(--surface-sunk)}
.cs-badge{display:inline-flex;align-items:center;gap:6px;height:1.625rem;padding:0 var(--space-3);border-radius:var(--radius-pill);font:600 var(--fs-xs)/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.cs-badge--info{background:var(--info-subtle);color:var(--info-text)}
.cs-badge--ember{background:color-mix(in srgb,var(--ember-500) 22%,var(--surface-raised));color:var(--ember-700)}
[data-theme="dark"] .cs-badge--ember{color:var(--ember-200)}
.cs-badge--violet{background:color-mix(in srgb,#8b5cf6 18%,var(--surface-raised));color:color-mix(in srgb,#6d3fd9 80%,var(--ink))}
.cs-badge--basil{background:color-mix(in srgb,var(--basil-500) 22%,var(--surface-raised));color:var(--basil-700)}
[data-theme="dark"] .cs-badge--basil{background:color-mix(in srgb,var(--basil-500) 24%,var(--surface-raised));color:var(--basil-200)}
[data-theme="dark"] .cs-badge--violet{color:#cdb8ff}
.cs-badge--slate{background:color-mix(in srgb,#3b6fd8 18%,var(--surface-raised));color:color-mix(in srgb,#1d3a7a 85%,var(--ink))}
[data-theme="dark"] .cs-badge--slate{background:color-mix(in srgb,#3b6fd8 26%,var(--surface-raised));color:#c9d8ff}

/* ---- nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) 0 var(--space-3)}
.brand{font:600 var(--fs-m)/1 var(--font-display);letter-spacing:-.02em;color:var(--ink-muted)}
.mode{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-round);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--dur-quick) var(--ease-settle),transform var(--dur-quick) var(--ease-whistle)}
.mode:hover{background:var(--surface-sunk);transform:rotate(18deg)}
[data-theme="dark"] .i-moon{display:none}
:root:not([data-theme="dark"]) .i-sun{display:none}

/* ---- hero: the portfolio, centred ---- */
main{flex:1;display:flex;flex-direction:column;gap:calc(var(--space-9) + var(--space-5));padding:var(--space-6) 0 var(--space-9)}
.hero{position:relative;isolation:isolate;display:grid;justify-items:center;text-align:center;gap:var(--space-3)}
.hero__glow{position:absolute;z-index:-1;inset:-3rem -6rem auto;height:22rem;background:radial-gradient(40% 60% at 30% 40%,color-mix(in srgb,var(--ember-500) 26%,transparent),transparent 70%),radial-gradient(38% 55% at 72% 50%,color-mix(in srgb,#8b5cf6 22%,transparent),transparent 70%);filter:blur(28px);animation:drift 14s ease-in-out infinite alternate}
.hero__img{width:6rem;height:6rem;margin-bottom:var(--space-4);border-radius:var(--radius-round);object-fit:cover;border:2px solid var(--surface);box-shadow:0 0 0 2px color-mix(in srgb,var(--ember-500) 70%,transparent),var(--shadow-2)}
h1{font:650 var(--fs-hero)/1.02 var(--font-display);letter-spacing:-.04em}
.hot{background:linear-gradient(100deg,var(--ember-500),#e5447f 55%,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.label--hot{color:var(--accent-text)}
.lead{max-width:34rem;color:var(--ink-muted);font-size:clamp(1.0625rem,4.6vw,var(--fs-l));line-height:1.55}
.lead__line{display:block}
/* Only the word moves. The line never wraps (so the full stop cannot drop down) and the slot glides to each word's width. */
.lead__line.is-live{white-space:nowrap}
.is-live .swap{display:inline-block;vertical-align:bottom;overflow:hidden;white-space:nowrap;color:var(--ink);font-weight:600;transition:width .26s var(--ease-settle),opacity .26s var(--ease-settle),transform .26s var(--ease-settle)}
.is-live .swap--out{opacity:0;transform:translateY(.35em)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}

/* ---- products and services ---- */
.products{display:grid;gap:var(--space-4)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.card{--c:var(--tint-ember);--ci:var(--tint-ember-ink);display:grid;grid-template-rows:auto 1fr;overflow:hidden;background:var(--c);color:var(--ci);border-radius:var(--radius-xl);box-shadow:var(--shadow-1);transition:transform var(--dur-quick) var(--ease-whistle),box-shadow var(--dur-quick) var(--ease-settle)}
.card--violet{--c:color-mix(in srgb,#8b5cf6 16%,var(--surface-raised));--ci:color-mix(in srgb,#4c2a9e 78%,var(--ink))}
.card--basil{--c:var(--basil-100);--ci:var(--basil-800)}
.card--stone{--c:var(--tint-stone);--ci:var(--tint-stone-ink)}
.card--slate{--c:color-mix(in srgb,#3b6fd8 13%,var(--surface-raised));--ci:color-mix(in srgb,#1d3a7a 82%,var(--ink))}
[data-theme="dark"] .card--slate{--c:color-mix(in srgb,#3b6fd8 18%,var(--surface-raised));--ci:#c9d8ff}
[data-theme="dark"] .card--stone{--c:var(--surface-raised);--ci:var(--ink)}
.cards--two{grid-template-columns:repeat(2,minmax(0,calc((66rem - 2rem)/3)));justify-content:start}
.dot.dot--wip{background:var(--ember-500)}
[data-theme="dark"] .card--violet{--ci:#d9c9ff}
[data-theme="dark"] .card--basil{--c:color-mix(in srgb,var(--basil-500) 20%,var(--surface-raised));--ci:var(--basil-200)}
.card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-3)}
.card:active{transform:translateY(-2px) scale(.99)}
.card__shot{display:block;aspect-ratio:16/10;line-height:0;overflow:hidden;margin:var(--space-3) var(--space-3) 0;border-radius:var(--radius-lg);background:var(--surface-sunk)}
.shot-dark{display:none}[data-theme="dark"] .shot-dark{display:block}[data-theme="dark"] .shot-light{display:none}
.card__shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s var(--ease-settle)}
.card--violet .card__shot img{object-position:center}
.card:hover .card__shot img{transform:scale(1.05)}
.card__body{display:grid;align-content:start;gap:var(--space-2);padding:var(--space-5) var(--space-5) var(--space-5)}
.card__top{display:flex;align-items:center;justify-content:space-between}
.card__go{font-size:var(--fs-l);line-height:1;transition:transform var(--dur-quick) var(--ease-whistle)}
.card:hover .card__go{transform:translate(3px,-3px)}
.card__t{font:700 var(--fs-xl)/1.2 var(--font-display);letter-spacing:-.03em}
.card__d{font-size:var(--fs-s);line-height:1.55;opacity:.82}
.card__stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-4);border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.s{display:grid;gap:2px;min-width:0}
.s b{font:700 1.5rem/1.1 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.s i{font:600 .6875rem/1.2 var(--font-text);font-style:normal;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.card__foot{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font:500 var(--fs-xs)/1.4 var(--font-data);letter-spacing:.02em;opacity:.85;min-height:1.2em}
.dot{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--basil-500)}
.is-down .dot{background:var(--live)}
.dot.is-live{background:var(--live);animation:ping 1.6s ease-out infinite}

/* ---- footer ---- */
.foot{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-6) 0 var(--space-7);color:var(--ink-subtle);text-align:center}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-6)}
.foot a{transition:color var(--dur-quick) var(--ease-settle)}
.foot a:hover{color:var(--ink)}

/* ---- life: one orchestrated entrance, a floating avatar ---- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero>*:not(.hero__glow),.products>*,.card{animation:rise var(--dur-slow) var(--ease-settle) both}
.hero>:nth-child(2){animation-delay:60ms}
.hero>:nth-child(3){animation-delay:130ms}
.hero>:nth-child(4){animation-delay:200ms}
.hero>:nth-child(5){animation-delay:270ms}
.products>:nth-child(1){animation-delay:340ms}
.card:nth-child(1){animation-delay:400ms}
.card:nth-child(2){animation-delay:480ms}
.card:nth-child(3){animation-delay:560ms}
.hero__img{animation:rise var(--dur-slow) var(--ease-settle) both,bob 6s ease-in-out 1.2s infinite}

@keyframes drift{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent)}100%{box-shadow:0 0 0 .6rem transparent}}
[data-theme="dark"] .vs__row span:nth-child(3){color:var(--accent-text,var(--ember-300))}
@media (max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards,.cards--two{grid-template-columns:1fr}main{gap:var(--space-8)}.hero__glow{inset-inline:-2rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}