﻿
.ako-page {
  --ako-bg: #FFFFFF;
  --ako-text: #0F0E0EF5;
  --ako-text-soft: rgba(15, 14, 14, 0.82);
  --ako-text-mute: rgba(15, 14, 14, 0.68);
  --ako-primary: #F8910C;
  --ako-primary-hover: #e07e00;
  --ako-secondary: #0F0E0EF5;
  --ako-cta-text: #FFF7EC;
  --ako-light-card: #FFF1DD;
  --ako-icon-accent: #F8910C;
  --ako-card-bg: #FFFFFF;
  --ako-soft-bg: #FAF7F2;
  --ako-dark-bg: #0F0E0E;
  --ako-dark-bg-soft: #1A1818;
  --ako-border: rgba(15, 14, 14, 0.08);
  --ako-border-strong: rgba(15, 14, 14, 0.16);
  --ako-shadow-sm: 0 1px 2px rgba(15, 14, 14, 0.04), 0 2px 8px rgba(15, 14, 14, 0.04);
  --ako-shadow-md: 0 4px 12px rgba(15, 14, 14, 0.06), 0 12px 32px rgba(15, 14, 14, 0.08);
  --ako-shadow-lg: 0 8px 24px rgba(15, 14, 14, 0.08), 0 24px 64px rgba(15, 14, 14, 0.12);
  --ako-shadow-orange: 0 10px 28px rgba(248, 145, 12, 0.28);
  --ako-radius-xs: 8px;
  --ako-radius-sm: 12px;
  --ako-radius-md: 20px;
  --ako-radius-lg: 28px;
  --ako-radius-xl: 36px;
  --ako-radius-pill: 999px;
  --ako-container: min(85vw, 1600px); 
  --ako-container-narrow: 100%;
  --ako-section-py: clamp(72px, 9vw, 128px);
  --ako-gap: clamp(24px, 3vw, 48px);
  --ako-font: system-ui, -apple-system, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --ako-fs-h1: clamp(2.4rem, 5.2vw, 4.4rem);
  --ako-fs-h2: clamp(1.9rem, 3.6vw, 2.85rem);
  --ako-fs-h3: clamp(1.3rem, 2vw, 1.6rem);
  --ako-fs-h4: clamp(1.05rem, 1.4vw, 1.2rem);
  --ako-fs-body: clamp(1.1875rem, 1.4vw, 1.375rem);
  --ako-fs-sm: 1.125rem;
  --ako-fs-xs: 0.8125rem;
  --ako-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ako-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: var(--ako-font);
  color: var(--ako-text);
  background: var(--ako-bg);
  font-size: var(--ako-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
}

.ako-page *,
.ako-page *::before,
.ako-page *::after { box-sizing: border-box; }

.ako-page img { max-width: 100%; height: auto; display: block; }
.ako-page a { color: inherit; text-decoration: none; }
.ako-page button { font: inherit; cursor: pointer; }
.ako-page p { margin: 0 0 1em; }
.ako-page ul, .ako-page ol { margin: 0; padding: 0; list-style: none; }
.ako-page :focus-visible {
  outline: 2px solid var(--ako-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.ako-page .ako-container {
  width: 100%;
  max-width: var(--ako-container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.ako-page .ako-container--narrow { max-width: var(--ako-container-narrow); }

.ako-page section { padding: var(--ako-section-py) 0; }
.ako-page section.ako-section--soft { background: var(--ako-soft-bg); }
.ako-page section.ako-section--dark { background: var(--ako-dark-bg); color: #F5F2EC; }
.ako-page section.ako-section--dark h2,
.ako-page section.ako-section--dark h3,
.ako-page section.ako-section--dark h4 { color: #FFFFFF; }

.ako-page .ako-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--ako-light-card);
  color: var(--ako-primary);
  font-size: var(--ako-fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--ako-radius-pill);
  margin-bottom: 18px;
  border: 1px solid rgba(248, 145, 12, 0.18);
}
.ako-page section.ako-section--soft .ako-eyebrow {
  background: #FFFFFF;
  border-color: rgba(248, 145, 12, 0.22);
  box-shadow: 0 2px 6px rgba(248, 145, 12, 0.06);
}
.ako-page .ako-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ako-primary);
}
.ako-page section.ako-section--dark .ako-eyebrow {
  background: rgba(248, 145, 12, 0.14);
  color: var(--ako-primary);
}

.ako-page h2 {
  font-size: var(--ako-fs-h2);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--ako-text);
}
.ako-page h3 {
  font-size: var(--ako-fs-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 10px;
}
.ako-page h4 {
  font-size: var(--ako-fs-h4);
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 8px;
}

.ako-page .ako-section-head { max-width: 780px; margin: 0 0 clamp(40px, 5vw, 64px); }
.ako-page .ako-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ako-page .ako-section-head p {
  font-size: clamp(1.15rem, 1.35vw, 1.3rem);
  color: var(--ako-text-soft);
  margin: 0;
}
.ako-page section.ako-section--dark .ako-section-head p { color: rgba(245, 242, 236, 0.78); }

.ako-page .ako-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border-radius: var(--ako-radius-pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border: 2px solid transparent;
  text-align: center;
  white-space: nowrap;
  transition: background 0.25s var(--ako-ease), color 0.25s var(--ako-ease),
              transform 0.2s var(--ako-ease), box-shadow 0.25s var(--ako-ease),
              border-color 0.25s var(--ako-ease);
  cursor: pointer;
  user-select: none;
}
.ako-page .ako-btn--primary {
  background: var(--ako-primary);
  color: var(--ako-cta-text);
  box-shadow: var(--ako-shadow-orange);
}
.ako-page .ako-btn--primary:hover {
  background: var(--ako-primary-hover);
  transform: translateY(-2px);
}
.ako-page .ako-btn--secondary {
  background: var(--ako-secondary);
  color: var(--ako-cta-text);
}
.ako-page .ako-btn--secondary:hover {
  background: var(--ako-primary);
  color: var(--ako-cta-text);
}
.ako-page .ako-btn--outline {
  background: transparent;
  color: var(--ako-secondary);
  border-color: var(--ako-secondary);
}
.ako-page .ako-btn--outline:hover {
  background: var(--ako-primary);
  color: var(--ako-cta-text);
  border-color: var(--ako-primary);
}
.ako-page section.ako-section--dark .ako-btn--outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}
.ako-page section.ako-section--dark .ako-btn--outline:hover {
  background: var(--ako-primary);
  border-color: var(--ako-primary);
  color: var(--ako-cta-text);
}
.ako-page .ako-btn--ghost {
  background: transparent;
  color: var(--ako-secondary);
  padding: 12px 18px;
}
.ako-page .ako-btn--ghost:hover { color: var(--ako-primary); }
.ako-page .ako-btn--block { width: 100%; }
.ako-page .ako-btn--lg { padding: 19px 34px; font-size: 1.0625rem; }
.ako-page .ako-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.ako-page .ako-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--ako-light-card);
  color: var(--ako-primary);
  font-size: var(--ako-fs-sm);
  font-weight: 600;
  border-radius: var(--ako-radius-pill);
}
.ako-page .ako-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ako-primary);
  box-shadow: 0 0 0 4px rgba(248, 145, 12, 0.18);
}

