/* StaysaProd — shared stylesheet (home, blog, projects, backoffice).
   "Brutalist editorial" identity: warm gray canvas, white cards, black inverted blocks,
   oversized condensed uppercase headlines, mint + voltage-yellow accents on small elements only.
   Flat by design: no shadows, no gradients. Depth = surface contrast (canvas > white > black).
   Light by default; the dark theme is the same system inverted. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(/fonts/archivo-var.woff2) format('woff2-variations'),url(/fonts/archivo-var.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500.woff2) format('woff2');}

:root,[data-theme=light]{
  color-scheme:light;
  --bg:#e5e5e5;          /* warm canvas */
  --surface:#fff;        /* cards */
  --mist:#f3f3f3;        /* quiet panels, code */
  --line:#c6c6c6;        /* hairlines */
  --line2:#444;          /* strong lines */
  --text:#000;
  --soft:#2f2f2f;
  --muted:#5c5c5c;       /* #979797 fails contrast as text; kept for decoration only */
  --smoke:#979797;
  --mint:#d1ffca;        /* tags, link backgrounds */
  --volt:#fff100;        /* email + micro accents */
  --accent:#d1ffca;
  --accent-ink:#000;
  --on-accent:#000;
  --live:#1b6a34;
  --live-bg:#d1ffca;
  --focus:#000;
  --ghost:#444;
  --field:#fff;
  --btn-fg:#fff;
  --inv:#000;            /* inverted blocks */
  --on-inv:#fff;
  --inv-soft:#c6c6c6;
  --inv-muted:#979797;
  --inv-line:#2f2f2f;
  --inv-line2:#555;
  --inv-field:#2f2f2f;
  --inv-accent:#d1ffca;
  --raise:#1a1a1a;       /* cards raised on a black block */
  --header-bg:#e5e5e5;
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#0a0a0a;
  --surface:#1a1a1a;
  --mist:#242424;
  --line:#2f2f2f;
  --line2:#555;
  --text:#fff;
  --soft:#d6d6d6;
  --muted:#979797;
  --smoke:#5c5c5c;
  --accent-ink:#d1ffca;
  --live:#d1ffca;
  --live-bg:rgba(209,255,202,.14);
  --focus:#d1ffca;
  --ghost:#d6d6d6;
  --field:#1a1a1a;
  --btn-fg:#000;
  --inv:#fff;
  --on-inv:#000;
  --inv-soft:#2f2f2f;
  --inv-muted:#5c5c5c;
  --inv-line:#c6c6c6;
  --inv-line2:#979797;
  --inv-field:#f3f3f3;
  --inv-accent:#000;
  --raise:#f3f3f3;
  --header-bg:#0a0a0a;
}
:root{
  --btn-bg:var(--text);
  --wrap:1200px;
  --gutter:24px;
  --header-h:96px;
  --radius:32px;
  --radius-md:24px;
  --radius-sm:8px;
  --display:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Inverted surface: black block on light, white block on dark. Re-points the tokens so
   everything inside (text, buttons, fields, lines) flips with it. Cards do the same on hover. */
.inv,.strip,.cta-band,.detail,.section--last,.site-footer,.post-featured{
  --bg:var(--inv);--surface:var(--inv);--text:var(--on-inv);--soft:var(--inv-soft);--muted:var(--inv-muted);
  --line:var(--inv-line);--line2:var(--inv-line2);--ghost:var(--inv-soft);--btn-bg:var(--on-inv);--btn-fg:var(--inv);
  --focus:var(--inv-accent);--accent-ink:var(--inv-accent);--field:var(--inv-field);
  --live:var(--inv-accent);--live-bg:rgba(209,255,202,.14);
  background:var(--inv);color:var(--text);
}
@media (hover:hover){
  .card:hover{
    --surface:var(--inv);--text:var(--on-inv);--soft:var(--inv-soft);--muted:var(--inv-muted);
    --line:var(--inv-line);--line2:var(--inv-line2);--ghost:var(--inv-soft);--btn-bg:var(--on-inv);--btn-fg:var(--inv);
    --focus:var(--inv-accent);--accent-ink:var(--inv-accent);--field:var(--inv-field);
    background:var(--inv);color:var(--text);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);background:var(--bg);}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:450 16px/1.45 var(--display);overflow-x:hidden;
  letter-spacing:-.01em;transition:background-color .2s,color .2s;}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;color:var(--text);text-wrap:balance;}
