/* ═══════════════════════════════════════════════════════════
   uih.ch — Swiss Modernism 2.0
   Griglia a 12 colonne · rosso segnale su inchiostro · scala 4/8
   ═══════════════════════════════════════════════════════════ */

:root{
  /* colore */
  --ink:      #0A0A0B;
  --ink-2:    #101014;
  --ink-3:    #16161B;
  --paper:    #F5F5F3;
  --red:      #FF2E1F;
  --red-deep: #C4221A;
  --line:     #212126;
  --line-2:   #2C2C33;
  --muted:    #8B8B95;
  --muted-2:  #5C5C66;

  /* tipografia */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* spazio — scala 4/8 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;

  /* struttura */
  --shell: 1280px;
  --gut:   clamp(20px, 4vw, 56px);
  --nav-h: 68px;
  --r:     3px;          /* raggio: quasi nullo, è svizzero */
  --r-lg:  6px;

  /* moto */
  --e-out: cubic-bezier(.22,1,.36,1);
  --t-fast: 160ms;
  --t: 240ms;

  --z-nav: 100; --z-menu: 110; --z-toast: 1000;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-feature-settings:'kern' 1;
}

h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.02; }
p{ margin:0; }
ul,dl,dd{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
code{ font-family:var(--mono); }
svg{ display:block; }
::selection{ background:var(--red); color:#fff; }

/* `hidden` deve vincere su qualunque display dichiarato più sotto */
[hidden]{ display:none !important; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Grana: rompe le campiture piatte del nero e toglie l'aria da renderizzato.
   Non è decorazione — su uno schermo grande il nero pieno mostra le bande. */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ .grain{ opacity:.02; } }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:var(--s4); top:-64px; z-index:var(--z-toast);
  background:var(--red); color:#fff; padding:var(--s3) var(--s5);
  font-weight:700; font-size:14px; transition:top var(--t) var(--e-out);
}
.skip-link:focus{ top:var(--s4); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.inline-code{
  font-family:var(--mono); font-size:.88em;
  background:rgba(255,46,31,.1); color:#FF7A6E;
  padding:.15em .45em; border-radius:2px;
  border:1px solid rgba(255,46,31,.2);
}

/* ── stato iniziale delle animazioni (solo se JS è vivo) ───── */
html.js-anim .reveal{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  html.js-anim .reveal{ opacity:1 !important; transform:none !important; }
}

/* ═══════════════ BOTTONI ═══════════════ */
.btn{
  --bg:transparent; --fg:var(--paper); --bd:var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:0 var(--s5);
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:var(--r);
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; cursor:pointer;
  transition:background var(--t-fast) ease, border-color var(--t-fast) ease,
             color var(--t-fast) ease, transform var(--t-fast) var(--e-out);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ --bg:var(--red); --fg:#fff; --bd:var(--red); }
.btn--primary:hover{ --bg:#FF4535; --bd:#FF4535; }
.btn--ghost:hover{ --bd:var(--paper); --bg:rgba(245,245,243,.05); }
.btn--sm{ min-height:38px; padding:0 var(--s4); font-size:13.5px; }
.btn--lg{ min-height:58px; padding:0 var(--s7); font-size:17px; }
.btn--full{ width:100%; }
.btn__icon{ transition:transform var(--t) var(--e-out); }
.btn:hover .btn__icon{ transform:translateX(3px); }

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  height:var(--nav-h);
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) ease, background var(--t) ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(10,10,11,.9); }
.nav__inner{
  height:var(--nav-h); max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; gap:var(--s7);
}
.nav__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:var(--red); transition:width 80ms linear;
}

.wordmark{ display:flex; align-items:center; gap:var(--s2); flex:0 0 auto; }
.wordmark__mark svg{ fill:var(--red); }
.wordmark__text{
  font-family:var(--mono); font-weight:700; font-size:20px;
  letter-spacing:-.05em;
}
.wordmark__tld{ color:var(--muted-2); }

.nav__links{ display:flex; gap:var(--s6); margin-right:auto; }
.nav__links a{
  position:relative; font-size:14.5px; font-weight:500; color:var(--muted);
  padding-block:var(--s2);
  transition:color var(--t-fast) ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:1px;
  background:var(--red); transition:right var(--t) var(--e-out);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ right:0; }

.nav__actions{ display:flex; align-items:center; gap:var(--s4); flex:0 0 auto; }
.nav__flag{
  display:flex; align-items:center; gap:var(--s2);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.nav__burger{
  display:none; width:44px; height:44px; margin-left:auto;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__burger span{ display:block; width:20px; height:1.5px; background:var(--paper); transition:transform var(--t) var(--e-out); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:var(--z-menu);
  background:var(--ink-2); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; padding:var(--s4) var(--gut) var(--s6);
}
.mobile-menu a{
  padding:var(--s4) 0; font-size:19px; font-weight:600;
  border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom:0; }

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh; padding-top:calc(var(--nav-h) + var(--s6));
  padding-bottom:var(--s8);
  display:flex; align-items:center; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-3; background:var(--ink); }
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 15% 20%, rgba(10,10,11,.55) 0%, rgba(10,10,11,.86) 55%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(10,10,11,.5) 0%, transparent 30%, rgba(10,10,11,.95) 100%);
}
.hero__grid-overlay{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%;
  mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 60%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 60%, transparent);
}
.hero__inner{ position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--s5);
}
.eyebrow__dot{
  width:6px; height:6px; background:var(--red); border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,46,31,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(255,46,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,46,31,0); }
}
@media (prefers-reduced-motion: reduce){ .eyebrow__dot{ animation:none; } }