.ako-page .ako-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ako-ease-out), transform 0.7s var(--ako-ease-out);
  will-change: opacity, transform;
}
.ako-page .ako-reveal.is-visible {
  opacity: 1; transform: translateY(0);
}
.ako-page .ako-reveal[data-delay="100"] { transition-delay: 0.1s; }
.ako-page .ako-reveal[data-delay="200"] { transition-delay: 0.2s; }
.ako-page .ako-reveal[data-delay="300"] { transition-delay: 0.3s; }
.ako-page .ako-reveal[data-delay="400"] { transition-delay: 0.4s; }

.ako-page .ako-hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: clamp(640px, 92vh, 880px);
  display: flex;
  align-items: center;
  color: #FFFFFF;
  isolation: isolate;
}
.ako-page .ako-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ako-page .ako-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.ako-page .ako-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15, 14, 14, 0.92) 0%, rgba(15, 14, 14, 0.78) 38%, rgba(15, 14, 14, 0.32) 62%, rgba(15, 14, 14, 0.62) 100%),
    linear-gradient(180deg, rgba(15, 14, 14, 0.28) 0%, transparent 30%, transparent 70%, rgba(15, 14, 14, 0.50) 100%);
  pointer-events: none;
}
.ako-page .ako-hero .ako-container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(100px, 9vw, 140px);
  padding-bottom: clamp(80px, 8vw, 120px);
}
.ako-page .ako-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.ako-page .ako-hero__content {
  max-width: 640px;
  padding-top: clamp(0px, 2vw, 24px);
}
.ako-page .ako-hero .ako-badge {
  background: rgba(248, 145, 12, 0.18);
  color: #FFB960;
  border: 1px solid rgba(248, 145, 12, 0.32);
}
.ako-page .ako-hero .ako-badge::before {
  background: var(--ako-primary);
  box-shadow: 0 0 0 4px rgba(248, 145, 12, 0.30);
}
.ako-page .ako-hero__title {
  font-size: var(--ako-fs-h1);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 800;
  margin: 18px 0 20px;
  color: #FFFFFF;
}
.ako-page .ako-hero__sub {
  font-size: clamp(1.15rem, 1.4vw, 1.32rem);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 28px;
  line-height: 1.6;
  max-width: 600px;
}
.ako-page .ako-hero__sub strong {
  color: #FFFFFF;
  font-weight: 600;
}
.ako-page .ako-hero__sub--mobile { display: none; }
.ako-page .ako-hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0 0 28px;
}
.ako-page .ako-hero__trust li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--ako-fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}
.ako-page .ako-hero__trust li::before {
  content: "";
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--ako-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF7EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
  border-radius: 50%;
}
.ako-page .ako-hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px;
}
.ako-page .ako-hero .ako-btn--secondary {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
.ako-page .ako-hero .ako-btn--secondary:hover {
  background: var(--ako-primary);
  border-color: var(--ako-primary);
  color: var(--ako-cta-text);
}
.ako-page .ako-hero__proof {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ako-radius-md);
  max-width: 520px;
}
.ako-page .ako-hero__proof-stars {
  font-size: 1.1rem; letter-spacing: 0.1em; color: var(--ako-primary);
}
.ako-page .ako-hero__proof p {
  margin: 0; font-size: var(--ako-fs-sm); color: rgba(255, 255, 255, 0.88); line-height: 1.5;
}

.ako-page .ako-hero__form {
  background: #FFFFFF;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--ako-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 60px rgba(15, 14, 14, 0.35), 0 8px 24px rgba(15, 14, 14, 0.18);
  color: var(--ako-text);
  position: relative;
}
.ako-page .ako-hero__form-title {
  font-size: 1.2rem; font-weight: 700; margin: 0 0 4px;
  color: var(--ako-text);
}
.ako-page .ako-hero__form-sub {
  font-size: var(--ako-fs-sm); color: var(--ako-text-soft); margin: 0 0 16px;
}
.ako-page .ako-hero__form .ako-progress { margin-bottom: 18px; }
.ako-page .ako-hero__form .ako-step-title { font-size: 1.05rem; margin-bottom: 4px; }
.ako-page .ako-hero__form .ako-step-sub { margin-bottom: 14px; font-size: var(--ako-fs-sm); }
.ako-page .ako-hero__form .ako-msf-step { display: none; animation: ako-fade 0.4s var(--ako-ease); }
.ako-page .ako-hero__form .ako-msf-step.is-active { display: block; }
.ako-page .ako-hero__form .ako-msf__nav { display: flex; gap: 10px; margin-top: 16px; }
.ako-page .ako-hero__form .ako-msf__nav .ako-btn { flex: 1; min-width: 0; padding: 13px 16px; font-size: 0.95rem; }
.ako-page .ako-hero__form .ako-msf__trust {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--ako-border);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.ako-page .ako-hero__form .ako-msf__trust li { font-size: 0.75rem; color: var(--ako-text-mute); display: flex; align-items: center; gap: 6px; }
.ako-page .ako-hero__form .ako-msf__trust li::before {
  content: ""; width: 12px; height: 12px;
  background: var(--ako-light-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8910C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/8px no-repeat;
  border-radius: 50%;
}

.ako-page .ako-field { margin-bottom: 14px; }
.ako-page .ako-field label {
  display: block;
  font-size: var(--ako-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ako-text-mute);
  margin-bottom: 6px;
}
.ako-page .ako-field input,
.ako-page .ako-field select,
.ako-page .ako-field textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit; color: var(--ako-text);
  background: #FFFFFF;
  border: 1.5px solid var(--ako-border-strong);
  border-radius: var(--ako-radius-sm);
  transition: border-color 0.2s var(--ako-ease), box-shadow 0.2s var(--ako-ease);
}
.ako-page .ako-field textarea { resize: vertical; min-height: 96px; }
.ako-page .ako-field input:focus,
.ako-page .ako-field select:focus,
.ako-page .ako-field textarea:focus {
  outline: none;
  border-color: var(--ako-primary);
  box-shadow: 0 0 0 4px rgba(248, 145, 12, 0.12);
}
.ako-page .ako-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0E0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.ako-page .ako-field--checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--ako-fs-sm);
  color: var(--ako-text-soft);
}
.ako-page .ako-field--checkbox input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--ako-primary);
}
.ako-page .ako-field--checkbox label {
  font-size: var(--ako-fs-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ako-text-soft);
  margin: 0;
}

