@layer reset, tokens, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; }
  img, video { max-width: 100%; height: auto; display: block; }
  button, input, textarea, select { font: inherit; }
  a { color: inherit; }
  ul, ol { list-style: none; }
  h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; }
}

@layer tokens {
  :root {
    --cream: #faf6f0;
    --warm-white: #fff8f2;
    --ink: #2c2416;
    --ink-soft: #5a4e3c;
    --ink-muted: #8a7a68;
    --amber: #d4874a;
    --amber-light: #e8a96b;
    --amber-pale: #f5e4d0;
    --terracotta: #c4614a;
    --warm-green: #5a7a5c;
    --warm-green-pale: #dce8dc;
    --sand: #e8dcc8;
    --sand-dark: #d4c4a8;
    --sand-pale: #f2ece0;
    --dark-bg: #1e1810;
    --dark-surface: #2a2018;
    --shadow-warm-xs: 0 1px 3px rgba(44,36,22,0.06), 0 1px 2px rgba(44,36,22,0.04);
    --shadow-warm-sm: 0 2px 8px rgba(44,36,22,0.08), 0 1px 4px rgba(44,36,22,0.05);
    --shadow-warm-md: 0 4px 16px rgba(44,36,22,0.10), 0 2px 8px rgba(44,36,22,0.07);
    --shadow-warm-lg: 0 8px 32px rgba(44,36,22,0.12), 0 4px 16px rgba(44,36,22,0.08);
    --shadow-warm-xl: 0 16px 48px rgba(44,36,22,0.15), 0 8px 24px rgba(44,36,22,0.10);
    --shadow-amber: 0 4px 16px rgba(212,135,74,0.30), 0 2px 8px rgba(212,135,74,0.20);
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 36px;
    --radius-full: 9999px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;
    --font-xs: clamp(0.75rem, 1.5vw, 0.8125rem);
    --font-sm: clamp(0.8125rem, 1.8vw, 0.875rem);
    --font-base: clamp(0.9375rem, 2vw, 1rem);
    --font-md: clamp(1rem, 2.2vw, 1.125rem);
    --font-lg: clamp(1.125rem, 2.5vw, 1.375rem);
    --font-xl: clamp(1.375rem, 3vw, 1.75rem);
    --font-2xl: clamp(1.75rem, 4vw, 2.25rem);
    --font-3xl: clamp(2.25rem, 5vw, 3rem);
    --font-4xl: clamp(2.75rem, 6vw, 4rem);
    --font-hero: clamp(3rem, 7vw, 5rem);
  }
}

@layer layout {
  body {
    font-family: 'Sora', sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.65;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1; }

  .sec-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }
  .sec-inner--narrow {
    max-width: 800px;
  }
  .sec {
    padding: var(--space-3xl) 0;
  }
}

