/* Self-hosted fonts (kein externer Google-Fonts-Abruf → keine IP-Übertragung an Google) */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/instrument-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/instrument-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/instrument-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/instrument-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/instrument-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/instrument-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* azuranest — Hi-Fi design implementation
   Fonts: Bricolage Grotesque (display) + Instrument Sans (body)
   Accent: #5fa000 / dark #4a7c00 */

:root {
  --accent: #5fa000;
  --accent-dark: #4a7c00;
  --ink: #0a0a0a;
  --cream: #efe9df;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--ink);
}

@media (pointer: fine) {
  /* Custom ring cursor is active: hide the real OS cursor everywhere
     (incl. links/buttons/clickable tiles that set their own cursor). */
  html.az-cursor-on,
  html.az-cursor-on * { cursor: none !important; }
}

h1, h2, h3, .display { font-family: 'Bricolage Grotesque', sans-serif; }

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes az-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes az-load { 0%, 100% { width: 30%; } 55% { width: 88%; } }
@keyframes az-bounce { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(4px, -4px); } }
@keyframes az-typing { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes az-pop { 0%, 15% { transform: scale(0); } 35%, 75% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes az-drop { 0% { transform: translateY(-12px); opacity: 0; } 45% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes az-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Intro / Opening ───────────────────────────────────── */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--cream);
  overflow: hidden;
}
.intro.done {
  animation: intro-fade .55s ease forwards;
}
/* iOS push banner — JS animates it: appears big & centred, then shrinks down onto
   the phone screen. All geometry/motion is driven from the intro IIFE. */
.intro-notif {
  position: fixed;
  z-index: 9001;
  left: 50%;
  top: 60%;
  width: min(170px, 60vw);
  transform-origin: center;
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 15px;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
  opacity: 0;
}
.intro-notif-icon { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.intro-notif-app { font-size: 8.5px; color: #8a8a8a; }
.intro-notif-title { font-size: 10.5px; font-weight: 700; color: #0a0a0a; margin-top: 1px; line-height: 1.2; }
@keyframes intro-fade { to { opacity: 0; } }

/* ── Nav ───────────────────────────────────────────────── */
.nav-wrap {
  position: fixed;
  top: 16px; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  padding: 10px 12px 10px 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .10);
}
.nav-logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
}
.nav-logo span { color: var(--accent); }

/* Morphing switch slot: links <-> progress dots crossfade */
.nav-switch { position: relative; height: 22px; overflow: hidden; }
.nav-switch.anim { transition: width .45s var(--ease-out); }
.nav-links, .nav-dots {
  position: absolute;
  top: 50%; left: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: opacity .28s ease, transform .42s var(--ease-out), filter .28s ease;
  will-change: opacity, transform;
}
.nav-links { gap: 20px; opacity: 1; transform: translate(0, -50%); filter: blur(0); }
.nav-dots { gap: 7px; padding: 0 6px; opacity: 0; transform: translate(12px, -50%); filter: blur(3px); pointer-events: none; }
.nav.dots-mode .nav-links { opacity: 0; transform: translate(-12px, -50%); filter: blur(3px); pointer-events: none; }
.nav.dots-mode .nav-dots { opacity: 1; transform: translate(0, -50%); filter: blur(0); pointer-events: auto; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--accent-dark); font-weight: 700; }
.nav-dots a {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .18);
  transition: width .35s ease, background .35s ease;
  display: block;
}
.nav-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.nav-cta:hover { background: var(--accent); color: var(--ink); }

