/* ============================================================
   Uown Technologies — marketing site
   Built on the Uown Design System tokens (colors, type, spacing,
   radius, elevation, motion) + component classes.
   ============================================================ */

/* ---------- tokens: fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
--font-sans:"Archivo","Helvetica Neue",Arial,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

/* ---------- tokens: colors ---------- */
--gray-0:#FFFFFF;--gray-50:#F6F8F8;--gray-100:#EDF0F1;--gray-200:#DDE2E4;--gray-300:#C2C9CC;--gray-400:#97A1A6;--gray-500:#6C777D;--gray-600:#4A5459;--gray-700:#2F373B;--gray-800:#1D2427;--gray-900:#14191B;--gray-950:#0E1113;
--cyan-100:#C9FBF3;--cyan-200:#8DF3E6;--cyan-300:#4CE8D6;--cyan-400:#00E5D0;--cyan-500:#00C4B2;--cyan-600:#009C8D;--cyan-700:#007A6E;--cyan-800:#005C53;--cyan-900:#033F39;
--green-400:#4ADE80;--green-500:#22B865;--green-700:#12764A;
--amber-400:#FBBF3C;--amber-500:#E8981A;--amber-700:#9A6108;
--red-400:#FF7A6E;--red-500:#E14434;--red-700:#9C2418;
--blue-400:#6BA8FF;--blue-500:#2E7BF6;--blue-700:#1750A8;

--text-strong:var(--gray-950);--text-body:var(--gray-700);--text-muted:var(--gray-500);--text-faint:var(--gray-400);--text-inverse:var(--gray-0);--text-accent:var(--cyan-700);
--surface-page:var(--gray-0);--surface-sunken:var(--gray-50);--surface-card:var(--gray-0);--surface-raised:var(--gray-0);--surface-inverse:var(--gray-950);
--border-subtle:var(--gray-100);--border-default:var(--gray-200);--border-strong:var(--gray-300);--border-accent:var(--cyan-500);
--accent:var(--cyan-600);--accent-hover:var(--cyan-700);--accent-press:var(--cyan-800);--accent-quiet:var(--cyan-100);--accent-on:var(--gray-0);
--focus-ring:var(--cyan-500);
--status-ok:var(--green-500);--status-warn:var(--amber-500);--status-error:var(--red-500);--status-info:var(--blue-500);

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--display-1-size:76px;--display-1-lh:0.96;--display-1-ls:-0.035em;
--display-2-size:56px;--display-2-lh:1.00;--display-2-ls:-0.03em;
--display-3-size:40px;--display-3-lh:1.06;--display-3-ls:-0.025em;
--h1-size:32px;--h1-lh:1.14;--h1-ls:-0.02em;
--h2-size:24px;--h2-lh:1.2;--h2-ls:-0.015em;
--h3-size:19px;--h3-lh:1.32;--h3-ls:-0.01em;
--body-lg-size:19px;--body-lg-lh:1.58;--body-lg-ls:-0.005em;
--body-size:16px;--body-lh:1.6;--body-ls:0;
--body-sm-size:14px;--body-sm-lh:1.55;--body-sm-ls:0;
--caption-size:13px;--caption-lh:1.45;--caption-ls:0;
--mono-size:13px;--mono-lh:1.5;--mono-ls:0.01em;
--label-size:11px;--label-lh:1.2;--label-ls:0.13em;--label-weight:500;

--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;
--container-max:1200px;--container-narrow:760px;--gutter:24px;--gutter-lg:48px;--section-y:96px;--section-y-lg:128px;

--radius-xs:3px;--radius-sm:5px;--radius-md:9px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-full:999px;
--border-width:1px;--border-width-thick:2px;

--shadow-none:none;
--shadow-xs:0 1px 2px rgba(14,17,19,.06);
--shadow-sm:0 1px 3px rgba(14,17,19,.07),0 1px 2px rgba(14,17,19,.04);
--shadow-md:0 4px 12px rgba(14,17,19,.08),0 1px 3px rgba(14,17,19,.05);
--shadow-lg:0 14px 34px rgba(14,17,19,.10),0 3px 8px rgba(14,17,19,.05);
--glow-accent:0 0 0 1px rgba(0,196,178,.35),0 6px 24px rgba(0,196,178,.18);
--ring-focus:0 0 0 3px rgba(0,196,178,.30);

--dur-instant:80ms;--dur-fast:130ms;--dur-base:190ms;--dur-slow:280ms;--dur-slower:420ms;
--ease-standard:cubic-bezier(.2,.8,.25,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.5,0,.9,.3);
--transition-control:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}

