/* ILINKS Assist — Landingpage. Self-hosted Fonts (DSGVO, kein Google-CDN).
   Cormorant 500 + Instrument (variabel) liegen bereits in ../amaya/fonts;
   die fehlenden Cormorant-Schnitte (400, 600, italic-400) in ./fonts. */

@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/cormorant-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('../amaya/fonts/cormorant-garamond-500-latin.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/cormorant-600.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/cormorant-italic-400.woff2') format('woff2'); }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../amaya/fonts/instrument-sans-latin.woff2') format('woff2'); }

:root{
  --ink:#141414;      /* Grund */
  --ink-2:#1c1c1e;
  --ink-3:#242428;
  --cream:#f4f1ea;    /* Textlicht */
  --soft:#a8a49c;     /* Sekundärtext */
  --gold:#c9a96e;     /* Linie, nie Fläche */
  --glass:rgba(30,30,34,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 2rem}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.1;letter-spacing:-.01em}

/* ---- Ambient Orb ---- */
.orb{
  position:fixed;top:50%;left:50%;width:70vmin;height:70vmin;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(201,169,110,.12), rgba(20,20,20,0) 62%);
  filter:blur(8px);
  pointer-events:none;z-index:0;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}

section{position:relative;z-index:1}

/* ---- Hero ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6rem 2rem}
.eyebrow{font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:2.2rem}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);margin-bottom:1.6rem}
.hero h1 em{font-style:italic;color:var(--soft)}
.hero .sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--soft);max-width:34ch;margin:0 auto 3rem}

/* ---- Demo Hook ---- */
.demo-card{
  width:100%;max-width:600px;
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border-radius:1.5rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.3), 0 24px 60px -20px rgba(0,0,0,.6);
  padding:2.4rem 2rem;
  margin:0 auto;
}
.demo-label{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.demo-row{display:flex;gap:.6rem;flex-wrap:wrap}
.demo-input{
  flex:1;min-width:220px;
  background:rgba(20,20,20,.5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:.85rem;
  padding:.95rem 1.1rem;
  color:var(--cream);font-size:1rem;font-family:inherit;
  transition:border-color .3s;
}
.demo-input::placeholder{color:var(--soft)}
.demo-input:focus-visible{outline:none;border-color:var(--gold)}
.demo-btn{
  background:var(--cream);color:var(--ink);
  border:none;border-radius:.85rem;
  padding:.95rem 1.7rem;font-size:1rem;font-weight:600;font-family:inherit;
  cursor:pointer;transition:transform .2s, opacity .2s;
  white-space:nowrap;
}
.demo-btn:hover{transform:translateY(-1px)}
.demo-btn:disabled{opacity:.55;cursor:default;transform:none}
.demo-consent{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.1rem;font-size:.82rem;color:var(--soft);text-align:left}
.demo-consent input{margin-top:.25rem;accent-color:var(--gold)}
.demo-hint{margin-top:1.4rem;font-size:.82rem;color:var(--soft);text-align:center}

/* ---- Demo-Chat (von demo.js gerendert) — dunkel, zur Seite passend ---- */
.amaya-demo-stage{margin-top:1.6rem}
.amaya-demo-status{display:flex;align-items:center;justify-content:center;gap:.55rem;text-align:center;color:var(--soft);padding:.8rem 0}
/* Phasen-Icons (demo.js): Linien-SVGs in Champagne-Gold, ruhig gedimmt. */
.amaya-demo-status svg{width:16px;height:16px;flex:none;color:var(--gold);opacity:.85}
.amaya-demo-bar{height:2px;background:rgba(255,255,255,.1);border-radius:2px;margin:.2rem auto 0;max-width:340px;overflow:hidden}
.amaya-demo-bar-fill{display:block;height:100%;width:0;background:var(--gold);border-radius:2px;transition:width .5s cubic-bezier(.16,1,.3,1)}
.amaya-demo-log{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.4rem 0;text-align:left}
.amaya-demo-msg{margin:0;padding:.55rem .9rem;border-radius:.9rem;max-width:88%;line-height:1.5;text-align:left}
.amaya-demo-msg strong{font-weight:600;color:var(--cream)}
.amaya-demo-msg ul{margin:.4rem 0 .1rem;padding-left:1.1rem}
.amaya-demo-msg li{margin:.15rem 0}
.amaya-demo-msg--user{align-self:flex-end;background:rgba(255,255,255,.08);color:var(--cream)}
.amaya-demo-msg--amaya{align-self:flex-start;background:rgba(20,20,20,.5);border:1px solid rgba(255,255,255,.12);color:var(--cream)}
.amaya-demo-chatform{display:flex;gap:.5rem;margin-top:.6rem}
.amaya-demo-chatinput{flex:1;background:rgba(20,20,20,.5);border:1px solid rgba(255,255,255,.14);border-radius:.85rem;padding:.7rem .95rem;color:var(--cream);font:inherit}
.amaya-demo-chatinput:focus-visible{outline:none;border-color:var(--gold)}
.amaya-demo-send{background:var(--cream);color:var(--ink);border:none;border-radius:.85rem;padding:.7rem 1.1rem;font:inherit;font-weight:600;cursor:pointer}
.amaya-demo-cta{margin-top:1.4rem;text-align:center;color:var(--cream)}
.amaya-demo-cta a{color:var(--gold)}
/* Chat-Header: Avatar (Tröpfchen) + Status-Dot */
.amaya-demo-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.amaya-demo-avatar{display:inline-flex;width:26px;height:26px;color:var(--gold);flex:0 0 auto}
.amaya-demo-avatar svg{width:100%;height:100%;display:block}
.amaya-demo-ident{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;letter-spacing:.02em;color:var(--soft)}
.amaya-demo-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.5}
.amaya-demo-dot[data-state=thinking],.amaya-demo-dot[data-state=typing]{opacity:1;animation:amaya-demo-pulse 1s ease-in-out infinite}
@keyframes amaya-demo-pulse{0%,100%{opacity:.35}50%{opacity:1}}
/* Tipp-Indikator */
.amaya-demo-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:.6rem .9rem;background:rgba(20,20,20,.5);border:1px solid rgba(255,255,255,.12);border-radius:.9rem}
.amaya-demo-typing span{width:6px;height:6px;border-radius:50%;background:var(--soft);animation:amaya-demo-blink 1.2s infinite ease-in-out}
.amaya-demo-typing span:nth-child(2){animation-delay:.18s}
.amaya-demo-typing span:nth-child(3){animation-delay:.36s}
@keyframes amaya-demo-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* Response- & Starter-Chips (Light-Pills, Gold-Kontur) */
.amaya-demo-chips,.amaya-demo-starters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0}
.amaya-demo-starters{margin:.2rem 0 .5rem}
.amaya-demo-chip{background:transparent;border:1px solid var(--gold);color:var(--cream);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.85rem;line-height:1.2;cursor:pointer;transition:background .2s,color .2s}
.amaya-demo-chip:hover{background:var(--gold);color:var(--ink)}
@media (prefers-reduced-motion: reduce){.amaya-demo-dot,.amaya-demo-typing span{animation:none!important}.amaya-demo-chip{transition:none}}