.hero__title{
  font-size:clamp(2.7rem, 7vw, 6.1rem);
  font-weight:900; line-height:.94; letter-spacing:-.05em;
  max-width:15ch; margin-bottom:var(--s5);
  text-wrap:balance;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title em{ font-style:normal; color:var(--red); }
.hero__title .word{ display:inline-block; }

.hero__lead{
  max-width:56ch; font-size:clamp(16px, 1.6vw, 18px);
  line-height:1.6; color:#C8C8CE; margin-bottom:var(--s6);
}

.hero__trust{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6);
  margin-top:var(--s5);
  font-size:13.5px; color:var(--muted);
}
.hero__trust li{ display:flex; align-items:center; gap:var(--s2); }
.hero__trust svg{ color:var(--red); flex:0 0 auto; }

.hero__scrollhint{
  position:absolute; left:50%; bottom:var(--s5); translate:-50% 0;
  width:1px; height:44px; background:linear-gradient(var(--line-2), transparent);
  overflow:hidden;
}
.hero__scrollhint span{
  position:absolute; inset:0; background:var(--red);
  animation:scrollhint 2.2s var(--e-out) infinite;
}
@keyframes scrollhint{ 0%{ translate:0 -100% } 60%,100%{ translate:0 100% } }
@media (prefers-reduced-motion: reduce){ .hero__scrollhint{ display:none; } }

/* ── shortener ─────────────────────────────────────────────── */
.shortener{
  position:relative;
  background:rgba(16,16,20,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:var(--s5); max-width:860px;
  box-shadow:0 24px 70px -30px rgba(0,0,0,.9);
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
/* Un alone rosso che stacca la scheda dallo sfondo animato senza usare un bordo più spesso */
.shortener::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background:radial-gradient(60% 120% at 30% 0%, rgba(255,46,31,.16), transparent 70%);
  filter:blur(18px);
}
.shortener__form{ display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap; }
.shortener__field{ flex:1 1 380px; min-width:0; }
.shortener__label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2);
}
.shortener__inputwrap{
  display:flex; align-items:center;
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--r);
  transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.shortener__inputwrap:focus-within{
  border-color:var(--red); box-shadow:0 0 0 3px rgba(255,46,31,.16);
}
.shortener__proto{
  padding-inline:var(--s4) 0; font-family:var(--mono); font-size:14px; color:var(--muted-2);
  flex:0 0 auto;
}
.shortener__input{
  flex:1 1 auto; min-width:0; height:50px;
  padding:0 var(--s4) 0 var(--s1);
  background:none; border:0; outline:0;
  font-family:var(--mono); font-size:14.5px;
}
.shortener__input::placeholder{ color:var(--muted-2); }
.shortener__btn{ flex:0 0 auto; height:52px; }
.shortener__btn.is-busy{ pointer-events:none; opacity:.7; }

