/* HORA design system. Tokens come from brand/tokens.css; everything else builds on them. See ../DESIGN.md. */
:root {
  --hora-ground:#F2F5F2; --hora-surface:#FFFFFF; --hora-surface-2:#E9EEEA; --hora-line:#D7DFDA;
  --hora-ink:#10201B; --hora-muted:#5B6A64;
  --hora-brand:#1E6B51; --hora-brand-deep:#0F3A2F; --hora-brand-soft:#DCEEE4;
  --hora-accent:#D99B2B; --hora-accent-soft:#F7E7BE;
  --e-production:#D99B2B; --e-consumption:#3C6DA3; --e-grid:#6B7772; --e-storage:#2B8A8F; --e-shared:#1E6B51; --e-alert:#B8452C; --e-ok:#2F8F5B;
  /* readable secondary for a 50+ reader: 7:1 and above, not the brand's 5.6:1 muted */
  --text-2:#3A4A44;
  --hairline:#C3CEC8;
  --primary-bg:#0F3A2F; --primary-ink:#F2F5F2; --primary-bg-h:#14493B;
  --draw-ink:#10201B; --draw-accent:#B9801B; --draw-fir:#1E6B51;
  --font-display:"Archivo","Source Sans 3","Segoe UI",system-ui,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-control:6px; --r-surface:12px; --r-pill:999px;
  /* the cinematic ground, the same in every theme */
  --deep:#0B1714; --deep-2:#102420; --deep-3:#0F3A2F; --deep-line:#2A4A42; --deep-ink:#E7EEEA; --deep-text-2:#BCCAC3; --deep-gold:#E6B04A;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.23,1,.32,1); --ease-move:cubic-bezier(.77,0,.175,1);
  /* fluid type, body never under 18 px */
  --t-mono:.875rem;      /* 14 px, the floor for labels */
  --t-small:1.0625rem;   /* 17 px, footnotes that must still be read */
  --t-body:clamp(1.125rem,1.08rem + .2vw,1.25rem);
  --t-lead:clamp(1.25rem,1.14rem + .5vw,1.5rem);
  --t-h3:clamp(1.375rem,1.22rem + .7vw,1.875rem);
  --t-h2:clamp(2.125rem,1.55rem + 2.5vw,3.875rem);
  --t-h1:clamp(2.45rem,1.45rem + 4.05vw,5.25rem);
  --t-display:clamp(3rem,1.3rem + 7.2vw,6rem);
  --gutter:clamp(20px,4.4vw,64px);
  --max:1320px; --measure:62ch;
  --header-h:72px;
  --space-section:clamp(88px,11vw,176px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hora-ground:#0B1714; --hora-surface:#122320; --hora-surface-2:#182E29; --hora-line:#24403A;
    --hora-ink:#E7EEEA; --hora-muted:#9AAAA3;
    --hora-brand:#4FB08C; --hora-brand-deep:#DCEEE4; --hora-brand-soft:#173B31;
    --hora-accent:#E6B04A; --hora-accent-soft:#3A2E12;
    --e-production:#E6B04A; --e-consumption:#6F9BD1; --e-grid:#93A09A; --e-storage:#4FB4B9; --e-shared:#4FB08C; --e-alert:#E07A5F; --e-ok:#5CC28A;
    --text-2:#BCCAC3; --hairline:#2F4C45;
    --primary-bg:#E6B04A; --primary-ink:#10201B; --primary-bg-h:#EDBE60;
    --draw-ink:#DCE6E1; --draw-accent:#E6B04A; --draw-fir:#4FB08C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --hora-ground:#0B1714; --hora-surface:#122320; --hora-surface-2:#182E29; --hora-line:#24403A;
  --hora-ink:#E7EEEA; --hora-muted:#9AAAA3;
  --hora-brand:#4FB08C; --hora-brand-deep:#DCEEE4; --hora-brand-soft:#173B31;
  --hora-accent:#E6B04A; --hora-accent-soft:#3A2E12;
  --e-production:#E6B04A; --e-consumption:#6F9BD1; --e-grid:#93A09A; --e-storage:#4FB4B9; --e-shared:#4FB08C; --e-alert:#E07A5F; --e-ok:#5CC28A;
  --text-2:#BCCAC3; --hairline:#2F4C45;
  --primary-bg:#E6B04A; --primary-ink:#10201B; --primary-bg-h:#EDBE60;
  --draw-ink:#DCE6E1; --draw-accent:#E6B04A; --draw-fir:#4FB08C;
  color-scheme:dark;
}
/* .deep: the always-dark ground. Any block can wear it, in any theme. */
.deep {
  --hora-ground:var(--deep); --hora-surface:var(--deep-2); --hora-surface-2:#182E29; --hora-line:var(--deep-line);
  --hora-ink:var(--deep-ink); --hora-muted:#9AAAA3; --text-2:var(--deep-text-2); --hairline:#2F4C45;
  --hora-brand:#4FB08C; --hora-brand-soft:#173B31; --hora-accent:var(--deep-gold);
  --e-production:#E6B04A; --e-consumption:#6F9BD1; --e-grid:#93A09A; --e-storage:#4FB4B9; --e-shared:#4FB08C; --e-alert:#E07A5F;
  --primary-bg:#E6B04A; --primary-ink:#10201B; --primary-bg-h:#EDBE60;
  --draw-ink:#DCE6E1; --draw-accent:#E6B04A; --draw-fir:#4FB08C;
  color-scheme:dark;
  color:var(--hora-ink); background:var(--deep);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); overflow-x:clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--hora-ground); color:var(--hora-ink); font-family:var(--font-body); font-size:var(--t-body); line-height:1.55; overflow-x:clip; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; font-feature-settings:"kern","liga"; }
