/* AI-assistant pitch, restyled in the dx-distro.com language (index.html):
   warm near-black + cream, Playfair Display over DM Sans, sharp 2px corners, thin
   rules instead of filled cards, and one accent colour used sparingly.
   Token values are copied from the main site, not approximated, so the two pages
   read as one brand when a visitor moves between them. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --dark:#13120b;
  --dark2:#1a190f;
  --cream:#e8e8e8;
  --ink:#1a1814;
  --mid:#7e7668;
  /* The third colour. DARK GROUNDS ONLY, same contrast floor as the main site:
     #5fc11b is 7.9:1 on --dark but only 1.9:1 on --cream. It marks the way to a
     conversation (nav CTA, primary buttons on dark chapters, the final ask), the
     two headline ghosts that bookend the page, and the hero's live dot. Nothing
     inside a .chapter.light may use it. Dark text on the green is 8.2:1. */
  --volt:#5fc11b;
  /* Body text is deliberately stronger than the main site's .body-copy (0.42).
     That page is mostly headlines; this one is a sales document read in full,
     so its paragraphs need real contrast: 0.62 over --dark is ~6.4:1, and
     #5a544a over --cream is ~6.1:1. */
  --text-d:rgba(232,232,232,.62);
  --text-l:#5a544a;
  /* Small uppercase labels carry section names here (the main site's 0.2 alpha
     labels are decorative), so they are lifted to stay legible at 10-11px. */
  --label-d:rgba(232,232,232,.5);
  --label-l:#6b6458;
  --rule-d:rgba(232,232,232,.1);
  --rule-l:rgba(26,24,20,.12);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --p:clamp(1.5rem,5vw,5rem);
  --maxw:1280px;
  --nav-h:4.25rem;
}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-weight:300;color:var(--text-d);background:var(--dark);
  line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--volt);color:var(--dark)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--cream);line-height:1.12;letter-spacing:-.02em;margin:0}
p{margin:0 0 1rem}
a{color:inherit}
strong{color:var(--cream);font-weight:500}
em{font-style:normal}
/* One focus ring for both grounds: currentColor is cream on dark chapters and
   ink on light ones, so the ring always contrasts with its own background. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--p)}
section{position:relative}
section[id],.example[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}

/* ---------- CHAPTERS (dark / light alternation, as on the main site) ---------- */
.chapter{padding:clamp(5rem,12vh,9rem) 0}
.chapter.light{background:var(--cream);color:var(--text-l)}
.chapter.light h1,.chapter.light h2,.chapter.light h3,.chapter.light h4,.chapter.light strong{color:var(--ink)}

.ch-head{display:flex;align-items:center;gap:1.25rem;margin-bottom:3rem;overflow:hidden}
.ch-num,.ch-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--label-d);font-weight:400}
.ch-hr{flex:1;max-width:0;height:1px;background:rgba(232,232,232,.2);transition:max-width 1.2s cubic-bezier(.16,1,.3,1)}
.ch-hr.expanded{max-width:60px}
.chapter.light .ch-num,.chapter.light .ch-label{color:var(--label-l)}
.chapter.light .ch-hr{background:rgba(26,24,20,.15)}

/* Same marker without a number, for page heads and boxed panels. */
.eyebrow{display:flex;align-items:center;gap:1.25rem;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--label-d);margin-bottom:2rem}
.eyebrow::before{content:"";width:40px;height:1px;background:rgba(232,232,232,.2)}
.chapter.light .eyebrow{color:var(--label-l)}
.chapter.light .eyebrow::before{background:rgba(26,24,20,.15)}

.section-head{max-width:900px;margin:0 0 4rem}
.section-head p{font-size:clamp(15px,1.3vw,17px);max-width:62ch;margin:1.75rem 0 0}