h3{font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}
::selection{background:var(--mint);color:#000;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--inv);color:var(--on-inv);padding:12px 18px;font:500 .8rem var(--mono);border-radius:var(--radius-sm);}
.skip:focus{left:8px;}

/* ---------- small type ---------- */
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 14px;border-radius:64px;background:var(--mint);color:#000;
  font:500 .75rem/1.3 var(--mono);letter-spacing:.02em;text-transform:uppercase;}
.kicker--dim{padding:0;background:none;color:var(--muted);border-radius:0;}
.label{margin:0 0 16px;font:500 .75rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text);}
.label--dim{color:var(--muted);}
.accent{color:inherit;}
.meta{font:400 .75rem/1.4 var(--mono);letter-spacing:.02em;color:var(--muted);text-transform:uppercase;}
.lead{color:var(--soft);font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.3;font-weight:450;max-width:30em;}
.lead--lg{font-size:clamp(1.2rem,1.8vw,1.4rem);}
.note{margin-top:12px;color:var(--muted);font-size:.92rem;}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;
  font:500 1rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1.5px solid var(--ghost);border-radius:4px;background:transparent;color:var(--ghost);
  transition:background-color .15s,border-color .15s,color .15s;}
.btn--fill{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg);border-radius:var(--radius-sm);}
.btn--fill:hover{background:var(--mint);border-color:var(--btn-bg);color:#000;}
.btn--ghost:hover{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg);}
.btn--sm{min-height:44px;padding:0 18px;font-size:.9rem;}
.btn--lg{min-height:56px;padding:0 28px;font-size:1.05rem;}
.btn--block{width:100%;}
.btn:disabled{opacity:.5;cursor:default;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:36px;}
.cta-row form{margin:0;}
.link-more{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;}
.link-more:hover{background:var(--mint);color:#000;text-decoration-color:transparent;}
.link-accent{font-weight:500;background:var(--mint);color:#000;padding:2px 8px;border-radius:4px;}
.link-accent:hover{background:var(--text);color:var(--bg);}
.card{background:var(--surface);border:0;border-radius:var(--radius);}

/* ---------- header: logo, floating nav pill, tools ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);}
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:var(--header-h);}
.mark{display:flex;align-items:center;gap:12px;color:var(--text);flex:none;justify-self:start;}
.mark-logo{width:40px;height:40px;flex:none;border-radius:10px;background:var(--inv);padding:3px;}
.mark-name{font-weight:800;font-stretch:62%;font-size:1.7rem;letter-spacing:-.01em;line-height:1;display:inline-flex;align-items:center;gap:3px;}
.mark-name b{font-weight:inherit;background:var(--mint);color:#000;padding:.06em .22em 0;border-radius:5px;}
.mark small{display:block;font:500 .62rem var(--mono);letter-spacing:.14em;color:var(--muted);}
.site-nav{display:flex;align-items:center;gap:2px;padding:6px;background:var(--surface);border-radius:48px;justify-self:center;}
.site-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:40px;font-size:.95rem;font-weight:500;color:var(--text);transition:background-color .15s,color .15s;}
.site-nav a:hover{background:var(--mist);}
.site-nav a[aria-current]{background:var(--inv);color:var(--on-inv);}
.header-tools{display:flex;align-items:center;gap:10px;justify-self:end;}
.lang-switch{display:inline-flex;padding:4px;background:var(--surface);border-radius:40px;font:500 .75rem var(--mono);letter-spacing:.04em;}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:36px;border-radius:32px;color:var(--muted);}
.lang-switch a:hover{color:var(--text);}
.lang-switch a[aria-current]{background:var(--inv);color:var(--on-inv);}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;font:500 .9rem var(--display);
  transition:background-color .15s,color .15s;}
.theme-toggle:hover{background:var(--inv);color:var(--on-inv);}
.theme-toggle svg{display:block;}
.icon-moon,[data-theme=light] .icon-sun{display:none!important;}
[data-theme=light] .icon-moon{display:block!important;}
.theme-toggle--text{width:100%;height:auto;min-height:44px;border-radius:40px;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--surface);color:var(--text);
  border:0;border-radius:50%;cursor:pointer;}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform .2s,background .2s;}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:'';position:absolute;left:0;}
.nav-toggle-bars::before{top:-6px;}
.nav-toggle-bars::after{top:6px;}
.nav-toggle[aria-expanded=true] .nav-toggle-bars{background:transparent;}
.nav-toggle[aria-expanded=true] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded=true] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- sections ---------- */
.section{padding:clamp(56px,7vw,80px) 0 0;}
.sec-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 48px;align-items:end;margin-bottom:48px;}
.sec-head--row{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:40px;}
.sec-head h2,.contact-side h2{font-stretch:62%;font-weight:800;font-size:clamp(3.2rem,8vw,5rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;}
.sec-intro{color:var(--muted);font-size:1.1rem;line-height:1.3;max-width:32em;}

/* ---------- hero ---------- */
.hero{padding:clamp(16px,3vw,40px) 0 clamp(48px,7vw,80px);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,56px);align-items:center;}
.hero-copy .kicker{margin-bottom:28px;}
.hero h1{font-stretch:62%;font-weight:800;font-size:clamp(3.6rem,9.6vw,8.125rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;}
.hero .lead{margin-top:32px;}
.hero .cta-row{margin-top:32px;}
.draw{background-image:linear-gradient(var(--mint),var(--mint));background-repeat:no-repeat;background-position:0 90%;background-size:100% .3em;}
[data-theme=dark] .draw{background-image:none;color:var(--mint);}

/* the object: printed blocks, flat isometric */
.hero-object{justify-self:center;width:100%;max-width:520px;}
.hero-object svg{display:block;width:100%;height:auto;overflow:visible;}
.hero-object .o-t{fill:var(--t);}
.hero-object .o-l{fill:var(--l);}
.hero-object .o-r{fill:var(--r);}
.hero-object text{font-family:var(--display);font-stretch:62%;font-weight:800;letter-spacing:-.01em;fill:var(--ink);}
.hero-object text.o-mono{font-family:var(--mono);font-stretch:100%;font-weight:500;letter-spacing:.06em;}
.cube--stone{--t:#f7f7f7;--l:#bdbdbd;--r:#9a9a9a;--ink:#2f2f2f;}
.cube--ink{--t:#444;--l:#1c1c1c;--r:#000;--ink:#fff;}
.cube--mint{--t:#effff0;--l:#d1ffca;--r:#a9e59f;--ink:#000;}
.cube--volt{--t:#fff86b;--l:#fff100;--r:#d9cd00;--ink:#000;}
[data-theme=dark] .cube--ink{--t:#6a6a6a;--l:#4a4a4a;--r:#2f2f2f;}
[data-theme=dark] .cube--stone{--t:#d6d6d6;--l:#9a9a9a;--r:#7a7a7a;}

/* status: four black cards */
.hero-status{margin:clamp(40px,6vw,64px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;}
.hero-status > div{padding:20px 24px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:10px;}
.hero-status dt{font:400 .75rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.hero-status dd{margin:0;font-weight:500;font-size:1.15rem;line-height:1.15;letter-spacing:-.02em;}
.hero-status dd a{background:var(--volt);color:#000;padding:2px 8px;border-radius:4px;}
.hero-status dd a:hover{background:var(--mint);}
.is-live{color:var(--live);display:inline-flex;align-items:center;gap:10px;}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--volt);}

/* ---------- capability strip ---------- */
.strip{overflow:hidden;}
.strip-track{display:flex;width:max-content;margin:0;padding:20px 0;list-style:none;font:400 .8rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);}
.strip-track li{display:flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;}
.strip-track span{color:var(--accent-ink);}

/* ---------- offers ---------- */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.offer{padding:32px;display:flex;flex-direction:column;gap:16px;}
.offer-top{display:flex;justify-content:space-between;align-items:center;font:400 .75rem var(--mono);}
.offer-num{display:inline-flex;padding:4px 12px;border-radius:64px;background:var(--mint);color:#000;font-weight:500;}
.offer-count{color:var(--muted);}
.offer h3{font-weight:500;font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.02;letter-spacing:-.025em;}
.offer > p{color:var(--muted);font-size:.95rem;line-height:1.3;}
.offer-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line);}
.offer-list li{border-bottom:1px solid var(--line);}
.service-btn{width:100%;min-height:52px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;
  background:none;border:0;color:var(--text);font:500 .95rem/1.3 var(--display);text-align:left;cursor:pointer;}
.service-btn i{font-style:normal;transition:translate .2s var(--ease);}
.service-btn:hover span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;}
.service-btn:hover i,.service-btn:focus-visible i{translate:6px 0;}

/* ---------- projects ---------- */
.project-group + .project-group{margin-top:64px;}
.project-group-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 32px;
  padding-bottom:16px;margin-bottom:24px;border-bottom:1.5px solid var(--text);}
.project-group-head h3{display:flex;align-items:center;gap:12px;font-size:clamp(1.6rem,2.4vw,2rem);}
.project-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 10px;
  border-radius:99px;background:var(--mint);color:#000;font:500 .8rem var(--mono);}
.project-group-head p{color:var(--muted);max-width:36em;}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;}
.project-card{padding:32px;display:flex;flex-direction:column;gap:14px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:4px 12px;border-radius:99px;background:var(--mint);color:#000;font:400 .72rem var(--mono);letter-spacing:.02em;text-transform:uppercase;}
.chip--live{background:var(--inv);color:var(--on-inv);}
.chip--dim{background:var(--mist);color:var(--muted);}
.project-card h3{font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1;}
.project-card h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;}
.project-card > p{color:var(--muted);line-height:1.3;}
.mono-tags{font:400 .8rem var(--mono);color:var(--muted)!important;}
.project-price{font-weight:600;font-size:1.2rem;color:var(--text)!important;}
.project-links{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:10px;}

/* ---------- method: route map ---------- */
.route{position:relative;--p:1;}
.route-map{position:relative;height:160px;margin-bottom:24px;}
.route-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.route-trail{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:6 9;}
.route-done{fill:none;stroke:var(--text);stroke-width:4;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:0;}
.route-pin{position:absolute;left:var(--x);top:var(--y);z-index:1;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--text);border:1.5px solid var(--text);
  font:500 .8rem var(--mono);color:var(--bg);scale:1.1;transition:background-color .3s,border-color .3s,color .3s,scale .3s var(--ease);}
.js .route-pin:not(.is-on){background:var(--bg);border-color:var(--line2);color:var(--muted);scale:1;}
.route-marker{position:absolute;left:100%;top:50%;z-index:2;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:var(--mint);border:3px solid var(--text);outline:6px solid rgba(209,255,202,.6);pointer-events:none;}
.route-rail{display:none;}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.method-block{padding:clamp(32px,6vw,72px);border-radius:64px;}
.method-block .sec-head{margin-bottom:40px;}
.step{position:relative;padding:28px;background:var(--raise);border-radius:var(--radius-md);
  transition:opacity .4s,translate .4s var(--ease);}
.step-num{display:inline-flex;padding:3px 10px;border-radius:64px;background:var(--mint);color:#000;font:500 .75rem var(--mono);}
.step h3{margin:16px 0 12px;font-size:1.6rem;}
.step p{color:var(--muted);font-size:.95rem;line-height:1.3;}
.route .step-num{display:none;}
/* steps wait for the marker (only when site.js runs and motion is allowed) */
@media (prefers-reduced-motion:no-preference){
  .js .route .step:not(.is-on){opacity:.4;translate:0 14px;}
  .route-marker::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--text);animation:ping 1.8s ease-out infinite;}
}
@keyframes ping{from{opacity:.8;scale:.6;}to{opacity:0;scale:1.8;}}

/* narrow screens: the route becomes a vertical timeline (filled by site.js once on screen) */
@media (max-width:1000px){
  .route-map{display:none;}
  .route-rail{display:block;position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--line);}
  .route-rail i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p) * 100%);background:var(--text);}
  .route-rail i::after{content:'';position:absolute;left:50%;bottom:0;width:16px;height:16px;margin:0 0 -8px -8px;border-radius:50%;
    background:var(--mint);border:3px solid var(--text);}
  .steps{grid-template-columns:1fr;gap:16px;padding-left:56px;}
  .route .step-num{display:flex;position:absolute;left:-56px;top:20px;width:40px;height:40px;padding:0;border-radius:50%;align-items:center;justify-content:center;
    background:var(--text);color:var(--bg);transition:background-color .3s,color .3s;}
  .js .route .step:not(.is-on) .step-num{background:var(--bg);outline:1.5px solid var(--line2);outline-offset:-1.5px;color:var(--muted);}
}