.ako-page .ako-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ako-page .ako-form-status {
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--ako-radius-sm);
  font-size: var(--ako-fs-sm);
  line-height: 1.5;
  font-weight: 600;
}
.ako-page .ako-form-status.is-visible { display: block; }
.ako-page .ako-form-status.is-success {
  background: rgba(248, 145, 12, 0.12);
  color: var(--ako-secondary);
  border: 1px solid rgba(248, 145, 12, 0.28);
}
.ako-page .ako-form-status.is-error {
  background: rgba(180, 30, 30, 0.08);
  color: #8a1f1f;
  border: 1px solid rgba(180, 30, 30, 0.22);
}
.ako-page .ako-field--checkbox a {
  color: var(--ako-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ako-page .ako-field--checkbox a:hover { color: var(--ako-primary-hover); }
.ako-page .ako-form-note {
  margin: 14px 0 0;
  font-size: var(--ako-fs-xs);
  color: var(--ako-text-mute);
  text-align: center;
}

.ako-page .ako-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.ako-page .ako-benefit {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-lg);
  padding: 28px 26px;
  transition: transform 0.3s var(--ako-ease), box-shadow 0.3s var(--ako-ease), border-color 0.3s var(--ako-ease);
}
.ako-page .ako-benefit:hover {
  transform: translateY(-4px);
  box-shadow: var(--ako-shadow-md);
  border-color: rgba(248, 145, 12, 0.35);
}
.ako-page .ako-benefit__ic {
  width: 52px; height: 52px;
  background: var(--ako-light-card);
  color: var(--ako-icon-accent);
  border-radius: var(--ako-radius-sm);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.ako-page .ako-benefit__ic svg { width: 26px; height: 26px; }
.ako-page .ako-benefit h3 { margin-bottom: 8px; font-size: 1.18rem; }
.ako-page .ako-benefit p { margin: 0; color: var(--ako-text-soft); font-size: var(--ako-fs-sm); }

.ako-page .ako-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 1100px) {
  .ako-page .ako-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ako-page .ako-services__grid {
    grid-template-columns: 1fr;
  }
}
.ako-page .ako-service {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ako-ease), box-shadow 0.3s var(--ako-ease);
}
.ako-page .ako-service:hover {
  transform: translateY(-4px);
  box-shadow: var(--ako-shadow-md);
}
.ako-page .ako-service__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ako-light-card);
}
.ako-page .ako-service__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ako-ease);
}
.ako-page .ako-service:hover .ako-service__media img { transform: scale(1.04); }
.ako-page .ako-service__body {
  padding: 24px 24px 26px;
  display: flex; flex-direction: column; flex: 1;
}
.ako-page .ako-service__body h3 { font-size: 1.22rem; margin-bottom: 8px; }
.ako-page .ako-service__body p { color: var(--ako-text-soft); font-size: var(--ako-fs-sm); margin: 0 0 14px; }
.ako-page .ako-service__list {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; gap: 6px;
}
.ako-page .ako-service__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--ako-fs-sm);
  color: var(--ako-text);
}
.ako-page .ako-service__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px;
  background: var(--ako-light-card);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8910C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}
.ako-page .ako-service__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
  color: var(--ako-secondary);
  font-size: var(--ako-fs-sm);
  transition: color 0.25s var(--ako-ease), gap 0.25s var(--ako-ease);
}
.ako-page .ako-service__link:hover { color: var(--ako-primary); gap: 12px; }
.ako-page .ako-service__link svg { width: 16px; height: 16px; }