.shortener__error{
  margin-top:var(--s3); font-size:13.5px; color:#FF7A6E;
  display:flex; align-items:center; gap:var(--s2);
}
.shortener__error::before{ content:'✕'; font-size:11px; }

.result{
  display:grid; grid-template-columns:1fr auto; gap:var(--s5);
  margin-top:var(--s5); padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.result__label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3);
}
/* gap 0: «uih.ch/» e la parola devono leggersi come un unico indirizzo,
   non come due parole separate. Lo spazio lo mette il bottone da sé. */
.result__row{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.result__row--actions{ margin-top:var(--s5); gap:var(--s6); align-items:flex-end; }

/* ── la riga del link: prefisso fisso + endung modificabile ── */
.result__host,
.result__slug,
.result__mirror{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(21px, 3.2vw, 32px); letter-spacing:-.035em; line-height:1.2;
}
.result__host{ color:var(--muted-2); }
.result__slugwrap{ position:relative; display:inline-block; min-width:2ch; }
.result__mirror{ visibility:hidden; white-space:pre; display:block; padding-inline:2px; }
.result__slug{
  position:absolute; inset:0; width:100%;
  padding:0 2px; background:none; border:0; outline:0;
  color:var(--red);
  border-bottom:2px dashed rgba(255,46,31,.35);
  transition:border-color var(--t-fast) ease, color var(--t-fast) ease;
  caret-color:var(--red);
}
.result__slug:hover{ border-bottom-color:rgba(255,46,31,.7); }
.result__slug:focus{ border-bottom-style:solid; border-bottom-color:var(--red); }
.result__slug.is-bad{ color:#FF9C93; border-bottom-color:#FF9C93; }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto; margin-left:var(--s2);
  border:1px solid var(--line-2); border-radius:var(--r); color:var(--muted);
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease, transform 420ms var(--e-out);
}
.iconbtn:hover{ color:var(--red); border-color:var(--red); }
.iconbtn:active{ transform:rotate(-180deg); }

.result__gloss{
  margin-top:var(--s3); font-size:15px; color:#C8C8CE;
  font-style:italic; letter-spacing:-.01em;
}
.result__gloss.is-own{ color:var(--muted-2); font-style:normal; }
.result__state{
  margin-top:var(--s2); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  display:flex; align-items:center; gap:var(--s2); min-height:17px;
}
.result__state.is-good{ color:#3ED598; }
.result__state.is-bad{ color:#FF9C93; }
.result__state::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.result__state:empty::before{ display:none; }

.result__meta{ display:flex; gap:var(--s6); flex-wrap:wrap; }
.result__meta dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:2px;
}
.result__meta dd{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.result__qr{ display:flex; flex-direction:column; align-items:center; gap:var(--s2); }
.result__qrframe{
  width:126px; height:126px; padding:8px;
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--r);
}
.result__qrframe svg{ width:100%; height:100%; }
.result__qrcaption{ font-family:var(--mono); font-size:10px; color:var(--muted-2); letter-spacing:.06em; }

.hero__note{
  max-width:64ch; margin-top:var(--s5);
  font-size:14px; line-height:1.6; color:var(--muted);
}
.hero__note em{ font-style:normal; font-family:var(--mono); color:var(--paper); }

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; padding-block:var(--s4);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:var(--s5); width:max-content;
  font-family:var(--mono); font-size:13px; color:var(--muted);
  letter-spacing:.02em; will-change:transform;
}
.marquee__track i{ color:var(--red); font-style:normal; }
.marquee__track span:nth-child(4n+1){ color:var(--paper); }

/* ═══════════════ STATS ═══════════════ */
.stats{ padding-block:var(--s9); border-bottom:1px solid var(--line); }
.stats__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.stat{ background:var(--ink); padding:var(--s6) var(--s5); }
.stat__num{
  display:block; font-family:var(--mono); font-weight:700;
  font-size:clamp(38px, 5vw, 60px); line-height:1; letter-spacing:-.05em;
  color:var(--paper); font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block; margin-top:var(--s3); font-size:13px; font-weight:600;
  color:var(--red); letter-spacing:.02em;
}
.stat__note{ margin-top:var(--s2); font-size:13.5px; color:var(--muted); line-height:1.5; }

/* ═══════════════ INTESTAZIONI DI SEZIONE ═══════════════ */
.sechead{ margin-bottom:var(--s8); position:relative; padding-top:var(--s5); }
.sechead__num{
  position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--red);
}
.sechead__title{
  font-size:clamp(2.1rem, 5vw, 4.2rem); font-weight:800;
  letter-spacing:-.045em; line-height:1; margin-bottom:var(--s5);
}
.sechead__lead{ max-width:62ch; font-size:clamp(15.5px, 1.4vw, 18px); color:var(--muted); line-height:1.62; }
.sechead--tight{ margin-bottom:0; }

