/* Anup Kumar H's pages (home and services): Apple-style "liquid glass" on a soft, slowly moving colour field, in a "teal & sand"
   palette: deep teal for actions, cool white and sea-glass behind, soft khaki and terracotta for warmth.
   Every colour is a token below, with a dark set under html[data-theme="dark"] (the header switch). */

body.ak {
  --head: var(--ak-font);
  --text: var(--ak-font);
  --ak-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", "Manrope", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ak-bg: #eef4f2;
  --ak-ink: #132b31;
  --ak-soft: #3e4943;
  --ak-muted: #6a736d;
  --ak-accent: #1c6171;
  --ak-warm: #7d6539;
  --ak-btn: #1c6171;
  --ak-btn-glow: rgba(28, 97, 113, 0.45);
  --ak-green: #2f8a7a;
  --ak-hot: linear-gradient(100deg, #c2714a, #a9563a);
  /* The gradient for highlighted words, figures and bars: forest to sage to soft gold. */
  --ak-grad: linear-gradient(100deg, #134755 0%, #2a7d8e 55%, #b9a57d 100%);
  /* Icon tiles, avatars and the logo: a solid-feeling green. */
  --ak-icon: linear-gradient(140deg, #2a7d8e 0%, #134755 100%);
  --ak-grad-glow: rgba(28, 97, 113, 0.4);
  --ak-tint: rgba(207, 226, 212, 0.6);
  --ak-menu-bg: #fbfdfc;
  --ak-glass: linear-gradient(145deg, rgba(252, 254, 254, 0.74) 0%, rgba(252, 254, 254, 0.4) 100%);
  --ak-glass-solid: rgba(252, 254, 254, 0.74);
  --ak-edge: rgba(255, 255, 255, 0.85);
  --ak-edge-soft: rgba(19, 43, 49, 0.06);
  --ak-hi: rgba(255, 255, 255, 0.95);
  --ak-shadow: 0 1px 1px rgba(16, 36, 40, 0.04), 0 12px 32px -12px rgba(20, 48, 54, 0.16), 0 40px 80px -40px rgba(20, 48, 54, 0.2);
  --ak-shadow-lift: 0 2px 2px rgba(16, 36, 40, 0.04), 0 22px 48px -16px rgba(20, 48, 54, 0.24), 0 60px 100px -50px rgba(20, 48, 54, 0.28);
  --ak-shadow-soft: rgba(20, 48, 54, 0.22);
  --ak-line: rgba(19, 43, 49, 0.1);
  --ak-track: rgba(19, 43, 49, 0.07);
  --ak-orb-a: #cfe6e8;
  --ak-orb-b: #efe6d3;
  --ak-orb-c: #f1d3c3;
  --ak-orb-d: #d6e8ea;
  --ak-orb-opacity: 0.9;
  --ak-r: 28px;
  --ak-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font: 17px/1.55 var(--ak-font);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="dark"] body.ak {
  --ak-ink: #eef1ec;
  --ak-soft: #cfd6d0;
  --ak-muted: #9aa49d;
  --ak-bg: #0c171a;
  --ak-accent: #7cc4d1;
  --ak-warm: #e0c08a;
  --ak-btn: #2d7b8c;
  --ak-btn-glow: rgba(45, 123, 140, 0.5);
  --ak-green: #6fcdb8;
  --ak-grad: linear-gradient(100deg, #7cc4d1 0%, #b8dde0 50%, #e0c08a 100%);
  --ak-icon: linear-gradient(140deg, #3d8fa0 0%, #1d5563 100%);
  --ak-tint: rgba(159, 208, 181, 0.08);
  --ak-menu-bg: #132124;
  --ak-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
  --ak-glass-solid: rgba(20, 34, 38, 0.76);
  --ak-edge: rgba(255, 255, 255, 0.14);
  --ak-edge-soft: rgba(255, 255, 255, 0.06);
  --ak-hi: rgba(255, 255, 255, 0.22);
  --ak-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --ak-shadow-lift: 0 2px 2px rgba(0, 0, 0, 0.3), 0 28px 60px -20px rgba(0, 0, 0, 0.8);
  --ak-shadow-soft: rgba(0, 0, 0, 0.5);
  --ak-line: rgba(255, 255, 255, 0.12);
  --ak-track: rgba(255, 255, 255, 0.1);
  --ak-orb-a: #173f48;
  --ak-orb-b: #3d3420;
  --ak-orb-c: #44271f;
  --ak-orb-d: #1c3544;
  --ak-orb-opacity: 0.6;
}

body.ak main { padding: 0; min-height: 0; }
/* store.css styles every heading with :root:root body h1, so heading rules here start with body.ak to match it. */
.ak h1, .ak h2, .ak h3 { font-family: var(--ak-font); color: var(--ak-ink); }
.ak a { color: var(--ak-accent); }
.ak ::selection { background: rgba(28, 97, 113, 0.18); }
.ak :focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 3px; border-radius: 10px; }
.ak .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ak-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ak-wrap > * { min-width: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* ------------------------------------------------------------------ */
/* Background: four soft orbs drifting behind everything               */
/* ------------------------------------------------------------------ */
.ak-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ak-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--ak-orb-opacity); will-change: transform; }
.ak-orb-1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: var(--ak-orb-a); animation: ak-drift 26s ease-in-out infinite alternate; }
.ak-orb-2 { width: 40vw; height: 40vw; right: -10vw; top: 6vh; background: var(--ak-orb-b); animation: ak-drift 32s ease-in-out -8s infinite alternate-reverse; }
.ak-orb-3 { width: 34vw; height: 34vw; left: 30vw; bottom: -16vw; background: var(--ak-orb-c); animation: ak-drift 28s ease-in-out -4s infinite alternate; }
.ak-orb-4 { width: 26vw; height: 26vw; right: 12vw; bottom: 10vh; background: var(--ak-orb-d); animation: ak-drift 36s ease-in-out -12s infinite alternate-reverse; }
.ak-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--ak-edge-soft) 1px, transparent 1px), linear-gradient(90deg, var(--ak-edge-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 0%, transparent 75%);
}
@keyframes ak-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
  100% { transform: translate3d(-4vw, 8vh, 0) scale(0.95); }
}

/* ------------------------------------------------------------------ */
/* Glass: a frosted panel with a bright top edge and a soft shadow      */
/* ------------------------------------------------------------------ */
.ak-glass {
  position: relative;
  background: var(--ak-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--ak-edge);
  box-shadow: inset 0 1px 0 var(--ak-hi), inset 0 -1px 0 rgba(255, 255, 255, 0.08), var(--ak-shadow);
}
/* A light that follows the pointer on cards marked data-glow (position set in home.js). */
[data-glow]::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(255, 255, 255, 0.5), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--ak-ease);
  mix-blend-mode: soft-light;
}
html[data-theme="dark"] [data-glow]::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(255, 255, 255, 0.14), transparent 45%); mix-blend-mode: normal; }
[data-glow]:hover::after { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Buttons, pills and small parts                                      */
/* ------------------------------------------------------------------ */
.ak-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px;
  border-radius: 999px;
  font: 600 16px/1 var(--ak-font);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.5s var(--ak-ease), box-shadow 0.5s var(--ak-ease), background-color 0.3s, filter 0.3s;
}
.ak .ak-btn-primary {
  color: #fff;
  background: var(--ak-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -10px var(--ak-btn-glow);
}
.ak .ak-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 16px 32px -12px var(--ak-btn-glow); }
.ak .ak-btn-glass {
  color: var(--ak-ink);
  background: var(--ak-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--ak-edge);
  box-shadow: inset 0 1px 0 var(--ak-hi), 0 8px 20px -12px var(--ak-shadow-soft);
}
.ak .ak-btn-glass:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--ak-hi), 0 14px 28px -14px var(--ak-shadow-soft); }
.ak-btn .arrow, .ak-btn svg { flex-shrink: 0; }
.ak-btn:hover svg:last-child:not(:first-child) { transform: translateX(2px); }
.ak-btn svg { transition: transform 0.4s var(--ak-ease); }
.ak-btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

.ak-pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 26px; padding: 8px 16px 8px 12px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ak-soft);
}
.ak-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ak-green); }
.ak-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ak-green); opacity: 0; animation: ak-ping 2.2s var(--ak-ease) infinite; }
@keyframes ak-ping { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }

