/* ============================================================
   GEKKOS — /ki (AI & Automation)
   Page styles built strictly from the existing design tokens
   (styles.css). Reuses .section/.wrap/.sec-head/.eyebrow/.acc-*,
   .btn-mag, .deco-gecko and the mono-pill language.
   ============================================================ */

/* ---- hero ---- */
.ai-hero{
  min-height:88svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(130px,16vh,200px);
  position:relative;isolation:isolate;overflow:hidden;
}
.ai-hero-gecko{
  top:clamp(110px,16vh,200px);
  right:calc(-1 * clamp(30px,4vw,70px));
  width:clamp(220px,30vw,460px);
  opacity:.07;transform:rotate(-16deg);
}
.ai-hero .eyebrow{margin-bottom:clamp(22px,3vw,36px)}
.ai-head{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(44px,8vw,148px);line-height:.95;letter-spacing:-.04em;
  text-transform:lowercase;max-width:14ch;
}
.ai-head span[data-split],
.ai-head em[data-split]{display:block}
.ai-head em{font-style:normal;color:var(--accent)}
.ai-sub{
  max-width:52ch;color:var(--ink-soft);
  font-size:clamp(16px,1.3vw,21px);line-height:1.5;
  margin-top:clamp(22px,3vw,36px);
}
.ai-badge{
  display:inline-flex;align-items:center;gap:.6em;align-self:flex-start;
  font-family:var(--font-mono);font-size:clamp(11px,.78vw,13px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;padding:.7em 1.3em;
  margin-top:clamp(18px,2.4vw,30px);
}
.ai-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.ai-badge-strong{
  border-color:rgba(255,74,28,.55);background:rgba(255,74,28,.08);
  margin-top:18px;
}
.ai-cta-row{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;
  margin-top:clamp(28px,4vw,52px);
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border:1.5px solid var(--ink);border-radius:100px;
  padding:clamp(1em,1.5vw,1.3em) clamp(1.8em,3vw,2.6em);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent)}
.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-ghost .arr{transition:transform .4s var(--ease)}
.btn-ghost:hover .arr{transform:translateY(4px)}