/* ---------- latest posts ---------- */
.post-rows{border-top:1.5px solid var(--text);}
.post-row{display:grid;grid-template-columns:180px minmax(0,1.5fr) minmax(0,1fr);gap:8px 40px;align-items:baseline;
  padding:32px 0;border-bottom:1px solid var(--line2);transition:padding-left .25s var(--ease);}
.post-row:hover{padding-left:16px;}
.post-row-title{font-weight:500;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;}
.post-row:hover .post-row-title{background:linear-gradient(var(--mint),var(--mint)) 0 92%/100% .38em no-repeat;}
[data-theme=dark] .post-row:hover .post-row-title{background:none;color:var(--mint);}
.post-row-excerpt{color:var(--muted);line-height:1.3;}

/* ---------- contact: full-bleed black block with an arched top ---------- */
.section--last{margin-top:clamp(80px,10vw,120px);padding:clamp(64px,8vw,112px) 0;border-radius:64px 64px 0 0;}
.contact-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:56px;}
.contact-side{display:flex;flex-direction:column;gap:20px;}
.contact-side .kicker{margin:0;align-self:flex-start;}
.contact-side .sec-intro{color:var(--muted);}
.contact-direct{margin-top:auto;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;}
.contact-direct .kicker{margin:0;font-size:.75rem;}
.contact-direct a{align-self:flex-start;font-size:1.25rem;font-weight:500;overflow-wrap:anywhere;background:var(--volt);color:#000;padding:4px 10px;border-radius:6px;}
.contact-direct a:hover{background:var(--mint);}
.contact-direct span:last-child{color:var(--muted);font-size:.95rem;}
.contact-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;align-content:start;}
.contact-form .field--full,.form-actions{grid-column:1 / -1;}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
.form-note{font:400 .85rem var(--mono);color:var(--muted);}
.form-note.is-ok{background:var(--mint);color:#000;padding:4px 10px;border-radius:6px;}
.form-note.is-err{background:var(--volt);color:#000;padding:4px 10px;border-radius:6px;}

/* ---------- forms (shared with the backoffice) ---------- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0;}
.field label,fieldset.field legend{font:500 .75rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:0 18px;background:var(--field);color:var(--text);
  border:1.5px solid transparent;border-radius:12px;font:inherit;font-size:1rem;transition:border-color .15s;}
.field textarea{padding:16px 18px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.9;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--text);}
.field input[type=checkbox],.field input[type=radio]{width:auto;min-height:0;accent-color:var(--text);}
.hint{font-size:.85rem;color:var(--muted);margin:0;}

/* ---------- footer: compact dark band ---------- */
.site-footer{border-top:1px solid var(--line);}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:32px;padding-bottom:32px;font-size:.9rem;color:var(--muted);}
.foot-brand{display:flex;align-items:center;gap:10px;}
.foot-brand img{width:22px;height:22px;border-radius:5px;}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;}
.foot-nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px;}
.foot-word{margin:0;overflow:hidden;white-space:nowrap;text-align:center;user-select:none;
  font-stretch:62%;font-weight:800;font-size:clamp(4.5rem,21.5vw,17.5rem);line-height:.78;letter-spacing:-.03em;color:var(--line);}