.lead{font-size:clamp(2rem,4.5vw,4rem);line-height:1.08;letter-spacing:-.025em}
.lead .ghost{color:rgba(232,232,232,.3)}
.chapter.light .lead .ghost{color:rgba(26,24,20,.3)}
/* The accent bookends the page — the hero's "pentru compania dumneavoastră" and
   the final ask — exactly as the main site bookends hero and #contact. Every
   ghost in between stays neutral, or the green stops meaning anything. 0.35 is
   the main site's value (3.5:1 on --dark, AA for text this large); it was set
   by eye there and is not raised here for the same reason. */
.final .lead .ghost,.hero h1 .ghost{color:rgba(95,193,27,.35)}

/* Split-line reveal: each headline line slides up out of its own mask. */
.split-line{overflow:hidden;display:block;padding-top:.14em;margin-top:-.14em}
.split-inner{display:block;transform:translateY(115%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.split-inner.up{transform:none}

/* Fade reveal (the class name is kept from the original page; behaviour matches .fade-up). */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}
/* No-JS safety net: <html> only gets .js from the inline head script, so without
   JS these never match a hidden state and the content shows immediately. */
html:not(.js) .reveal{opacity:1;transform:none}
html:not(.js) .split-inner{transform:none}
html:not(.js) .ch-hr{max-width:60px}

/* ---------- NAV ---------- */
/* Fixed and transparent over the hero, solid once scrolled, like the main site.
   No backdrop-filter on the unscrolled state: it would make the header a
   containing block for the open mobile menu before it is needed. */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
header.nav.scrolled,header.nav.menu-open{background:rgba(19,18,11,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:rgba(232,232,232,.06)}
.nav-inner{max-width:calc(var(--maxw));margin:0 auto;padding:1rem var(--p);display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--nav-h)}
.nav-inner>a:first-child{display:flex;align-items:center;min-height:44px}
.nav-inner .logo{height:20px;width:auto;display:block;opacity:.85}
.nav-links{display:flex;gap:2.25rem;align-items:center}
.nav-links a,.nav-drop-toggle{font:400 11px var(--sans);color:rgba(232,232,232,.55);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.nav-links a:hover,.nav-drop-toggle:hover,.nav-drop.is-open .nav-drop-toggle{color:var(--cream)}
.nav-links .nav-cta{color:var(--dark);background:var(--volt);font-weight:500;letter-spacing:.08em;padding:9px 20px;border-radius:2px;transition:opacity .2s}
.nav-links .nav-cta:hover{color:var(--dark);opacity:.85}
.menu-toggle{display:none}

/* RO / EN switch. The current language is cream, the other dimmed like the rest
   of the nav; each label is padded to a 44px tap target. The slash is a separate
   aria-hidden span so screen readers announce two plain links. */
.lang-switch{display:flex;align-items:center}
.nav-links .lang-switch a{display:flex;align-items:center;min-height:44px;padding:0 6px}
.nav-links .lang-switch a[aria-current]{color:var(--cream)}
.lang-switch span{font-size:11px;color:rgba(232,232,232,.25)}

.nav-drop{position:relative}
.nav-drop-toggle{background:none;border:0;padding:0;cursor:pointer}
.nav-drop-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;z-index:70}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.is-open .nav-drop-menu{display:block}
.nav-drop-panel{display:flex;flex-direction:column;min-width:200px;padding:6px;border:1px solid rgba(232,232,232,.1);border-radius:2px;background:var(--dark2);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.nav-drop-panel a{padding:12px 14px;white-space:nowrap}
.nav-drop-panel a:hover,.nav-drop-panel a[aria-current="page"]{background:rgba(232,232,232,.06);color:var(--cream)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:12px 26px;min-height:44px;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:opacity .2s,border-color .2s,color .2s}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--volt);color:var(--dark)}
.btn-primary:hover{opacity:.85}
/* Green is not allowed on cream (1.9:1), so a primary button inside a light
   chapter becomes solid ink: same weight, same role, legal contrast. */