[data-theme="dark"]{
--text-strong:var(--gray-0);--text-body:var(--gray-300);--text-muted:var(--gray-400);--text-faint:var(--gray-500);--text-inverse:var(--gray-950);--text-accent:var(--cyan-400);
--surface-page:var(--gray-950);--surface-sunken:#0A0D0E;--surface-card:var(--gray-900);--surface-raised:var(--gray-800);--surface-inverse:var(--gray-0);
--border-subtle:#1B2225;--border-default:#252D31;--border-strong:#394347;--border-accent:var(--cyan-400);
--accent:var(--cyan-400);--accent-hover:var(--cyan-300);--accent-press:var(--cyan-500);--accent-quiet:rgba(0,229,208,.14);--accent-on:var(--gray-950);
--focus-ring:var(--cyan-400);
--status-ok:var(--green-400);--status-warn:var(--amber-400);--status-error:var(--red-400);--status-info:var(--blue-400);
--shadow-xs:0 1px 2px rgba(0,0,0,.5);
--shadow-sm:0 1px 3px rgba(0,0,0,.55);
--shadow-md:0 6px 18px rgba(0,0,0,.5);
--shadow-lg:0 18px 44px rgba(0,0,0,.6);
--ring-focus:0 0 0 3px rgba(0,229,208,.28);
}

@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-slower:0ms}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--body-size);line-height:var(--body-lh);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--text-strong);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-accent);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--accent-press);text-decoration:underline;text-underline-offset:3px}
[data-theme="dark"] a:hover{color:var(--cyan-300)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}

.u-eyebrow{font-family:var(--font-mono);font-size:var(--label-size);line-height:var(--label-lh);letter-spacing:var(--label-ls);font-weight:var(--label-weight);text-transform:uppercase;color:var(--text-muted)}
.u-mono{font-family:var(--font-mono);font-size:var(--mono-size);letter-spacing:var(--mono-ls)}

/* ---------- components (subset used on this site) ---------- */
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--weight-medium);letter-spacing:-.01em;border:var(--border-width) solid transparent;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;text-decoration:none;transition:var(--transition-control)}
.u-btn:hover{text-decoration:none}
.u-btn:active:not(:disabled){transform:translateY(1px)}
.u-btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.u-btn--sm{height:32px;padding:0 var(--space-3);font-size:var(--body-sm-size)}
.u-btn--md{height:40px;padding:0 var(--space-5);font-size:var(--body-sm-size)}
.u-btn--lg{height:48px;padding:0 var(--space-6);font-size:var(--body-size)}
.u-btn--primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.u-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-on)}
.u-btn--primary:active{background:var(--accent-press);border-color:var(--accent-press)}
.u-btn--secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.u-btn--secondary:hover{border-color:var(--border-strong);background:var(--surface-sunken);color:var(--text-strong)}
.u-btn--ghost{background:transparent;color:var(--text-body);border-color:var(--border-default)}
.u-btn--ghost:hover{background:var(--surface-sunken);color:var(--text-strong)}

.u-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--label-size);letter-spacing:.1em;text-transform:uppercase;font-weight:var(--weight-medium);padding:5px 8px;border-radius:var(--radius-xs);border:var(--border-width) solid transparent;line-height:1}
.u-badge--accent{background:var(--accent-quiet);color:var(--text-accent)}
.u-badge__dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}
.u-badge--ok{background:color-mix(in srgb,var(--status-ok) 14%,transparent);color:var(--status-ok)}

.u-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--body-sm-size);color:var(--text-body);background:var(--surface-sunken);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-full);padding:5px 12px}

.u-card{background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);transition:var(--transition-control);padding:var(--space-6)}
.u-card--lg{padding:var(--space-8)}
.u-card--interactive{cursor:default}
.u-card--interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.u-card--accent{border-color:var(--border-accent);box-shadow:var(--glow-accent)}

.u-field{display:flex;flex-direction:column;gap:6px}
.u-field__label{font-size:var(--body-sm-size);font-weight:var(--weight-medium);color:var(--text-strong)}
.u-field__hint{font-size:var(--caption-size);color:var(--text-muted)}
.u-field__req{color:var(--status-error)}
.u-input,.u-select,textarea.u-input{width:100%;height:40px;padding:0 var(--space-3);font-family:var(--font-sans);font-size:var(--body-sm-size);color:var(--text-strong);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);transition:var(--transition-control)}
.u-input::placeholder{color:var(--text-faint)}
.u-input:hover,.u-select:hover{border-color:var(--border-strong)}
.u-input:focus,.u-select:focus{outline:none;border-color:var(--border-accent);box-shadow:var(--ring-focus)}
textarea.u-input{height:auto;padding:var(--space-3);line-height:1.55;resize:vertical}
.u-select{appearance:none;cursor:pointer;padding-right:var(--space-8);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.u-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--body-sm-size);color:var(--text-body)}
.u-check input{position:absolute;opacity:0;width:0;height:0}
.u-check__box{flex:none;width:18px;height:18px;margin-top:1px;border:var(--border-width-thick) solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:grid;place-items:center;transition:var(--transition-control)}
.u-check:hover .u-check__box{border-color:var(--accent)}
.u-check input:checked+.u-check__box{background:var(--accent);border-color:var(--accent)}
.u-check__tick{width:10px;height:10px;color:var(--accent-on);opacity:0;transition:opacity var(--dur-fast) var(--ease-standard)}
.u-check input:checked+.u-check__box .u-check__tick{opacity:1}