/* ═══════════════ TOOLS ═══════════════ */
.tools{ padding-block:var(--s10); border-bottom:1px solid var(--line); }
.tools__stage{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s8);
  align-items:start;
}
.tools__list{ display:flex; flex-direction:column; }
.tool{
  padding:var(--s6) 0 var(--s6) var(--s6);
  border-top:1px solid var(--line); position:relative;
  opacity:.42; transition:opacity var(--t) ease;
  cursor:pointer;
}
.tool:last-child{ border-bottom:1px solid var(--line); }
.tool::before{
  content:''; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:top;
  transition:transform 420ms var(--e-out);
}
.tool--active{ opacity:1; }
.tool--active::before{ transform:scaleY(1); }
.tool__idx{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--red);
  display:block; margin-bottom:var(--s2);
}
.tool__title{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:var(--s3); }
.tool__text{ color:var(--muted); font-size:15.5px; line-height:1.62; max-width:46ch; }
.tool__points{
  margin-top:var(--s4); display:grid; gap:var(--s2);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height 420ms var(--e-out), opacity 300ms ease, margin-top 420ms var(--e-out);
}
.tool--active .tool__points{ max-height:220px; opacity:1; }
.tool__points li{
  font-size:14px; color:#B4B4BC; padding-left:var(--s5); position:relative;
}
.tool__points li::before{
  content:''; position:absolute; left:0; top:.6em; width:10px; height:1px; background:var(--red);
}

