/* Agent-Key page assets: inner service/information page shell */

.ak-page-shell {
background:
    radial-gradient(circle at 8% 8%, rgba(255, 101, 34, .08), transparent 28%),
    linear-gradient(180deg, #f6f7f9 0%, #ffffff 100%);
  padding: 34px 0 54px;
}

.ak-page-shell,
.ak-page-shell * {
box-sizing: border-box;
}

.ak-page-shell a {
text-decoration: none;
}

.ak-page-shell .sppb-row {
max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.ak-side-nav {
position: sticky;
  top: 96px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(18,24,35,.08);
  box-shadow: 0 18px 50px rgba(18,24,35,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ak-side-title {
margin: 0 0 10px;
  color: #141821;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ak-side-subtitle {
margin: 0 0 15px;
  color: #6a7280;
  font-size: 14px;
  line-height: 1.45;
}

.ak-side-list {
display: grid;
  gap: 9px;
}

.ak-side-btn {
position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 14px 12px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  border: 1px solid rgba(255, 101, 34, .20);
  color: #232936;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.22;
  box-shadow: 0 8px 22px rgba(18,24,35,.045);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.ak-side-btn::before {
content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5b22, #ff8a22);
  box-shadow: 0 0 0 5px rgba(255, 91, 34, .10);
  opacity: .9;
}

.ak-side-btn::after {
content: "›";
  margin-left: auto;
  color: rgba(255, 91, 34, .72);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: transform .18s ease;
}

.ak-side-btn:hover {
transform: translateY(-2px);
  border-color: rgba(255, 91, 34, .48);
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 91, 34, .12), transparent 42%),
    linear-gradient(180deg, #ffffff, #fff8f4);
  box-shadow: 0 14px 34px rgba(255, 91, 34, .13);
  color: #111827;
}

.ak-side-btn:hover::after {
transform: translateX(3px);
}

.ak-page-price .ak-nav-price,
.ak-page-lost .ak-nav-lost,
.ak-page-duplicate .ak-nav-duplicate,
.ak-page-repair .ak-nav-repair,
.ak-page-autostart .ak-nav-autostart,
.ak-page-diagnostics .ak-nav-diagnostics,
.ak-page-immo .ak-nav-immo,
.ak-page-sync .ak-nav-sync,
.ak-page-chiptuning .ak-nav-chiptuning,
.ak-page-about-keys .ak-nav-about-keys,
.ak-page-bmw .ak-nav-bmw,
.ak-page-vag .ak-nav-vag,
.ak-page-mercedes .ak-nav-mercedes,
.ak-page-mercedes-esl .ak-nav-mercedes-esl,
.ak-page-faq .ak-nav-faq {
border-color: rgba(255, 91, 34, .62);
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 91, 34, .16), transparent 46%),
    linear-gradient(180deg, #ffffff, #fff5ef);
  color: #111827;
  box-shadow: 0 14px 34px rgba(255, 91, 34, .14);
}

.ak-page-price .ak-nav-price::after,
.ak-page-lost .ak-nav-lost::after,
.ak-page-duplicate .ak-nav-duplicate::after,
.ak-page-repair .ak-nav-repair::after,
.ak-page-autostart .ak-nav-autostart::after,
.ak-page-diagnostics .ak-nav-diagnostics::after,
.ak-page-immo .ak-nav-immo::after,
.ak-page-sync .ak-nav-sync::after,
.ak-page-chiptuning .ak-nav-chiptuning::after,
.ak-page-about-keys .ak-nav-about-keys::after,
.ak-page-bmw .ak-nav-bmw::after,
.ak-page-vag .ak-nav-vag::after,
.ak-page-mercedes .ak-nav-mercedes::after,
.ak-page-mercedes-esl .ak-nav-mercedes-esl::after,
.ak-page-faq .ak-nav-faq::after {
transform: translateX(3px);
}

.ak-side-cta {
margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 122, 26, .18), transparent 38%),
    linear-gradient(135deg, #151922, #0c1018);
  color: #fff;
}

.ak-side-cta-title {
margin: 0 0 7px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.ak-side-cta-text {
margin: 0 0 12px;
  color: rgba(255,255,255,.72);
  font-size: 13.5px;
  line-height: 1.45;
}

.ak-side-phone {
display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff5b22, #ff7a1a);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(255,91,34,.24);
}

.ak-inner-content {
color: #151922;
}

.ak-inner-hero {
position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 38px 34px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 102, 32, .26), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(255, 165, 92, .16), transparent 30%),
    linear-gradient(135deg, #151922 0%, #0b0e14 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 70px rgba(0,0,0,.24);
}

.ak-inner-kicker {
display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 103, 31, .13);
  border: 1px solid rgba(255, 103, 31, .30);
  color: #ffb087;
  font-size: 14px;
  font-weight: 850;
}

.ak-inner-hero h1 {
max-width: 820px;
  margin: 0 0 15px;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.ak-inner-hero p {
max-width: 760px;
  margin: 0 0 24px;
  color: rgba(255,255,255,.78);
  font-size: 17px;
  line-height: 1.58;
}

.ak-inner-actions {
display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ak-inner-btn {
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.ak-inner-btn:hover {
transform: translateY(-2px);
}

.ak-inner-btn-primary {
color: #fff;
  background: linear-gradient(135deg, #ff5b22, #ff7a1a);
  box-shadow: 0 14px 34px rgba(255, 91, 34, .28);
}

.ak-inner-btn-primary:hover {
color: #fff;
  box-shadow: 0 18px 42px rgba(255, 91, 34, .38);
}

.ak-inner-btn-secondary {
color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
}

.ak-inner-btn-secondary:hover {
color: #fff;
  border-color: rgba(255, 122, 26, .55);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}

.ak-inner-card {
margin-top: 24px;
  padding: 26px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(18,24,35,.08);
  box-shadow: 0 18px 55px rgba(18, 24, 35, .09);
}

.ak-inner-card h2 {
margin: 0 0 12px;
  color: #141821;
  font-size: clamp(24px, 3vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.ak-inner-card h3 {
margin: 22px 0 10px;
  color: #141821;
  font-size: 21px;
  line-height: 1.25;
}

.ak-inner-card p {
margin: 0 0 14px;
  color: #4a515c;
  font-size: 16px;
  line-height: 1.65;
}

.ak-inner-card p:last-child {
margin-bottom: 0;
}

.ak-inner-card ul {
margin: 14px 0 0;
  padding-left: 20px;
}

.ak-inner-card li {
margin-bottom: 8px;
  color: #4a515c;
  font-size: 16px;
  line-height: 1.55;
}

.ak-inner-card li::marker {
color: #ff5b22;
}

.ak-inner-card strong {
color: #151922;
  font-weight: 900;
}

.ak-inner-note {
margin-top: 24px;
  padding: 23px;
  border-radius: 22px;
  background: #fff7f2;
  border: 1px solid rgba(255, 91, 34, .18);
  color: #2b2f36;
}

.ak-inner-note h2 {
margin: 0 0 12px;
  color: #141821;
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.15;
}

.ak-inner-note p {
margin: 0 0 10px;
  color: #4a515c;
  font-size: 15.5px;
  line-height: 1.55;
}

.ak-inner-note p:last-child {
margin-bottom: 0;
}

.ak-inner-cta {
margin-top: 24px;
  padding: 28px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 122, 26, .22), transparent 34%),
    linear-gradient(135deg, #151922, #0c1018);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.ak-inner-cta h2 {
margin: 0 0 10px;
  color: #fff;
  font-size: clamp(24px, 3vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.ak-inner-cta p {
max-width: 760px;
  margin: 0 0 20px;
  color: rgba(255,255,255,.76);
  font-size: 16px;
  line-height: 1.58;
}

@media (max-width: 991px) {
.ak-side-nav {
position: static;
    margin-bottom: 22px;
}

.ak-side-list {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.ak-side-nav {
padding: 16px;
    border-radius: 21px;
}

.ak-side-list {
grid-template-columns: 1fr;
}

.ak-side-btn {
min-height: 44px;
    border-radius: 15px;
    font-size: 14.5px;
}

.ak-inner-actions {
flex-direction: column;
}

.ak-inner-btn {
width: 100%;
    min-height: 46px;
    border-radius: 15px;
    font-size: 15px;
}

.ak-inner-cta {
padding: 22px;
    border-radius: 22px;
}

.ak-inner-note {
padding: 20px;
    border-radius: 20px;
}
}