.u-callout{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:var(--border-width) solid transparent;font-size:var(--body-sm-size);line-height:1.55}
.u-callout__icon{flex:none;margin-top:1px}
.u-callout__title{display:block;font-weight:var(--weight-semibold);color:var(--text-strong);margin-bottom:3px}
.u-callout--accent{background:var(--accent-quiet);color:var(--text-accent)}

.u-spec__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);padding:var(--space-3) 0;border-bottom:var(--border-width) solid var(--border-subtle)}
.u-spec__row:last-child{border-bottom:0}
.u-spec__label{font-size:var(--body-sm-size);color:var(--text-muted)}
.u-spec__value{font-family:var(--font-mono);font-size:var(--mono-size);letter-spacing:var(--mono-ls);color:var(--text-strong);text-align:right}

.u-logo{display:inline-flex;align-items:center;gap:.5em;color:var(--text-strong);text-decoration:none}
.u-logo:hover{text-decoration:none}
.u-logo__word{font-family:var(--font-sans);font-weight:var(--weight-semibold);letter-spacing:-.045em;line-height:1;font-size:23px}
.u-logo__mark{flex:none;color:var(--accent)}

.u-toast{position:fixed;right:28px;bottom:28px;z-index:80;display:flex;align-items:flex-start;gap:var(--space-3);background:var(--gray-950);color:var(--gray-100);border:var(--border-width) solid var(--gray-800);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-4);font-size:var(--body-sm-size);min-width:260px;max-width:380px;transform:translateY(12px);opacity:0;pointer-events:none;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out)}
.u-toast.is-visible{transform:translateY(0);opacity:1}
.u-toast__title{font-weight:var(--weight-semibold);color:var(--gray-0);display:block;margin-bottom:2px}
.u-toast__accent{color:var(--cyan-400);flex:none;margin-top:1px}

/* ---------- layout shell ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-lg)}
.narrow{max-width:var(--container-narrow)}
section{padding:var(--section-y) 0}
.section-tight{padding:72px 0}
.hairline-top{border-top:1px solid var(--border-subtle)}
.hairline-bottom{border-bottom:1px solid var(--border-subtle)}
.sunken{background:var(--surface-sunken)}

header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
header.site .bar{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-lg);height:68px;display:flex;align-items:center;gap:var(--space-10)}
header.site nav{display:flex;gap:var(--space-7);margin-left:auto}
header.site nav a{font-size:14px;font-weight:500;color:var(--text-muted);text-decoration:none}
header.site nav a:hover{color:var(--text-strong);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border-default);border-radius:var(--radius-sm);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer}

.eyebrow-accent{color:var(--accent)}
h2.section-title{font-size:var(--display-3-size);line-height:var(--display-3-lh);letter-spacing:var(--display-3-ls);font-weight:600;margin-top:14px;max-width:18ch}
p.section-lead{font-size:var(--body-lg-size);line-height:var(--body-lg-lh);color:var(--text-muted);margin-top:16px;max-width:62ch}

/* hero */
.hero{background:var(--gray-950);color:var(--text-body)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-16);align-items:center}
.hero h1{font-size:var(--display-1-size);line-height:var(--display-1-lh);letter-spacing:var(--display-1-ls);font-weight:600;margin-top:22px}
.hero p.lead{font-size:var(--body-lg-size);line-height:var(--body-lg-lh);color:var(--text-muted);margin-top:22px;max-width:46ch}
.hero .ctas{display:flex;gap:var(--space-3);margin-top:34px;flex-wrap:wrap}
.hero .tags{display:flex;gap:var(--space-3);margin-top:40px;flex-wrap:wrap}