.ak-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ak-warm);
}
.ak-grad {
  background: var(--ak-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: 0.04em;
}
.ak-tag {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: var(--ak-soft);
  background: var(--ak-track);
}
.ak-tag-hot { color: #fff; background: var(--ak-hot); }
.ak-squircle {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--ak-icon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px -8px var(--ak-grad-glow);
}
.ak-checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.ak-checks li, .ak-trust li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ak-soft); }
.ak-checks svg, .ak-trust svg { color: var(--ak-green); flex-shrink: 0; }
.ak .ak-more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ak-accent); }
.ak-more svg { transition: transform 0.4s var(--ak-ease); }
.ak-more:hover svg { transform: translateX(3px); }
.ak-note { margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--ak-muted); }
.ak-stars { display: inline-flex; gap: 2px; color: #d39b35; }

/* ------------------------------------------------------------------ */
/* Header: a floating glass bar                                        */
/* ------------------------------------------------------------------ */
.ak-header { position: sticky; top: 0; z-index: 50; padding: 14px 16px 0; }
.ak-bar {
  display: flex; align-items: center; gap: 16px;
  max-width: 1152px; margin: 0 auto;
  min-height: 60px; padding: 8px 10px 8px 20px;
  border-radius: 22px;
  transition: box-shadow 0.5s var(--ak-ease), background 0.5s var(--ak-ease);
}
.ak-header.is-scrolled .ak-bar { box-shadow: inset 0 1px 0 var(--ak-hi), var(--ak-shadow-lift); }
.ak .ak-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ak-ink); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.ak-logo-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  font: 700 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: #fff;
  background: var(--ak-icon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 14px -6px var(--ak-grad-glow);
}
.ak-nav { display: flex; gap: 2px; margin: 0 auto; }
.ak .ak-nav > a, .ak .ak-nav-top {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  color: var(--ak-soft);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.ak .ak-nav > a:hover, .ak .ak-nav-top:hover { color: var(--ak-ink); background: var(--ak-track); }
.ak .ak-nav > a.is-active, .ak .ak-nav-top.is-active, .ak .ak-nav-top[aria-current] { color: var(--ak-ink); background: var(--ak-glass-solid); box-shadow: inset 0 1px 0 var(--ak-hi), 0 2px 8px -2px var(--ak-shadow-soft); }
.ak-bar-actions { display: flex; align-items: center; gap: 8px; }
.ak-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ak-line);
  background: transparent;
  color: var(--ak-ink);
  cursor: pointer;
  transition: background-color 0.3s;
}
.ak-icon-btn:hover { background: var(--ak-track); }
.ak-icon-btn .i-sun { display: none; }
html[data-theme="dark"] .ak-icon-btn .i-sun { display: block; }
html[data-theme="dark"] .ak-icon-btn .i-moon { display: none; }
.ak-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ak-burger { display: none; width: 40px; height: 40px; margin: 0; border-radius: 50%; cursor: pointer; position: relative; }
.ak-burger span { position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: var(--ak-ink); transition: transform 0.4s var(--ak-ease), top 0.4s var(--ak-ease); }
.ak-burger span:first-child { top: 16px; }
.ak-burger span:last-child { top: 23px; }
.ak-nav-toggle:checked ~ .ak-bar-actions .ak-burger span:first-child { top: 19.5px; transform: rotate(45deg); }
.ak-nav-toggle:checked ~ .ak-bar-actions .ak-burger span:last-child { top: 19.5px; transform: rotate(-45deg); }


/* Services menu: a solid panel under "Services", opened on hover or keyboard focus.
   It sits inside the blurred header, where its own blur cannot reach the page, so it is opaque instead. */
.ak-nav { align-items: center; }
.ak-nav-group { position: relative; }
.ak .ak-nav-top { display: inline-flex; align-items: center; gap: 4px; }
.ak-nav-top svg { opacity: 0.6; transition: transform 0.35s var(--ak-ease); }
.ak-nav-group:hover .ak-nav-top svg, .ak-nav-group:focus-within .ak-nav-top svg { transform: rotate(180deg); }
.ak-menu {
  position: absolute; top: calc(100% + 16px); left: 50%; z-index: 60;
  display: grid; gap: 2px;
  width: 340px; padding: 8px;
  border-radius: 22px;
  background: var(--ak-menu-bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--ak-line);
  box-shadow: inset 0 1px 0 var(--ak-hi), var(--ak-shadow-lift);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s, transform 0.35s var(--ak-ease), visibility 0s 0.35s;
}
.ak-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; }
.ak-nav-group:hover .ak-menu, .ak-nav-group:focus-within .ak-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 0.25s, transform 0.35s var(--ak-ease); }
.ak .ak-menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; color: var(--ak-ink); text-decoration: none; transition: background-color 0.25s; }
.ak .ak-menu-item:hover, .ak .ak-menu-item:focus-visible, .ak .ak-menu-item[aria-current="page"] { background: var(--ak-track); }
.ak-menu-item .ak-squircle { width: 36px; height: 36px; border-radius: 11px; box-shadow: none; }
.ak-menu-item .ak-squircle svg { width: 18px; height: 18px; }
.ak-menu-item b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.ak-menu-item small { display: block; font-size: 12.5px; color: var(--ak-muted); }
.ak .ak-menu-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; padding: 11px; border-top: 1px solid var(--ak-line); font-size: 13.5px; font-weight: 600; color: var(--ak-accent); text-decoration: none; }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.ak-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 56px;
  padding-top: 72px; padding-bottom: 64px;
}
body.ak .ak-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.4rem, 4.7vw, 4.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.042em;
}
.ak-lead { max-width: 560px; margin: 0 0 34px; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ak-muted); letter-spacing: -0.015em; }
.ak-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ak-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 32px 0 0; padding: 0; }
.ak-trust li { font-size: 14.5px; font-weight: 500; }

.ak-hero-visual { position: relative; padding: 24px 28px 24px 0; }
.ak-portrait {
  position: relative;
  aspect-ratio: 1 / 1.08;
  max-width: 500px; margin-left: auto;
  border-radius: 44px;
  overflow: hidden;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.8s var(--ak-ease);
}
.ak-portrait-glow {
  position: absolute; left: 50%; top: 56%;
  width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 210deg, #6fa9b3, #e6c48f, #eeb59c, #a6cfd3, #6fa9b3);
  filter: blur(46px);
  opacity: 0.55;
  animation: ak-spin 18s linear infinite;
}
@keyframes ak-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ak-portrait-ring {
  position: absolute; left: 50%; top: 52%;
  width: 74%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"] .ak-portrait-ring { border-color: rgba(255, 255, 255, 0.18); background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 60%); }
.ak-portrait img {
  position: absolute; left: 50%; bottom: 0;
  height: 92%; width: auto; max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 40px var(--ak-shadow-soft));
}

.ak-chip {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 20px;
  background: var(--ak-glass-solid);
  animation: ak-float 7s ease-in-out infinite;
}
.ak-chip strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--ak-ink); }
.ak-chip small { display: block; font-size: 12.5px; color: var(--ak-muted); }
.ak-chip-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--ak-icon); }
.ak-chip-score { left: -8px; top: 12%; animation-delay: -1s; }
.ak-chip-post { right: 0; top: 44%; animation-delay: -3s; }
.ak .ak-chip-tag { color: var(--ak-green); font-weight: 600; }
.ak-chip-role { left: 4%; bottom: 0; animation-delay: -5s; }
@keyframes ak-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.ak-gauge {
  --v: 98;
  position: relative;
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: conic-gradient(var(--ak-green) calc(var(--v) * 1%), var(--ak-track) 0);
}
.ak-gauge::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ak-glass-solid); }
.ak-gauge b { position: relative; font-size: 14px; font-weight: 800; color: var(--ak-green); }