.tools__visual{ position:sticky; top:calc(var(--nav-h) + var(--s6)); }
.device{
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.device__bar{
  display:flex; align-items:center; gap:6px;
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  background:var(--ink-3);
}
.device__bar span{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.device__bar em{
  margin-left:var(--s4); font-family:var(--mono); font-size:12px;
  color:var(--muted); font-style:normal;
}
.device__screen{ position:relative; height:392px; }
.panel{
  position:absolute; inset:0; padding:var(--s5);
  opacity:0; visibility:hidden;
  transition:opacity 320ms ease, visibility 320ms;
}
.panel--active{ opacity:1; visibility:visible; }

.panel__rows{ display:grid; gap:var(--s1); }
.prow{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:var(--s2) var(--s4); padding:var(--s3) var(--s3);
  border:1px solid var(--line); border-radius:var(--r); background:var(--ink);
}
.prow b{ font-family:var(--mono); font-size:13.5px; color:var(--red); font-weight:500; }
.prow i{
  grid-column:1; font-style:normal; font-family:var(--mono);
  font-size:11.5px; color:var(--muted-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prow em{
  grid-row:1/3; grid-column:2; align-self:center;
  font-style:normal; font-family:var(--mono); font-weight:700; font-size:15px;
  font-variant-numeric:tabular-nums;
}
.prow--muted{ opacity:.45; }
.panel__foot{
  display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2);
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--muted-2); flex:0 0 auto; }
.dot--live{ background:#3ED598; box-shadow:0 0 8px rgba(62,213,152,.7); }

.panel__qr{
  display:flex; align-items:center; justify-content:center;
  height:290px; background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s5);
}
.panel__qr svg{ width:100%; height:100%; max-width:250px; max-height:250px; }
.panel__qrmeta{
  display:flex; align-items:center; justify-content:space-between; margin-top:var(--s4);
  font-family:var(--mono); font-size:11px; color:var(--muted-2);
}
.chip{
  background:rgba(255,46,31,.12); color:#FF7A6E; border:1px solid rgba(255,46,31,.28);
  padding:3px 9px; border-radius:2px; letter-spacing:.06em; text-transform:uppercase;
}

.panel__host{ display:grid; gap:var(--s3); }
.hostrow{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:12.5px; color:#B4B4BC;
}
.hostrow em{ margin-left:auto; font-style:normal; color:#3ED598; }
.hostbar{ height:4px; background:var(--ink); border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.hostbar i{ display:block; height:100%; width:var(--w); background:var(--red); }
.hostcode{
  margin-top:var(--s2); padding:var(--s4);
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:12.5px; line-height:1.8; color:#B4B4BC;
}
.hostcode span{ color:var(--muted-2); }
.hostcode .ok{ color:#3ED598; }

/* ═══════════════ WORTSCHATZ ═══════════════ */
.lex{ padding-block:var(--s10); border-bottom:1px solid var(--line); }
.lex__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.lexword{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start;
  min-height:104px; padding:var(--s5) var(--s4);
  background:var(--ink); text-align:left;
  transition:background var(--t) ease;
}
.lexword::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform 380ms var(--e-out);
}
.lexword:hover{ background:var(--ink-3); }
.lexword:hover::after{ transform:scaleX(1); }
.lexword__slug{
  font-family:var(--mono); font-weight:700; font-size:16px;
  letter-spacing:-.03em; color:var(--paper);
  transition:color var(--t-fast) ease;
}
.lexword__slug i{ font-style:normal; color:var(--muted-2); font-weight:400; }
.lexword:hover .lexword__slug{ color:var(--red); }
.lexword__gloss{ font-size:13px; color:var(--muted); line-height:1.45; }

.lex__note{
  margin-top:var(--s6); font-size:15px; color:var(--muted);
  max-width:70ch; line-height:1.7;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3);
}
.lex__coined{
  display:inline-block;
  font-family:var(--mono); font-weight:700; font-size:19px;
  color:var(--red); letter-spacing:-.03em;
  padding:2px 10px; border:1px solid rgba(255,46,31,.3); border-radius:var(--r);
  background:rgba(255,46,31,.07);
}
.lex__again{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--muted); text-transform:uppercase;
  border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.lex__again:hover{ color:var(--paper); border-color:var(--red); }

/* ═══════════════ QR-STUDIO ═══════════════ */
.qr{ padding-block:var(--s10); border-bottom:1px solid var(--line); }
.studio{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.studio__controls{ background:var(--ink-2); padding:var(--s7); display:grid; gap:var(--s6); align-content:start; }
.studio__preview{
  background:var(--ink-3); padding:var(--s7);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s5);
}
.studio__canvas{
  width:100%; max-width:320px; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:var(--r); padding:var(--s4);
  background:var(--ink);
  transition:background 260ms ease;
}
.studio__canvas svg{ width:100%; height:100%; }
.studio__readout{
  display:flex; gap:var(--s5); font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2);
}
.studio__readout b{ color:var(--paper); font-weight:700; }

.field{ display:grid; gap:var(--s2); }
.field__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  display:flex; justify-content:space-between; align-items:baseline;
}
.field__val{ color:var(--red); letter-spacing:.04em; }
.field__input{
  width:100%; padding:var(--s3) var(--s4);
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--r);
  font-family:var(--mono); font-size:14px; line-height:1.6; outline:0;
  transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
  resize:vertical;
}
.field__input:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,46,31,.16); }
.field__input--area{ min-height:84px; }
.field__help{ font-size:12.5px; color:var(--muted-2); }

.swatches{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
.swatch{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3); min-height:48px;
  border:1px solid var(--line-2); border-radius:var(--r);
  font-size:13.5px; color:var(--muted);
  transition:border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
}
.swatch span{
  width:22px; height:22px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  border:1px solid rgba(255,255,255,.14);
}
.swatch:hover{ border-color:var(--muted-2); color:var(--paper); }
.swatch--active{ border-color:var(--red); color:var(--paper); background:rgba(255,46,31,.07); }

