/* HUBRU factory site — instance-agnostic stylesheet.
   Mobile-first (min-width breakpoints ONLY). All colors via custom properties;
   --bg/--text/--accent/--accent-2/--bg-term are injected per-instance inline.
   Implements contract §3.4 effects 1–10 + §3.5 terminal mode + RTL. */

/* ----- derived tokens (instance vars come from the inline <style>) ----- */
:root{
  --maxw: 1120px;
  --gutter: clamp(1.1rem, 5vw, 3rem);
  --radius: 18px;
  --radius-sm: 12px;
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));
  --muted: color-mix(in srgb, var(--text) 58%, transparent);
  --hairline: color-mix(in srgb, var(--text) 14%, transparent);
  --glass-bg: color-mix(in srgb, var(--text) 5%, transparent);
  --glass-border: color-mix(in srgb, var(--text) 12%, transparent);
  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --ease: cubic-bezier(.22,.61,.36,1);
}
html[data-theme="light"]{
  --bg:#F6F6FB; --text:#0C0C16;
  --glass-bg: color-mix(in srgb, #0c0c16 4%, transparent);
  --glass-border: color-mix(in srgb, #0c0c16 12%, transparent);
}

/* ----- reset / base ----- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.55;
  font-size:clamp(1rem, .96rem + .3vw, 1.075rem);
  overflow-x:hidden;                 /* never horizontal-scroll */
  transition:background-color .4s var(--ease), color .4s var(--ease); /* effect 9 */
  opacity:1;
}
body.leaving{ opacity:0; transition:opacity .2s ease; } /* effect 7: lang fade-out */
h1,h2,h3{ font-family:var(--font-display); line-height:1.08; font-weight:700; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
.icon{ width:1.25em; height:1.25em; }
.icon--flip{ transform:scaleX(-1); }
[dir="rtl"] .icon--flip{ transform:none; }

.skip{
  position:absolute; left:-999px; top:.5rem; z-index:100;
  background:var(--accent); color:#fff; padding:.6rem 1rem; border-radius:10px;
}
.skip:focus{ left:.75rem; }

/* ----- effect 10: scroll progress ----- */
.scroll-progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:100%;
  background:var(--grad); transform:scaleX(0); transform-origin:0 50%;
  z-index:60; pointer-events:none;
}
[dir="rtl"] .scroll-progress{ transform-origin:100% 50%; }

/* ----- effect 4: floating geometric shapes ----- */
.shapes{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.shape{ position:absolute; opacity:.10; fill:none; stroke:var(--accent);
  stroke-width:1.4; filter:blur(.3px); }
.shape polygon,.shape rect,.shape circle{ fill:color-mix(in srgb,var(--accent) 12%,transparent); }
.shape--1{ width:42vw; max-width:340px; inset-block-start:8%; inset-inline-end:-6%;
  animation:spin 60s linear infinite, pulse 9s ease-in-out infinite; }
.shape--2{ width:30vw; max-width:240px; inset-block-start:55%; inset-inline-start:-8%;
  animation:spin 80s linear infinite reverse, pulse 11s ease-in-out infinite; }
.shape--3{ width:24vw; max-width:200px; inset-block-end:6%; inset-inline-end:12%;
  animation:spin 100s linear infinite, pulse 13s ease-in-out infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ opacity:.06; } 50%{ opacity:.16; } }

/* ----- layout ----- */
.surface{ position:relative; z-index:1; }
.surface--human{ transition:opacity .35s var(--ease), transform .35s var(--ease); }
.section{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(3.2rem,9vw,6rem); }
.section__h{ font-size:clamp(1.6rem,1.2rem + 2.6vw,2.6rem); letter-spacing:-.02em; }
.section__lead{ color:var(--muted); max-width:60ch; margin-top:1rem;
  font-size:clamp(1.02rem,1rem + .4vw,1.2rem); }

/* ----- header ----- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.75rem;
  padding:.7rem var(--gutter); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid var(--hairline);
}
.brand{ font-family:var(--font-mono); font-weight:500; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav{ display:none; gap:1.25rem; margin-inline-start:1rem; }
.nav a{ position:relative; color:var(--muted); font-weight:500; padding-block:.25rem; }
.nav a::after{ content:""; position:absolute; inset-inline:0; inset-block-end:-2px; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease); } /* effect 6: underline morph */
.nav a:hover{ color:var(--text); } .nav a:hover::after{ transform:scaleX(1); }
.controls{ margin-inline-start:auto; display:flex; align-items:center; gap:.4rem; }

.iconbtn,.modebtn{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text);
  border-radius:12px; padding:.5rem .6rem; min-height:44px; min-width:44px; justify-content:center;
  font:inherit; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.iconbtn:hover,.modebtn:hover{ transform:translateY(-1px); border-color:var(--accent); box-shadow:0 6px 22px -10px var(--glow); }
.modebtn{ font-family:var(--font-mono); font-size:.82rem; }
.modebtn span{ display:none; }
.lang__cur{ font-family:var(--font-mono); font-size:.8rem; }
.icon--moon{ display:none; } html[data-theme="light"] .icon--sun{ display:none; }
html[data-theme="light"] .icon--moon{ display:block; }

/* language dropdown */
.lang{ position:relative; }
.lang__list{
  position:absolute; inset-inline-end:0; inset-block-start:calc(100% + .4rem); margin:0; padding:.35rem;
  list-style:none; min-width:170px; border-radius:14px; z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent); border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s,transform .2s,visibility .2s;
  max-height:60vh; overflow:auto;
}
.lang[data-open="1"] .lang__list{ opacity:1; visibility:visible; transform:none; }
.lang__list a{ display:block; padding:.55rem .7rem; border-radius:9px; color:var(--muted); }
.lang__list a:hover{ background:var(--glass-bg); color:var(--text); }
.lang__list a[aria-current="true"]{ color:var(--accent); }