/* ── Hero ──────────────────────────────────────────────── */
#hero {
  background: var(--accent);
  padding: 112px 24px 0;
  text-align: center;
  overflow: hidden;
}
.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 2.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, .55);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Framer-style word-by-word reveal (plays after the intro; delays set in JS) */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rw-i { display: inline-block; will-change: transform; }
#hero.reveal-init .rw-i { transform: translateY(116%); }
#hero.reveal-init .hero-eyebrow,
#hero.reveal-init .hero-ctas { opacity: 0; transform: translateY(16px); }
#hero.reveal-in .hero-eyebrow { animation: hero-up .7s var(--ease-out) .05s both; }
#hero.reveal-in .rw-i { animation: rw-up .62s var(--ease-out) both; }
#hero.reveal-in .hero-ctas { animation: hero-up .7s var(--ease-out) both; }
@keyframes hero-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rw-up { from { transform: translateY(116%); } to { transform: translateY(0); } }
#hero h1 {
  margin: 0 auto;
  max-width: 900px;
  font-weight: 800;
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: .98;
  letter-spacing: -2px;
  color: var(--ink);
}
.hero-sub {
  max-width: 520px;
  margin: 22px auto 0;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .7);
}
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.btn-dark {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease;
}
.btn-dark:hover { transform: translateY(-2px); }
.btn-light {
  background: rgba(255, 255, 255, .85);
  color: var(--ink);
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.btn-light:hover { background: #fff; }

/* Phone mockup */
.phone-note {
  text-align: center;
  font-size: 12px;
  letter-spacing: .3px;
  color: rgba(0, 0, 0, .5);
  margin: 52px auto 0;
}
.phone {
  position: relative;
  width: clamp(280px, 52vw, 380px);
  margin: 8px auto 0;
  /* the phone sits in the right half of the photo (hand is on the left), so nudge
     the whole thing left to visually centre the phone on the page */
  --phone-x: -18.6%;
  opacity: 0;
  transform: translate(var(--phone-x), 90px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.phone.in { opacity: 1; transform: translate(var(--phone-x), 0); }
/* held below during the intro, then released to rise up on reveal */
.phone.intro-hold { opacity: 0; transform: translate(var(--phone-x), 220px); }
/* photorealistic hand + iPhone; the live screen is overlaid on its screen area */
.phone-hand {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* soft fade at the wrist so the hand emerges cleanly (no hard cut line) */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
/* live screen overlaid onto the photo's black screen (coords measured in %) */
.phone-screen {
  position: absolute;
  top: 1.4%;
  left: 40.2%;
  width: 56.9%;
  height: 73.6%;
  background: #fff;
  border-radius: 13.5% / 6.2%;
  overflow: hidden;
}
/* Fixed design canvas: scenes are laid out at 320×674 then scaled to fit the
   photo's screen (JS sets --screen-k = screenWidth/320). Keeps proportions intact. */
.screen-stage {
  position: absolute;
  top: 0; left: 0;
  width: 320px;
  height: 692px;
  transform-origin: top left;
  transform: scale(var(--screen-k, .53));
}
/* Dynamic Island */
.phone-island {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 98px; height: 29px;
  background: #000;
  border-radius: 999px;
  z-index: 20;
}
/* Status bar (9:41 + signal/wifi/battery), colour adapts per scene */
.phone-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px 0;
  z-index: 15;
  color: #0a0a0a;
  pointer-events: none;
  transition: color .5s ease;
}
.phone-status.sb-light { color: #fff; }
.phone-status .sb-time { font-size: 13px; font-weight: 700; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.phone-status .sb-icons { display: flex; align-items: center; gap: 6px; }
.phone-status .sb-icons svg { display: block; }
.scene {
  position: absolute;
  inset: 0;
  transition: opacity .7s ease;
  opacity: 0;
  pointer-events: none;
}
.scene.on { opacity: 1; }

.phone-push {
  position: absolute;
  top: 44px; left: 10px; right: 10px;
  background: rgba(255, 255, 255, .97);
  border-radius: 16px;
  padding: 11px 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transform: translateY(-60px);
}
.phone-push.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s var(--ease-out) .6s, transform .7s var(--ease-out) .6s;
}

.type-caret {
  display: inline-block;
  width: 2px; height: 15px;
  background: var(--ink);
  animation: az-blink 1s infinite;
  vertical-align: middle;
}

/* ── Kunden-Band (statisch) ────────────────────────────── */
.marquee { background: var(--ink); padding: 24px; }
.kunden-row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 6vw, 68px);
  flex-wrap: wrap;
}
.kunde-logo {
  display: inline-flex;
  align-items: center;
  opacity: .8;
  transition: opacity .25s ease, transform .25s ease;
}
.kunde-logo:hover { opacity: 1; transform: translateY(-2px); }
.kunde-logo img { height: 44px; width: auto; display: block; }
.kunde-logo img.w { filter: brightness(0) invert(1); }
@media (max-width: 640px) { .kunde-logo img { height: 36px; } }

/* ── Pinned sections ───────────────────────────────────── */
#statement { height: 280vh; position: relative; }
#overview  { height: 260vh; position: relative; }
#prozess   { height: 340vh; position: relative; }

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Statement */
#statement .pin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.stmt-text {
  max-width: 880px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.14;
  letter-spacing: -1.2px;
  margin: 0;
}
.stmt-text span { color: rgba(10, 10, 10, .14); transition: color .3s ease; }
.stmt-text span.lit { color: var(--ink); }
.stmt-text span.lit.az { color: var(--accent-dark); }

/* Section label */
.sec-label {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
}
.sec-label.muted { color: rgba(0, 0, 0, .5); letter-spacing: 2px; }

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ── Services · Bento ──────────────────────────────────── */
#services { padding: 110px 0; }
#services h2 {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  max-width: 640px;
}
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: row dense;
  gap: 16px;
  margin-top: 40px;
}
/* The active tile grows in place to a 2x2 block; the other tiles pack
   around it (dense flow). One 2x2 + five 1x1 = a clean 3x3. */