.foot-word b{font-weight:inherit;}

/* ---------- service detail panel: a black sheet that rises from below ---------- */
.detail{position:fixed;inset:0;z-index:100;overflow-y:auto;opacity:0;visibility:hidden;border-radius:48px 48px 0 0;transform:translateY(6%);
  transition:opacity .25s,transform .4s var(--ease),border-radius .4s var(--ease),visibility 0s linear .4s;}
.detail.is-open{opacity:1;visibility:visible;transform:none;border-radius:0;transition:opacity .25s,transform .4s var(--ease),border-radius .4s var(--ease);}
.detail-close{position:fixed;top:24px;right:var(--gutter);z-index:101;}
.detail-inner{max-width:880px;margin:0 auto;padding:clamp(96px,12vw,136px) var(--gutter) 80px;}
.detail-inner h2{font-stretch:62%;font-size:clamp(3rem,9vw,5rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 24px;}
.detail-lead{font-size:1.25rem;line-height:1.3;color:var(--soft);padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line);}
.detail-body p{color:var(--muted);margin-bottom:16px;line-height:1.4;}
.detail-body ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;}
.detail-body li{padding-left:26px;position:relative;color:var(--muted);}
.detail-body li::before{content:'→';position:absolute;left:0;color:var(--accent-ink);}
.detail-body li b{color:var(--text);font-weight:600;}
body.panel-open{overflow:hidden;}