.segmented{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
}
.seg{
  min-height:44px; font-size:13.5px; color:var(--muted);
  border-right:1px solid var(--line-2);
  transition:background var(--t-fast) ease, color var(--t-fast) ease;
}
.seg:last-child{ border-right:0; }
.seg:hover{ color:var(--paper); background:rgba(245,245,243,.04); }
.seg--active{ background:var(--red); color:#fff; }

.range{
  -webkit-appearance:none; appearance:none; width:100%; height:28px; background:none; cursor:pointer;
}
.range::-webkit-slider-runnable-track{ height:2px; background:var(--line-2); }
.range::-moz-range-track{ height:2px; background:var(--line-2); }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-7px;
  background:var(--red); border-radius:50%; border:2px solid var(--ink);
}
.range::-moz-range-thumb{
  width:16px; height:16px; background:var(--red); border-radius:50%; border:2px solid var(--ink);
}
.studio__actions{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.studio__actions .btn{ flex:1 1 140px; }

/* ═══════════════ HOSTING ═══════════════ */
.hosting{ padding-block:var(--s10); border-bottom:1px solid var(--line); }
.cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.card{
  background:var(--ink); padding:var(--s6) var(--s5) var(--s7);
  transition:background var(--t) ease;
}
.card:hover{ background:var(--ink-2); }
.card__idx{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:var(--s5);
  border:1px solid var(--red); border-radius:var(--r);
  font-family:var(--mono); font-size:14px; font-weight:700; color:var(--red);
}
.card h3{ font-size:19px; margin-bottom:var(--s3); letter-spacing:-.025em; }
.card p{ font-size:14.5px; color:var(--muted); line-height:1.6; }

.pledge{
  margin-top:var(--s8); padding:var(--s8) var(--s7);
  border-left:2px solid var(--red); background:var(--ink-2);
}
.pledge__text{
  font-size:clamp(19px, 2.5vw, 28px); font-weight:600;
  letter-spacing:-.03em; line-height:1.35; max-width:34ch; text-wrap:balance;
}
.pledge__by{
  display:block; margin-top:var(--s5);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2);
}

/* ═══════════════ PREISE ═══════════════ */
.pricing{ padding-block:var(--s10); border-bottom:1px solid var(--line); }
.pricing__toggle{
  display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; margin-bottom:var(--s7);
}
.ptog{
  display:flex; align-items:center; gap:var(--s2);
  min-height:46px; padding:0 var(--s5); font-size:14px; font-weight:600; color:var(--muted);
  border-right:1px solid var(--line-2);
  transition:background var(--t-fast) ease, color var(--t-fast) ease;
}
.ptog:last-child{ border-right:0; }
.ptog:hover{ color:var(--paper); }
.ptog--active{ background:var(--paper); color:var(--ink); }
.ptog__save{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  background:var(--red); color:#fff; padding:2px 6px; border-radius:2px;
}

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); align-items:start; }
.plan{
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6) var(--s5) var(--s6);
  display:flex; flex-direction:column; gap:var(--s4); position:relative;
  transition:border-color var(--t) ease, transform var(--t) var(--e-out);
}
.plan:hover{ border-color:var(--line-2); }
.plan--featured{
  border-color:var(--red); background:var(--ink-3);
  box-shadow:0 30px 70px -40px rgba(255,46,31,.5);
}
.plan__badge{
  position:absolute; top:-1px; right:var(--s5); translate:0 -50%;
  background:var(--red); color:#fff; padding:4px 10px; border-radius:2px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
}
.plan__name{ font-size:22px; letter-spacing:-.03em; }
.plan__for{ font-size:14px; color:var(--muted); margin-top:calc(var(--s4) * -1 + var(--s1)); }
.plan__price{ display:flex; align-items:baseline; gap:var(--s2); padding-block:var(--s3); }
.plan__cur{ font-family:var(--mono); font-size:14px; color:var(--muted); }
.plan__amt{
  font-family:var(--mono); font-weight:700; font-size:52px; line-height:1;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.plan__per{ font-size:14px; color:var(--muted); }
.plan__feats{ display:grid; gap:var(--s3); padding-block:var(--s3); flex:1 1 auto; }
.plan__feats li{
  position:relative; padding-left:var(--s5); font-size:14.5px; color:#C0C0C8; line-height:1.5;
}
.plan__feats li::before{
  content:''; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--red);
}

