/* ============================================================
   Aviros — Elevation Layer
   Wendet die "high-end-visual-design"-Skill auf die Editorial-Luxury-Basis an.
   Nach style.css + motion.css einbinden.
   ============================================================ */

/* ---------- 1. Eyebrow als Pill-Badge (statt Linie) ---------- */
.eyebrow{
  background:rgba(200,132,58,.10);
  border:1px solid rgba(200,132,58,.28);
  border-radius:100px;
  padding:7px 15px;
  font-size:.68rem;
  letter-spacing:.22em;
  color:var(--accent);
}
.eyebrow::before{display:none}
.eyebrow.on-dark{background:rgba(224,161,75,.14);border-color:rgba(224,161,75,.34);color:var(--accent-2)}

/* ---------- 2. Button-in-Button-Pfeil + magnetische Physik ---------- */
.btn{transition:transform .4s cubic-bezier(.32,.72,0,1),box-shadow .35s,background .35s,color .35s}
.btn .arr{
  display:inline-grid;place-items:center;
  width:27px;height:27px;border-radius:50%;
  background:rgba(255,255,255,.20);
  font-size:.85rem;line-height:1;
  transition:transform .45s cubic-bezier(.32,.72,0,1),background .3s;
}
.btn-ghost .arr{background:rgba(19,32,28,.07)}
.btn-accent .arr{background:rgba(255,255,255,.22)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arr{transform:translate(3px,-1px) scale(1.08)}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- 3. Maschinierte Tiefe für Karten (statt flach) ---------- */
.prod,.pricebox,.pain,.quote,.guarantee{
  border:1px solid rgba(19,32,28,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(7,32,25,.04),
    0 28px 56px -34px rgba(7,32,25,.42);
}
.prod:hover,.pricebox:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 4px rgba(7,32,25,.05),
    0 40px 80px -34px rgba(7,32,25,.5);
}
.chat-mock{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 50px 90px -34px rgba(7,32,25,.5),
    0 0 0 1px rgba(7,32,25,.04);
}
/* dunkle Featured-Box: Highlight oben dezent statt weiß */
.pricebox.featured{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 60px -30px rgba(7,32,25,.6)}

/* ---------- 4. Blur-Up Scroll-Reveal (cineastischer Eintritt) ---------- */
html.js .reveal{filter:blur(7px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1),filter .85s ease}
html.js .reveal.in{filter:blur(0)}
@media (prefers-reduced-motion:reduce){html.js .reveal{filter:none}}

/* ---------- 5. Mehr Weißraum (Atmen) ---------- */
section.block{padding:120px 0}
section.block.tight{padding:84px 0}
.sec-head{margin-bottom:60px}
@media(max-width:640px){section.block{padding:76px 0}section.block.tight{padding:60px 0}}

/* ============================================================
   De-Templating (impeccable-Skill): KI-Tells entfernen
   ============================================================ */
/* 1. Side-Stripe-Border raus -> volle Hairline + kräftigeres Icon-Tile */
.pain{border-left:1px solid var(--line)!important;border:1px solid var(--line);border-radius:16px}
.pain .em{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);margin-bottom:16px}
.pain .em svg{width:26px;height:26px;color:var(--accent)}
/* 2. Eyebrow-Pill NICHT über jeder Sektion (KI-Grammatik). Hero/Statement behalten Stimme. */
.sec-head .eyebrow{display:none}
.sec-head h2{margin-top:0}

/* ---------- Bento-Raster für Produkte (bricht das Gleichraster) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:18px}
.bento .prod{grid-column:span 2;display:flex;flex-direction:column}
.bento .b-flag{grid-column:span 4;grid-row:span 2}
.bento .b-flag h3{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.bento .b-flag p{font-size:1.06rem;max-width:46ch}
.b-points{list-style:none;display:flex;flex-direction:column;gap:9px;margin:18px 0 4px}
.b-points li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.b-points .ck{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;flex-shrink:0;font-size:.66rem;font-weight:800;margin-top:3px}
@media(max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .prod{grid-column:span 1}
  .bento .b-flag{grid-column:span 2;grid-row:span 1}
}
@media(max-width:640px){
  .bento{grid-template-columns:1fr;gap:14px}
  .bento .prod,.bento .b-flag{grid-column:span 1}
}

/* ---------- 3D-Hero-Canvas (Three.js Knoten-Netzwerk) ---------- */
.hero-3d{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.95}
.hero-3d canvas{width:100%!important;height:100%!important;display:block}
@media(max-width:880px){.hero-3d{display:none}}

/* ---------- 6. Eyebrow im Hero/Statement etwas Abstand ---------- */
.hero .eyebrow,.page-hero .eyebrow,.statement .eyebrow{margin-bottom:6px}

/* ============================================================
   Emil-Pass (emil-design-eng): Easing & Feedback-Politur
   ============================================================ */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);     /* kräftiges ease-out für UI */
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);  /* iOS-Drawer-Kurve */
}
/* Stärkeres, „punchiges" Easing auf Reveals & Pfeil */
html.js .reveal{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s ease}
.btn .arr{transition:transform .4s var(--ease-drawer),background .3s}
/* Druck-Feedback: Buttons reagieren spürbar auf den Klick (Emil: scale 0.97) */
.btn:active{transform:translateY(0) scale(.97)}
.prod:active,.pricebox:active{transform:scale(.99)}
/* Touch-Geräte: keine klebrigen Hover-Zustände (Hover feuert dort beim Tippen) */
@media (hover:none){
  .btn:hover,.prod:hover,.pricebox:hover,.pain:hover{transform:none}
  .btn:hover .arr{transform:none}
}

/* ============================================================
   Wortmarke „Aviros" — A + i = „AI" hervorgehoben, „systems"-Sub
   ============================================================ */
.logo .brandmark{display:inline-flex;flex-direction:column;line-height:.9;justify-content:center}
.logo .bm-word{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
.logo .bm-word .hl{color:var(--accent-2,#E0A14B)}
.logo .bm-sub{font-family:var(--sans);font-size:.42em;font-weight:600;letter-spacing:.46em;color:var(--accent-2,#E0A14B);margin-top:4px;padding-left:.1em}