.ako-page .ako-service--icon { background: var(--ako-dark-bg); color: #F5F2EC; border-color: transparent; }
.ako-page .ako-service--icon h3 { color: #FFFFFF; }
.ako-page .ako-service--icon p { color: rgba(245, 242, 236, 0.7); }
.ako-page .ako-service--icon .ako-service__body { padding: 32px 26px 28px; }
.ako-page .ako-service--icon .ako-service__list li { color: #F5F2EC; }
.ako-page .ako-service--icon .ako-service__list li::before {
  background: rgba(248, 145, 12, 0.16);
}
.ako-page .ako-service--icon .ako-service__link { color: #FFFFFF; }
.ako-page .ako-service--icon .ako-service__link:hover { color: var(--ako-primary); }
.ako-page .ako-service__ic {
  width: 56px; height: 56px;
  background: var(--ako-primary);
  color: var(--ako-cta-text);
  border-radius: var(--ako-radius-md);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.ako-page .ako-service__ic svg { width: 28px; height: 28px; }

.ako-page .ako-targets__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .ako-page .ako-targets__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ako-page .ako-targets__grid {
    grid-template-columns: 1fr;
  }
}
.ako-page .ako-target {
  background: var(--ako-light-card);
  border-radius: var(--ako-radius-lg);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ako-ease), box-shadow 0.3s var(--ako-ease);
  position: relative;
  overflow: hidden;
}
.ako-page .ako-target::after {
  content: "";
  position: absolute;
  inset: auto -30% -40% auto;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(248, 145, 12, 0.16), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ako-ease);
}
.ako-page .ako-target:hover { transform: translateY(-4px); box-shadow: var(--ako-shadow-md); }
.ako-page .ako-target:hover::after { opacity: 1; }
.ako-page .ako-target__ic {
  width: 48px; height: 48px;
  background: #FFFFFF;
  color: var(--ako-primary);
  border-radius: var(--ako-radius-sm);
  display: grid; place-items: center;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.ako-page .ako-target__ic svg { width: 24px; height: 24px; }
.ako-page .ako-target h3 { font-size: 1.1rem; margin-bottom: 6px; position: relative; z-index: 1; }
.ako-page .ako-target p { font-size: var(--ako-fs-sm); color: var(--ako-text-soft); margin: 0; position: relative; z-index: 1; }
.ako-page .ako-target--cta {
  background: var(--ako-dark-bg);
  color: #F5F2EC;
}
.ako-page .ako-target--cta h3 { color: #FFFFFF; }
.ako-page .ako-target--cta p { color: rgba(245, 242, 236, 0.75); margin-bottom: 14px; }
.ako-page .ako-target--cta .ako-target__ic { background: var(--ako-primary); color: var(--ako-cta-text); }
.ako-page .ako-target--cta a {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font-weight: 600;
  color: var(--ako-primary);
  font-size: var(--ako-fs-sm);
  position: relative; z-index: 1;
}
.ako-page .ako-target--cta a:hover { gap: 10px; }
.ako-page .ako-target--cta a svg { width: 16px; height: 16px; }

.ako-page .ako-why {
  background: var(--ako-dark-bg);
  color: #F5F2EC;
  position: relative;
  overflow: hidden;
}
.ako-page .ako-why::before {
  content: "";
  position: absolute; top: -20%; left: -10%;
  width: 50%; height: 60%;
  background: radial-gradient(circle, rgba(248, 145, 12, 0.10), transparent 70%);
  pointer-events: none;
}
.ako-page .ako-why .ako-container { position: relative; z-index: 1; }
.ako-page .ako-why h2 { color: #FFFFFF; }
.ako-page .ako-why .ako-section-head p { color: rgba(245, 242, 236, 0.75); }
.ako-page .ako-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ako-page .ako-why__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ako-radius-lg);
  padding: 26px 24px;
  transition: background 0.3s var(--ako-ease), border-color 0.3s var(--ako-ease), transform 0.3s var(--ako-ease);
}
.ako-page .ako-why__card:hover {
  background: rgba(248, 145, 12, 0.08);
  border-color: rgba(248, 145, 12, 0.35);
  transform: translateY(-3px);
}
.ako-page .ako-why__ic {
  width: 50px; height: 50px;
  background: var(--ako-primary);
  color: var(--ako-cta-text);
  border-radius: var(--ako-radius-sm);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.ako-page .ako-why__ic svg { width: 26px; height: 26px; }
.ako-page .ako-why__card h3 { color: #FFFFFF; font-size: 1.1rem; margin-bottom: 6px; }
.ako-page .ako-why__card p { color: rgba(245, 242, 236, 0.72); font-size: var(--ako-fs-sm); margin: 0; }

.ako-page .ako-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  position: relative;
}
.ako-page .ako-step {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-lg);
  padding: 26px 22px;
  position: relative;
  transition: transform 0.3s var(--ako-ease), box-shadow 0.3s var(--ako-ease), border-color 0.3s var(--ako-ease);
}
.ako-page .ako-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--ako-shadow-md);
  border-color: rgba(248, 145, 12, 0.3);
}
.ako-page .ako-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: var(--ako-light-card);
  color: var(--ako-primary);
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.ako-page .ako-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.ako-page .ako-step p { font-size: var(--ako-fs-sm); color: var(--ako-text-soft); margin: 0; }

.ako-page .ako-costs {
  background: var(--ako-soft-bg);
}
.ako-page .ako-costs__layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ako-page .ako-costs__factors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ako-page .ako-cost {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-md);
  padding: 18px 18px;
  display: flex; align-items: center; gap: 14px;
  transition: transform 0.25s var(--ako-ease), box-shadow 0.25s var(--ako-ease);
}
.ako-page .ako-cost:hover { transform: translateY(-2px); box-shadow: var(--ako-shadow-sm); }
.ako-page .ako-cost__ic {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--ako-light-card);
  color: var(--ako-primary);
  border-radius: var(--ako-radius-xs);
  display: grid; place-items: center;
}
.ako-page .ako-cost__ic svg { width: 20px; height: 20px; }
.ako-page .ako-cost strong { font-size: var(--ako-fs-sm); font-weight: 700; display: block; }
.ako-page .ako-cost span { font-size: var(--ako-fs-xs); color: var(--ako-text-mute); }
.ako-page .ako-costs__note {
  background: var(--ako-dark-bg);
  color: #F5F2EC;
  padding: 32px 28px;
  border-radius: var(--ako-radius-lg);
  position: sticky;
  top: 24px;
}
.ako-page .ako-costs__note h3 { color: #FFFFFF; margin-bottom: 10px; }
.ako-page .ako-costs__note p { color: rgba(245, 242, 236, 0.75); font-size: var(--ako-fs-sm); margin: 0 0 18px; }
.ako-page .ako-costs__note .ako-btn--primary { width: 100%; }

.ako-page .ako-tool__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--ako-shadow-sm);
}
.ako-page .ako-tool__inputs h3 { font-size: 1.2rem; margin-bottom: 6px; }
.ako-page .ako-tool__inputs > p {
  font-size: var(--ako-fs-sm);
  color: var(--ako-text-soft);
  margin: 0 0 22px;
}
.ako-page .ako-tool__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ako-page .ako-tool__output {
  background: var(--ako-light-card);
  border-radius: var(--ako-radius-lg);
  padding: clamp(22px, 2.8vw, 30px);
  display: flex; flex-direction: column;
}
.ako-page .ako-tool__output-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--ako-fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ako-primary);
  margin-bottom: 12px;
}
.ako-page .ako-tool__output-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ako-primary);
  box-shadow: 0 0 0 4px rgba(248, 145, 12, 0.18);
}
.ako-page .ako-tool__output h4 {
  font-size: 1.15rem;
  margin: 0 0 14px;
  color: var(--ako-secondary);
}
.ako-page .ako-tool__output-content {
  flex: 1;
  font-size: var(--ako-fs-sm);
  color: var(--ako-text);
  line-height: 1.6;
  margin-bottom: 20px;
}
.ako-page .ako-tool__output-content p { margin: 0 0 10px; }
.ako-page .ako-tool__output-content p:last-child { margin-bottom: 0; }
.ako-page .ako-tool__output-content strong { color: var(--ako-secondary); font-weight: 700; }
.ako-page .ako-tool__hints {
  list-style: none; padding: 0; margin: 14px 0 20px;
  display: grid; gap: 8px;
}
.ako-page .ako-tool__hints li {
  position: relative;
  padding-left: 22px;
  font-size: var(--ako-fs-sm);
}
.ako-page .ako-tool__hints li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px;
  background: #FFFFFF;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8910C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}