/* ═══════════════ FAQ ═══════════════ */
.faq{ padding-block:var(--s10); border-bottom:1px solid var(--line); }
.faq__grid{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:var(--s8); align-items:start; }
.accordion{ border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc__q{
  display:flex; align-items:center; gap:var(--s5); width:100%;
  padding:var(--s5) 0; text-align:left;
  font-size:clamp(16px,1.7vw,19px); font-weight:600; letter-spacing:-.02em;
  transition:color var(--t-fast) ease;
}
.acc__q:hover{ color:var(--red); }
.acc__ic{
  position:relative; width:16px; height:16px; margin-left:auto; flex:0 0 auto;
}
.acc__ic::before,.acc__ic::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transition:transform var(--t) var(--e-out);
}
.acc__ic::after{ transform:rotate(90deg); }
.acc__q[aria-expanded="true"]{ color:var(--red); }
.acc__q[aria-expanded="true"] .acc__ic::after{ transform:rotate(0deg); }
.acc__a{ overflow:hidden; height:0; }
.acc__a p{
  padding-bottom:var(--s5); max-width:64ch;
  font-size:15.5px; color:var(--muted); line-height:1.68;
}

/* ═══════════════ CTA ═══════════════ */
.cta{ padding-block:var(--s11); text-align:center; }
.cta__inner{ display:flex; flex-direction:column; align-items:center; gap:var(--s6); }
.cta__title{
  font-size:clamp(2.2rem, 6vw, 5rem); font-weight:900;
  letter-spacing:-.05em; line-height:.98; text-wrap:balance;
}
.cta__note{ font-size:14px; color:var(--muted-2); }

/* ═══════════════ FOOTER ═══════════════ */
.footer{ border-top:1px solid var(--line); background:var(--ink-2); padding-top:var(--s8); }
.footer__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s7);
  padding-bottom:var(--s8);
}
.footer__brand p{ margin-top:var(--s3); font-size:14.5px; color:var(--muted); max-width:34ch; }
.footer__by{
  display:block; margin-top:var(--s5);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
}
.footer__col{ display:flex; flex-direction:column; gap:var(--s3); }
.footer__col h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2); font-weight:500; margin-bottom:var(--s1);
}
.footer__col a{ font-size:14.5px; color:var(--muted); transition:color var(--t-fast) ease; }
.footer__col a:hover{ color:var(--red); }
.footer__base{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  flex-wrap:wrap; padding-block:var(--s5);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; color:var(--muted-2); letter-spacing:.04em;
}
.footer__ch{ display:flex; align-items:center; gap:var(--s2); }

/* ═══════════════ TOAST ═══════════════ */
.toast{
  position:fixed; left:50%; bottom:var(--s6); translate:-50% 0; z-index:var(--z-toast);
  background:var(--paper); color:var(--ink);
  padding:var(--s3) var(--s5); border-radius:var(--r);
  font-size:14px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity var(--t) ease, translate var(--t) var(--e-out);
}
.toast.is-on{ opacity:1; translate:-50% -8px; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1080px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .lex__grid{ grid-template-columns:repeat(3,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:1fr; max-width:520px; }
  .faq__grid{ grid-template-columns:1fr; gap:var(--s6); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .nav__links,.nav__actions{ display:none; }
  .nav__burger{ display:flex; }
  .tools__stage{ grid-template-columns:1fr; gap:var(--s7); }
  .tools__visual{ position:static; order:-1; }
  .device__screen{ height:330px; }
  .studio{ grid-template-columns:1fr; }
  .studio__controls,.studio__preview{ padding:var(--s6); }
}

@media (max-width:720px){
  :root{ --s9:64px; --s10:80px; --s11:96px; }
  body{ font-size:16px; }
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + var(--s7)); padding-bottom:var(--s8); }
  .hero__title{ letter-spacing:-.04em; }
  .shortener{ padding:var(--s4); }
  .shortener__btn{ width:100%; }
  .result{ grid-template-columns:1fr; }
  .result__qr{ align-items:flex-start; }
  .result__meta{ gap:var(--s5); }
  .stats__grid,.cards{ grid-template-columns:1fr; }
  .lex__grid{ grid-template-columns:repeat(2,1fr); }
  .lexword{ min-height:92px; padding:var(--s4) var(--s3); }
  .lexword__slug{ font-size:14px; }
  .result__row--actions{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
  .pledge{ padding:var(--s6) var(--s5); }
  .footer__grid{ grid-template-columns:1fr; gap:var(--s6); }
  .swatches{ grid-template-columns:1fr; }
  .hero__grid-overlay{ display:none; }
}