.drive-array{background:var(--gray-900);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-lg)}
.drive-array .head{display:flex;justify-content:space-between;align-items:center}
.drive-array .bays{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:18px}
.drive-array .bay{height:108px;background:var(--gray-950);border:1px solid var(--border-default);border-radius:3px;display:flex;align-items:flex-end;overflow:hidden}
.drive-array .bay > span{width:100%;display:block;background:var(--cyan-400)}
.drive-array .bay.warn > span{background:var(--status-warn);opacity:.85}
.drive-array .foot{display:flex;gap:28px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-subtle);flex-wrap:wrap}
.drive-array .foot .k{font-size:10px}
.drive-array .foot .v{margin-top:4px;color:var(--text-strong)}

/* figures strip */
.figures{border-bottom:1px solid var(--border-subtle)}
.figures .container{padding:36px var(--gutter-lg);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}
.figures .val{font-family:var(--font-mono);font-size:28px;letter-spacing:-.02em;color:var(--text-strong)}
.figures .lbl{font-size:13px;color:var(--text-muted);margin-top:6px}

/* grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.grid-3-loose{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16)}

.service-card h3{font-size:var(--h3-size);letter-spacing:var(--h3-ls);font-weight:600;margin-top:16px}
.service-card p{font-size:14px;line-height:1.55;color:var(--text-muted);margin-top:10px}
.service-card svg{color:var(--accent)}

/* pain cards */
.pain-card{display:flex;flex-direction:column;gap:12px}
.pain-card .icon-wrap{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--accent-quiet);display:flex;align-items:center;justify-content:center;color:var(--text-accent)}
.pain-card h3{font-size:var(--h3-size);letter-spacing:var(--h3-ls);font-weight:600}
.pain-card p{font-size:14px;line-height:1.6;color:var(--text-muted)}
.pain-card .stat{font-family:var(--font-mono);font-size:12px;color:var(--text-accent);margin-top:auto;padding-top:12px;border-top:1px solid var(--border-subtle)}
.pain-stat-strip{display:flex;gap:var(--space-8);flex-wrap:wrap;padding:20px 0;margin-top:8px}

.photo-slot{border-radius:var(--radius-md);background:var(--surface-sunken);border:1px dashed var(--border-strong);display:grid;place-items:center;height:200px}
.photo-slot span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}

.step{padding-top:20px;border-top:2px solid var(--accent)}
.step .num{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.step h3{font-size:var(--h3-size);font-weight:600;letter-spacing:var(--h3-ls);margin-top:10px}
.step p{font-size:14px;line-height:1.55;color:var(--text-muted);margin-top:8px}

/* audit form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.form-grid .span-2{grid-column:1/-1}

/* cta band */
.cta-band{background:var(--gray-950);text-align:center}
.cta-band h2{font-size:var(--display-2-size);line-height:var(--display-2-lh);letter-spacing:var(--display-2-ls);font-weight:600}
.cta-band p{font-size:var(--body-lg-size);color:var(--text-muted);margin-top:18px}
.cta-band .ctas{display:flex;gap:var(--space-3);justify-content:center;margin-top:32px;flex-wrap:wrap}

/* footer */
footer.site{background:var(--gray-950);color:var(--text-body);padding:64px 0 40px}
footer.site .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-10)}
footer.site .brand p{font-size:14px;color:var(--text-muted);margin-top:14px;max-width:260px}
footer.site .col a{display:block;font-size:14px;color:var(--text-body);text-decoration:none;margin-top:10px}
footer.site .col a:first-of-type{margin-top:14px}
footer.site .bottom{max-width:var(--container-max);margin:48px auto 0;padding:20px var(--gutter-lg) 0;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between}
footer.site .bottom span{font-size:12px;color:var(--text-faint)}

[data-reveal]{opacity:0;transform:translateY(8px);transition:opacity var(--dur-slower) var(--ease-out),transform var(--dur-slower) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .grid{grid-template-columns:1fr}
  .hero .drive-array{order:-1}
  .figures .container{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
  .grid-3,.grid-3-loose,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr;gap:var(--space-10)}
  footer.site .grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:auto}
}
@media (max-width:680px){
  .container{padding:0 var(--space-5)}
  header.site .bar{padding:0 var(--space-5)}
  header.site nav{display:none}
  .nav-toggle{display:flex}
  header.site.nav-open nav{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--gray-0);flex-direction:column;padding:var(--space-5);border-bottom:1px solid var(--border-subtle);gap:var(--space-4)}
  .hero{padding-top:64px}
  .hero h1{font-size:44px}
  .figures .container{grid-template-columns:1fr 1fr}
  .grid-3,.grid-3-loose,.grid-4{grid-template-columns:1fr}
  footer.site .grid{grid-template-columns:1fr}
  footer.site .bottom{flex-direction:column;gap:8px}
  .cta-band h2{font-size:36px}
}