/* ---- Statement ---- */
.statement{padding:14rem 2rem;text-align:center}
.statement h2{font-size:clamp(2rem,5vw,3.4rem);max-width:20ch;margin:0 auto}
.statement h2 em{font-style:italic;color:var(--gold)}

/* ---- Three moves ---- */
.moves{padding:8rem 2rem}
.move{
  display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:baseline;
  padding:3.5rem 0;border-top:1px solid rgba(255,255,255,.08);
}
.move-num{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--gold);font-style:italic;line-height:1}
.move h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.8rem}
.move p{color:var(--soft);max-width:46ch}

/* ---- Proof line ---- */
.proof{padding:12rem 2rem;text-align:center}
.proof .big{font-family:'Cormorant Garamond',serif;font-size:clamp(3.5rem,10vw,7rem);color:var(--cream);line-height:1;font-style:italic}
.proof .lbl{color:var(--soft);letter-spacing:.2em;text-transform:uppercase;font-size:.82rem;margin-top:1.5rem}

/* ---- CTA ---- */
.cta{padding:10rem 2rem 12rem;text-align:center}
.cta h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1.4rem}
.cta p{color:var(--soft);margin-bottom:2.8rem;max-width:38ch;margin-left:auto;margin-right:auto}
.cta-btn{
  display:inline-block;background:var(--cream);color:var(--ink);
  padding:1.1rem 2.6rem;border-radius:.9rem;font-weight:600;text-decoration:none;font-size:1.05rem;
  transition:transform .2s;
}
.cta-btn:hover{transform:translateY(-2px)}

/* ---- Footer ---- */
footer{border-top:1px solid rgba(255,255,255,.08);padding:3rem 2rem;text-align:center;color:var(--soft);font-size:.85rem}
footer a{color:var(--soft);text-decoration:none;margin:0 .8rem}
footer a:hover{color:var(--cream)}

.reveal{opacity:0;transform:translateY(30px)}

/* Sichtbarer Fokus (Tastatur) — nie ohne Ersatz entfernt. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(max-width:640px){
  .move{grid-template-columns:1fr;gap:.8rem}
  .statement,.proof{padding:8rem 2rem}
}
@media(prefers-reduced-motion:reduce){
  .orb{animation:none}
  .reveal{opacity:1;transform:none}
  *{animation:none!important;transition:none!important}
}