.chapter.light .btn-primary{background:var(--ink);color:var(--cream)}
.btn-ghost{color:rgba(232,232,232,.6);border-color:rgba(232,232,232,.18)}
.btn-ghost:hover{color:var(--cream);border-color:rgba(232,232,232,.5)}

/* ---------- HERO ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 4rem) 0 5rem;overflow:hidden}
/* Background grid + warm glow + vignette, drawn the same way as the main hero. */
.hero::before{content:"";position:absolute;inset:-100px;pointer-events:none;
  background-image:linear-gradient(rgba(232,232,232,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(232,232,232,.035) 1px,transparent 1px);
  background-size:90px 90px;animation:gridFloat 25s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 65% 20%,rgba(200,180,120,.06),transparent 55%),radial-gradient(ellipse 120% 100% at 50% 100%,var(--dark) 20%,transparent 70%)}
@keyframes gridFloat{to{transform:translateY(-30px) rotate(.3deg)}}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:5rem;align-items:center}
.hero-grid>*{min-width:0}
.badge{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--label-d);margin-bottom:2rem}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--volt);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,193,27,.5)}70%{box-shadow:0 0 0 9px rgba(95,193,27,0)}100%{box-shadow:0 0 0 0 rgba(95,193,27,0)}}
.hero h1{font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:1;letter-spacing:-.03em;margin:0 0 2rem}
.hero .lead-copy{font-size:clamp(15px,1.3vw,17px);max-width:52ch;margin:0 0 2.5rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-trust{margin-top:3rem;padding-top:1.75rem;border-top:1px solid rgba(232,232,232,.08);display:flex;gap:2.5rem;flex-wrap:wrap;font-size:11px;letter-spacing:.06em;color:var(--label-d)}
.hero-trust b{display:block;font:700 1.15rem var(--serif);letter-spacing:-.01em;color:var(--cream);margin-bottom:2px}

/* chat mock — dark panel, cream user bubble. The green stays off it on purpose:
   it is decoration, not the way to a conversation. */
.chat{background:var(--dark2);border:1px solid rgba(232,232,232,.08);border-radius:2px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.chat-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid rgba(232,232,232,.08)}
.chat-ava{width:34px;height:34px;border-radius:2px;background:var(--cream);color:var(--dark);display:flex;align-items:center;justify-content:center;flex:none}
.chat-ava svg{width:19px;height:19px}
.chat-head b{display:block;color:var(--cream);font:700 .95rem var(--serif);line-height:1.2}
.chat-head span{font-size:11px;letter-spacing:.04em;color:var(--label-d)}
.msg{max-width:85%;padding:11px 15px;border-radius:2px;font-size:.88rem;margin-bottom:11px;line-height:1.6}
.msg.user{margin-left:auto;background:var(--cream);color:var(--dark);font-weight:400}
.msg.bot{color:rgba(232,232,232,.78);border:1px solid rgba(232,232,232,.1)}
.bars{display:flex;align-items:flex-end;gap:7px;height:62px;margin:12px 2px 4px}
.bars i{flex:1;background:rgba(232,232,232,.35);animation:grow .9s ease both}
.bars i:nth-child(2){background:rgba(232,232,232,.7)}
@keyframes grow{from{height:0}}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--cream);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.2}30%{opacity:.9}}