.bento-tile {
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 20px;
  padding: 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: background .34s ease, box-shadow .3s ease;
}
.bento-tile.clickable:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .10); }
.bento-tile .svc-icon { height: 52px; display: flex; align-items: center; margin-bottom: 12px; }
.bento-tile .tile-text { margin-top: auto; position: relative; z-index: 2; }
.bento-tile h3 { margin: 0; font-weight: 600; font-size: 18px; }
.bento-tile p { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: #555; max-width: 40ch; }

/* Social tile — floating icons (its "scene" when it is the feature) */
.soc-cloud { position: absolute; inset: 0; z-index: 1; }
.soc-chip {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.soc-chip svg { width: 25px; height: 25px; }
.soc-chip.c1 { top: 6%;  left: 8%;  animation: az-float1 7s   ease-in-out infinite; }
.soc-chip.c2 { top: 13%; left: 58%; animation: az-float2 8.6s ease-in-out infinite .4s; }
.soc-chip.c3 { top: 39%; left: 22%; animation: az-float3 7.8s ease-in-out infinite .8s; }
.soc-chip.c4 { top: 8%;  left: 74%; animation: az-float3 9.1s ease-in-out infinite .2s; }
.soc-chip.c5 { top: 45%; left: 63%; animation: az-float1 8.2s ease-in-out infinite .6s; }
.soc-chip.c6 { top: 33%; left: 5%;  animation: az-float2 9.4s ease-in-out infinite 1s; }

@keyframes az-float1 { 0%, 100% { transform: translate(0, 0) rotate(-5deg); } 50% { transform: translate(8px, -12px) rotate(5deg); } }
@keyframes az-float2 { 0%, 100% { transform: translate(0, 0) rotate(4deg); }  50% { transform: translate(-10px, -8px) rotate(-4deg); } }
@keyframes az-float3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); }  50% { transform: translate(6px, 10px) rotate(6deg); } }

/* ── Bento · click to expand (green + scene) ───────────── */
/* Puzzle: the single "feature" tile is big (2x2 slot) + green + shows its
   scene; every other tile is small + white + shows its idle icon. Clicking
   a tile makes it the feature (grid slots swap via FLIP in site.js). */
.bento-tile.clickable { cursor: pointer; }
.bento-tile.is-feature { background: var(--accent); grid-column: span 2; grid-row: span 2; }

/* The last tile (Betriebssoftware) can't pack cleanly with pure auto-flow
   when it grows to 2x2, so place the grid explicitly for that one case —
   it grows in place at the bottom-right. */
.bento.feat-betr {
  grid-template-areas:
    "a b c"
    "d f f"
    "e f f";
}
.bento.feat-betr .b-web  { grid-area: a; }
.bento.feat-betr .b-soc  { grid-area: b; }
.bento.feat-betr .b-goog { grid-area: c; }
.bento.feat-betr .b-term { grid-area: d; }
.bento.feat-betr .b-ecom { grid-area: e; }
.bento.feat-betr .b-betr { grid-area: f; }
.bento-tile.is-feature p { color: rgba(0, 0, 0, .72); }
.bento-tile.is-feature .svc-icon,
.bento-tile.is-feature .tile-idle { opacity: 0; }
.bento-tile.is-feature .tile-scene { opacity: 1; }
.tile-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease .12s;
  z-index: 1;
}
.tile-idle { transition: opacity .25s ease; }
.bento-tile .tile-text { z-index: 3; }