/* ---------- inner pages (blog, project, 404) ---------- */
.sheet{padding:clamp(40px,6vw,72px) 0 clamp(80px,10vw,120px);}
.page-head{padding-bottom:40px;margin-bottom:40px;border-bottom:1.5px solid var(--text);}
.page-head--split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px 48px;}
.sheet h1{font-stretch:62%;font-size:clamp(3rem,8.5vw,5rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 16px;}
.sheet h1.page-title--xl,.page-title--xl{font-stretch:62%;font-size:clamp(4rem,14vw,8.125rem);line-height:.9;letter-spacing:-.03em;}
.page-head .lead{margin-top:8px;}
.back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:16px;font:500 .8rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.back:hover{color:var(--text);}
.empty{color:var(--muted);padding:32px 0;}

.post-featured{display:flex;flex-direction:column;gap:16px;max-width:none;padding:clamp(28px,4vw,48px);margin-bottom:16px;border-radius:var(--radius);}
.post-featured-title{font-weight:500;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-.025em;max-width:24ch;text-transform:uppercase;}
.post-featured .link-accent,.post-card-more{align-self:flex-start;}
.post-excerpt{color:var(--muted);font-size:1.05rem;line-height:1.35;}
.post-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px;}
.post-card{height:100%;display:flex;flex-direction:column;gap:14px;padding:32px;}
.post-card-title{font-weight:500;font-size:1.55rem;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;}
.post-card-more{margin-top:auto;font-weight:500;}