/* ---------- CARDS → ruled cells ---------- */
.grid{display:grid;gap:0 3rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{position:relative;padding:2rem 0 2.25rem;border-top:1px solid var(--rule-d);text-decoration:none;color:inherit}
.chapter.light .card{border-top-color:var(--rule-l)}
.card h3{font-size:clamp(1.15rem,1.6vw,1.45rem);margin:0 0 .75rem}
.card p{font-size:.95rem;margin:0}
.ic{width:28px;height:28px;margin-bottom:1.25rem;color:currentColor;opacity:.7}
.ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chapter.light .ic{color:var(--ink)}

/* Numbered service rows, the main site's "What we do" pattern. */
.svc-item{display:grid;grid-template-columns:56px 1fr 1.6fr;gap:2.5rem;padding:2.25rem 0;border-top:1px solid var(--rule-d);align-items:start;position:relative}
.chapter.light .svc-item{border-top-color:var(--rule-l)}
.svc-item::after{content:"";position:absolute;bottom:-1px;left:0;width:0;height:1px;background:currentColor;transition:width .6s ease}
.svc-item:hover::after{width:100%}
.svc-n{font-size:10px;letter-spacing:.1em;padding-top:8px;color:var(--label-d)}
.chapter.light .svc-n{color:var(--label-l)}
.svc-t{font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.2}
.svc-d{font-size:.95rem;padding-top:4px}
.svc-d p:last-child,.svc-d ul:last-child{margin-bottom:0}

ul.clean{list-style:none;padding:0;margin:.75rem 0 0}
ul.clean li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.95rem}
ul.clean li::before{content:"";position:absolute;left:0;top:.85em;width:12px;height:1px;background:currentColor;opacity:.6}

/* ---------- EXAMPLES ---------- */
.examples{display:grid}
.example{padding:3rem 0;border-top:1px solid var(--rule-d)}
.chapter.light .example{border-top-color:var(--rule-l)}
.example:first-child{padding-top:0;border-top:0}
.example .tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin-bottom:1.25rem}
.chapter.light .example .tag{color:var(--ink)}
.example .tag svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.7}
.example>p,.example .use-case-part>p{max-width:72ch}
.example h3{font-size:1.4rem;margin:0 0 .75rem}
.metric{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:1.5rem 0 .5rem;font-size:.95rem}
.metric b{font:700 clamp(2.2rem,4vw,3.4rem) var(--serif);letter-spacing:-.04em;color:var(--cream);line-height:1}

.talk{margin-top:4rem;padding:3rem;background:var(--dark2);border:1px solid rgba(232,232,232,.07);border-radius:2px}
.talk h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 1rem;display:flex;align-items:center;gap:14px}
.talk h3 svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none;opacity:.7}
.talk p{max-width:70ch}
.bubble{display:inline-block;border-left:1px solid rgba(232,232,232,.4);padding:6px 0 6px 16px;margin:12px 32px 0 0;color:var(--cream);font:400 italic 1.05rem var(--serif)}

/* ---------- BENEFITS ---------- */
.benefit{display:flex;gap:1.5rem;align-items:flex-start;padding:2rem 0;border-top:1px solid var(--rule-d)}
.benefit .ic{flex:none;margin:4px 0 0}
.benefit h3{font-size:1.25rem;margin:0 0 .4rem}
.benefit p{font-size:.95rem;margin:0}

/* ---------- STEPS ---------- */
.steps{counter-reset:step;max-width:900px}
.step{display:grid;grid-template-columns:72px 1fr;padding:1.75rem 0;border-top:1px solid var(--rule-d)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font:700 1.5rem var(--serif);color:rgba(232,232,232,.3);line-height:1.2}
.step h3{font-size:1.3rem;margin:0 0 .35rem}
.step p{font-size:.95rem;margin:0}
.step>*{grid-column:2}
.step::before{grid-row:1/span 3;grid-column:1}
.sprint{margin-top:1.5rem;padding:1.5rem;background:var(--dark2);border:1px solid rgba(232,232,232,.07);border-radius:2px}
.sprint h4{font:400 10px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--label-d);margin:0 0 1rem}
.sprint-flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{border:1px solid rgba(232,232,232,.16);border-radius:2px;padding:8px 14px;font-size:.84rem;font-weight:400;color:var(--cream)}
.arrow{color:var(--label-d)}
.repeat{background:var(--cream);color:var(--dark);border-color:var(--cream);font-weight:500}

/* ---------- PREMIUM ---------- */
.premium{padding:clamp(2rem,5vw,4.5rem);border:1px solid var(--rule-l);border-radius:2px;background:rgba(26,24,20,.03)}
.premium h2{font-size:clamp(1.8rem,3.6vw,3rem);margin:0 0 1.75rem;line-height:1.1}
.premium p{max-width:64ch}