@layer components {

  
  .hdr {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(250,246,240,0.93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(212,196,168,0.3);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  .hdr.hdr--hidden {
    transform: translateY(-100%);
  }
  .hdr-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  .hdr-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
  }
  .hdr-logo img { height: 36px; width: auto; }
  .hdr-logo span {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .hdr-nav {
    display: none;
    align-items: center;
    gap: 4px;
  }
  .nav-lnk {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    position: relative;
  }
  .nav-lnk::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 14px; right: 14px;
    height: 2px;
    background: var(--amber);
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    transform-origin: left;
  }
  .nav-lnk:hover { color: var(--ink); background: rgba(212,135,74,0.06); }
  .nav-lnk:hover::after, .nav-lnk--active::after { transform: scaleX(1); }
  .nav-lnk--active { color: var(--ink); font-weight: 600; }
  .hdr-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  .hdr-cta {
    position: relative;
    background: var(--amber);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
    box-shadow: 0 2px 8px rgba(212,135,74,0.35), 0 1px 3px rgba(212,135,74,0.2);
    white-space: nowrap;
  }
  .hdr-cta:hover {
    background: var(--terracotta);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212,135,74,0.45), 0 2px 6px rgba(212,135,74,0.25);
  }
  .hdr-cta-dot {
    position: absolute;
    top: -3px; right: -3px;
    width: 9px; height: 9px;
    background: var(--terracotta);
    border-radius: 50%;
    border: 2px solid var(--cream);
    animation: pulse-dot 2.5s infinite;
  }
  @keyframes pulse-dot {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; }
  }
  .hdr-burger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .hdr-burger:hover { background: rgba(212,135,74,0.08); }
  .hdr-burger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
  }
  .hdr-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr-burger.is-open span:nth-child(2) { opacity: 0; }
  .hdr-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (min-width: 960px) {
    .hdr-nav { display: flex; }
    .hdr-burger { display: none; }
  }

  
  .mob-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
  }
  .mob-sheet.is-open { pointer-events: all; }
  .mob-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44,36,22,0);
    transition: background 0.35s;
  }
  .mob-sheet.is-open .mob-sheet-overlay {
    background: rgba(44,36,22,0.5);
  }
  .mob-sheet-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--warm-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 12px var(--space-lg) var(--space-xl);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32,0.72,0,1);
    box-shadow: 0 -8px 40px rgba(44,36,22,0.18);
  }
  .mob-sheet.is-open .mob-sheet-panel {
    transform: translateY(0);
  }
  .mob-sheet-handle {
    width: 40px; height: 4px;
    background: var(--sand-dark);
    border-radius: var(--radius-full);
    margin: 0 auto 24px;
  }
  .mob-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-lg);
  }
  .mob-lnk {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    transition: background 0.2s, color 0.2s;
    min-height: 52px;
  }
  .mob-lnk i {
    width: 20px;
    text-align: center;
    color: var(--amber);
    font-size: 1rem;
  }
  .mob-lnk:hover { background: var(--amber-pale); }
  .mob-cta {
    display: block;
    background: var(--amber);
    color: #fff;
    text-align: center;
    padding: 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s;
    box-shadow: var(--shadow-amber);
  }
  .mob-cta:hover { background: var(--terracotta); }

  
  .sec-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 100px 24px 60px;
    background: linear-gradient(145deg, var(--warm-white) 0%, #fdf0e4 50%, var(--cream) 100%);
    position: relative;
    overflow: hidden;
  }
  .sec-hero::before {
    content: '';
    position: absolute;
    top: -120px; right: -80px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(212,135,74,0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .sec-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -40px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(90,122,92,0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--amber-pale);
    color: var(--amber);
    border: 1px solid rgba(212,135,74,0.25);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
  }
  .hero-h1 {
    font-size: var(--font-hero);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--ink);
    margin-bottom: var(--space-lg);
  }
  .hero-h1 em {
    font-style: normal;
    color: var(--amber);
    position: relative;
    display: inline-block;
  }
  .hero-h1 em::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber), var(--terracotta));
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transform-origin: left;
    animation: underline-in 0.8s 0.5s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  @keyframes underline-in { to { transform: scaleX(1); } }
  .hero-sub {
    font-size: var(--font-lg);
    color: var(--ink-soft);
    line-height: 1.65;
    margin-bottom: var(--space-xl);
    max-width: 560px;
  }
  .hero-btns {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  .hero-visual {
    position: relative;
    display: none;
  }
  .hero-card--main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-warm-xl);
    aspect-ratio: 4/3;
  }
  .hero-card--main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
  }
  .hero-card--main:hover img { transform: scale(1.03); }
  .hero-card--sm {
    position: absolute;
    background: var(--warm-white);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-warm-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--ink);
    border: 1px solid rgba(212,196,168,0.3);
  }
  .hero-card--sm i { color: var(--amber); font-size: 1.1rem; }
  .hero-card--top { top: -20px; right: -20px; }
  .hero-card--bot { bottom: -20px; left: -20px; }

  @media (min-width: 900px) {
    .hero-inner { grid-template-columns: 1fr 1fr; }
    .hero-visual { display: block; }
  }

  
  .wave-divider {
    line-height: 0;
    overflow: hidden;
    background: var(--cream);
  }
  .wave-divider svg { display: block; width: 100%; }
  .wave-divider--flip { transform: rotate(180deg); }

  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    min-height: 48px;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--amber);
    color: #fff;
    box-shadow: var(--shadow-amber);
  }
  .btn-primary:hover {
    background: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212,135,74,0.45);
  }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--sand-dark);
  }
  .btn-ghost:hover {
    background: var(--sand-pale);
    border-color: var(--amber);
    transform: translateY(-1px);
  }
  .btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.4);
  }
  .btn-outline-light:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.7);
  }

  
  .sec-tag {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: var(--space-md);
  }
  .sec-hd {
    text-align: center;
    margin-bottom: var(--space-2xl);
  }
  .sec-hd .sec-tag { display: block; }
  .sec-title {
    font-size: var(--font-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: var(--space-md);
  }
  .sec-title--xl {
    font-size: var(--font-4xl);
  }
  .sec-sub {
    font-size: var(--font-md);
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
  }

  
  .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .benefit-crd {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    background: var(--warm-white);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-warm-sm);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .benefit-crd:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-warm-md);
  }
  .benefit-ico {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--warm-green);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    margin-top: 2px;
  }
  .benefit-crd h3 {
    font-size: var(--font-base);
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink);
  }
  .benefit-crd p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.6;
  }
  @media (min-width: 640px) {
    .benefits-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1024px) {
    .benefits-grid { grid-template-columns: 1fr 1fr 1fr; }
  }

  
  .courses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .crd {
    background: var(--warm-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-warm-md);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .crd:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-warm-xl);
  }
  .crd--course .crd-img {
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  .crd--course .crd-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .crd:hover .crd-img img { transform: scale(1.05); }
  .crd-body {
    padding: var(--space-xl);
  }
  .crd-ico {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: var(--space-md);
  }
  .crd-ico--amber { background: var(--amber); }
  .crd-ico--terra { background: var(--terracotta); }
  .crd-ico--green { background: var(--warm-green); }
  .crd-title {
    font-size: var(--font-xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--ink);
  }
  .crd-txt {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
  }
  .crd-lnk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--amber);
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
  }
  .crd-lnk:hover { gap: 12px; color: var(--terracotta); }
  @media (min-width: 768px) {
    .courses-grid { grid-template-columns: 1fr 1fr; }
    .crd--large { grid-column: 1 / -1; }
    .crd--large .crd-img { aspect-ratio: 21/9; }
  }
  @media (min-width: 1024px) {
    .courses-grid { grid-template-columns: 1fr 1fr 1fr; }
    .crd--large { grid-column: auto; }
    .crd--large .crd-img { aspect-ratio: 16/9; }
  }

  
  .how-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    position: relative;
  }
  .how-step {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
  }
  .how-num {
    flex-shrink: 0;
    font-size: var(--font-3xl);
    font-weight: 800;
    color: var(--sand-dark);
    letter-spacing: -0.04em;
    line-height: 1;
    min-width: 56px;
  }
  .how-content h3 {
    font-size: var(--font-lg);
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ink);
  }
  .how-content p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.7;
  }
  @media (min-width: 768px) {
    .how-grid { grid-template-columns: 1fr 1fr; }
  }

  
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .gal-item {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-warm-md);
    cursor: pointer;
  }
  .gal-item img {
    width: 100%; height: 240px;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
  }
  .gal-item:hover img { transform: scale(1.04); }
  .gal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44,36,22,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    color: #fff;
    font-size: 1.5rem;
    opacity: 0;
  }
  .gal-item:hover .gal-overlay {
    background: rgba(44,36,22,0.35);
    opacity: 1;
  }
  @media (min-width: 768px) {
    .gallery-grid {
      grid-template-columns: 2fr 1fr 1fr;
    }
    .gal-item--wide { grid-row: 1 / span 2; }
    .gal-item img { height: 200px; }
    .gal-item--wide img { height: 100%; }
  }

  
  .teachers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .teacher-crd {
    background: var(--warm-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-warm-md);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .teacher-crd:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-warm-xl);
  }
  .teacher-img {
    aspect-ratio: 4/3;
    overflow: hidden;
  }
  .teacher-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .teacher-crd:hover .teacher-img img { transform: scale(1.04); }
  .teacher-info {
    padding: var(--space-xl);
  }
  .teacher-info h3 {
    font-size: var(--font-lg);
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .teacher-info p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.7;
  }
  @media (min-width: 768px) {
    .teachers-grid { grid-template-columns: 1fr 1fr 1fr; }
  }

  
  .sec-cta-band {
    background: linear-gradient(135deg, var(--ink) 0%, #3d3020 100%);
    padding: var(--space-3xl) 0;
  }
  .cta-band {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    align-items: flex-start;
  }
  .cta-band-txt h2 {
    font-size: var(--font-3xl);
    font-weight: 800;
    color: var(--warm-white);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-sm);
  }
  .cta-band-txt p {
    font-size: var(--font-md);
    color: rgba(250,246,240,0.7);
    max-width: 500px;
    line-height: 1.65;
  }
  .cta-band-btns {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  @media (min-width: 768px) {
    .cta-band {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  
  .sec-page-hero {
    padding-top: 140px;
    padding-bottom: var(--space-3xl);
    background: linear-gradient(145deg, var(--warm-white) 0%, var(--cream) 100%);
  }
  .page-hero-txt {
    max-width: 720px;
  }
  .page-hero-txt .sec-tag { display: block; margin-bottom: var(--space-md); }
  .page-hero-txt .sec-sub {
    margin: var(--space-lg) 0 0;
    text-align: left;
    max-width: 600px;
  }

  
  .know-cats {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
  }
  .know-cat {
    background: transparent;
    border: 1.5px solid var(--sand-dark);
    color: var(--ink-soft);
    padding: 9px 20px;
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
    font-family: inherit;
  }
  .know-cat:hover, .know-cat--active {
    background: var(--amber);
    border-color: var(--amber);
    color: #fff;
  }
  .know-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .know-crd {
    background: var(--warm-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm-sm);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .know-crd:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-warm-md);
  }
  .know-ico {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    margin-bottom: var(--space-md);
    flex-shrink: 0;
  }
  .know-ico--amber { background: var(--amber); }
  .know-ico--terra { background: var(--terracotta); }
  .know-ico--green { background: var(--warm-green); }
  .know-tag {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--amber);
    margin-bottom: 10px;
  }
  .know-crd h3 {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-md);
  }
  .know-crd p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: var(--space-sm);
  }
  .know-crd p:last-child { margin-bottom: 0; }
  @media (min-width: 768px) {
    .know-grid { grid-template-columns: 1fr 1fr; }
  }

  
  .res-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .res-crd {
    background: var(--warm-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm-sm);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .res-crd:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-warm-md);
  }
  .res-ico {
    width: 44px; height: 44px;
    background: var(--amber-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber);
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
  }
  .res-crd h3 {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-sm);
  }
  .res-crd p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.7;
  }
  @media (min-width: 640px) { .res-grid { grid-template-columns: 1fr 1fr; } }

  
  .sec-service-detail { padding: var(--space-3xl) 0; }
  .svc-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .svc-ico {
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: var(--space-lg);
  }
  .svc-ico--amber { background: var(--amber); }
  .svc-ico--terra { background: var(--terracotta); }
  .svc-ico--green { background: var(--warm-green); }
  .svc-txt h2 {
    font-size: var(--font-3xl);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
  }
  .svc-txt p {
    font-size: var(--font-base);
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: var(--space-md);
  }
  .svc-modules {
    margin: var(--space-xl) 0;
    background: var(--sand-pale);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-md);
    border: 1px solid rgba(212,196,168,0.3);
  }
  .svc-modules h3 {
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-md);
  }
  .svc-module-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .svc-module {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-sm);
    color: var(--ink-soft);
  }
  .svc-module i { color: var(--warm-green); font-size: 0.9rem; flex-shrink: 0; }
  .svc-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-warm-xl);
    aspect-ratio: 4/3;
  }
  .svc-img img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 900px) {
    .svc-block { grid-template-columns: 1fr 1fr; }
    .svc-block--img-left .svc-img { order: -1; }
  }

  
  .platform-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .platform-crd {
    background: var(--warm-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm-sm);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .platform-crd:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-warm-md);
  }
  .platform-ico {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--amber-pale), var(--sand));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber);
    font-size: 1.2rem;
    margin-bottom: var(--space-md);
  }
  .platform-crd h3 {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .platform-crd p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.7;
  }
  @media (min-width: 640px) { .platform-grid { grid-template-columns: 1fr 1fr; } }

  
  .groups-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
    margin-bottom: var(--space-2xl);
  }
  .groups-intro-txt h2 {
    font-size: var(--font-3xl);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
  }
  .groups-intro-txt p {
    font-size: var(--font-base);
    color: var(--ink-soft);
    line-height: 1.75;
    margin-bottom: var(--space-md);
  }
  .groups-intro-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-warm-xl);
    aspect-ratio: 4/3;
  }
  .groups-intro-img img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 900px) {
    .groups-intro { grid-template-columns: 1fr 1fr; }
  }
  .grp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .grp-crd {
    background: var(--warm-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm-md);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .grp-crd:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-warm-xl);
  }
  .grp-crd--featured {
    border-color: var(--amber);
    border-width: 2px;
    position: relative;
  }
  .grp-crd--featured::before {
    content: 'Рекомендуем';
    position: absolute;
    top: -12px; left: 24px;
    background: var(--amber);
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-full);
  }
  .grp-ico {
    width: 48px; height: 48px;
    background: var(--amber-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber);
    font-size: 1.2rem;
    margin-bottom: var(--space-md);
  }
  .grp-crd h3 {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-md);
  }
  .grp-crd p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
  }
  .grp-features {
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .grp-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-sm);
    color: var(--ink-soft);
  }
  .grp-features li i { color: var(--warm-green); flex-shrink: 0; }
  @media (min-width: 768px) { .grp-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .grp-grid { grid-template-columns: 1fr 1fr 1fr; } }

  
  .process-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: stretch;
  }
  .proc-step {
    background: var(--warm-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm-sm);
    border: 1px solid rgba(212,196,168,0.2);
    flex: 1;
  }
  .proc-day {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--amber);
    margin-bottom: var(--space-sm);
  }
  .proc-step h3 {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .proc-step p { font-size: var(--font-sm); color: var(--ink-soft); line-height: 1.7; }
  .proc-arrow {
    color: var(--sand-dark);
    font-size: 1.2rem;
    text-align: center;
    padding: 4px 0;
    transform: rotate(90deg);
  }
  @media (min-width: 768px) {
    .process-flow { flex-direction: row; align-items: center; }
    .proc-arrow { transform: rotate(0); }
  }

  
  .faq-list { display: flex; flex-direction: column; gap: var(--space-sm); }
  .faq-item {
    background: var(--warm-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-warm-sm);
    border: 1px solid rgba(212,196,168,0.2);
    overflow: hidden;
    transition: box-shadow 0.2s;
  }
  .faq-item[open] { box-shadow: var(--shadow-warm-md); }
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    min-height: 60px;
    transition: color 0.2s;
    gap: var(--space-md);
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--amber);
    flex-shrink: 0;
    transition: transform 0.3s;
  }
  .faq-item[open] .faq-q::after { transform: rotate(180deg); }
  .faq-item:hover .faq-q { color: var(--amber); }
  .faq-a {
    padding: 0 var(--space-xl) var(--space-lg);
  }
  .faq-a p { font-size: var(--font-sm); color: var(--ink-soft); line-height: 1.75; }

  
  .contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }
  .contact-map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-warm-lg);
    min-height: 420px;
    height: 100%;
  }
  .contact-map iframe { display: block; }
  .contact-frm-wrap h2 {
    font-size: var(--font-2xl);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-sm);
  }
  .contact-frm-wrap > p {
    font-size: var(--font-base);
    color: var(--ink-soft);
    margin-bottom: var(--space-xl);
  }
  @media (min-width: 900px) {
    .contact-split { grid-template-columns: 1fr 1fr; }
  }

  
  .frm { display: flex; flex-direction: column; gap: var(--space-md); }
  .frm-group { display: flex; flex-direction: column; gap: 6px; }
  .frm-lbl {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
  }
  .frm-inp {
    background: var(--warm-white);
    border: 1.5px solid var(--sand-dark);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: var(--font-base);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    min-height: 48px;
  }
  .frm-inp:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(212,135,74,0.15);
  }
  .frm-inp::placeholder { color: var(--ink-muted); }
  .frm-textarea { resize: vertical; min-height: 140px; }
  .frm-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .frm-check input[type="checkbox"] {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--amber);
    cursor: pointer;
  }
  .frm-check a { color: var(--amber); text-decoration: underline; }
  .frm-submit { margin-top: var(--space-sm); align-self: flex-start; }

  
  .cinfo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  .cinfo-crd {
    background: var(--warm-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm-sm);
    border: 1px solid rgba(212,196,168,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .cinfo-crd:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-warm-md);
  }
  .cinfo-ico {
    width: 44px; height: 44px;
    background: var(--amber-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber);
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
  }
  .cinfo-crd h3 {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cinfo-crd p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .cinfo-crd a {
    color: var(--amber);
    text-decoration: none;
    transition: color 0.2s;
  }
  .cinfo-crd a:hover { color: var(--terracotta); }
  @media (min-width: 640px) { .cinfo-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

  
  .office-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .office-gal-item {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-warm-md);
    cursor: pointer;
  }
  .office-gal-item img {
    width: 100%; height: 240px;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
  }
  .office-gal-item:hover img { transform: scale(1.04); }
  .office-gal-item .gal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44,36,22,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    color: #fff;
    font-size: 1.5rem;
    opacity: 0;
  }
  .office-gal-item:hover .gal-overlay {
    background: rgba(44,36,22,0.35);
    opacity: 1;
  }
  @media (min-width: 768px) {
    .office-gallery { grid-template-columns: 1fr 1fr 1fr; }
    .office-gal-item img { height: 280px; }
  }

  
  .sec-legal { padding-top: 120px; }
  .legal-hd {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--sand);
  }
  .legal-hd h1 {
    font-size: var(--font-4xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: var(--space-md) 0 var(--space-sm);
  }
  .legal-date {
    font-size: var(--font-sm);
    color: var(--ink-muted);
  }
  .legal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .legal-body p {
    font-size: var(--font-base);
    color: var(--ink-soft);
    line-height: 1.8;
  }
  .legal-body h2 {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--ink);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--sand);
  }
  .legal-body h3 {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--ink);
    margin-top: var(--space-md);
  }
  .legal-body a { color: var(--amber); text-decoration: underline; }
  .legal-body a:hover { color: var(--terracotta); }

  
  .ftr {
    background: var(--dark-bg);
    color: rgba(250,246,240,0.75);
    margin-top: auto;
  }
  .ftr-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }
  .ftr-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    padding: var(--space-3xl) 0 var(--space-2xl);
  }
  .ftr-brand {
    max-width: 280px;
  }
  .ftr-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: var(--space-md);
  }
  .ftr-logo img { height: 32px; filter: brightness(0) invert(1) opacity(0.9); }
  .ftr-logo span {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--warm-white);
  }
  .ftr-brand p {
    font-size: var(--font-sm);
    line-height: 1.65;
    color: rgba(250,246,240,0.55);
  }
  .ftr-nav-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .ftr-nav-col h4 {
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--warm-white);
    margin-bottom: var(--space-sm);
  }
  .ftr-nav-col a {
    font-size: var(--font-sm);
    color: rgba(250,246,240,0.55);
    text-decoration: none;
    transition: color 0.2s;
    padding: 2px 0;
    position: relative;
    display: inline-block;
  }
  .ftr-nav-col a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--amber);
    transition: width 0.25s;
  }
  .ftr-nav-col a:hover { color: var(--amber-light); }
  .ftr-nav-col a:hover::after { width: 100%; }
  .ftr-contact-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .ftr-contact-col h4 {
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--warm-white);
    margin-bottom: var(--space-sm);
  }
  .ftr-contact-col p {
    font-size: var(--font-sm);
    color: rgba(250,246,240,0.55);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
  }
  .ftr-contact-col p i {
    color: var(--amber);
    flex-shrink: 0;
    margin-top: 2px;
    width: 14px;
  }
  .ftr-contact-col a {
    color: rgba(250,246,240,0.55);
    text-decoration: none;
    transition: color 0.2s;
  }
  .ftr-contact-col a:hover { color: var(--amber-light); }
  .ftr-bottom {
    border-top: 1px solid rgba(250,246,240,0.1);
    padding: var(--space-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
  }
  .ftr-bottom p {
    font-size: var(--font-xs);
    color: rgba(250,246,240,0.35);
  }
  @media (min-width: 640px) {
    .ftr-top { grid-template-columns: 1fr 1fr; }
    .ftr-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  }
  @media (min-width: 1024px) {
    .ftr-top { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
  }

  
  .thanks-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px var(--space-lg) var(--space-3xl);
    text-align: center;
  }
  .thanks-inner {
    max-width: 560px;
  }
  .thanks-ico {
    font-size: 3rem;
    color: var(--amber);
    margin-bottom: var(--space-xl);
    animation: float-heart 3s ease-in-out infinite;
  }
  @keyframes float-heart {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  .thanks-inner h1 {
    font-size: var(--font-4xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: var(--space-lg);
  }
  .thanks-inner p {
    font-size: var(--font-lg);
    color: var(--ink-soft);
    line-height: 1.65;
    margin-bottom: var(--space-2xl);
  }

  
  .ck-link {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Sora', sans-serif;
    font-size: 0.75rem;
    color: var(--ink-soft);
    background: var(--warm-white);
    border: 1px solid var(--sand-dark);
    border-radius: var(--radius-full);
    padding: 7px 14px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-warm-md);
    transition: all 0.2s;
  }
  .ck-link:hover {
    background: var(--amber-pale);
    border-color: var(--amber);
    color: var(--amber);
    transform: translateY(-1px);
  }
  .ck-link.ck-pulse {
    animation: ck-pulse-anim 2s 2;
  }
  @keyframes ck-pulse-anim {
    0%,100% { box-shadow: var(--shadow-warm-md); }
    50% { box-shadow: 0 0 0 6px rgba(212,135,74,0.2), var(--shadow-warm-md); }
  }
  .ck-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44,36,22,0.5);
    z-index: 9001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .ck-modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
  }
  .ck-modal {
    background: var(--warm-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    max-width: 520px;
    width: 100%;
    box-shadow: var(--shadow-warm-xl);
    transform: translateY(20px);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  }
  .ck-modal-overlay.is-open .ck-modal {
    transform: translateY(0);
  }
  .ck-modal-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-lg);
  }
  .ck-modal-hd i { font-size: 1.5rem; color: var(--amber); }
  .ck-modal-hd h3 {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--ink);
  }
  .ck-modal p {
    font-size: var(--font-sm);
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
  }
  .ck-cats {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
  }
  .ck-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--space-md);
    background: var(--cream);
    border-radius: var(--radius-md);
    border: 1px solid var(--sand);
    gap: var(--space-md);
  }
  .ck-cat-info h4 {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .ck-cat-info p {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.5;
  }
  .ck-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
  }
  .ck-toggle input { opacity: 0; width: 0; height: 0; }
  .ck-slider {
    position: absolute;
    inset: 0;
    background: var(--sand-dark);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.2s;
  }
  .ck-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .ck-toggle input:checked + .ck-slider { background: var(--amber); }
  .ck-toggle input:checked + .ck-slider::before { transform: translateX(20px); }
  .ck-toggle input:disabled + .ck-slider { opacity: 0.5; cursor: not-allowed; }
  .ck-btns {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  .ck-btn {
    flex: 1;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 48px;
    border: 1.5px solid transparent;
  }
  .ck-btn--accept {
    background: var(--amber);
    color: #fff;
    box-shadow: var(--shadow-amber);
  }
  .ck-btn--accept:hover { background: var(--terracotta); }
  .ck-btn--save {
    background: transparent;
    border-color: var(--sand-dark);
    color: var(--ink);
  }
  .ck-btn--save:hover { background: var(--sand-pale); border-color: var(--amber); }
  .ck-btn--reject {
    background: transparent;
    border-color: var(--sand-dark);
    color: var(--ink-muted);
    font-size: var(--font-xs);
  }
  .ck-btn--reject:hover { color: var(--ink); border-color: var(--ink-soft); }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
  }
  .text-center { text-align: center; }
  .mt-lg { margin-top: var(--space-lg); }
  .mt-xl { margin-top: var(--space-xl); }
}