.post-body{max-width:72ch;font-size:1.06rem;line-height:1.7;color:var(--soft);}
.post-body > * + *{margin-top:1.1em;}
.post-body h2{font-stretch:62%;font-size:clamp(2.2rem,4vw,3rem);margin-top:1.8em;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;}
.post-body h3{font-size:1.35rem;font-weight:500;margin-top:1.6em;}
.post-body a{background:var(--mint);color:#000;padding:0 .2em;border-radius:3px;}
.post-body a:hover{background:var(--text);color:var(--bg);}
.post-body ul,.post-body ol{padding-left:1.3em;}
.post-body li + li{margin-top:.4em;}
.post-body li::marker{color:var(--text);}
.post-body strong{color:var(--text);font-weight:600;}
.post-body img{border-radius:var(--radius-md);}
.post-body code{font:400 .88em var(--mono);background:var(--mist);color:var(--text);padding:.12em .4em;border-radius:5px;}
.post-body pre{background:#2f2f2f;color:#f3f3f3;border-radius:var(--radius-md);padding:20px 24px;overflow-x:auto;font-size:.88rem;line-height:1.6;}
.post-body pre code{background:none;color:inherit;padding:0;}
.post-body blockquote{margin-left:0;padding:4px 0 4px 20px;border-left:4px solid var(--text);color:var(--muted);}
.sheet > .post-body,.sheet > .note + .post-body{margin-top:8px;}

.project-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:48px;align-items:start;margin:16px 0 80px;}
.project-hero > div{display:flex;flex-direction:column;gap:24px;}
.project-hero h1{margin:0;}
.project-hero .cta-row{margin-top:0;}
.spec{background:var(--surface);border-radius:var(--radius-md);font:400 .9rem var(--mono);}
.spec-bar{padding:16px 24px;border-bottom:1px solid var(--line);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.spec dl{margin:0;padding:4px 24px 12px;}
.spec dl div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);}
.spec dl div:last-child{border-bottom:0;}
.spec dt{color:var(--muted);}
.spec dd{margin:0;text-align:right;}
.service-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:48px;align-items:start;}
.spec-links{list-style:none;margin:0;padding:4px 24px 12px;}
.spec-links li + li{border-top:1px solid var(--line);}
.spec-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 0;font:500 .95rem/1.3 var(--display);}
.spec-links a i{font-style:normal;transition:translate .2s var(--ease);}
.spec-links a:hover span{text-decoration:underline;text-underline-offset:4px;}
.spec-links a:hover i{translate:6px 0;}
.cta-band{margin-top:96px;padding:clamp(28px,5vw,56px);border-radius:var(--radius);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;}
.cta-band h2{font-stretch:62%;font-size:clamp(2.2rem,4vw,3rem);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:8px;}
.cta-band p{color:var(--muted);}