/* ----- effect 1: animated gradient-mesh hero ----- */
.hero{ position:relative; min-height:clamp(560px, 92svh, 860px); display:flex; align-items:center;
  padding:5.5rem var(--gutter) 3rem; overflow:hidden; }
.hero__mesh{ position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(8px);
  background:
    radial-gradient(40% 55% at 18% 28%, color-mix(in srgb,var(--accent) 70%,transparent), transparent 70%),
    radial-gradient(38% 50% at 82% 22%, color-mix(in srgb,var(--accent-2) 65%,transparent), transparent 70%),
    radial-gradient(50% 60% at 60% 88%, color-mix(in srgb,var(--accent) 45%,transparent), transparent 72%),
    conic-gradient(from 120deg at 50% 50%, color-mix(in srgb,var(--accent) 30%,transparent), color-mix(in srgb,var(--accent-2) 30%,transparent), color-mix(in srgb,var(--accent) 30%,transparent));
  opacity:.55; animation:mesh 18s ease-in-out infinite alternate; }
@keyframes mesh{ 0%{ transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg); }
  100%{ transform:translate3d(3%,2%,0) scale(1.12) rotate(8deg); } }
.hero__inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; width:100%; }
.hero__headline{ font-size:clamp(2.3rem, 1.4rem + 6.5vw, 5rem); letter-spacing:-.03em; max-width:16ch; }
.hero__sub{ margin-top:1.1rem; color:var(--muted); max-width:46ch;
  font-size:clamp(1.05rem,1rem + .8vw,1.45rem); }

/* ----- buttons (effect 6 hover) ----- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font:inherit; font-weight:600;
  border-radius:14px; padding:.9rem 1.3rem; min-height:48px; border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s; }
.btn--primary{ color:#fff; background:var(--grad); box-shadow:0 10px 30px -12px var(--glow); margin-top:1.8rem; }
.btn--primary:hover{ transform:scale(1.03); box-shadow:0 16px 40px -12px var(--glow); filter:saturate(1.1); }
.btn--ghost{ background:var(--glass-bg); border-color:var(--glass-border); color:var(--text); }
.btn--ghost:hover{ transform:translateY(-1px); border-color:var(--accent); }

/* ----- effect 2: glassmorphism cards ----- */
.cards{ display:grid; gap:1rem; margin-top:2rem; grid-template-columns:1fr; }
.glass{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 40px -24px rgba(0,0,0,.55); }
.card{ padding:1.4rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 55%,var(--glass-border));
  box-shadow:0 24px 60px -28px var(--glow); } /* effect 6 */
.card__icon{ display:inline-flex; padding:.6rem; border-radius:12px; background:var(--glass-bg);
  color:var(--accent); border:1px solid var(--glass-border); }
.card__icon .icon{ width:1.5em; height:1.5em; }
.card__t{ margin-top:.9rem; font-size:1.2rem; }
.card__c{ margin-top:.5rem; color:var(--muted); }

.instance__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.instance__domain{ display:inline-block; margin-top:.3rem; font-family:var(--font-mono); font-size:.85rem;
  color:var(--accent-2); }
.instance__domain:hover{ text-decoration:underline; }
.pill{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.25rem .55rem; border-radius:999px; border:1px solid var(--glass-border); white-space:nowrap; }
.pill--live{ color:#08120e; background:var(--accent-2); }
.pill--building{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,transparent); }

/* approach pillars */
.pillars{ display:grid; gap:1.4rem; margin-top:2rem; grid-template-columns:1fr; }
.pillar{ padding-inline-start:1rem; border-inline-start:2px solid color-mix(in srgb,var(--accent) 60%,transparent); }
.pillar__icon{ color:var(--accent); display:inline-flex; }
.pillar__t{ margin-top:.4rem; font-size:1.2rem; }
.pillar__c{ margin-top:.4rem; color:var(--muted); max-width:46ch; }