/* ---------- FINAL CTA ---------- */
.final .lead{max-width:22ch;margin:0 0 2rem}
.final p{max-width:56ch;margin:0 0 2.5rem;font-size:clamp(15px,1.3vw,17px)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid rgba(232,232,232,.06)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:2rem;padding-bottom:2rem;flex-wrap:wrap}
footer img{height:15px;opacity:.4;display:block}
/* The footer mark doubles as the way back to the main site (the nav's "← DX Distro"
   is the visible one); padded to a 44px tap target. */
.footer-home{display:flex;align-items:center;min-height:44px}
.footer-home:hover img{opacity:.8}
footer p{margin:0;font-size:11px;color:rgba(232,232,232,.55)}

/* ---------- SHOWCASE PAGES ---------- */
.page-head{padding:calc(var(--nav-h) + 5rem) 0 4rem}
.page-head .section-head{margin-bottom:0}
.page-head h1{font-size:clamp(2.6rem,6vw,5.5rem);line-height:1;letter-spacing:-.03em}
.back-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:2rem;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label-d);text-decoration:none;transition:color .2s}
.back-link:hover{color:var(--cream)}
.showcase-jumps{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 3.5rem}
.showcase-jumps a{display:flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--rule-l);border-radius:2px;font-size:.88rem;text-decoration:none;color:var(--ink);transition:background .2s}
.showcase-jumps a:hover{background:rgba(26,24,20,.05)}
.use-case-part{margin-top:2.5rem}
.use-case-part+.use-case-part{padding-top:2.5rem;border-top:1px solid var(--rule-l)}
.showcase-card{display:block}
.showcase-more{display:inline-block;margin-top:1.25rem;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.showcase-card:hover h3{color:var(--mid)}

/* Screenshots keep their own colours: they are product evidence, not decoration. */
.showcase-figure{margin:2rem 0 0;border:1px solid var(--rule-d);border-radius:2px;overflow:hidden;background:var(--dark2)}
.chapter.light .showcase-figure{border-color:var(--rule-l)}
.showcase-open{position:relative;display:block;width:100%;padding:0;border:0;background:#14161b;cursor:zoom-in;color:var(--cream)}
.showcase-open img{display:block;width:100%;height:auto}
.showcase-zoom{display:block;text-align:right;padding:10px 16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(232,232,232,.7);background:var(--dark2)}
.showcase-figure figcaption{padding:14px 18px;font-size:.88rem;line-height:1.6;color:var(--text-d);background:var(--dark)}
.showcase-open:focus-visible{outline:2px solid var(--cream);outline-offset:-4px}
.showcase-detail{margin-top:1.5rem}
.showcase-detail summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink)}