/* Scene · Website — typing browser */
.scene-web { padding: 22px; }
.mini-browser { width: 100%; max-width: 320px; background: #fff; border-radius: 12px; box-shadow: 0 14px 32px rgba(0, 0, 0, .16); overflow: hidden; }
.mb-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #eef0ea; }
.mb-dot { width: 7px; height: 7px; border-radius: 50%; background: #e2e2e2; }
.mb-url { margin-left: 6px; flex: 1; background: #f3f5ef; border-radius: 20px; padding: 5px 12px; font-size: 11.5px; color: #0a0a0a; display: flex; align-items: center; min-height: 14px; }
.mb-caret { display: inline-block; width: 1.5px; height: 12px; background: #0a0a0a; margin-left: 1px; animation: az-blink 1s infinite; }
.mb-body { padding: 11px; }
.mb-hero { height: 44px; border-radius: 8px; background: linear-gradient(120deg, var(--accent), #8fce35); }
.mb-line { height: 6px; border-radius: 99px; background: #e9ebe4; margin-top: 8px; }

/* Scene · Google — map + dropping pin */
.mini-map { position: absolute; inset: 18px 18px 14px; border-radius: 14px; overflow: hidden; background: #eef3e6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.mini-map::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(to top, var(--accent), rgba(95, 160, 0, 0)); }
.map-road { position: absolute; background: #dde5cf; }
.map-road.r1 { top: 34%; left: -12%; width: 124%; height: 11px; transform: rotate(-8deg); }
.map-road.r2 { top: -10%; left: 34%; width: 11px; height: 120%; transform: rotate(10deg); }
.map-block { position: absolute; background: #e4ebd7; border-radius: 3px; }
.map-block.bA { top: 12%; left: 12%; width: 26%; height: 22%; }
.map-block.bB { top: 14%; right: 12%; width: 22%; height: 17%; }
.map-badge { position: absolute; top: 9px; right: 9px; background: #0a0a0a; color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 3px 9px; z-index: 2; }
.map-pin { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); z-index: 2; }
.bento-tile.is-feature .map-pin { animation: az-pindrop .7s var(--ease-out) .18s both; }
.pin-head { display: block; width: 22px; height: 22px; background: #0a0a0a; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); position: relative; }
.pin-head::after { content: ''; position: absolute; inset: 6px; background: var(--accent); border-radius: 50%; }
.pin-ring { position: absolute; left: 11px; top: 26px; width: 22px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .18); transform: translateX(-50%); }
.bento-tile.is-feature .pin-ring { animation: az-radar 1.9s ease-out .55s infinite; }
@keyframes az-pindrop { 0% { transform: translateX(-50%) translateY(-34px); opacity: 0; } 55% { transform: translateX(-50%) translateY(4px); opacity: 1; } 100% { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes az-radar { 0% { transform: translateX(-50%) scale(.5); opacity: .55; } 100% { transform: translateX(-50%) scale(1.7); opacity: 0; } }

/* Scene · Online-Termine — calendar + confirm */
.mini-cal { position: absolute; top: 20px; left: 22px; width: 152px; background: #fff; border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .14); padding: 12px; }
.cal-head { font-size: 10px; font-weight: 700; color: #9aa094; letter-spacing: 1px; }
.cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; }
.cal-grid span { height: 12px; border-radius: 3px; background: #eef0ea; }
.cal-grid span.sel { background: var(--accent); }
.cal-toast { position: absolute; top: 26px; right: 20px; background: #0a0a0a; color: #fff; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 6px 12px; }
.bento-tile.is-feature .cal-toast { animation: az-slidein .5s var(--ease-out) .35s both; }
@keyframes az-slidein { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Scene · E-Commerce — product + cart */
.mini-shop { position: absolute; top: 20px; left: 22px; width: 150px; background: #fff; border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .14); overflow: hidden; }
.shop-img { height: 56px; background: linear-gradient(120deg, #8fce35, var(--accent)); }
.shop-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 11px; font-weight: 600; }
.shop-cart { background: #0a0a0a; color: #fff; border-radius: 99px; padding: 4px 9px; font-size: 9.5px; }
.shop-badge { position: absolute; top: 12px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bento-tile.is-feature .shop-badge { animation: az-pop 2s .35s infinite; }

/* Scene · Betriebssoftware — mini dashboard */
.mini-dash { position: absolute; top: 20px; left: 22px; right: 22px; max-width: 280px; background: #fff; border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .14); padding: 13px; }
.dash-top { display: flex; justify-content: space-between; align-items: baseline; }
.dash-top span { font-size: 11px; color: #9aa094; font-weight: 600; }
.dash-val { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; color: #0a0a0a; }
.dash-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 10px; }
.dash-bars i { flex: 1; background: rgba(95, 160, 0, .55); border-radius: 2px 2px 0 0; height: 15%; transition: height .6s var(--ease-out); }
.bento-tile.is-feature .dash-bars i:nth-child(1) { height: 34%; transition-delay: .2s; }
.bento-tile.is-feature .dash-bars i:nth-child(2) { height: 52%; transition-delay: .27s; }
.bento-tile.is-feature .dash-bars i:nth-child(3) { height: 42%; transition-delay: .34s; }
.bento-tile.is-feature .dash-bars i:nth-child(4) { height: 68%; transition-delay: .41s; }
.bento-tile.is-feature .dash-bars i:nth-child(5) { height: 58%; transition-delay: .48s; }
.bento-tile.is-feature .dash-bars i:nth-child(6) { height: 88%; transition-delay: .55s; }
.bento-tile.is-feature .dash-bars i:nth-child(7) { height: 100%; transition-delay: .62s; }

.anim-load { animation: az-load 2.2s ease-in-out infinite; }
.anim-load.d2 { animation-delay: .35s; }
.anim-bounce { animation: az-bounce 1.6s ease-in-out infinite; }
.anim-typing { animation: az-typing 1.3s infinite; }
.anim-typing.d2 { animation-delay: .2s; }
.anim-typing.d3 { animation-delay: .4s; }
.anim-pop { animation: az-pop 2.2s infinite; }
.anim-drop { animation: az-drop 1.9s ease-in infinite; }
.anim-spin { animation: az-spin 8s linear infinite; }

/* ── Prozess ───────────────────────────────────────────── */
#overview .pin,
#prozess .pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#overview h2,
#prozess h2 {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  max-width: 640px;
}
.proc-track { margin-top: 52px; }
.proc-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-left: max(24px, calc((100vw - 1052px) / 2));
  will-change: transform;
}
.proc-card {
  width: 380px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: .25;
  transform: translateY(48px);
  transition: opacity .55s ease, transform .55s ease;
}
.proc-card.on { opacity: 1; transform: translateY(0); }
.proc-visual {
  height: 230px;
  border-radius: 24px;
  background: #f1f3ea;
  overflow: hidden;
}
.proc-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16.5px; margin: 0; }
.proc-num {
  font-size: 12px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 700;
}
.proc-card > div:last-child p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #555; }

/* ── Overview (Antwort-Karten) ────────────────────────────── */
.answer-track { margin-top: 52px; }
.answer-row {
  display: flex;
  gap: 28px;
  align-items: center;
  padding-left: max(24px, calc((100vw - 1052px) / 2));
  padding-right: max(24px, calc((100vw - 1052px) / 2));
  will-change: transform;
}
.answer-card {
  width: 460px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 24px;
  padding: 34px;
  background: #fff;
  transform: scale(.86);
  opacity: .45;
  transition: transform .55s var(--ease-out), opacity .55s var(--ease-out), box-shadow .55s var(--ease-out);
  will-change: transform, opacity;
}
.answer-card.on {
  position: relative;
  z-index: 2;
  transform: scale(1.08);
  opacity: 1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}
.answer-num {
  display: inline-block;
  font-size: 12px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 700;
}
.answer-card h3 { margin: 14px 0 8px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 19px; }
.answer-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #555; }

/* ── Über uns ──────────────────────────────────────────── */
#about { max-width: 1100px; margin: 0 auto; padding: 110px 24px; }
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}
#about h2 {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.02;
  letter-spacing: -1.5px;
}
.about-text { font-size: 16px; line-height: 1.65; color: #555; margin-top: 20px; }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.founder-card {
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}
.founder-card img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent);
}
.founder-name { font-weight: 700; font-size: 16px; margin-top: 12px; }
.founder-role { font-size: 13px; color: #666; margin-top: 3px; }

/* ── FAQ ───────────────────────────────────────────────── */
#faq { max-width: 760px; margin: 0 auto; padding: 0 24px 120px; }
#faq h2 {
  margin: 12px 0 34px;
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -1px;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  padding: 20px 4px;
  cursor: pointer;
  text-align: left;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.faq-mark { font-size: 22px; color: var(--accent-dark); font-weight: 400; }
.faq-q-h { margin: 0; font: inherit; }
.faq-a {
  margin: 0;
  padding: 0 4px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: #555;
  max-width: 640px;
  display: none;
}
.faq-item.open .faq-a { display: block; }

/* ── Kontakt ───────────────────────────────────────────── */
#contact { background: var(--ink); color: #fff; padding: 120px 24px 0; }
.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  padding-bottom: 90px;
}
#contact h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1;
  letter-spacing: -2px;
}
#contact h2 span { color: var(--accent); }
.contact-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .65);
  margin-top: 22px;
  max-width: 440px;
}
.contact-links { display: flex; gap: 12px; margin-top: 28px; font-size: 15px; flex-wrap: wrap; }
.contact-mail {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 11px 22px;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.contact-mail:hover { border-color: var(--accent); color: var(--accent); }
.contact-wa {
  color: var(--ink);
  background: var(--accent);
  border-radius: 999px;
  padding: 11px 22px;
  text-decoration: none;
  font-weight: 600;
}
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-form input,
.contact-form textarea {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 15px;
  color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  outline: none;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--accent); }
.contact-form textarea { resize: vertical; }
.contact-form ::placeholder { color: rgba(255, 255, 255, .45); }
.form-submit {
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Instrument Sans', sans-serif;
  cursor: pointer;
  transition: transform .2s ease;
}
.form-submit:hover { transform: translateY(-2px); }
.form-submit:disabled { opacity: .6; transform: none; cursor: default; }
.form-status { margin: 2px 0 0; font-size: 14px; line-height: 1.5; min-height: 1.2em; }
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.footer-bar { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-inner a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.footer-inner a:hover { color: #fff; }
.footer-inner address { font-style: normal; }
.footer-links { display: flex; gap: 20px; }

/* ── azurago · Digitale Präsenz ────────────────────────── */
#products { background: var(--accent); color: var(--ink); overflow: hidden; min-height: 100vh; display: flex; align-items: center; }
.ago-wrap { max-width: 1100px; margin: 0 auto; padding: 96px 24px; width: 100%; }
.ago-head { max-width: 720px; }
.sec-label.dark { color: rgba(0, 0, 0, .55); }
#products h2 { margin: 14px 0 0; font-weight: 800; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.03; letter-spacing: -1.5px; }
#products h2 span { color: #fff; }
.ago-lead { font-size: 17px; line-height: 1.6; color: rgba(0, 0, 0, .7); margin-top: 18px; max-width: 560px; }
.ago-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.ago-card { background: #fff; border-radius: 22px; padding: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }
.ago-prev { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: #f4f6f0; }
.ago-lbl { padding: 14px 6px 4px; }
.ago-lbl h3 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 18px; }
.ago-lbl p { margin: 5px 0 0; font-size: 13.5px; color: #666; }
.ago-cta-row { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ago-cta { background: var(--ink); color: #fff; border-radius: 999px; padding: 14px 28px; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .2s ease; }
.ago-cta:hover { transform: translateY(-2px); }
.ago-note { font-size: 13.5px; color: rgba(0, 0, 0, .6); }

/* Card · Website */
.ago-web { background: #e9eee1; display: flex; align-items: center; justify-content: center; }
.ago-win { width: 78%; background: #fff; border-radius: 9px; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); overflow: hidden; }
.ago-winbar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-bottom: 1px solid #f0f0f0; }
.ago-winbar span { width: 7px; height: 7px; border-radius: 50%; background: #e2e2e2; }
.ago-winbar span:nth-child(3) { background: var(--accent); }
.ago-url { margin-left: 6px; font-size: 9px; color: #aaa; background: #f4f4f4; border-radius: 5px; padding: 2px 8px; }
.ago-winbody { padding: 11px; }
.ago-hero { height: 44px; border-radius: 6px; background: linear-gradient(120deg, var(--accent), #8fce35); background-size: 200% 100%; animation: az-shimmer 2.8s ease-in-out infinite; }
.ago-ln { height: 6px; border-radius: 99px; background: #ececec; margin-top: 8px; }
.ago-load { height: 5px; border-radius: 99px; background: #eee; margin-top: 11px; overflow: hidden; }
.ago-load i { display: block; height: 100%; background: var(--accent); width: 30%; animation: az-load 2.2s ease-in-out infinite; }

/* Card · Google & SEO */
.ago-seo { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.ago-search { background: #fff; border: 1px solid #e6e6e6; border-radius: 999px; padding: 8px 12px; font-size: 11.5px; color: #555; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.ago-rank-top { background: #fff; border: 1.5px solid var(--accent); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.ago-badge { background: var(--accent); color: var(--ink); font-size: 10px; font-weight: 700; border-radius: 999px; padding: 3px 9px; animation: az-pulse 1.8s ease-in-out infinite; }
.ago-rank-top b { margin-left: auto; color: #3d6600; }
.ago-bars2 { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: 2px; }
.ago-bars2 i { flex: 1; background: rgba(0, 0, 0, .12); border-radius: 3px 3px 0 0; height: 18%; transition: height .7s var(--ease-out); }
.ago-card.in .ago-bars2 i { background: var(--accent); }
.ago-card.in .ago-bars2 i:nth-child(1) { height: 28%; transition-delay: .10s; }
.ago-card.in .ago-bars2 i:nth-child(2) { height: 40%; transition-delay: .16s; }
.ago-card.in .ago-bars2 i:nth-child(3) { height: 34%; transition-delay: .22s; }
.ago-card.in .ago-bars2 i:nth-child(4) { height: 56%; transition-delay: .28s; }
.ago-card.in .ago-bars2 i:nth-child(5) { height: 74%; transition-delay: .34s; }
.ago-card.in .ago-bars2 i:nth-child(6) { height: 96%; transition-delay: .40s; }

/* Card · Social Media */
.ago-social { padding: 14px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ago-post { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .06); }
.ago-postimg { height: 60px; background: linear-gradient(120deg, #8fce35, var(--accent)); position: relative; }
.ago-postbadge { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, .58); color: #fff; font-size: 9px; font-weight: 600; border-radius: 999px; padding: 3px 9px; }
.ago-postrow { display: flex; align-items: center; gap: 6px; padding: 8px 11px; font-size: 11.5px; color: #444; }
.ago-heart { color: #e0245e; animation: az-pop 2.4s infinite; display: inline-block; }
.ago-posted { margin-left: auto; color: #3d6600; font-weight: 700; }
.ago-followers { font-size: 12.5px; color: #555; }
.ago-followers b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; color: var(--ink); }
.ago-up { color: #3d6600; font-weight: 600; margin-left: 4px; }

/* Card · Foto, Video & Drohne */
.ago-video { background: #0a0a0a; }
.ago-scene { position: absolute; inset: 0; background: linear-gradient(120deg, #4a7c00, #8fce35 65%, #cfe3ab); opacity: .9; background-size: 170% 170%; animation: az-shimmer 5s ease-in-out infinite; }
.ago-c { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .85); }
.ago-c.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.ago-c.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.ago-c.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.ago-c.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.ago-rec { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .5px; border-radius: 999px; padding: 3px 10px; }
.ago-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; animation: az-blink 1.1s infinite; }
.ago-4k { position: absolute; bottom: 12px; left: 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.ago-drone { position: absolute; bottom: 14px; right: 18px; width: 46px; height: 46px; animation: az-spin 6s linear infinite; }
.ago-drone-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15px; height: 8px; background: #0a0a0a; border-radius: 3px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }

@keyframes az-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ── azuraone · Company OS ─────────────────────────────── */
#azuraone { background: var(--ink); color: #fff; overflow: hidden; min-height: 100vh; display: flex; align-items: center; }
.os-wrap { max-width: 1100px; margin: 0 auto; padding: 96px 24px; width: 100%; }
.os-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
#azuraone .sec-label { color: var(--accent); }
#azuraone h2 {
  margin: 14px 0 0;
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.03;
  letter-spacing: -1.5px;
}
#azuraone h2 .lime { color: var(--accent); }
.os-lead { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .68); margin-top: 20px; max-width: 440px; }
.os-points { margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.os-points div { display: flex; gap: 11px; align-items: baseline; font-size: 15px; color: rgba(255, 255, 255, .85); }
.os-points span.c { color: var(--accent); font-weight: 700; }
.os-cta {
  display: inline-block;
  margin-top: 28px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease;
}
.os-cta:hover { transform: translateY(-2px); }

/* App window */
.os-window {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: #111311;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(95, 160, 0, .06);
  overflow: hidden;
  opacity: 0;
  transform: perspective(1400px) rotateX(9deg) translateY(60px);
  transform-origin: center top;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.os-window.in { opacity: 1; transform: perspective(1400px) rotateX(0deg) translateY(0); }
.os-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.os-tdots { display: flex; gap: 6px; }
.os-tdots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.os-word { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 14px; }
.os-word b { color: var(--accent); }
.os-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, .6); }
.os-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: az-pulse 1.8s ease-in-out infinite; }
.os-body { display: flex; min-height: 300px; }
.os-side { width: 150px; flex: none; border-right: 1px solid rgba(255, 255, 255, .08); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.os-nav { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.os-nav i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.os-nav.on { background: rgba(95, 160, 0, .14); color: #fff; }
.os-nav.on i { background: var(--accent); }
.os-side-logo { margin-top: auto; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 15px; color: var(--accent); padding: 10px 11px; }
.os-main { flex: 1; padding: 16px; min-width: 0; }
.os-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.os-stat { border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 12px 14px; }
.os-stat .k { font-size: 11px; color: rgba(255, 255, 255, .5); letter-spacing: .3px; }
.os-stat .v { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; margin-top: 4px; }
.os-stat .v.lime { color: var(--accent); }
.os-note { font-size: 11px; color: rgba(255, 255, 255, .4); margin-top: 8px; }
.os-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 10px; }
.os-bars i { flex: 1; background: rgba(95, 160, 0, .55); border-radius: 2px 2px 0 0; height: 0; transition: height .8s var(--ease-out); }
.os-window.in .os-bars i:nth-child(1) { height: 35%; transition-delay: .25s; }
.os-window.in .os-bars i:nth-child(2) { height: 55%; transition-delay: .30s; }
.os-window.in .os-bars i:nth-child(3) { height: 45%; transition-delay: .35s; }
.os-window.in .os-bars i:nth-child(4) { height: 70%; transition-delay: .40s; }
.os-window.in .os-bars i:nth-child(5) { height: 60%; transition-delay: .45s; }
.os-window.in .os-bars i:nth-child(6) { height: 85%; transition-delay: .50s; }
.os-window.in .os-bars i:nth-child(7) { height: 100%; transition-delay: .55s; }
.os-feedhead { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; font-size: 11.5px; color: rgba(255, 255, 255, .5); letter-spacing: .4px; text-transform: uppercase; }
.os-feed { display: flex; flex-direction: column; gap: 8px; }
.os-item {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
  border-radius: 11px;
  padding: 9px 12px;
  animation: az-feed-in .5s var(--ease-out);
}
.os-item .ok { width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(95, 160, 0, .18); color: var(--accent); font-size: 10px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.os-item .tx { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.os-item .sb { font-size: 11.5px; color: rgba(255, 255, 255, .55); margin-top: 2px; }
.os-item .tm { font-size: 11px; color: rgba(255, 255, 255, .4); margin-top: 2px; }

@keyframes az-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
@keyframes az-feed-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ── Reveal animations (IntersectionObserver) ──────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* ── Custom cursor ─────────────────────────────────────── */
/* Outer = positioning only (translate). Keeping scale off the outer avoids
   the translate being multiplied by the scale factor (which flung the ring
   away on hover). */
#az-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 30px; height: 30px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity .25s ease;
}
/* Inner = the visible ring; scales around its own centre (stays on cursor). */
#az-cursor .az-ring {
  width: 100%; height: 100%;
  border: 1.5px solid var(--accent-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
#az-cursor .az-ring > div {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .phone, .os-window { opacity: 1; transform: none; transition: none; }
  .ago-hero, .ago-load i, .ago-badge, .ago-heart, .ago-scene, .ago-rec i, .ago-drone { animation: none; }
  .soc-chip, .anim-load, .anim-bounce, .anim-typing, .anim-pop, .anim-drop, .anim-spin { animation: none; }
  .mb-caret, .bento-tile.is-feature .map-pin, .bento-tile.is-feature .pin-ring, .bento-tile.is-feature .cal-toast, .bento-tile.is-feature .shop-badge { animation: none; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    grid-auto-flow: row dense;
    gap: 12px;
    margin-top: 28px;
  }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .os-grid { grid-template-columns: 1fr; gap: 40px; }
  .proc-card { width: 320px; }
  .nav { gap: 14px; }
  .nav-links { gap: 14px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav.dots-mode .nav-dots { display: flex; }

  /* Unpin heavy sections: normal document flow on small screens */
  #services { padding: 90px 0; }
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-auto-flow: row;
  }
  .bento.feat-betr { grid-template-areas: none; }
  .bento-tile { min-height: 176px; }
  .bento.feat-betr .bento-tile { grid-area: auto; }
  .bento-tile.is-feature { grid-column: auto; grid-row: auto; min-height: 300px; }

  #prozess { height: auto; }
  #prozess .pin { position: static; height: auto; overflow: visible; padding: 90px 0; }
  .proc-row {
    transform: none !important;
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    gap: 40px;
  }
  .proc-card { width: 100%; opacity: 1 !important; transform: none !important; }

  #overview { height: auto; }
  #overview .pin { position: static; height: auto; overflow: visible; padding: 90px 0; }
  .answer-row {
    transform: none !important;
    flex-direction: column;
    padding-left: 24px;
    padding-right: 24px;
    gap: 32px;
  }
  .answer-card { width: 100%; opacity: 1 !important; transform: none !important; box-shadow: none !important; }

  #statement { height: 220vh; }

  #hero { padding-top: 120px; }
  .phone { width: min(72vw, 280px); }
  #about { padding: 90px 24px; }
  .founder-grid { grid-template-columns: 1fr 1fr; }
  #contact { padding-top: 90px; }

  .ago-wrap { padding: 90px 24px; }
  .ago-grid { grid-template-columns: 1fr; }

  .os-wrap { padding: 90px 24px; }
  .os-side { display: none; }
  .os-main { padding: 14px; }
  .os-stat .v { font-size: 19px; }
}