/* ------------------------------------------------------------------ */
/* Stats and the tool marquee                                          */
/* ------------------------------------------------------------------ */
.ak-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; padding: 10px;
  border-radius: var(--ak-r);
}
.ak-stats > div { padding: 22px 16px; text-align: center; }
.ak-stats > div + div { border-left: 1px solid var(--ak-line); }
.ak-stats dd { margin: 0 0 4px; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ak-stats dt { font-size: 14.5px; color: var(--ak-muted); }

.ak-marquee {
  margin: 48px 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ak-marquee-track { display: flex; gap: 12px; width: max-content; padding: 8px 0 20px; animation: ak-marquee 48s linear infinite; }
.ak-marquee:hover .ak-marquee-track { animation-play-state: paused; }
.ak-marquee span { padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ak-soft); white-space: nowrap; box-shadow: inset 0 1px 0 var(--ak-hi); }
@keyframes ak-marquee { to { transform: translateX(calc(-50% - 6px)); } }

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */
.ak-section { padding-top: 120px; }
.ak-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
body.ak .ak-head h2 { margin: 0 0 16px; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.04em; }
.ak-head p:not(.ak-eyebrow) { margin: 0; font-size: 1.12rem; color: var(--ak-muted); }

/* Services: one row per service, the text beside an illustration, alternating sides */
.ak-svc-index { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -16px 0 80px; padding: 0; }
.ak .ak-svc-index a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ak-soft); text-decoration: none; transition: transform 0.4s var(--ak-ease), color 0.3s; }
.ak .ak-svc-index a:hover { color: var(--ak-ink); transform: translateY(-2px); }
.ak-svc-index svg { width: 17px; height: 17px; color: var(--ak-accent); }
.ak-svcs { display: grid; gap: 128px; }
.ak-svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; scroll-margin-top: 110px; }
.ak-svc.is-flip .ak-svc-visual { order: -1; }
.ak-svc-label { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--ak-soft); }
.ak-svc-label small { display: block; font: 700 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; color: var(--ak-accent); }
body.ak .ak-svc-text h3 { margin: 0 0 16px; font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.ak-svc-text > p:not(.ak-svc-label) { margin: 0 0 22px; font-size: 1.05rem; color: var(--ak-muted); }
.ak-svc-text .ak-checks { grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 30px; }
.ak-svc-visual {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 420px; padding: 44px 36px 52px;
  border-radius: 36px;
  background: radial-gradient(120% 80% at 0% 0%, var(--ak-tint), transparent 60%), var(--ak-glass);
}
.ak-svc-visual .ak-mock-caption { position: absolute; right: 26px; bottom: 16px; margin: 0; }
.ak-mock-caption { font-size: 12.5px; color: var(--ak-muted); }
.ak-chip-float-r { right: -20px; top: -22px; animation-delay: -2s; }
.ak-chip-float-l { left: -20px; bottom: -22px; animation-delay: -4s; }

/* 01 Migration: old platforms, a moving dot, the new site's numbers */
.ak-mig { display: grid; grid-template-columns: auto minmax(30px, 1fr) minmax(0, 250px); align-items: center; gap: 14px; }
.ak-mig-from { display: grid; gap: 7px; }
.ak-mig-from small { margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--ak-muted); }
.ak-mig-from span { padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ak-muted); background: var(--ak-track); text-decoration: line-through; text-decoration-color: rgba(185, 92, 63, 0.5); }
.ak-mig-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--ak-line) 0 6px, transparent 6px 12px); }
.ak-mig-line i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ak-grad); box-shadow: 0 0 14px var(--ak-grad-glow); animation: ak-travel 2.8s var(--ak-ease) infinite; }
@keyframes ak-travel { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.ak-mig-to { padding: 18px; border-radius: 22px; background: var(--ak-glass-solid); }
.ak-mig-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid var(--ak-line); }
.ak-mig-head b { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.ak-mig-head small { display: block; font-size: 12px; color: var(--ak-muted); }
.ak-mig-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 13px; color: var(--ak-soft); }
.ak-mig-row + .ak-mig-row { border-top: 1px solid var(--ak-line); }
.ak-mig-row s { font-size: 12.5px; color: var(--ak-muted); }
.ak-mig-row b { font-size: 15px; font-weight: 700; background: var(--ak-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 02 Website design: a small practice website in a browser */
.ak-site { overflow: hidden; border-radius: 20px; background: var(--ak-glass-solid); border: 1px solid var(--ak-line); box-shadow: var(--ak-shadow); }
.ak-site-body { padding: 16px 18px 20px; }
.ak-site-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.ak-site-logo { width: 26px; height: 26px; margin-right: auto; border-radius: 8px; background: var(--ak-icon); }
.ak-site-nav i { width: 36px; height: 6px; border-radius: 4px; background: var(--ak-track); }
.ak-site-nav em, .ak-site-btn { font-style: normal; font-weight: 600; border-radius: 999px; color: #fff; background: var(--ak-btn); }
.ak-site-nav em { padding: 6px 10px; font-size: 11px; }
.ak-site-hero { display: grid; grid-template-columns: 1fr 118px; align-items: center; gap: 16px; margin-bottom: 20px; }
.ak-site-hero small { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--ak-accent); }
.ak-site-hero b { display: block; margin-bottom: 12px; font-size: 22px; line-height: 1.1; letter-spacing: -0.03em; }
.ak-site-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ak-site-chips span { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ak-soft); background: var(--ak-track); }
.ak-site-btn { display: inline-block; padding: 9px 14px; font-size: 12px; }
.ak-site-photo { aspect-ratio: 1; border-radius: 50% 50% 46% 54% / 55% 45% 55% 45%; background: radial-gradient(circle at 35% 30%, #f6dccc, transparent 60%), linear-gradient(140deg, #bcd8c4, #e9dcc2 60%, #f2d2c2); }
.ak-site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ak-site-cards span { display: grid; gap: 5px; padding: 10px; border-radius: 12px; background: var(--ak-track); }
.ak-site-cards b { font-size: 11.5px; }
.ak-site-cards i { height: 5px; border-radius: 3px; background: var(--ak-line); }
.ak-site-cards i + i { width: 70%; }

/* 03 Social media: a carousel post and a content calendar */
.ak-social-mock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 16px; }
.ak-post { padding: 12px; border-radius: 22px; background: var(--ak-glass-solid); }
.ak-post-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ak-post-head .ak-avatar { width: 32px; height: 32px; font-size: 11px; }
.ak-post-head b { display: block; font-size: 13px; }
.ak-post-head small { display: block; font-size: 11px; color: var(--ak-muted); }
.ak-post-slide { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; padding: 18px; border-radius: 14px; color: #132b31; background: radial-gradient(circle at 80% 15%, #f4d9c9 0, transparent 45%), linear-gradient(160deg, #d3e9ea, #efe6d3 55%, #f3ddcf); }
.ak-post-slide small { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: rgba(255, 255, 255, 0.7); }
.ak-post-slide b { margin-bottom: 12px; font-size: 21px; line-height: 1.12; letter-spacing: -0.03em; }
.ak-post-slide > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #1c6171; }
.ak-post-slide svg { width: 13px; height: 13px; }
.ak-post-dots { display: flex; justify-content: center; gap: 4px; margin: 10px 0 6px; }
.ak-post-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ak-line); }
.ak-post-dots .is-on { background: var(--ak-accent); }
.ak-post-actions { display: flex; gap: 12px; padding: 0 4px; color: var(--ak-soft); }
.ak-post-actions span { flex: 1; }
.ak-cal { padding: 16px; border-radius: 20px; background: var(--ak-glass-solid); }
.ak-cal > b { display: block; margin-bottom: 10px; font-size: 13.5px; }
.ak-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ak-cal-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--ak-track); }
.ak-cal-grid i { width: 8px; height: 8px; border-radius: 50%; }
.ak-cal-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 11px; color: var(--ak-muted); }
.ak-cal-key span { display: inline-flex; align-items: center; gap: 5px; }
.ak-cal-key i { width: 7px; height: 7px; border-radius: 50%; }
.ak-dot-c { background: #1c6171; }
.ak-dot-r { background: #c9a061; }
.ak-dot-s { background: #c46a45; }

/* 04 Lead generation: a local search, the practice listing and a simple funnel */
.ak-leads { display: grid; gap: 12px; width: 100%; max-width: 430px; margin: 0 auto; }
.ak-search { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px; font-size: 14.5px; color: var(--ak-soft); background: var(--ak-glass-solid); }
.ak-search svg { color: var(--ak-muted); }
.ak-result { display: flex; gap: 14px; padding: 14px; border-radius: 20px; background: var(--ak-glass-solid); }
.ak-result-map { display: grid; place-items: center; flex-shrink: 0; width: 74px; border-radius: 14px; color: #1c6171; background: linear-gradient(140deg, #d3e9ea, #efe6d3); }
.ak-result-text b { display: block; font-size: 14.5px; }
.ak-result-text small { display: block; margin: 2px 0 10px; font-size: 12px; color: var(--ak-muted); }
.ak-result-btns { display: flex; gap: 6px; }
.ak-result-btns em { padding: 5px 10px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ak-accent); border: 1px solid var(--ak-line); }
.ak-result-btns em:last-child { color: #fff; background: var(--ak-btn); border-color: transparent; }
.ak-funnel { display: grid; gap: 10px; padding: 16px 18px; border-radius: 20px; background: var(--ak-glass-solid); }
.ak-funnel div { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ak-soft); }
.ak-funnel i { display: block; width: 0; height: 8px; border-radius: 6px; background: var(--ak-grad); transition: width 1.4s var(--ak-ease) 0.3s; }
.ak-svc-visual.is-in .ak-funnel i { width: var(--w); }

/* Selected work: browser frames that scroll through the page on hover */
.ak-work { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.ak-project { grid-column: span 2; display: flex; flex-direction: column; padding: 12px; border-radius: 30px; transition: transform 0.6s var(--ak-ease), box-shadow 0.6s var(--ak-ease); }
.ak-project.is-big { grid-column: span 3; }
.ak-project:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--ak-hi), var(--ak-shadow-lift); }
.ak-browser { display: block; border-radius: 20px; overflow: hidden; background: var(--ak-glass-solid); border: 1px solid var(--ak-line); text-decoration: none; }
.ak-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ak-line); }
.ak-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ak-browser-bar i:nth-child(2) { background: #febc2e; }
.ak-browser-bar i:nth-child(3) { background: #28c840; }
.ak-url { flex: 1; margin: 0 8px 0 10px; padding: 4px 10px; border-radius: 8px; background: var(--ak-track); font-size: 12px; color: var(--ak-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-screen { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: #fff; }
.ak-screen img { position: absolute; top: 0; left: 0; width: 100%; height: auto; transition: transform 5s cubic-bezier(0.45, 0, 0.25, 1); }
.ak-browser:hover .ak-screen img, .ak-browser:focus-visible .ak-screen img { transform: translateY(calc(-100% + 100cqh)); transition-duration: 7s; }
.ak-project-body { display: flex; flex-direction: column; flex: 1; padding: 22px 14px 12px; }
.ak-sector { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ak-muted); text-transform: uppercase; letter-spacing: 0.06em; }
body.ak .ak-project h3 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.ak-project-body > p:not(.ak-sector) { margin: 0 0 18px; font-size: 15.5px; color: var(--ak-muted); }
.ak-project-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.ak-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* About */
.ak-about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.ak-about-photo { position: relative; }
.ak-photo-frame { padding: 12px; border-radius: 40px; }
.ak-photo-frame img { width: 100%; border-radius: 30px; aspect-ratio: 1; object-fit: cover; }
.ak-chip-years { right: -16px; bottom: 40px; }
body.ak .ak-about-text h2 { margin: 0 0 20px; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; }
.ak-about-text > p:not(.ak-eyebrow) { color: var(--ak-muted); font-size: 1.06rem; }
.ak-values { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; padding: 0; }
.ak-values li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; }
.ak-values .ak-squircle { width: 38px; height: 38px; border-radius: 11px; }
.ak-values .ak-squircle svg { width: 19px; height: 19px; }
.ak-values b { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.ak-values small { display: block; font-size: 12.5px; color: var(--ak-muted); line-height: 1.3; }
.ak-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.ak-skill { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ak-soft); }
.ak-skill b { font-variant-numeric: tabular-nums; color: var(--ak-ink); }
.ak-skill-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--ak-track); overflow: hidden; }
.ak-skill-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ak-grad); transition: width 1.4s var(--ak-ease) 0.2s; }
.ak-about-text.is-in .ak-skill-bar i { width: var(--w); }