.showcase-modal{width:min(96vw,1600px);max-width:none;max-height:94vh;padding:0;border:1px solid rgba(232,232,232,.12);border-radius:2px;background:var(--dark);color:var(--cream)}
.showcase-modal::backdrop{background:rgba(10,9,5,.9)}
.showcase-modal[open]{display:flex;flex-direction:column;overflow:hidden}
.showcase-toolbar{position:sticky;top:0;flex:none;flex-wrap:wrap;background:var(--dark2);display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 18px;z-index:1}
.showcase-toolbar p{flex:1;min-width:140px;margin:0;font-size:.9rem;color:var(--text-d)}
.showcase-controls{display:flex;gap:8px;flex:none}
.showcase-fit,.showcase-close{min-height:44px;border:1px solid rgba(232,232,232,.2);border-radius:2px;padding:9px 14px;background:transparent;color:var(--cream);font:500 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.showcase-fit:hover,.showcase-close:hover{border-color:rgba(232,232,232,.5)}
.showcase-viewport{overflow:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.showcase-viewport img{display:block;width:100%;height:auto;max-width:none;flex:none}
.showcase-help{margin:0;padding:8px 16px;color:var(--text-d);font-size:.78rem;background:var(--dark2);flex:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:3.5rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .svc-item{grid-template-columns:1fr;gap:.6rem;padding:1.75rem 0}
  .svc-n{display:none}
}
/* Compact nav: the link list unfolds as a full-height panel inside the header.
   It stays inside header.nav (rather than being a sibling overlay like the main
   site's .mobile-menu) because the showcase dropdown lives in the same list.
   1080px, not the original 860px: with "← DX Distro" and the RO/EN/DE switch the
   bar holds nine entries, and measured, the CTA runs off the right edge below ~1000px
   (by 132px at 861px). 1080 leaves headroom for the longest language; all three
   (German included) were measured to fit from 1081px up. */
@media(max-width:1080px){
  .menu-toggle{display:flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--cream);font:400 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .nav-inner{flex-wrap:wrap;gap:0}
  .nav-links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:1.5rem 0 2rem;max-height:calc(100dvh - var(--nav-h));overflow:auto}
  .nav-links.is-open{display:flex}
  .nav-links>a:not(.nav-cta),.nav-drop-panel a{display:flex;align-items:center;min-height:52px;font:700 1.6rem var(--serif);letter-spacing:-.02em;text-transform:none;color:rgba(232,232,232,.7)}
  .nav-links .nav-cta{justify-content:center;display:flex;align-items:center;min-height:48px;margin-top:1.5rem;font-size:12px}
  .nav-drop-toggle{display:flex;align-items:center;min-height:36px;margin-top:.75rem;cursor:default;color:var(--label-d)}
  .nav-drop-toggle span{display:none}
  .nav-drop-menu{display:block;position:static;transform:none;padding-top:0}
  .nav-drop-panel{border:0;background:none;box-shadow:none;padding:0 0 0 1rem;min-width:0}
  .nav-drop-panel a{font-size:1.3rem;padding:0}
  .lang-switch{margin-top:1.25rem}
  .nav-links .lang-switch a{font-size:13px;padding:0 10px 0 0}
  .nav-links .lang-switch a+span+a{padding-left:10px}
}
@media(max-width:600px){
  body{font-size:15.5px;line-height:1.75}
  .hero{padding-top:calc(var(--nav-h) + 2.5rem);padding-bottom:3.5rem;min-height:0}
  .hero h1{font-size:clamp(2.3rem,10vw,3rem);overflow-wrap:break-word}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .btn{justify-content:center;text-align:center;line-height:1.5}
  .hero-trust{gap:1.25rem 2rem}
  .hero-trust>div{flex:1 1 120px}
  .chat{padding:16px}
  .msg{max-width:94%;font-size:.84rem}
  .section-head{margin-bottom:2.5rem}
  .lead{font-size:clamp(1.9rem,8.5vw,2.4rem)}
  .talk{padding:1.75rem 1.25rem}
  .talk h3{align-items:flex-start}
  .bubble{margin-right:0}
  .step{grid-template-columns:48px 1fr}
  .step::before{font-size:1.2rem}
  /* The sprint box needs the full width on a phone; the step number column
     would otherwise squeeze five chips into a 250px strip. */
  .sprint{grid-column:1/-1;margin-left:0}
  .chip{font-size:.78rem;padding:7px 11px}
  .page-head{padding-top:calc(var(--nav-h) + 2.5rem);padding-bottom:3rem}
  .final .btn{width:100%}
  .showcase-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .showcase-toolbar{padding:12px;padding-top:max(12px,env(safe-area-inset-top));gap:10px}
  .showcase-toolbar p{flex-basis:100%;font-size:.85rem}
  .showcase-controls{width:100%;justify-content:space-between}
  .showcase-help{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .showcase-viewport{flex:1}
  .showcase-figure figcaption{font-size:.82rem;overflow-wrap:anywhere;padding:12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .split-inner{transform:none}
  .ch-hr{max-width:60px}
}