.ako-page .ako-tool__disclaimer {
  font-size: var(--ako-fs-xs);
  color: var(--ako-text-mute);
  margin: 0 0 16px;
  line-height: 1.5;
}

.ako-page .ako-area__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ako-page .ako-area__tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 26px;
}
.ako-page .ako-area__tag {
  padding: 10px 18px;
  background: var(--ako-light-card);
  color: var(--ako-secondary);
  font-size: var(--ako-fs-sm);
  font-weight: 600;
  border-radius: var(--ako-radius-pill);
  transition: background 0.25s var(--ako-ease), color 0.25s var(--ako-ease), transform 0.2s var(--ako-ease);
}
.ako-page .ako-area__tag:hover {
  background: var(--ako-primary);
  color: var(--ako-cta-text);
  transform: translateY(-2px);
}
.ako-page .ako-area__note {
  background: var(--ako-soft-bg);
  padding: 18px 20px;
  border-radius: var(--ako-radius-md);
  border-left: 3px solid var(--ako-primary);
  font-size: var(--ako-fs-sm);
  color: var(--ako-text-soft);
  margin-bottom: 22px;
}
.ako-page .ako-area__map {
  position: relative;
  border-radius: var(--ako-radius-xl);
  overflow: hidden;
  background: var(--ako-light-card);
  aspect-ratio: 4/3;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--ako-shadow-sm);
}
.ako-page .ako-area__map::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(248,145,12,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,145,12,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.7;
  pointer-events: none;
}
.ako-page .ako-area__map-content {
  position: relative; z-index: 1;
}
.ako-page .ako-area__pin {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: #FFFFFF;
  border-radius: var(--ako-radius-pill);
  font-size: var(--ako-fs-sm);
  font-weight: 600;
  color: var(--ako-secondary);
  box-shadow: var(--ako-shadow-sm);
}
.ako-page .ako-area__pin svg { width: 16px; height: 16px; color: var(--ako-primary); }
.ako-page .ako-area__map-cta {
  position: relative; z-index: 1;
}

.ako-page .ako-about {
  background: var(--ako-soft-bg);
}
.ako-page .ako-about__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ako-page .ako-about__media {
  position: relative;
  border-radius: var(--ako-radius-xl);
  overflow: hidden;
  background: var(--ako-light-card);
  aspect-ratio: 4/5;
  box-shadow: var(--ako-shadow-lg);
}
.ako-page .ako-about__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.ako-page .ako-about__badge {
  position: absolute; bottom: 22px; left: 22px; right: 22px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 14px 18px;
  border-radius: var(--ako-radius-md);
  display: flex; align-items: center; gap: 12px;
}
.ako-page .ako-about__badge-ic {
  width: 38px; height: 38px;
  background: var(--ako-primary);
  color: var(--ako-cta-text);
  border-radius: 50%;
  display: grid; place-items: center;
}
.ako-page .ako-about__badge-ic svg { width: 18px; height: 18px; }
.ako-page .ako-about__badge strong { display: block; font-size: var(--ako-fs-sm); }
.ako-page .ako-about__badge span { font-size: var(--ako-fs-xs); color: var(--ako-text-mute); }
.ako-page .ako-about__content p {
  font-size: 1.05rem;
  color: var(--ako-text-soft);
  line-height: 1.7;
  margin: 0 0 18px;
}
.ako-page .ako-about__signature {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 26px;
}
.ako-page .ako-about__signature-line {
  flex: 1; height: 1px; background: var(--ako-border-strong);
}
.ako-page .ako-about__signature-text strong {
  display: block; font-size: 1rem; color: var(--ako-text);
}
.ako-page .ako-about__signature-text span {
  font-size: var(--ako-fs-xs); color: var(--ako-text-mute);
}
.ako-page .ako-about__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.ako-page .ako-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.ako-page .ako-review {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-lg);
  padding: 26px 24px;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ako-ease), box-shadow 0.3s var(--ako-ease), border-color 0.3s var(--ako-ease);
}
.ako-page .ako-review:hover {
  transform: translateY(-4px);
  box-shadow: var(--ako-shadow-md);
  border-color: rgba(248, 145, 12, 0.35);
}
.ako-page .ako-review__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ako-page .ako-review__stars {
  font-size: 1rem;
  color: var(--ako-primary);
  letter-spacing: 0.1em;
}
.ako-page .ako-review__google {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ako-fs-xs);
  font-weight: 600;
  color: var(--ako-text-mute);
}
.ako-page .ako-review__google::before {
  content: ""; width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/><path fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/><path fill='%23FBBC05' d='M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z'/><path fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7C13.42 14.62 18.27 10.75 24 10.75z'/></svg>") no-repeat center/contain;
}
.ako-page .ako-review__text {
  font-size: var(--ako-fs-sm);
  color: var(--ako-text);
  line-height: 1.65;
  margin: 0 0 18px;
  flex: 1;
}
.ako-page .ako-review__author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--ako-border);
}
.ako-page .ako-review__avatar {
  width: 40px; height: 40px;
  background: var(--ako-light-card);
  color: var(--ako-primary);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.ako-page .ako-review__author-info { flex: 1; min-width: 0; }
.ako-page .ako-review__author-info strong {
  display: block; font-size: var(--ako-fs-sm); font-weight: 700;
}
.ako-page .ako-review__author-info a {
  font-size: var(--ako-fs-xs);
  color: var(--ako-text-mute);
  text-decoration: underline;
  text-decoration-color: rgba(15, 14, 14, 0.2);
  text-underline-offset: 2px;
  transition: color 0.25s var(--ako-ease);
  word-break: break-all;
}
.ako-page .ako-review__author-info a:hover { color: var(--ako-primary); }

.ako-page .ako-faq__list {
  display: grid;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
.ako-page .ako-faq__item {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-md);
  overflow: hidden;
  transition: border-color 0.3s var(--ako-ease), box-shadow 0.3s var(--ako-ease);
}
.ako-page .ako-faq__item:hover { border-color: rgba(248, 145, 12, 0.35); }
.ako-page .ako-faq__item.is-open {
  border-color: rgba(248, 145, 12, 0.5);
  box-shadow: var(--ako-shadow-sm);
}
.ako-page .ako-faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ako-text);
  line-height: 1.4;
  white-space: normal;
}
.ako-page .ako-faq__q > span:first-child {
  min-width: 0;
  flex: 1;
  overflow-wrap: break-word;
}
.ako-page .ako-faq__q-ic {
  width: 32px; height: 32px;
  background: var(--ako-light-card);
  color: var(--ako-primary);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.3s var(--ako-ease), transform 0.3s var(--ako-ease);
}
.ako-page .ako-faq__item.is-open .ako-faq__q-ic {
  background: var(--ako-primary);
  color: var(--ako-cta-text);
  transform: rotate(45deg);
}
.ako-page .ako-faq__q-ic svg { width: 16px; height: 16px; }
.ako-page .ako-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ako-ease);
}
.ako-page .ako-faq__a-inner {
  padding: 0 24px 22px;
  color: var(--ako-text-soft);
  font-size: var(--ako-fs-sm);
  line-height: 1.7;
}
.ako-page .ako-faq__a-inner p { margin: 0 0 10px; }
.ako-page .ako-faq__a-inner p:last-child { margin-bottom: 0; }