/* Process */
.ak-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; counter-reset: step; }
.ak-step { padding: 26px 22px; border-radius: 24px; }
.ak-step-num { display: inline-block; margin-bottom: 26px; font: 700 14px/1 ui-monospace, "SF Mono", Menlo, monospace; background: var(--ak-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.ak .ak-step h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.ak-step p { margin: 0; font-size: 14.5px; color: var(--ak-muted); line-height: 1.5; }

/* Reviews */
.ak-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ak-review { display: flex; flex-direction: column; margin: 0; padding: 30px; border-radius: var(--ak-r); }
.ak-review blockquote { margin: 18px 0 26px; }
.ak-review blockquote p { margin: 0; font-size: 1.12rem; line-height: 1.5; letter-spacing: -0.02em; color: var(--ak-ink); }
.ak-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ak-review b { display: block; font-size: 15px; }
.ak-review small { display: block; font-size: 13.5px; color: var(--ak-muted); }
.ak-avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 700; font-size: 15px; color: #fff; background: var(--ak-icon); }

/* Questions */
.ak-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ak-faq-wrap .ak-head { text-align: left; margin: 0; position: sticky; top: 120px; }
.ak-faq { display: grid; gap: 12px; }
.ak-faq details { border-radius: 22px; padding: 0 24px; }
.ak-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.ak-faq summary::-webkit-details-marker { display: none; }
body.ak .ak-faq summary h3 { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.ak-plus { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--ak-track); transition: transform 0.4s var(--ak-ease); }
.ak-plus::before, .ak-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; border-radius: 2px; background: var(--ak-ink); transform: translate(-50%, -50%); }
.ak-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.4s var(--ak-ease); }
.ak-faq details[open] .ak-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.ak-faq details p { margin: -6px 0 22px; color: var(--ak-muted); font-size: 15.5px; }

/* Closing call to action */
.ak-band { overflow: hidden; padding: 72px 32px; border-radius: 40px; text-align: center; }
.ak-band-glow {
  position: absolute; left: 50%; top: 0;
  width: 70%; height: 80%;
  transform: translate(-50%, -40%);
  border-radius: 50%;
  background: var(--ak-grad);
  filter: blur(80px);
  opacity: 0.28;
  pointer-events: none;
}
.ak-band > * { position: relative; }
body.ak .ak-band h2 { margin: 0 0 18px; font-size: clamp(2.1rem, 5vw, 3.9rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; }
.ak-band > p:not(.ak-pill) { max-width: 560px; margin: 0 auto 32px; font-size: 1.12rem; color: var(--ak-muted); }
.ak-band .ak-cta { justify-content: center; }
.ak-band-meta { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 0; font-size: 14.5px; color: var(--ak-muted); }
.ak-band-meta li { display: inline-flex; align-items: center; gap: 7px; }

/* Footer */
.ak-footer { padding: 120px 0 28px; }
.ak-foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; padding: 40px; border-radius: 32px; }
.ak-foot-brand p { margin: 16px 0 20px; max-width: 300px; font-size: 15px; color: var(--ak-muted); }
.ak-social { display: flex; gap: 8px; }
.ak .ak-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ak-ink); border: 1px solid var(--ak-line); transition: background-color 0.3s, transform 0.4s var(--ak-ease); }
.ak .ak-social a:hover { background: var(--ak-track); transform: translateY(-2px); }
body.ak .ak-foot-col h2 { margin: 6px 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ak-muted); }
.ak-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ak-soft); }
.ak .ak-foot-col a { color: var(--ak-soft); text-decoration: none; }
.ak .ak-foot-col a:hover { color: var(--ak-accent); }
.ak-foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 22px 8px 0; font-size: 13.5px; color: var(--ak-muted); }
.ak-foot-base p { margin: 0; }


/* Who I help: five audience cards */
.ak-audience { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; }
.ak-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 22px; border-radius: 24px; transition: transform 0.6s var(--ak-ease), box-shadow 0.6s var(--ak-ease); }
.ak-who:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--ak-hi), var(--ak-shadow-lift); }
.ak-who .ak-squircle { margin-bottom: 14px; }
.ak-who b { font-size: 1.08rem; letter-spacing: -0.02em; }
.ak-who small { font-size: 14px; line-height: 1.45; color: var(--ak-muted); }