/* ---- pain points ---- */
.pain-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,32px);
}
.pain-card{border-top:1.5px solid var(--ink);padding-top:18px}
.pain-no{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.pain-t{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(20px,1.9vw,30px);line-height:1.1;letter-spacing:-.02em;
  margin-top:12px;max-width:18ch;
}
.pain-d{
  color:var(--ink-soft);font-size:clamp(14px,1.05vw,16.5px);line-height:1.55;
  margin-top:14px;max-width:38ch;
}
.pain-arr{color:var(--accent);font-family:var(--font-mono)}
@media (max-width:880px){.pain-grid{grid-template-columns:1fr;gap:22px}}

/* ---- service catalog ---- */
.ai-services{background:var(--bg-warm)}
.ai-cat{
  border-top:1.5px solid var(--ink);
  padding-block:clamp(34px,4.5vw,64px);
}
.ai-cat:last-of-type{border-bottom:1.5px solid var(--ink)}
.ai-cat-head{
  display:grid;grid-template-columns:auto 1fr;align-items:start;
  gap:clamp(16px,3vw,50px);
}
.ai-cat-head .idx{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);padding-top:.9em}
.ai-cat-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,3.8vw,60px);line-height:1;letter-spacing:-.03em;
  text-transform:lowercase;
}
.ai-cat-intro p{
  color:var(--ink-soft);font-size:clamp(15px,1.15vw,19px);line-height:1.5;
  max-width:58ch;margin-top:12px;
}
.ai-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px);margin-top:clamp(24px,3vw,44px);
}
.ai-cards-2{grid-template-columns:repeat(2,1fr)}
.ai-card{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:clamp(18px,2vw,28px);
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
@media (hover:hover){
  .ai-card:hover{border-color:var(--accent);transform:translateY(-4px)}
}
.ai-card h4,
.ai-card h3{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(17px,1.35vw,22px);line-height:1.15;letter-spacing:-.015em;
}
.ai-card p{
  color:var(--ink-soft);font-size:clamp(14px,1vw,15.5px);line-height:1.55;
  margin-top:10px;
}
.ai-cat .acc-tags{margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:880px){
  .ai-cat-head{grid-template-columns:1fr;gap:10px}
  .ai-cat-head .idx{padding-top:0}
  .ai-cards,.ai-cards-2{grid-template-columns:1fr;gap:12px}
}

/* ---- example workflow (dark) ---- */
.ai-flow{background:var(--dark);color:var(--paper-on-dark)}
.ai-flow .sec-head h2{color:var(--paper-on-dark)}
.ai-flow .sec-head .note{color:var(--soft-on-dark)}
.flow{
  list-style:none;display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(18px,2vw,28px);margin-top:clamp(28px,4vw,56px);
  counter-reset:flow;
}
.flow-step{position:relative;border-top:1px solid var(--line-on-dark);padding-top:26px}
.flow-dot{
  position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  animation:flow-pulse 2.6s var(--ease) infinite;
}
.flow-step:nth-child(2) .flow-dot{animation-delay:.4s}
.flow-step:nth-child(3) .flow-dot{animation-delay:.8s}
.flow-step:nth-child(4) .flow-dot{animation-delay:1.2s}
.flow-step:nth-child(5) .flow-dot{animation-delay:1.6s}
.flow-step:nth-child(6) .flow-dot{animation-delay:2s}
@keyframes flow-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,74,28,.35)}
  50%{box-shadow:0 0 0 7px rgba(255,74,28,0)}
}
.flow-no{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.flow-t{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(18px,1.5vw,23px);letter-spacing:-.015em;line-height:1.1;
  margin-top:10px;
}
.flow-d{
  color:var(--soft-on-dark);font-size:clamp(13.5px,.95vw,15px);line-height:1.55;
  margin-top:10px;max-width:26ch;
}
@media (max-width:1280px){.flow{grid-template-columns:repeat(3,1fr);row-gap:clamp(28px,4vw,44px)}}
@media (max-width:880px){
  .flow{grid-template-columns:1fr;gap:0}
  .flow-step{
    border-top:none;border-left:1px solid var(--line-on-dark);
    padding:0 0 clamp(26px,5vw,36px) 24px;
  }
  .flow-step:last-child{padding-bottom:0}
  .flow-dot{top:4px;left:-5px}
  .flow-d{max-width:46ch}
}

/* ---- tech stack ---- */
.tech-grid{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  max-width:880px;
}
.tech-grid li{
  font-family:var(--font-mono);font-size:clamp(12px,.85vw,14px);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;padding:.8em 1.4em;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
@media (hover:hover){.tech-grid li:hover{border-color:var(--accent);color:var(--accent)}}

/* ---- packages & pricing ---- */
.ai-pricing{background:var(--bg-warm)}
.price-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);align-items:stretch;
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg);border:1.5px solid var(--line);border-radius:8px;
  padding:clamp(24px,2.5vw,40px);
  transition:border-color .35s var(--ease);
}
@media (hover:hover){.price-card:hover{border-color:var(--ink)}}
.price-card.featured{border-color:var(--accent)}
@media (hover:hover){.price-card.featured:hover{border-color:var(--accent)}}
.price-badge{
  position:absolute;top:0;left:clamp(24px,2.5vw,40px);transform:translateY(-50%);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);border-radius:100px;padding:.55em 1.2em;
}
.price-name{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(22px,1.9vw,30px);letter-spacing:-.02em;text-transform:lowercase;
}
.price-val{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(32px,3vw,50px);line-height:1;letter-spacing:-.03em;
  margin-top:10px;
}
.price-val::after{content:"";display:block;width:34px;height:3px;background:var(--accent);margin-top:14px}
.price-desc{color:var(--ink-soft);font-size:clamp(14px,1.05vw,16px);line-height:1.5;margin-top:16px}
.price-feats{
  list-style:none;display:flex;flex-direction:column;gap:10px;
  margin-top:clamp(18px,2vw,26px);
}
.price-feats li{
  position:relative;padding-left:1.6em;
  font-size:clamp(13.5px,.95vw,15px);line-height:1.5;color:var(--ink);
}
.price-feats li::before{
  content:"→";position:absolute;left:0;top:0;
  font-family:var(--font-mono);color:var(--accent);
}
.price-cta{
  display:inline-flex;align-items:center;gap:.7em;align-self:flex-start;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border:1.5px solid var(--ink);border-radius:100px;
  padding:.9em 1.6em;margin-top:clamp(24px,2.6vw,36px);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.price-card .price-feats{flex:1}
.price-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.price-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.price-card.featured .price-cta{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.price-card.featured .price-cta:hover{background:var(--ink);border-color:var(--ink)}
@media (max-width:1080px){
  .price-grid{grid-template-columns:1fr;max-width:560px}
}

/* retainer box */
.retainer{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--bg);border:1.5px solid var(--ink);border-radius:8px;
  padding:clamp(20px,2.4vw,32px);margin-top:clamp(20px,2.6vw,36px);
}
.retainer-dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
  margin-top:.55em;box-shadow:0 0 0 5px rgba(255,74,28,.14);
}
.retainer-t{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(18px,1.6vw,25px);letter-spacing:-.015em;line-height:1.15;
}
.retainer-d{color:var(--ink-soft);font-size:clamp(14px,1.05vw,16px);line-height:1.55;margin-top:8px;max-width:72ch}

/* ---- FAQ (reuses .acc accordion, smaller question scale) ---- */
.ai-faq .acc-head{padding-block:clamp(18px,2.4vw,34px)}
.ai-faq .acc-head .ttl{
  font-size:clamp(18px,2.2vw,34px);text-transform:none;letter-spacing:-.015em;line-height:1.15;
}
.ai-faq .acc-head .plus{width:clamp(26px,3vw,40px);height:clamp(26px,3vw,40px)}
.ai-faq .acc-body-inner .txt{max-width:68ch}
.ai-faq .acc-head:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---- local intro (webdesign-osnabrueck) ---- */
.ai-local-body{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
}
.ai-local-body p{
  color:var(--ink-soft);font-size:clamp(16px,1.2vw,19px);line-height:1.6;
  max-width:52ch;
}
@media (max-width:880px){.ai-local-body{grid-template-columns:1fr;gap:18px}}

/* ---- CTA trust line ---- */
.cta-trust{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-top:clamp(22px,3vw,40px);
}