.ako-page .ako-contact {
  background: var(--ako-soft-bg);
}
.ako-page .ako-contact__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ako-page .ako-msf {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-xl);
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: var(--ako-shadow-md);
}
.ako-page .ako-progress {
  margin-bottom: 28px;
}
.ako-page .ako-progress__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ako-page .ako-progress__step {
  font-size: var(--ako-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ako-primary);
}
.ako-page .ako-progress__text {
  font-size: var(--ako-fs-xs);
  font-weight: 600;
  color: var(--ako-text-mute);
}
.ako-page .ako-progress__track {
  height: 8px;
  background: var(--ako-light-card);
  border-radius: var(--ako-radius-pill);
  overflow: hidden;
}
.ako-page .ako-progress__bar {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--ako-primary), #ffb74a);
  border-radius: var(--ako-radius-pill);
  transition: width 0.5s var(--ako-ease);
}
.ako-page .ako-step-title { font-size: 1.4rem; margin-bottom: 6px; }
.ako-page .ako-step-sub {
  font-size: var(--ako-fs-sm); color: var(--ako-text-soft); margin: 0 0 20px;
}
.ako-page .ako-msf-step { display: none; animation: ako-fade 0.4s var(--ako-ease); }
.ako-page .ako-msf-step.is-active { display: block; }
@keyframes ako-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ako-page .ako-msf__nav {
  display: flex; gap: 12px; margin-top: 20px;
  flex-wrap: wrap;
}
.ako-page .ako-msf__nav .ako-btn { flex: 1; min-width: 160px; }
.ako-page .ako-msf__trust {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ako-border);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.ako-page .ako-msf__trust li {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--ako-fs-xs);
  color: var(--ako-text-mute);
  list-style: none;
}
.ako-page .ako-msf__trust li::before {
  content: ""; width: 14px; height: 14px;
  background: var(--ako-light-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8910C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/9px no-repeat;
  border-radius: 50%;
}

.ako-page .ako-info {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}
.ako-page .ako-info__card {
  background: #FFFFFF;
  border: 1px solid var(--ako-border);
  border-radius: var(--ako-radius-lg);
  padding: 26px 24px;
}
.ako-page .ako-info__card h3 { font-size: 1.15rem; margin-bottom: 16px; }
.ako-page .ako-info__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.ako-page .ako-info__list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: var(--ako-fs-sm);
}
.ako-page .ako-info__list li .ako-info__ic {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--ako-light-card);
  color: var(--ako-primary);
  border-radius: var(--ako-radius-sm);
  display: grid; place-items: center;
}
.ako-page .ako-info__list li .ako-info__ic svg { width: 20px; height: 20px; }
.ako-page .ako-info__list li strong { display: block; font-size: var(--ako-fs-xs); color: var(--ako-text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.ako-page .ako-info__list li a, .ako-page .ako-info__list li span { color: var(--ako-text); font-weight: 600; line-height: 1.4; }
.ako-page .ako-info__list li a:hover { color: var(--ako-primary); }

.ako-page .ako-info__map {
  position: relative;
  background: var(--ako-light-card);
  border-radius: var(--ako-radius-lg);
  overflow: hidden;
  padding: 22px 22px 22px;
  border: 1px solid var(--ako-border);
}
.ako-page .ako-info__map::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(248,145,12,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,145,12,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.65;
  pointer-events: none;
}
.ako-page .ako-info__map-inner { position: relative; z-index: 1; }
.ako-page .ako-info__map-pin {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: #FFFFFF;
  border-radius: var(--ako-radius-pill);
  font-size: var(--ako-fs-xs);
  font-weight: 700;
  color: var(--ako-secondary);
  box-shadow: var(--ako-shadow-sm);
  margin-bottom: 12px;
}
.ako-page .ako-info__map-pin svg { width: 14px; height: 14px; color: var(--ako-primary); }
.ako-page .ako-info__map h4 { font-size: 1rem; margin-bottom: 6px; }
.ako-page .ako-info__map p { font-size: var(--ako-fs-xs); color: var(--ako-text-soft); margin: 0 0 14px; }

.ako-page .ako-info__quickcall {
  background: var(--ako-dark-bg);
  color: #F5F2EC;
  border-radius: var(--ako-radius-lg);
  padding: 24px 22px;
}
.ako-page .ako-info__quickcall h4 { color: #FFFFFF; margin-bottom: 6px; }
.ako-page .ako-info__quickcall p { font-size: var(--ako-fs-sm); color: rgba(245, 242, 236, 0.75); margin: 0 0 14px; }
.ako-page .ako-info__quickcall .ako-btn { width: 100%; }

.ako-page .ako-final-cta {
  padding: clamp(56px, 7vw, 88px) 0;
}
.ako-page .ako-final-cta__inner {
  background: var(--ako-dark-bg);
  color: #F5F2EC;
  border-radius: var(--ako-radius-xl);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ako-page .ako-final-cta__inner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(248, 145, 12, 0.20), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(248, 145, 12, 0.10), transparent 60%);
  pointer-events: none;
}
.ako-page .ako-final-cta__inner > * { position: relative; z-index: 1; }
.ako-page .ako-final-cta h2 {
  color: #FFFFFF;
  max-width: 760px;
  margin: 0 auto 14px;
}
.ako-page .ako-final-cta p {
  color: rgba(245, 242, 236, 0.78);
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
}
.ako-page .ako-final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.ako-page .ako-final-cta__inner .ako-btn--outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
.ako-page .ako-final-cta__inner .ako-btn--outline:hover {
  background: var(--ako-primary);
  border-color: var(--ako-primary);
  color: var(--ako-cta-text);
}

@media (max-width: 1024px) {
  .ako-page .ako-hero { min-height: 0; padding: 0; }
  .ako-page .ako-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ako-page .ako-hero__content { max-width: 720px; }
  .ako-page .ako-hero__bg::after {
    background:
      linear-gradient(180deg, rgba(15, 14, 14, 0.86) 0%, rgba(15, 14, 14, 0.74) 40%, rgba(15, 14, 14, 0.55) 100%);
  }
  .ako-page .ako-costs__layout,
  .ako-page .ako-tool__layout,
  .ako-page .ako-area__layout,
  .ako-page .ako-about__layout,
  .ako-page .ako-contact__layout { grid-template-columns: minmax(0, 1fr); }
  .ako-page .ako-costs__note { position: static; }
  .ako-page .ako-info { position: static; }
  .ako-page .ako-about__media { max-width: 480px; margin: 0 auto; }
  .ako-page .ako-area__map { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .ako-page .ako-hero {
    min-height: 0;
    padding: 0;
    display: block;
    align-items: stretch;
  }
  .ako-page .ako-hero .ako-container {
    padding-top: clamp(96px, 22vw, 132px);
    padding-bottom: 48px;
  }
  .ako-page .ako-hero__bg img {
    object-position: center 25%;
  }
  .ako-page .ako-hero__bg::after {
    background:
      linear-gradient(180deg, rgba(15, 14, 14, 0.90) 0%, rgba(15, 14, 14, 0.80) 40%, rgba(15, 14, 14, 0.90) 100%);
  }
  .ako-page .ako-hero__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .ako-page .ako-hero__content {
    display: contents;
  }
  .ako-page .ako-hero .ako-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ako-page .ako-hero .ako-badge {
    order: 1;
    align-self: flex-start;
    margin: 0 0 10px;
  }
  .ako-page .ako-hero__title {
    order: 2;
    font-size: clamp(1.85rem, 8.5vw, 2.4rem);
    line-height: 1.05;
    margin: 0 0 12px;
  }
  .ako-page .ako-hero__sub--desktop { display: none; }
  .ako-page .ako-hero__sub--mobile {
    display: block;
    order: 3;
    margin: 0 0 18px;
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: none;
  }
  .ako-page .ako-hero__form {
    order: 4;
    margin: 0 0 18px;
    padding: 20px;
  }
  .ako-page .ako-hero__form .ako-msf__nav { flex-direction: row; gap: 8px; }
  .ako-page .ako-hero__form .ako-msf__nav .ako-btn { padding: 13px 14px; font-size: 0.9rem; }
  .ako-page .ako-hero__trust {
    order: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 0 0 16px;
  }
  .ako-page .ako-hero__trust li {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
  }
  .ako-page .ako-hero__trust li::before {
    width: 18px; height: 18px;
    background-size: 11px;
  }
  .ako-page .ako-hero__cta {
    order: 6;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 14px;
  }
  .ako-page .ako-hero__cta .ako-btn {
    width: 100%;
    padding: 16px 22px;
  }
  .ako-page .ako-hero__proof {
    order: 7;
    padding: 11px 14px;
    max-width: none;
  }
  .ako-page .ako-hero__proof p {
    font-size: 0.82rem;
  }

  .ako-page .ako-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ako-page .ako-section-head h2,
  .ako-page h2,
  .ako-page h3 {
    overflow-wrap: break-word;
  }

  .ako-page .ako-btn {
    white-space: normal;
    line-height: 1.3;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .ako-page .ako-btn--lg {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .ako-page .ako-costs__factors { grid-template-columns: minmax(0, 1fr); }
  .ako-page .ako-cost { padding: 14px 16px; gap: 12px; min-width: 0; }
  .ako-page .ako-cost__ic { width: 36px; height: 36px; }
  .ako-page .ako-cost > div:last-child { min-width: 0; flex: 1; }
  .ako-page .ako-cost strong,
  .ako-page .ako-cost span { overflow-wrap: anywhere; }

  .ako-page .ako-tool__layout {
    padding: 22px 18px;
    border-radius: var(--ako-radius-md);
    gap: 24px;
  }
  .ako-page .ako-tool__row { grid-template-columns: minmax(0, 1fr); }
  .ako-page .ako-tool__output { padding: 22px 18px; }
  .ako-page .ako-step-title { font-size: 1.2rem; }
  .ako-page .ako-faq__q { padding: 16px; font-size: 0.95rem; gap: 12px; }
  .ako-page .ako-faq__q-ic { width: 28px; height: 28px; }
  .ako-page .ako-faq__a-inner { padding: 0 16px 16px; }
  .ako-page .ako-msf__nav .ako-btn { flex: 1 0 100%; }
  .ako-page .ako-final-cta__buttons { flex-direction: column; align-items: stretch; }
  .ako-page .ako-final-cta__buttons .ako-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ako-page *,
  .ako-page *::before,
  .ako-page *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .ako-page .ako-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   MOBILE OPTIMIERUNG OVERRIDES
   Behebt: zu schmaler Container (war min(85vw)), gequetschte Why-Cards,
   Tiktok-schmales Hero-Form, unzentriertes Hero-Badge, abgeschnittene Wörter.
   Greift nur auf Mobile, Desktop bleibt unangetastet.
   ========================================================================== */
@media (max-width: 768px) {

  /* Hauptursache: Container war auf 85vw begrenzt. Jetzt voll, mit
     kleinem konsistentem Side-Padding fuer mehr Inhaltsbreite. */
  .ako-page .ako-container {
    max-width: 100%;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Wort-Trennung global verhindern. Ueberlange Woerter (Treppenhausreinigung,
     Gebaeudereinigung) werden NICHT mit Bindestrich umbrochen. */
  .ako-page,
  .ako-page h1,
  .ako-page h2,
  .ako-page h3,
  .ako-page h4,
  .ako-page p,
  .ako-page li,
  .ako-page a,
  .ako-page span,
  .ako-page label,
  .ako-page strong {
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Hero-Badge "Lokal in Heilbronn und Umgebung" sauber zentriert,
     auch wenn umbrochen. Punkt links, Text mittig. */
  .ako-page .ako-hero .ako-badge {
    text-align: center;
    line-height: 1.35;
    padding: 8px 14px;
    max-width: 100%;
    align-self: flex-start;
  }

  /* Why-Section (dunkel): war 4 Spalten auf jedem Geraet -> Cards komplett
     gequetscht, "Direkter Kontakt im Alltag" abgeschnitten. Jetzt 1 Spalte. */
  .ako-page .ako-why__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ako-page .ako-why__card {
    padding: 22px 20px;
  }

  /* Benefits-Section (hell, "Warum Unternehmen acko..."): war auto-fit
     minmax(260px) -> brach hart. Jetzt sauber 1 Spalte volle Breite. */
  .ako-page .ako-benefits__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ako-page .ako-benefit {
    padding: 24px 22px;
  }

  /* Reviews / Testimonials: war auto-fit minmax(280px) -> zu schmal.
     Jetzt 1 Spalte. */
  .ako-page .ako-reviews__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ako-page .ako-review {
    padding: 24px 20px;
  }

  /* Hero-Form "Schnell Angebot anfordern": war zu schmal, wirkte wie TikTok.
     Mit breiterem Container ist das Form automatisch breiter, hier nur
     padding etwas reduzieren damit innen mehr Platz fuer Selects bleibt. */
  .ako-page .ako-hero__form {
    padding: 22px 18px;
    border-radius: var(--ako-radius-lg);
  }

  /* Service Cards (Treppenhausreinigung, Hausmeisterservice etc.):
     padding optimieren, Bild-Aspekt anpassen damit Cards nicht zu hoch werden. */
  .ako-page .ako-service__body {
    padding: 22px 20px;
  }
  .ako-page .ako-service h3 {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Branchen / Targets: padding optimieren */
  .ako-page .ako-target {
    padding: 26px 22px;
  }

  /* Bedarfs-Check Tool ("Ihre Angaben"): padding entspannen */
  .ako-page .ako-tool__layout {
    padding: 24px 18px;
    border-radius: var(--ako-radius-lg);
  }
  .ako-page .ako-tool__output {
    padding: 24px 18px;
    border-radius: var(--ako-radius-md);
  }

  /* Kontakt-Form (untere MSF): padding und Radius */
  .ako-page .ako-msf {
    padding: 24px 20px;
    border-radius: var(--ako-radius-lg);
  }

  /* Kontakt-Layout */
  .ako-page .ako-contact__layout {
    gap: 24px;
  }

  /* About- und Area-Section: keine zu kleine max-width */
  .ako-page .ako-about__media,
  .ako-page .ako-area__map {
    max-width: 100%;
  }

  /* Final CTA "Heute anfragen, morgen besprechen...": Inner padding war
     viel zu gross -> H2 wurde Wort-fuer-Wort umbrochen. Jetzt schlanker. */
  .ako-page .ako-final-cta__inner {
    padding: 40px 22px;
    border-radius: var(--ako-radius-lg);
  }
  .ako-page .ako-final-cta h2 {
    font-size: clamp(1.6rem, 6.5vw, 2rem);
    line-height: 1.18;
    max-width: 100%;
  }
  .ako-page .ako-final-cta p {
    font-size: 0.98rem;
    max-width: 100%;
  }

  /* FAQ-Items: Atemraum innerhalb der Karte */
  .ako-page .ako-faq__q { padding: 18px 16px; }
  .ako-page .ako-faq__a-inner { padding: 0 16px 18px; }
}

/* Sehr kleine Devices (iPhone SE etc.): noch defensiver */
@media (max-width: 380px) {
  .ako-page .ako-container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .ako-page .ako-hero__form { padding: 20px 16px; }
  .ako-page .ako-final-cta__inner { padding: 36px 18px; }
  .ako-page .ako-why__card,
  .ako-page .ako-benefit,
  .ako-page .ako-review,
  .ako-page .ako-target { padding: 22px 18px; }
}

/* ==========================================================================
   SERVICE-CARDS KOMPLETT KLICKBAR (Stretched-Link Pattern)
   Macht die gesamte .ako-service Kachel anklickbar, der Klick fuehrt
   auf den href des inneren .ako-service__link. Visuell aendert sich nichts.
   ========================================================================== */
.ako-page .ako-service { position: relative; }
.ako-page .ako-service__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}
.ako-page .ako-service:hover { cursor: pointer; }