/* The reality of private practice: three researched figures */
.ak-reality { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ak-fact { padding: 30px; border-radius: var(--ak-r); }
.ak-fact b { display: block; margin-bottom: 12px; font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; background: var(--ak-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ak-fact p { margin: 0; font-size: 1.02rem; color: var(--ak-soft); }

/* Sound familiar: one card per problem, each linking to the service that solves it */
.ak-pains { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ak-pain { position: relative; grid-column: span 2; display: flex; flex-direction: column; padding: 28px; border-radius: var(--ak-r); transition: transform 0.6s var(--ak-ease), box-shadow 0.6s var(--ak-ease); }
.ak-pain:nth-child(n+4) { grid-column: span 3; }
.ak-pain:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--ak-hi), var(--ak-shadow-lift); }
.ak-pain-num { position: absolute; top: 26px; right: 28px; font: 700 13px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ak-muted); }
.ak .ak-squircle-soft { color: #b05a3a; background: rgba(196, 106, 69, 0.13); box-shadow: none; }
html[data-theme="dark"] .ak .ak-squircle-soft { color: #eba684; background: rgba(235, 166, 132, 0.13); }
body.ak .ak-pain h3 { margin: 18px 0 10px; font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.ak-pain p { margin: 0 0 20px; font-size: 15.5px; color: var(--ak-muted); }
.ak-pain .ak-more { margin-top: auto; }

/* Ethical marketing: six commitments in one glass panel */
.ak-ethics { padding: 56px; border-radius: 40px; }
.ak-ethics .ak-head { margin-bottom: 44px; }
.ak-ethics-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; margin: 0; padding: 0; }
.ak-ethics-grid li { display: flex; gap: 14px; }
.ak-ethics-grid b { display: block; margin-bottom: 4px; font-size: 15.5px; letter-spacing: -0.015em; }
.ak-ethics-grid small { display: block; font-size: 14px; line-height: 1.5; color: var(--ak-muted); }
.ak-ethics-foot { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--ak-line); text-align: center; font-size: 14px; color: var(--ak-muted); }
.ak-feature-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; color: var(--ak-accent); background: var(--ak-glass-solid); border: 1px solid var(--ak-edge); box-shadow: inset 0 1px 0 var(--ak-hi), 0 4px 12px -6px var(--ak-shadow-soft); }

/* 05 Booking app: the example booking page */
.ak-mock { width: 100%; max-width: 420px; margin: 0 auto; padding: 24px; border-radius: 30px; background: var(--ak-glass-solid); }
.ak-mock-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--ak-line); }
.ak-mock-head b { display: block; font-size: 15.5px; letter-spacing: -0.015em; }
.ak-mock-head small { display: block; font-size: 13px; color: var(--ak-muted); }
.ak-mock-secure { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ak-green); background: rgba(47, 138, 122, 0.12); }
.ak-mock-secure svg { width: 13px; height: 13px; }
.ak-mock-label { margin: 18px 0 10px; font-size: 13px; font-weight: 600; color: var(--ak-muted); }
.ak-mock-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ak-mock-types span { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--ak-line); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ak-mock-types small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ak-muted); }
.ak-mock-types .is-on { border-color: transparent; box-shadow: 0 0 0 2px var(--ak-accent); background: rgba(28, 97, 113, 0.07); }
.ak-mock-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ak-mock-days span { display: grid; place-items: center; padding: 9px 0; border-radius: 14px; font-size: 16px; font-weight: 700; background: var(--ak-track); }
.ak-mock-days small { font-size: 11px; font-weight: 600; color: var(--ak-muted); }
.ak-mock-days .is-on { color: #fff; background: var(--ak-icon); }
.ak-mock-days .is-on small { color: rgba(255, 255, 255, 0.85); }
.ak-mock-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ak-mock-slots span { padding: 10px 0; border-radius: 12px; text-align: center; font-size: 14px; font-weight: 600; border: 1px solid var(--ak-line); font-variant-numeric: tabular-nums; }
.ak-mock-slots .is-on { color: #fff; border-color: transparent; background: var(--ak-btn); }
.ak-mock-slots .is-off { color: var(--ak-muted); text-decoration: line-through; opacity: 0.5; }
.ak-mock-btn { display: block; margin-top: 20px; padding: 14px; border-radius: 999px; text-align: center; font-weight: 600; font-size: 15px; color: #fff; background: var(--ak-btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -10px var(--ak-btn-glow); }
.ak .ak-chip-icon-green { background: linear-gradient(140deg, #6aae86, #2b6a52); }


/* Migration hero: a bill comparison scene. The current bill is a tilted, stamped card behind; the $9 card
   sits in front inside a slowly turning gradient ring, with yearly cost bars and what the visitor keeps. */
@property --ak-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ak-deal { position: relative; max-width: 480px; margin-left: auto; padding: 112px 0 30px; text-align: left; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.8s var(--ak-ease); }
.ak-deal-glow { position: absolute; inset: 22% 4% 6% 18%; border-radius: 50%; background: conic-gradient(from 200deg, #6fa9b3, #e6c48f, #eeb59c, #a6cfd3, #6fa9b3); filter: blur(60px); opacity: 0.6; animation: ak-turn 22s linear infinite; }
@keyframes ak-turn { to { transform: rotate(360deg); } }
.ak-deal-old { position: absolute; top: 0; left: 0; width: 240px; padding: 18px 20px 20px; border-radius: 22px; transform: rotate(-7deg); }
.ak-deal-old small { font-size: 12px; font-weight: 600; color: var(--ak-muted); }
.ak-deal-oldprice { margin: 4px 0 12px; white-space: nowrap; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ak-muted); text-decoration: line-through; text-decoration-color: rgba(185, 92, 63, 0.75); text-decoration-thickness: 2px; }
.ak-deal-oldprice span { font-size: 0.9rem; }
.ak-deal-old ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; max-width: 150px; margin: 0; padding: 0; }
.ak-deal-old li { padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ak-muted); background: var(--ak-track); }
.ak-deal-stamp { position: absolute; top: 16px; right: 14px; padding: 3px 9px; border: 2px solid #c46a45; border-radius: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #c46a45; transform: rotate(12deg); opacity: 0.9; }
.ak-deal-ring { position: relative; z-index: 1; width: 320px; margin: 0 0 0 auto; padding: 1.5px; border-radius: 30px; background: conic-gradient(from var(--ak-a), #1c6171, #b9a57d, #7cc4d1, #1c6171); animation: ak-ring 6s linear infinite; box-shadow: var(--ak-shadow-lift), 0 30px 60px -30px rgba(28, 97, 113, 0.55); }
@keyframes ak-ring { to { --ak-a: 360deg; } }
.ak-deal-new { padding: 24px 24px 20px; border-radius: 28.5px; background: var(--ak-menu-bg); }
.ak-deal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ak-deal-head .ak-logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
.ak-deal-head b { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.ak-deal-head small { display: block; font-size: 12px; color: var(--ak-muted); }
.ak-deal-tag { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ak-green); background: rgba(47, 138, 122, 0.12); }
.ak-deal-price { display: flex; align-items: baseline; gap: 6px; margin: 0; line-height: 1; }
.ak-deal-price .ak-grad { font-size: 5rem; font-weight: 800; letter-spacing: -0.06em; }
.ak-deal-price span:last-child { font-weight: 600; color: var(--ak-muted); }
.ak-deal-note { margin: 8px 0 16px; font-size: 13px; font-weight: 600; color: var(--ak-accent); }
.ak-deal-bars { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); }
.ak-deal-bars div { display: grid; grid-template-columns: 58px 1fr 62px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--ak-muted); }
.ak-deal-bars i { display: block; width: 0; height: 10px; border-radius: 6px; background: rgba(196, 106, 69, 0.4); transition: width 1.2s var(--ak-ease) 0.5s; }
.ak-deal-bars .is-ours i { background: var(--ak-grad); }
.ak-deal-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.ak-deal-bars .is-ours b { color: var(--ak-ink); }
.ak-hero-visual.is-in .ak-deal-bars i { width: var(--w); }
.ak-deal-save { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.ak-deal-save span, .ak-deal-save small { font-size: 13px; font-weight: 600; color: var(--ak-muted); }
.ak-deal-save b { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ak-green); }
.ak-deal-chip-a { top: 36px; right: -6px; z-index: 2; animation-delay: -1s; }
.ak-deal-chip-b { left: -34px; bottom: 96px; z-index: 2; animation-delay: -3s; }

/* Service page heroes: the service illustration in a glass panel that tilts toward the pointer */
.ak-hero-mock { min-height: 0; padding: 44px 30px 50px; text-align: left; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.8s var(--ak-ease); }
.ak-hero-visual.is-in .ak-funnel i { width: var(--w); }

/* Featured project: the live site beside a short description */
.ak-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 44px; padding: 16px 44px 16px 16px; border-radius: 34px; }
.ak-feature .ak-screen { aspect-ratio: 16 / 11; }
body.ak .ak-feature-text h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.ak-feature-text > p:not(.ak-eyebrow) { margin-bottom: 18px; color: var(--ak-muted); }
.ak-feature-text .ak-checks { margin-bottom: 24px; }

/* Social media & ads: the three-phone hero, the platforms row, the showreel grid and its player,
   the offer panels and the anatomy of a short. */
.ak-phones { position: relative; height: 540px; max-width: 480px; margin-left: auto; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.8s var(--ak-ease); }
.ak-phones-glow { position: absolute; inset: 14% 8%; border-radius: 50%; background: var(--ak-grad); filter: blur(70px); opacity: 0.35; }
.ak-phone { position: absolute; top: 50%; left: 50%; width: 224px; aspect-ratio: 9 / 17; padding: 7px; border-radius: 40px; background: #0e1517; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 40px 70px -30px rgba(0, 0, 0, 0.55), 0 12px 24px -12px rgba(0, 0, 0, 0.35); }
.ak-phone::before { content: ""; position: absolute; top: 15px; left: 50%; z-index: 3; width: 64px; height: 19px; margin-left: -32px; border-radius: 999px; background: #0e1517; }
.ak-phone-c { z-index: 2; transform: translate(-50%, -50%); }
.ak-phone-l { transform: translate(-108%, -45%) rotate(-9deg) scale(0.84); }
.ak-phone-r { transform: translate(8%, -45%) rotate(9deg) scale(0.84); }
.ak-phone-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 33px; background: #1b2427; }
.ak-phone-screen video, .ak-phone-screen .ak-reel-mock { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ak-phone-c .ak-reel-mock { padding-right: 24%; }
.ak-phone-rail { position: absolute; right: 18px; bottom: 76px; z-index: 3; display: grid; gap: 16px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); }
.ak-phones-chip-a { top: 7%; left: -6%; z-index: 4; animation-delay: -1s; }
.ak-phones-chip-b { bottom: 5%; right: -6%; z-index: 4; animation-delay: -3s; }

/* Example frames, shown until real videos are listed */
.ak-reel-mock, .ak-reel-media.ak-reel-mock { display: flex; flex-direction: column; justify-content: flex-end; padding: 14% 11% 16%; overflow: hidden; color: #fff; text-align: left; }
.ak-reel-mock::before { content: ""; position: absolute; top: -30%; left: -40%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%); animation: ak-drift 14s ease-in-out infinite alternate; }
.ak-reel-mock.tone-1 { background: var(--ak-icon); }
.ak-reel-mock.tone-2 { background: linear-gradient(160deg, #c9b48a, #7d6539); }
.ak-reel-mock.tone-3 { background: linear-gradient(160deg, #d08a6a, #85462f); }
.ak-reel-mock.tone-4 { background: linear-gradient(160deg, #8fa9a2, #35524d); }
.ak-mock-hook { position: relative; margin-bottom: 12px; font-size: clamp(16px, 1.55vw, 21px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.ak-mock-cap { position: relative; display: grid; gap: 5px; margin-bottom: 4px; }
.ak-mock-cap i { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.55); }
.ak-mock-cap i + i { width: 62%; }
.ak-mock-prog { position: absolute; left: 11%; right: 11%; bottom: 6%; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
.ak-mock-prog i { display: block; width: 40%; height: 100%; background: #fff; animation: ak-prog 7s linear infinite; }
@keyframes ak-prog { from { width: 0; } to { width: 100%; } }
.ak-mock-ad { position: relative; display: grid; gap: 8px; }
.ak-mock-ad small { font-size: 11px; font-weight: 600; opacity: 0.85; }
.ak-mock-ad b { font-size: clamp(17px, 1.9vw, 26px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.ak-mock-ad em { justify-self: start; padding: 7px 13px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 700; color: #134755; background: #fff; }

.ak-platforms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding-top: 8px; }
.ak-platforms p { margin: 0 6px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-muted); }
.ak-platforms ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.ak-platforms li { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ak-soft); }

/* The showreel: filter buttons, a dense grid of shorts and ads, and the player */
.ak-reel-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -16px 0 36px; }
.ak .ak-reel-filter button { padding: 11px 18px; border-radius: 999px; font: 600 14.5px/1 var(--ak-font); color: var(--ak-soft); cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.ak .ak-reel-filter button.is-on { color: #fff; background: var(--ak-btn); border-color: transparent; box-shadow: 0 8px 18px -10px var(--ak-btn-glow); }
.ak-reel { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; align-items: start; gap: 22px 18px; }
.ak .ak-reel-card { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ak .ak-reel-card.is-example { cursor: default; }
.ak-reel-card.r-16x9 { grid-column: span 2; }
.ak-reel-card[hidden] { display: none; }
.ak-reel-media { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 24px; background: #1b2427; box-shadow: var(--ak-shadow); transition: transform 0.5s var(--ak-ease), box-shadow 0.5s var(--ak-ease); }
.r-9x16 .ak-reel-media { aspect-ratio: 9 / 16; }
.r-16x9 .ak-reel-media { aspect-ratio: 16 / 9; }
.r-1x1 .ak-reel-media { aspect-ratio: 1; }
.r-4x5 .ak-reel-media { aspect-ratio: 4 / 5; }
.ak-reel-media video, .ak-reel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ak-reel-card:hover .ak-reel-media, .ak-reel-card:focus-visible .ak-reel-media { transform: translateY(-4px); box-shadow: var(--ak-shadow-lift); }
.ak-reel-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ak-reel-play { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); transition: opacity 0.3s, transform 0.4s var(--ak-ease); }
.ak-reel-play svg { margin-left: 3px; }
.ak-reel-card:not(.is-example):hover .ak-reel-play { transform: scale(1.08); }
.ak-reel-card.is-playing .ak-reel-play { opacity: 0; transform: scale(0.8); }
.ak-reel-meta { display: grid; gap: 2px; padding: 0 4px; }
.ak-reel-meta b { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }
.ak-reel-meta small { font-size: 13px; color: var(--ak-muted); }

.ak-player { width: min(92vw, 980px); max-width: none; max-height: none; padding: 0; overflow: visible; border: 0; background: transparent; }
.ak-player::backdrop { background: rgba(8, 12, 14, 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ak-player-box { position: relative; padding-top: 52px; }
.ak-player-frame { display: grid; place-items: center; }
.ak-player-frame video, .ak-player-frame iframe { display: block; max-width: 100%; border: 0; border-radius: 22px; background: #000; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.ak-player-frame video { max-height: 80vh; }
.ak-player-frame iframe { width: 100%; aspect-ratio: 16 / 9; }
.ak-player-frame.is-tall iframe { width: auto; height: 80vh; aspect-ratio: 9 / 16; }
.ak-player-title { margin: 14px 0 0; text-align: center; font-weight: 600; color: #fff; }
.ak .ak-player-close { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; }

/* What I make: organic content and paid ads, side by side */
.ak-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ak-offer-card { padding: 34px; border-radius: 30px; }
.ak-offer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
body.ak .ak-offer-card h3 { margin: 0 0 10px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.ak-offer-card > p { margin: 0 0 20px; color: var(--ak-muted); }

/* The anatomy of a short: a 30-second timeline and its four beats */
.ak-anatomy { padding: 36px; border-radius: 32px; }
.ak-anatomy-bar { display: flex; gap: 4px; height: 46px; }
.ak-anatomy-bar span { display: grid; place-items: center; flex: 0 0 calc(var(--w) - 3px); overflow: hidden; white-space: nowrap; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; background: var(--ak-icon); }
.ak-anatomy-bar span:first-child { background: var(--ak-hot); }
.ak-anatomy-bar span:nth-child(3) { background: var(--ak-grad); }
.ak-anatomy-bar span:last-child { background: var(--ak-btn); }
.ak-anatomy-scale { position: relative; height: 22px; margin-top: 8px; }
.ak-anatomy-scale span { position: absolute; top: 0; transform: translateX(-50%); font: 600 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ak-muted); }
.ak-anatomy-scale span:first-child { transform: none; }
.ak-anatomy-scale span:last-child { transform: translateX(-100%); }
.ak-anatomy-beats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0 0; padding: 0; }
.ak-anatomy-beats li { padding: 18px; border-radius: 18px; background: var(--ak-track); }
.ak-anatomy-beats small { font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ak-accent); }
.ak-anatomy-beats b { display: block; margin: 8px 0 6px; font-size: 16px; letter-spacing: -0.01em; }
.ak-anatomy-beats p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ak-muted); }

/* Pricing: three plan cards, the best-value plan outlined in the action colour */
.ak-tiers { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 20px; }
.ak-tier { display: flex; flex-direction: column; padding: 38px 30px 30px; border-radius: 30px; }
.ak-tier.is-best { background: var(--ak-menu-bg); box-shadow: inset 0 1px 0 var(--ak-hi), 0 0 0 2px var(--ak-btn), var(--ak-shadow-lift); }
.ak-tier .ak-pc-badge { left: 30px; transform: none; }
.ak .ak-badge-free { background: var(--ak-hot); }
body.ak .ak-tier h3 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.ak-tier-tag { margin: 0 0 20px; font-size: 14.5px; color: var(--ak-muted); }
.ak-tier-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 22px; }
.ak-tier-price .ak-grad { font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.ak-tier-price span:last-child { font-weight: 600; color: var(--ak-muted); }
.ak-tier-btn { width: 100%; margin-bottom: 24px; }
.ak-tier-list { list-style: none; display: grid; gap: 11px; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--ak-line); font-size: 15px; color: var(--ak-soft); }
.ak-tier-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.ak-tier-list svg { flex-shrink: 0; margin-top: 2px; color: var(--ak-green); }
.ak-tier.is-best .ak-tier-list { color: var(--ak-ink); }

/* The money-back guarantee: a seal with a slowly turning dashed ring, beside the promise */
.ak-guarantee { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; margin-top: 30px; padding: 26px 32px; border-radius: 26px; }
.ak-guarantee-seal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; line-height: 1; color: #fff; background: var(--ak-icon); box-shadow: 0 12px 24px -10px var(--ak-grad-glow); }
.ak-guarantee-seal::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px dashed var(--ak-btn); opacity: 0.5; animation: ak-turn 30s linear infinite; }
.ak-guarantee-seal b { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; }
.ak-guarantee-seal small { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
body.ak .ak-guarantee h3 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.ak-guarantee p { margin: 0; color: var(--ak-muted); }
.ak-guarantee-icon { color: var(--ak-green); }
.ak-guarantee-icon svg { width: 34px; height: 34px; }
.ak-tier-list .is-guarantee { font-weight: 600; color: var(--ak-ink); }
.ak-tier-list .is-guarantee svg { width: 16px; height: 16px; color: var(--ak-accent); }

/* Upgrade Your Business: an outdated site behind, the redesigned one in front */
.ak-up { position: relative; padding: 78px 0 0 84px; }
.ak-up-old { position: absolute; top: 0; left: 0; width: 60%; overflow: hidden; border-radius: 16px; background: #ece9e3; border: 1px solid rgba(0, 0, 0, 0.08); transform: rotate(-5deg); filter: grayscale(0.7); opacity: 0.92; box-shadow: var(--ak-shadow); }
.ak-up-old .ak-browser-bar { background: #dcd8d0; }
.ak-up-old-body { display: grid; gap: 9px; padding: 14px 16px 18px; color: #6b6b6b; }
.ak-up-old-body b { font: 700 15px/1.2 Georgia, "Times New Roman", serif; color: #555; }
.ak-up-lines, .ak-up-blocks { display: grid; gap: 5px; }
.ak-up-lines i { height: 5px; background: #c9c5bd; }
.ak-up-lines i:last-child { width: 60%; }
.ak-up-blocks { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ak-up-blocks i { height: 34px; background: #d5d1c9; }
.ak-up-old-body small { font: 11px/1.3 Georgia, serif; color: #2a5db0; text-decoration: underline; }
.ak-up-old .ak-deal-stamp { top: 46px; right: 14px; }
.ak-up-new { position: relative; z-index: 1; }

/* Home: the upgrade bundle callout under the services list */
.ak .ak-upsell { display: flex; align-items: center; gap: 18px; max-width: 820px; margin: -40px auto 72px; padding: 18px 22px; border-radius: 24px; color: var(--ak-ink); text-decoration: none; transition: transform 0.5s var(--ak-ease), box-shadow 0.5s var(--ak-ease); }
.ak .ak-upsell:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--ak-hi), var(--ak-shadow-lift); }
.ak-upsell b { display: block; font-size: 16px; letter-spacing: -0.015em; }
.ak-upsell small { display: block; font-size: 14px; color: var(--ak-muted); }
.ak-upsell-go { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; color: #fff; background: var(--ak-btn); }

/* Service pages: breadcrumb, price comparison, renting problems, comparison table, savings calculator,
   the plan card, what moves across and the platforms list. */
.ak-crumbs { padding-top: 30px; }
.ak-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 13.5px; color: var(--ak-muted); }
.ak-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.ak .ak-crumbs a { color: var(--ak-muted); text-decoration: none; }
.ak .ak-crumbs a:hover { color: var(--ak-accent); }
.ak-hero-mig { padding-top: 40px; }
.ak-section-tight { padding-top: 80px; }

.ak-pc-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; background: var(--ak-icon); box-shadow: 0 6px 14px -6px var(--ak-grad-glow); }

.ak-rent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ak-rent > .ak-pain { grid-column: auto !important; padding: 26px 24px; }

.ak-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; vertical-align: middle; }
.ak-mark svg { width: 13px; height: 13px; }
.ak-mark-no { color: #b05a3a; background: rgba(196, 106, 69, 0.13); }
html[data-theme="dark"] .ak-mark-no { color: #eba684; background: rgba(235, 166, 132, 0.13); }
.ak-mark-yes { color: #fff; background: var(--ak-icon); }
.ak-table-wrap { padding: 8px; border-radius: 30px; }
.ak-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.ak-table th, .ak-table td { padding: 16px 20px; text-align: left; vertical-align: middle; }
.ak-table thead th { padding-top: 22px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ak-muted); }
.ak-table tbody tr + tr th, .ak-table tbody tr + tr td { border-top: 1px solid var(--ak-line); }
.ak-table tbody th { width: 24%; font-weight: 600; color: var(--ak-ink); }
.ak-table td { color: var(--ak-muted); }
.ak-table .ak-mark { margin-right: 10px; }
.ak-table .is-ours { color: var(--ak-ink); font-weight: 500; background: rgba(28, 97, 113, 0.06); }
html[data-theme="dark"] .ak-table .is-ours { background: rgba(159, 208, 181, 0.06); }
.ak-table thead .is-ours { color: var(--ak-accent); border-radius: 20px 20px 0 0; }
.ak-table tbody tr:last-child .is-ours { border-radius: 0 0 20px 20px; }

.ak-savings { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: stretch; gap: 22px; }
.ak-calc { display: flex; flex-direction: column; justify-content: center; padding: 40px; border-radius: 34px; }
body.ak .ak-calc h2, body.ak h2.ak-plan-name { margin: 0 0 24px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; }
.ak-calc-label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--ak-soft); }
.ak-calc-now { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }
.ak-calc-now output { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ak-calc-now span { font-weight: 600; color: var(--ak-muted); }
.ak-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 0; border-radius: 6px; cursor: pointer; background: linear-gradient(90deg, var(--ak-btn) var(--p, 22%), var(--ak-track) var(--p, 22%)); }
.ak-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--ak-line); box-shadow: 0 4px 12px -2px rgba(16, 36, 40, 0.3); }
.ak-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--ak-line); box-shadow: 0 4px 12px -2px rgba(16, 36, 40, 0.3); }
.ak-calc-scale { display: flex; justify-content: space-between; margin: 10px 0 28px; font-size: 12.5px; color: var(--ak-muted); }
.ak-calc-out { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 12px; margin: 0; }
.ak-calc-out div { padding: 16px 18px; border-radius: 18px; background: var(--ak-track); }
.ak-calc-out dt { font-size: 13px; font-weight: 600; color: var(--ak-muted); }
.ak-calc-out dd { margin: 4px 0 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ak-calc-out .is-big { color: #fff; background: var(--ak-icon); }
.ak-calc-out .is-big dt { color: rgba(255, 255, 255, 0.8); }
.ak-calc-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ak-muted); }

.ak-plan { display: flex; flex-direction: column; padding: 44px 34px 30px; border-radius: 34px; background: var(--ak-glass-solid); box-shadow: inset 0 1px 0 var(--ak-hi), 0 0 0 1.5px rgba(28, 97, 113, 0.3), var(--ak-shadow-lift); }
.ak-plan .ak-pc-badge { left: 34px; transform: none; }
body.ak h2.ak-plan-name { margin-bottom: 8px; }
.ak-plan-sub { margin: 0 0 18px; color: var(--ak-muted); }
.ak-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 24px; }
.ak-plan-price .ak-grad { font-size: 4.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.ak-plan-price span:last-child { font-weight: 600; color: var(--ak-muted); }
.ak-plan-list { list-style: none; display: grid; gap: 11px; margin: 0 0 28px; padding: 0; font-size: 15px; font-weight: 500; }
.ak-plan-list li { display: flex; align-items: center; gap: 12px; }
.ak-plan-list .ak-feature-icon { width: 32px; height: 32px; border-radius: 10px; }
.ak-plan-list .ak-feature-icon svg { width: 17px; height: 17px; }
.ak-plan-btn { width: 100%; margin-top: auto; }
.ak-plan-foot { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--ak-muted); }

.ak-moves { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; }
.ak-moves li { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; }
.ak-moves .ak-squircle { width: 40px; height: 40px; border-radius: 12px; }
.ak-moves .ak-squircle svg { width: 20px; height: 20px; }
.ak-moves b { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }
.ak-from { margin-top: 44px; text-align: center; }
.ak-from p { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-muted); }
.ak-from ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.ak-from li { padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ak-soft); }
.ak-step { position: relative; }
.ak-step-when { position: absolute; top: 22px; right: 18px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ak-accent); background: var(--ak-track); }

/* ------------------------------------------------------------------ */
/* Scroll reveal (home.js adds .js to <html>; without it all shows)    */
/* ------------------------------------------------------------------ */
.js .ak-reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ak-ease) var(--d, 0ms), transform 1s var(--ak-ease) var(--d, 0ms), filter 1s var(--ak-ease) var(--d, 0ms); }
.js .ak-reveal.is-in { opacity: 1; transform: none; filter: none; }
/* Cards that lift on hover keep their own transition once they are in. */
.js .ak-project.is-in, .js .ak-who.is-in, .js .ak-pain.is-in { transition: transform 0.6s var(--ak-ease), box-shadow 0.6s var(--ak-ease), opacity 1s var(--ak-ease) var(--d, 0ms), filter 1s var(--ak-ease) var(--d, 0ms); }

/* ------------------------------------------------------------------ */
/* Smaller screens                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 1060px) {
  .ak-steps { grid-template-columns: repeat(3, 1fr); }
  .ak-audience { grid-template-columns: repeat(6, 1fr); }
  .ak-who { grid-column: span 2; }
  .ak-who:nth-child(n+4) { grid-column: span 3; }
  .ak-svc { gap: 40px; }
  .ak-svc-visual { padding: 40px 24px 50px; }
  .ak-ethics-grid { grid-template-columns: 1fr 1fr; }
  .ak-foot { grid-template-columns: 1fr 1fr; }
  .ak-rent { grid-template-columns: 1fr 1fr; }
  .ak-reel { grid-template-columns: repeat(3, 1fr); }
  .ak-anatomy-beats { grid-template-columns: 1fr 1fr; }
  .ak-tiers { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 26px; }
  .ak-savings { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
  .ak-moves { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .ak-header { padding: 10px 12px 0; }
  .ak-bar { flex-wrap: wrap; row-gap: 0; padding-left: 16px; }
  .ak-burger { display: block; }
  .ak-bar-actions { margin-left: auto; }
  .ak-nav {
    order: 3;
    display: grid;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 0.5s var(--ak-ease), padding 0.5s var(--ak-ease);
  }
  .ak .ak-nav > a, .ak .ak-nav-top { padding: 13px 12px; font-size: 17px; border-radius: 14px; }
  .ak-nav-toggle:checked ~ .ak-nav { max-height: 820px; padding: 6px 0 8px; }
  /* In the phone menu the services sit open under "Services", indented. */
  .ak-nav-group { display: grid; }
  .ak-nav-top svg { display: none; }
  .ak-menu, .ak-nav-group:hover .ak-menu, .ak-nav-group:focus-within .ak-menu {
    position: static; width: auto; padding: 0 0 6px 10px;
    background: none; box-shadow: none; border: 0;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
  }
  .ak-menu::before, .ak .ak-menu-all { display: none; }
  .ak .ak-menu-item { padding: 8px 10px; }
  .ak-menu-item small { display: none; }
  .ak-menu-item .ak-squircle { width: 30px; height: 30px; border-radius: 9px; }
  .ak-menu-item .ak-squircle svg { width: 16px; height: 16px; }


  .ak-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; text-align: center; }
  .ak-hero-copy { display: flex; flex-direction: column; align-items: center; }
  .ak-lead { margin-left: auto; margin-right: auto; }
  .ak-cta, .ak-trust { justify-content: center; }
  .ak-hero-visual { padding: 16px 0; max-width: 480px; width: 100%; margin: 0 auto; }
  .ak-portrait { margin: 0 auto; }
  .ak-deal { margin: 0 auto; }
  .ak-phones { height: 500px; margin: 0 auto; }
  .ak-offer { grid-template-columns: 1fr; }
  .ak-chip-score { left: -4px; }
  .ak-chip-post { right: -4px; }

  .ak-stats { grid-template-columns: 1fr 1fr; }
  .ak-stats > div:nth-child(3) { border-left: 0; }
  .ak-stats > div:nth-child(n+3) { border-top: 1px solid var(--ak-line); }

  .ak-reality { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .ak-pains { grid-template-columns: 1fr 1fr; }
  .ak-pain, .ak-pain:nth-child(n+4) { grid-column: span 1; }
  .ak-feature { grid-template-columns: 1fr; gap: 28px; padding: 12px 12px 30px; }
  .ak-feature-text { padding: 0 14px; }
  .ak-hero-mock { max-width: 520px; margin: 0 auto; }
  .ak-pain:last-child { grid-column: span 2; }

  .ak-svcs { gap: 96px; }
  .ak-svc { grid-template-columns: 1fr; }
  .ak-svc.is-flip .ak-svc-visual { order: 0; }
  .ak-svc-visual { min-height: 0; }
  .ak-chip-float-r { right: -6px; }
  .ak-chip-float-l { left: -6px; }

  .ak-work { grid-template-columns: 1fr 1fr; }
  .ak-project, .ak-project.is-big { grid-column: span 1; }

  .ak-about { grid-template-columns: 1fr; gap: 40px; }
  .ak-about-photo { max-width: 420px; margin: 0 auto; width: 100%; }
  .ak-chip-years { right: -6px; }
  .ak-faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .ak-faq-wrap .ak-head { position: static; text-align: center; }
  .ak-audience { grid-template-columns: 1fr 1fr; }
  .ak-who, .ak-who:nth-child(n+4) { grid-column: span 1; }
  .ak-who:last-child { grid-column: span 2; }
  .ak-reviews { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .ak-section { padding-top: 96px; }
}

@media (max-width: 640px) {
  body.ak { font-size: 16px; }
  .ak-wrap { padding: 0 16px; }
  .ak-btn-sm { display: none; }
  .ak-hero h1 { letter-spacing: -0.04em; }
  .ak-cta .ak-btn { width: 100%; }
  .ak-chip { padding: 9px 13px 9px 9px; border-radius: 16px; gap: 9px; }
  .ak-chip strong { font-size: 13.5px; }
  .ak-chip small { font-size: 11.5px; }
  .ak-chip-role { left: 0; }
  .ak-chip-icon, .ak-gauge { width: 36px; height: 36px; }
  .ak-gauge b { font-size: 12px; }
  .ak-stats > div { padding: 18px 8px; }
  .ak-work, .ak-skills, .ak-values { grid-template-columns: 1fr; }
  .ak-who { padding: 20px 18px; }
  .ak-who .ak-squircle { width: 40px; height: 40px; margin-bottom: 8px; }
  .ak-fact { padding: 24px; }
  .ak-pains { grid-template-columns: 1fr; }
  .ak-pain:last-child { grid-column: auto; }
  .ak-pain { padding: 24px; }
  .ak-svc-index { margin-bottom: 56px; }
  .ak-svc-text .ak-checks { grid-template-columns: 1fr; }
  .ak-svc-text .ak-btn { width: 100%; }
  .ak-svc-visual { padding: 30px 16px 46px; border-radius: 28px; }
  .ak-feature-text .ak-btn { width: 100%; }
  .ak-svc-visual .ak-mock-caption { right: 18px; bottom: 14px; }
  .ak-chip-float-r { top: -18px; right: -4px; }
  .ak-chip-float-l { bottom: -18px; left: -4px; }
  .ak-mig { grid-template-columns: 1fr; }
  .ak-mig-from { display: flex; flex-wrap: wrap; }
  .ak-mig-from small { width: 100%; }
  .ak-mig-line { display: none; }
  .ak-site-hero { grid-template-columns: 1fr 72px; }
  .ak-site-hero b { font-size: 18px; }
  .ak-social-mock { grid-template-columns: 1fr; }
  .ak-cal { display: none; }
  .ak-post { max-width: 300px; margin: 0 auto; width: 100%; }
  .ak-mock { padding: 18px; border-radius: 26px; }
  .ak-ethics { padding: 34px 20px; border-radius: 32px; }
  .ak-rent { grid-template-columns: 1fr; }
  .ak-phones { height: 430px; max-width: 360px; }
  .ak-phone { width: 184px; border-radius: 34px; }
  .ak-phone-screen { border-radius: 27px; }
  .ak-phones-chip-a { top: 2%; left: -2%; }
  .ak-phones-chip-b { bottom: 0; right: -2%; }
  .ak-reel { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .ak-reel-media { border-radius: 18px; }
  .ak-reel-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .ak-offer-card { padding: 26px 20px; }
  .ak-anatomy { padding: 24px 16px; }
  .ak-anatomy-bar { height: 30px; }
  .ak-anatomy-bar span { font-size: 0; }
  .ak-anatomy-beats { grid-template-columns: 1fr; }
  .ak-tier { padding: 34px 22px 24px; }
  .ak-tier .ak-pc-badge { left: 22px; }
  .ak-guarantee { grid-template-columns: auto 1fr; gap: 18px; padding: 22px 20px; }
  .ak-guarantee-seal { width: 64px; height: 64px; }
  .ak-guarantee-seal b { font-size: 1.5rem; }
  .ak-guarantee-icon { display: none; }
  .ak-up { padding: 64px 0 0 40px; }
  .ak-up-old { width: 72%; }
  .ak .ak-upsell { margin: -24px 0 56px; padding: 16px; gap: 14px; }
  .ak-upsell-go { display: none; }
  .ak-deal { max-width: 360px; margin: 0 auto; }
  .ak-deal-old { width: 196px; padding: 14px 16px 16px; }
  .ak-deal-stamp { top: 12px; right: 10px; font-size: 10px; letter-spacing: 0.1em; }
  .ak-deal-oldprice { font-size: 1.45rem; }
  .ak-deal { padding-top: 104px; }
  .ak-deal-ring { width: 290px; }
  .ak-deal-new { padding: 20px 18px 16px; }
  .ak-deal-price .ak-grad { font-size: 4.2rem; }
  .ak-deal-chip-a { top: 14px; right: -4px; }
  .ak-deal-chip-b { left: -4px; bottom: -10px; }
  .ak-table thead { display: none; }
  .ak-table, .ak-table tbody, .ak-table tr, .ak-table th, .ak-table td { display: block; width: auto; }
  .ak-table tbody tr { padding: 14px 4px; }
  .ak-table tbody tr + tr { border-top: 1px solid var(--ak-line); }
  .ak-table tbody tr + tr th, .ak-table tbody tr + tr td { border-top: 0; }
  .ak-table th, .ak-table td { padding: 6px 10px; }
  .ak-table tbody th { width: auto; font-size: 16px; }
  .ak-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ak-muted); }
  .ak-table .is-ours, .ak-table tbody tr:last-child .is-ours { margin-top: 6px; padding: 10px; border-radius: 14px; }
  .ak-calc, .ak-plan { padding: 30px 20px 24px; border-radius: 28px; }
  .ak-calc-out { grid-template-columns: 1fr 1fr; }
  .ak-calc-out .is-big { grid-column: span 2; }
  .ak-plan .ak-pc-badge { left: 20px; }
  .ak-plan-price .ak-grad { font-size: 3.6rem; }
  .ak-moves { grid-template-columns: 1fr; }
  .ak-step-when { top: 20px; }
  .ak-ethics-grid { grid-template-columns: 1fr; gap: 22px; }
  .ak-steps { grid-template-columns: 1fr; }
  .ak-step { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
  .ak-step-num { margin: 4px 0 0; grid-row: span 2; }
  .ak-review { padding: 24px; }
  .ak-band { padding: 52px 20px; border-radius: 32px; }
  .ak-foot { grid-template-columns: 1fr; padding: 28px; }
  .ak-head { margin-bottom: 36px; }
  .ak-section { padding-top: 80px; }
  .ak-footer { padding-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-orb, .ak-portrait-glow, .ak-chip, .ak-marquee-track, .ak-live::after, .ak-mig-line i, .ak-deal-glow, .ak-deal-ring, .ak-reel-mock::before, .ak-mock-prog i, .ak-guarantee-seal::before { animation: none; }
  .ak-funnel i { transition: none; }
  .js .ak-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .ak-screen img { transition: none; }
  html { scroll-behavior: auto; }
}

/* Blog: the listing (/blog/) and single posts (/blog/<slug>/). */
.ak-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.ak-blog-feature, .ak-blog-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--ak-r); color: inherit; text-decoration: none; }
.ak-blog-feature { margin-bottom: 24px; padding: 44px; }
.ak-blog-feature b { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; color: var(--ak-ink); }
.ak-blog-card b { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--ak-ink); }
.ak-blog-feature > span:not(.ak-blog-tag):not(.ak-blog-more), .ak-blog-card > span:not(.ak-blog-tag) { color: var(--ak-muted); line-height: 1.6; }
.ak-blog-feature small, .ak-blog-card small, .ak-blog-meta { color: var(--ak-muted); font-size: 0.9rem; }
.ak-blog-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--ak-tint); color: var(--ak-accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ak-blog-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ak-accent); font-weight: 700; }
.ak-blog-more svg { width: 16px; height: 16px; }
.ak-blog-feature:hover, .ak-blog-card:hover { transform: translateY(-3px); }
.ak-blog-post { max-width: 760px; padding-top: 72px; }
.ak-blog-post-head h1 { margin: 16px 0 14px; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.045em; color: var(--ak-ink); }
.ak-blog-post-head .ak-lead { margin: 18px 0 0; color: var(--ak-soft); }
.ak-blog-body { margin-top: 40px; color: var(--ak-soft); font-size: 1.1rem; line-height: 1.8; }
.ak-blog-body p { margin: 0 0 22px; }
.ak-blog-body h2 { margin: 44px 0 14px; color: var(--ak-ink); font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }
.ak-blog-body ul { margin: 0 0 22px; padding-left: 22px; }
.ak-blog-body li { margin-bottom: 10px; }
.ak-blog-author { display: flex; align-items: center; gap: 18px; margin-top: 56px; padding: 26px; border-radius: var(--ak-r); }
.ak-blog-author p { margin: 0; color: var(--ak-soft); line-height: 1.6; }
.ak-blog-missing { padding-top: 120px; }
@media (max-width: 600px) {
  .ak-blog-feature, .ak-blog-card { padding: 24px; }
  .ak-blog-feature { padding: 28px 24px; }
  .ak-blog-post { padding-top: 48px; }
  .ak-blog-body { font-size: 1.02rem; }
}