img,svg,canvas { display:block; max-width:100%; }
::selection { background:var(--hora-accent); color:#10201B; }
:focus-visible { outline:3px solid var(--hora-accent); outline-offset:3px; border-radius:2px; }
.deep :focus-visible { outline-color:#F3CE80; }
a { color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px; }
h1,h2,h3 { font-family:var(--font-display); font-weight:750; font-stretch:108%; margin:0; text-wrap:balance; color:var(--hora-ink); }
h1 { font-size:var(--t-h1); line-height:1.02; letter-spacing:-.028em; }
h2 { font-size:var(--t-h2); line-height:1.05; letter-spacing:-.025em; }
h3 { font-size:var(--t-h3); line-height:1.18; letter-spacing:-.012em; font-weight:700; font-stretch:106%; }
p { margin:0; max-width:var(--measure); text-wrap:pretty; }
.t-display { font-family:var(--font-display); font-size:var(--t-display); font-weight:800; font-stretch:112%; line-height:.98; letter-spacing:-.035em; }
.t-lead { font-size:var(--t-lead); line-height:1.42; color:var(--text-2); }
.t-2 { color:var(--text-2); }
.t-small { font-size:var(--t-small); line-height:1.5; color:var(--text-2); }
.t-num { font-variant-numeric:tabular-nums lining-nums; }
.t-mono { font-family:var(--font-data); font-size:var(--t-mono); line-height:1.35; letter-spacing:.005em; color:var(--text-2); }

.wrap { width:100%; max-width:calc(var(--max) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.band { position:relative; z-index:1; padding-block:var(--space-section); background:var(--hora-ground); }
.band--surface { background:var(--hora-surface); }
.band--tint { background:var(--hora-surface-2); }
.grid-12 { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(16px,2.2vw,32px); }
@media (max-width:860px) { .grid-12 { display:block; } }
.stack > * + * { margin-top:var(--stack,1.1em); }

.skip { position:fixed; left:12px; top:-80px; z-index:200; padding:12px 18px; background:var(--deep-gold); color:#10201B; font-weight:600; border-radius:var(--r-control); transition:top 120ms ease-out; }
.skip:focus { top:12px; }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:52px; padding:.65em 1.35em; border:1px solid transparent; border-radius:var(--r-control); background:var(--primary-bg); color:var(--primary-ink); font-family:var(--font-body); font-size:1.125rem; font-weight:600; line-height:1.15; text-decoration:none; cursor:pointer; transition:background-color 150ms ease,transform 140ms var(--ease-std),box-shadow 150ms ease; box-shadow:0 1px 1px rgb(0 0 0/.14),0 8px 24px -14px rgb(0 0 0/.5); }
.btn:active { transform:scale(.97); }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }
@media (hover:hover) and (pointer:fine) { .btn:hover { background:var(--primary-bg-h); } }
.btn--quiet { background:transparent; color:inherit; border-color:currentColor; box-shadow:none; }
@media (hover:hover) and (pointer:fine) { .btn--quiet:hover { background:color-mix(in srgb,currentColor 9%,transparent); } }
.btn--sm { min-height:44px; padding:.45em 1em; font-size:1.0625rem; }
.link { display:inline-flex; align-items:center; gap:.5em; min-height:44px; color:inherit; font-weight:600; text-decoration:underline; text-decoration-color:var(--hora-accent); text-decoration-thickness:2px; text-underline-offset:.3em; }
.link svg { width:1.1em; height:1.1em; flex:none; }
@media (hover:hover) and (pointer:fine) { .link { transition:text-decoration-thickness 120ms ease; } .link:hover { text-decoration-thickness:3px; } }

/* the honest tag: every simulated figure carries it */
.exemplu { display:inline-block; font-family:var(--font-data); font-size:var(--t-mono); line-height:1.3; padding:.12em .55em; border-radius:4px; border:1px solid currentColor; color:var(--text-2); white-space:nowrap; vertical-align:.08em; }

/* ---------- header. Always on the dark ground, in every theme: one serious bar, words only ---------- */
.site-head { position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:80; background:var(--deep); color:var(--deep-ink); border-bottom:1px solid #1E3932; }
.site-head__in { height:100%; display:flex; align-items:center; gap:clamp(12px,1.8vw,28px); max-width:calc(var(--max) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.brandlink { display:inline-flex; align-items:center; gap:.5em; min-height:44px; text-decoration:none; color:var(--deep-ink); font-family:var(--font-display); font-weight:700; font-stretch:108%; font-size:1.5rem; letter-spacing:-.03em; }
.brandlink img { width:34px; height:34px; }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:clamp(2px,.9vw,14px); }
.site-nav a,.site-nav button.navbtn { display:inline-flex; align-items:center; min-height:44px; padding:.2em .55em; color:var(--deep-ink); text-decoration:none; font-size:1.0625rem; font-weight:500; background:none; border:0; border-radius:4px; font-family:inherit; cursor:pointer; white-space:nowrap; }
@media (hover:hover) and (pointer:fine) { .site-nav a:hover,.site-nav button.navbtn:hover { text-decoration:underline; text-decoration-color:var(--deep-gold); text-decoration-thickness:2px; text-underline-offset:.35em; } }
.site-nav a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--deep-gold); text-decoration-thickness:2px; text-underline-offset:.35em; }
.site-head .btn { --primary-bg:#E6B04A; --primary-ink:#10201B; --primary-bg-h:#EDBE60; white-space:nowrap; flex:none; }
.menu-btn { display:none; min-height:44px; padding:.3em .8em; margin-left:auto; background:transparent; border:1px solid #4A6A61; border-radius:var(--r-control); color:var(--deep-ink); font:600 1.0625rem var(--font-body); cursor:pointer; }
.cta-short { display:none; }
@media (max-width:1180px) {
  :root { --header-h:64px; }
  .menu-btn { display:inline-flex; align-items:center; }
  .site-nav { position:fixed; inset:var(--header-h) 0 auto 0; margin:0; flex-direction:column; align-items:stretch; gap:0; padding:12px var(--gutter) 28px; background:var(--deep); border-bottom:1px solid #1E3932; max-height:calc(100dvh - var(--header-h)); overflow:auto; overscroll-behavior:contain; display:none; }
  .site-nav.is-open { display:flex; }
  .site-nav a,.site-nav button.navbtn { min-height:54px; font-size:1.3125rem; padding-inline:0; border-bottom:1px solid #1E3932; width:100%; text-align:left; }
}
@media (max-width:430px) {
  .cta-long { display:none; } .cta-short { display:inline; }
  .brandlink { font-size:1.3125rem; } .brandlink img { width:30px; height:30px; }
  .site-head .btn { padding-inline:.8em; }
  .site-head__in { gap:8px; }
  .menu-btn { padding-inline:.65em; }
}
main { padding-top:0; display:block; }
.page-offset { padding-top:var(--header-h); }

/* ---------- pause control ---------- */
.pause-ctl { position:fixed; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); z-index:70; min-height:44px; padding:.35em .9em; display:none; align-items:center; gap:.5em; background:var(--deep); color:var(--deep-ink); border:1px solid #4A6A61; border-radius:var(--r-control); font:500 1rem var(--font-body); cursor:pointer; }
.pause-ctl.is-on { display:inline-flex; }
.pause-ctl svg { width:12px; height:12px; flex:none; }

/* ---------- hairline index, the editorial list used instead of cards ---------- */
.hair { list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.hair > li { border-bottom:1px solid var(--hairline); padding-block:clamp(18px,2vw,28px); }
.hair-row { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:8px clamp(20px,3vw,48px); align-items:baseline; }
@media (max-width:760px) { .hair-row { grid-template-columns:minmax(0,1fr); } }
.hair a.hair-row { text-decoration:none; }

/* ---------- forms ---------- */
.field { display:block; }
.field > label,.field-label { display:block; font-weight:600; margin-bottom:.3em; line-height:1.3; }
.field .hint { display:block; font-size:var(--t-small); color:var(--text-2); margin-top:.25em; line-height:1.35; }
.input { width:100%; min-height:52px; padding:.5em .75em; font:inherit; font-size:max(1.125rem,16px); background:var(--hora-surface); color:var(--hora-ink); border:1px solid #6F8079; border-radius:var(--r-control); transition:border-color 120ms ease,box-shadow 120ms ease; font-variant-numeric:tabular-nums; }
.deep .input { background:#0E1E1A; border-color:#577269; }
.input:focus-visible { outline:none; border-color:var(--hora-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--hora-accent) 45%,transparent); }
.input[aria-invalid="true"] { border-color:var(--e-alert); box-shadow:0 0 0 1px var(--e-alert); }
.input::placeholder { color:color-mix(in srgb,var(--hora-ink) 62%,transparent); }
.err { display:none; color:var(--e-alert); font-weight:600; font-size:var(--t-small); margin-top:.3em; line-height:1.35; }
.deep .err { color:#F19A82; }
.err.is-on { display:block; }
.form-status { min-height:1.4em; font-weight:600; margin-top:.8em; }

/* ---------- reveal helpers (JS only ever hides after GSAP is confirmed) ---------- */
.line-mask { display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.line-mask > span { display:block; }
[data-lines] { font-kerning:normal; }

/* ---------- drawings. Stroke styling for inlined drawings; <use> inherits the vars ---------- */
.draw { color:var(--draw-ink); overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.draw .i { stroke:var(--draw-ink); stroke-width:1.1; }
.draw .g { stroke:var(--draw-accent); stroke-width:1.1; }
.draw .h { stroke:var(--draw-ink); stroke-width:.5; stroke-opacity:.6; }
.draw .f { stroke:var(--draw-fir); stroke-width:1.1; }

/* comb-and-dot border: the footer's seam, also usable between sections */
.comb-border { display:block; width:100%; height:26px; color:var(--draw-accent); background-repeat:repeat-x; background-position:left center; }

/* ---------- footer ---------- */
.site-foot { position:relative; z-index:1; background:var(--deep); color:var(--deep-ink); padding-block:0 40px; --text-2:var(--deep-text-2); }
.site-foot svg.seam { display:block; width:100%; height:28px; }
.site-foot__in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); gap:32px clamp(24px,4vw,64px); padding-top:clamp(40px,5vw,64px); }
.site-foot h2 { font-size:var(--t-h3); font-weight:700; }
.site-foot nav ul { list-style:none; margin:0; padding:0; }
.site-foot nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
@media (hover:hover) and (pointer:fine) { .site-foot nav a:hover { text-decoration:underline; text-decoration-color:var(--deep-gold); text-underline-offset:.3em; } }
.site-foot .legal { margin-top:clamp(28px,4vw,48px); padding-top:20px; border-top:1px solid #2A4A42; font-size:var(--t-small); color:var(--deep-text-2); display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between; }
.site-foot .legal p { max-width:78ch; }
@media (max-width:860px) { .site-foot__in { grid-template-columns:minmax(0,1fr); } }
.theme-btn { min-height:44px; padding:.3em .8em; background:transparent; border:1px solid #4A6A61; border-radius:var(--r-control); color:var(--deep-ink); font:500 1rem var(--font-body); cursor:pointer; }

/* contact form block, shared by every page */
.contact-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px clamp(16px,2vw,24px); }
.contact-form .full { grid-column:1/-1; }
@media (max-width:640px) { .contact-form { grid-template-columns:minmax(0,1fr); } }

@media print { .site-head,.pause-ctl,#gl { display:none !important; } }
@media (forced-colors: active) { .btn { border-color:ButtonText; } }