/* connect */
.section--connect .section__lead{ margin-bottom:1.4rem; }
.form{ display:grid; gap:.85rem; padding:1.4rem; max-width:560px; }
.field{ display:grid; gap:.35rem; }
.field span{ font-size:.82rem; color:var(--muted); }
.field input,.field textarea{ font:inherit; color:var(--text); background:color-mix(in srgb,var(--bg) 60%,transparent);
  border:1px solid var(--glass-border); border-radius:12px; padding:.7rem .8rem; min-height:44px; }
.field textarea{ resize:vertical; }
.field input:focus,.field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form__direct{ font-family:var(--font-mono); font-size:.85rem; color:var(--accent-2); text-align:center; }
.agent-callout{ margin-top:1.4rem; font-family:var(--font-mono); font-size:.9rem; color:var(--muted); }

.footer{ max-width:var(--maxw); margin-inline:auto; padding:2.4rem var(--gutter) 3.4rem;
  border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; gap:.8rem 1.2rem;
  align-items:center; justify-content:space-between; color:var(--muted); font-size:.88rem; }
.footer__links{ display:inline-flex; gap:.6rem; align-items:center; }
.footer__links a:hover{ color:var(--accent); }

/* ----- effect 3: scroll reveals (no CLS: opacity+transform only) ----- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms); }
.reveal.in{ opacity:1; transform:none; }

/* ----- effect 5: mode crossfade (marketing page only) ----- */
.surface--agent{ position:fixed; inset:0; z-index:30; overflow:auto; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  background:var(--bg-term); padding:1.2rem var(--gutter) 4rem; }
html[data-view="agent"] .surface--human{ opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none; }
html[data-view="agent"] .surface--agent{ opacity:1; visibility:visible; transform:none; }
html[data-view="agent"] .shapes,html[data-view="agent"] .scroll-progress{ display:none; }
.agent-back{ max-width:var(--maxw); margin:0 auto .8rem; }

/* ----- §3.5 terminal / architectural mode ----- */
.terminal{ max-width:880px; margin-inline:auto; font-family:var(--font-mono);
  background:var(--bg-term); color:#cdd3e0; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:14px; padding:clamp(1.1rem,4vw,2rem); font-size:.92rem; }
.t-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.t-title{ font-family:var(--font-mono); font-size:clamp(.95rem,.8rem + 1vw,1.25rem); letter-spacing:.04em;
  text-transform:uppercase; color:#fff; max-width:30ch; }
.t-copy{ flex:none; cursor:pointer; font:inherit; font-size:.78rem; color:var(--accent-2);
  background:color-mix(in srgb,var(--accent-2) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent); border-radius:9px;
  padding:.45rem .7rem; min-height:40px; }
.t-copy__done{ display:none; } .t-copy.done .t-copy__idle{ display:none; } .t-copy.done .t-copy__done{ display:inline; }
.t-rule{ height:1px; background:color-mix(in srgb,var(--accent) 30%,transparent); margin:1rem 0 1.3rem; }
.t-block{ margin-bottom:1.3rem; }
.t-prompt{ color:var(--accent); font-weight:700; letter-spacing:.06em; margin-bottom:.5rem; }
.t-row{ padding:.12rem 0; word-break:break-word; }
.t-k{ color:var(--accent); } .t-s{ color:#7fdca4; } .t-n{ color:#f0a35e; }
.t-bool{ color:#f0a35e; } .t-c{ color:#5b6273; } .t-b{ color:#5b6273; }
.t-obj{ padding:.35rem 0; border-block-end:1px dashed color-mix(in srgb,#fff 8%,transparent); }
.t-desc{ color:#8b93a6; font-size:.85rem; padding-inline-start:1rem; } .t-desc.t-inline{ padding:0; display:inline; }
.t-status{ font-size:.85rem; } .t-status--live{ color:var(--accent-2); } .t-status--building{ color:#f0a35e; }
.t-link{ color:var(--accent-2); text-decoration:underline; text-underline-offset:2px; }
.t-banner{ margin-top:1.4rem; padding:.7rem .9rem; border-radius:10px; font-size:.85rem;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); color:#cdd3e0; }

/* standalone /agent route */
body.agent-route{ background:var(--bg-term); }
.t-topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--gutter); font-family:var(--font-mono); }
.t-home{ display:inline-flex; align-items:center; gap:.5rem; color:#cdd3e0; }
.t-home:hover{ color:var(--accent-2); }
.t-tag{ color:var(--accent); font-size:.85rem; }
.agent-main{ padding:.5rem var(--gutter) 4rem; }

/* ----- effect 8: custom scrollbar ----- */
*{ scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--grad); border-radius:999px;
  border:2px solid var(--bg); }

/* ----- breakpoints (min-width ONLY) ----- */
@media (min-width:560px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:768px){
  .nav{ display:flex; }
  .modebtn span{ display:inline; }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .pillars{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .hero__sub{ font-size:1.45rem; }
}

/* ----- reduced motion ----- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}