/* ---------- backoffice ---------- */
.admin-shell{display:flex;flex-wrap:wrap;min-height:100vh;}
.admin-side{flex:1 1 240px;max-width:100%;min-height:100vh;position:sticky;top:0;align-self:flex-start;padding:24px 16px;
  background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;display:flex;flex-direction:column;gap:32px;}
.admin-side .mark{padding:0 8px;}
.admin-side .mark-name{font-size:1.4rem;}
.admin-nav{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:.95rem;}
.admin-nav a{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:40px;color:var(--text);}
.admin-nav a:hover{background:var(--mist);}
.admin-nav a[aria-current]{background:var(--inv);color:var(--on-inv);}
.admin-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.admin-side-foot form{margin:0;}
.admin-main{flex:999 1 560px;min-width:0;padding:0 clamp(16px,4vw,56px);}
.admin-main .wrap{max-width:1100px;margin:0;padding:0;}
.admin-shell--bare .admin-main{display:flex;justify-content:center;}
.admin-shell--bare .admin-main .wrap{width:100%;max-width:440px;}
.admin-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;}
.admin-head .label{margin-bottom:8px;}
.admin-head h1{margin:0;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:32px;}
.stat{padding:24px;background:var(--surface);border-radius:var(--radius-md);}
.stat .label{margin:0;font-size:.7rem;color:var(--muted);}
.stat b{display:block;font-stretch:62%;font-weight:800;font-size:3.2rem;line-height:1;letter-spacing:-.03em;margin-top:8px;}
.stat b.stat-date{font-stretch:100%;font-weight:500;font-size:1.2rem;margin-top:10px;letter-spacing:-.01em;}
.badge{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--mist);font:400 .72rem var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.badge--on{background:var(--mint);color:#000;}
.flash{background:var(--volt);color:#000;padding:14px 18px;margin:24px 0 0;border-radius:12px;font-size:.95rem;font-weight:500;}
.flash--ok{background:var(--mint);}
.login form{display:grid;gap:20px;margin-top:28px;padding:28px;background:var(--surface);border-radius:var(--radius-md);--field:var(--mist);}
.sheet form:not(.contact-form) > .field + .field,.sheet form > .field-grid,.sheet form > fieldset.field,.sheet form > .field--check{margin-top:22px;}
.sheet form .field-grid + .field-grid{margin-top:22px;}
.sheet form .field textarea{min-height:420px;font:400 .88rem/1.6 var(--mono);}
.field--check{flex-direction:row;align-items:center;gap:10px;}
.field--check label{text-transform:none;letter-spacing:0;font:450 1rem var(--display);color:var(--text);}
fieldset.field{border:0;padding:0;margin:0;min-width:0;}
.choice-row{display:flex;gap:10px;flex-wrap:wrap;}
.field .choice{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1.5px solid var(--line2);border-radius:12px;cursor:pointer;
  font:500 .95rem var(--display);text-transform:none;letter-spacing:0;color:var(--text);}
.choice:has(input:checked){border-color:var(--mint);background:var(--mint);color:#000;}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;}
.project-form:not([data-kind=product]) .only-product,.project-form:not([data-kind=oss]) .only-oss,
.project-form:not([data-kind=free]) .only-free,.project-form[data-kind=free] .not-free{display:none;}
.admin-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:.95rem;}
.admin-table th,.admin-table td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
.admin-table th{font:500 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--text);}
.admin-table th:first-child,.admin-table td:first-child{padding-left:0;font-weight:600;}
.admin-table tbody tr:hover{background:var(--surface);}
.admin-table td.meta{text-transform:none;}
.admin-table td.actions{display:flex;gap:16px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.actions a,.actions button{font:500 .8rem var(--mono);color:var(--soft);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.actions a:hover,.actions button:hover{color:var(--text);background:var(--mint);}
.actions form{margin:0;}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes blink{50%{opacity:0;}}
@keyframes marquee{to{transform:translateX(-50%);}}
@keyframes draw{from{background-size:0 .3em;}to{background-size:100% .3em;}}
@keyframes unstack{
  from{transform:translate(calc((.5 - var(--col)) * (100% + 16px)),calc((.5 - var(--row)) * (100% + 16px))) rotate(calc((var(--i) - 1.5) * 3deg));}
  to{transform:none;}
}

@keyframes bob{50%{transform:translateY(-8px);}}
@media (prefers-reduced-motion:no-preference){
  .o-float{animation:bob 4.5s ease-in-out infinite;}
  /* hero entrance, in sequence */
  .rise{animation:rise .9s var(--ease) both;}
  .rise-1{animation-delay:.1s;}.rise-2{animation-delay:.25s;}.rise-3{animation-delay:.4s;}.rise-4{animation-delay:.55s;}
  .rise-5{animation-delay:.7s;}.rise-6{animation-delay:.85s;}.rise-7{animation-delay:1s;}
  .draw{animation:draw 1.1s 1s var(--ease) both;}
  .pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--volt);animation:ping 2s ease-out infinite;}
  .strip-track{animation:marquee 36s linear infinite;}
  .strip:hover .strip-track{animation-play-state:paused;}

  /* reveal on scroll (classes added by site.js) */
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  .js .reveal.is-in{opacity:1;transform:none;}
}

/* ---------- wide screens: offers as a 2 × 2 deck ---------- */
@media (min-width:1100px){
  .offer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;}
  .deck .sec-head{margin-bottom:32px;}
}
/* The deck waits stacked, then deals itself out on its own once it is on screen (site.js adds
   .is-dealt). Timed, not scroll-driven: the page scrolls normally the whole time. */
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .js .deck .offer{position:relative;z-index:calc(10 - var(--i));
    animation:unstack .9s var(--ease) calc(var(--i) * .12s) both;animation-play-state:paused;}
  .js .deck.is-dealt .offer{animation-play-state:running;}
}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .header-cta{display:none;}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-object{order:2;}
}
@media (max-width:900px){
  .post-row{grid-template-columns:1fr;}
  .service-layout{grid-template-columns:1fr;}
  .site-header .wrap{display:flex;gap:12px;}
  .header-tools{margin-left:auto;}
  .nav-toggle{display:inline-flex;}
  .site-nav{display:none;position:absolute;top:calc(100% - 4px);left:var(--gutter);right:var(--gutter);flex-direction:column;align-items:stretch;gap:2px;
    padding:8px;border-radius:28px;}
  .site-nav.is-open{display:flex;}
  .site-nav a{padding:0 18px;min-height:48px;font-size:1rem;border-radius:20px;}
  .admin-side{border-radius:0 0 var(--radius-md) var(--radius-md);}
}
@media (max-width:760px){
  :root{--gutter:16px;--header-h:72px;--radius:24px;}
  .mark-name{font-size:1.5rem;}
  .mark-logo{width:34px;height:34px;}
  .lang-switch a{min-width:38px;}
  .hero-object{max-width:360px;}
  .method-block{border-radius:40px;}
  .offers{grid-template-columns:1fr;}
  .offer,.project-card,.post-card{padding:24px;}
  .section--last{border-radius:40px 40px 0 0;}
  .detail{border-radius:32px 32px 0 0;}
  .cta-row > .btn{flex:1 1 auto;}
  .field-grid{grid-template-columns:1fr;}
  .sheet form .field textarea{min-height:300px;}
  .admin-side{flex-basis:100%;min-height:0;position:static;gap:16px;}
  .admin-side-foot{flex-direction:row;}
  .admin-side-foot > *{flex:1;}
  .admin-table thead{display:none;}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;}
  .admin-table tr{padding:16px 0;border-bottom:1px solid var(--line);}
  .admin-table td{padding:0;border:0;}
  .admin-table td:first-child{margin-bottom:8px;}
  .admin-table td:not(:first-child):not(.actions){display:inline-block;margin:0 10px 6px 0;}
  .admin-table td.actions{display:flex;justify-content:flex-start;gap:22px;margin-top:10px;}
  .post-body pre{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));border-radius:0;}
}
@media (max-width:400px){
  .mark-name{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}