@layer base, layout, components, pages, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --clr-bg: #f7f3ee;
    --clr-bg2: #efe9e0;
    --clr-bg3: #e4dbd0;
    --clr-surface: #fdfaf6;
    --clr-pri: #c0440e;
    --clr-pri-dk: #9a3509;
    --clr-pri-lt: #e8633a;
    --clr-sec: #3a6b3e;
    --clr-sec-dk: #2c5230;
    --clr-acc: #d4930a;
    --clr-acc-lt: #f0b930;
    --clr-txt: #2a2118;
    --clr-txt2: #5a4e42;
    --clr-txt3: #8a7d72;
    --clr-border: #d6cec4;
    --clr-white: #fdfaf6;
    --clr-hero-dark: #1a1208;

    --ff-head: 'Red Hat Display', sans-serif;
    --ff-body: 'Red Hat Text', sans-serif;

    --sp-xs: 0.5rem;
    --sp-sm: 1rem;
    --sp-md: 1.5rem;
    --sp-lg: 2.5rem;
    --sp-xl: 4rem;
    --sp-2xl: 6rem;
    --sp-3xl: 8rem;

    --rad-sm: 6px;
    --rad-md: 12px;
    --rad-lg: 20px;
    --rad-xl: 32px;
    --rad-full: 999px;

    --shadow-sm: 0 1px 3px rgba(42,33,24,0.08), 0 1px 2px rgba(42,33,24,0.05);
    --shadow-md: 0 4px 12px rgba(42,33,24,0.10), 0 2px 6px rgba(42,33,24,0.06);
    --shadow-lg: 0 8px 24px rgba(42,33,24,0.12), 0 4px 10px rgba(42,33,24,0.07), 0 1px 3px rgba(42,33,24,0.05);
    --shadow-xl: 0 16px 48px rgba(42,33,24,0.14), 0 6px 18px rgba(42,33,24,0.08);

    --transition-fast: 150ms ease;
    --transition-base: 280ms cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 480ms cubic-bezier(0.4,0,0.2,1);

    --nav-h: 64px;
  }

  html { scroll-behavior: smooth; overflow-x: hidden; }

  body {
    font-family: var(--ff-body);
    background-color: var(--clr-bg);
    color: var(--clr-txt);
    line-height: 1.65;
    font-size: 1rem;
    overflow-x: hidden;
  }

  img { display: block; max-inline-size: 100%; block-size: auto; }
  a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
  ul { list-style: none; }
  button { cursor: pointer; border: none; background: none; font-family: inherit; }
  address { font-style: normal; }
}

@layer layout {
  .page-wrap {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base);
    transform-origin: right center;
  }

  .page-wrap.nav-open {
    transform: translateX(-300px) scale(0.95);
    border-radius: var(--rad-lg);
    overflow: hidden;
  }

  main { flex: 1; }

  .ctr {
    inline-size: min(100%, 1200px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 2.5rem);
  }

  .sec {
    padding-block: clamp(4rem, 8vw, 7rem);
    position: relative;
    overflow: hidden;
  }

  .txt-c { text-align: center; }
}

@layer components {
  
  .lang-badge {
    position: fixed;
    inset-block-start: calc(var(--nav-h) + 12px);
    inset-inline-end: 16px;
    z-index: 90;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--rad-full);
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--clr-txt2);
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
  }

  
  .hdr {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: var(--nav-h);
    transition: background var(--transition-base), backdrop-filter var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  }

  .hdr.scrolled {
    background: rgba(247,243,238,0.82);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(42,33,24,0.10), 0 4px 20px rgba(42,33,24,0.06);
  }

  .hdr-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 100%;
    inline-size: min(100%, 1200px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 2.5rem);
  }

  .hdr-logo {
    display: flex;
    align-items: center;
    z-index: 2;
  }

  .hdr-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    min-block-size: 44px;
    min-inline-size: 44px;
    justify-content: center;
    align-items: center;
    border-radius: var(--rad-sm);
    transition: background var(--transition-fast);
  }
  .hdr-burger:hover { background: var(--clr-bg2); }
  .hdr-burger span {
    display: block;
    inline-size: 22px;
    block-size: 2px;
    background: var(--clr-txt);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-fast);
  }
  .hdr-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr-burger.open span:nth-child(2) { opacity: 0; }
  .hdr-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  
  .mob-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 300px;
    background: var(--clr-surface);
    z-index: 99;
    padding-block-start: var(--nav-h);
    padding-inline: var(--sp-lg);
    padding-block-end: var(--sp-xl);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    box-shadow: -8px 0 40px rgba(42,33,24,0.18);
    overflow-y: auto;
  }
  .mob-nav.open { transform: translateX(0); }

  .mob-nav-close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    inline-size: 44px;
    block-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rad-sm);
    font-size: 1.1rem;
    color: var(--clr-txt2);
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  .mob-nav-close:hover { background: var(--clr-bg2); color: var(--clr-txt); }

  .mob-nav-list { flex: 1; padding-block-start: var(--sp-lg); }
  .mob-nav-list li + li { margin-block-start: 4px; }
  .mob-nav-lnk {
    display: block;
    padding: 12px 16px;
    border-radius: var(--rad-md);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--clr-txt2);
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  .mob-nav-lnk:hover, .mob-nav-lnk.active {
    background: var(--clr-bg2);
    color: var(--clr-pri);
  }

  .mob-nav-contact {
    margin-block-start: var(--sp-lg);
    padding-block-start: var(--sp-md);
    border-block-start: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
  }
  .mob-nav-contact a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--clr-txt2);
    padding: 8px 0;
    transition: color var(--transition-fast);
  }
  .mob-nav-contact a:hover { color: var(--clr-pri); }
  .mob-nav-contact i { color: var(--clr-pri); inline-size: 16px; }

  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--rad-full);
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  .btn-pri {
    background: var(--clr-pri);
    color: #fff;
    box-shadow: 0 4px 14px rgba(192,68,14,0.35), 0 1px 4px rgba(192,68,14,0.2);
  }
  .btn-pri:hover {
    background: var(--clr-pri-dk);
    box-shadow: 0 6px 20px rgba(192,68,14,0.40), 0 2px 6px rgba(192,68,14,0.25);
  }

  .btn-sec {
    background: var(--clr-sec);
    color: #fff;
    box-shadow: 0 4px 14px rgba(58,107,62,0.30), 0 1px 4px rgba(58,107,62,0.15);
  }
  .btn-sec:hover {
    background: var(--clr-sec-dk);
    box-shadow: 0 6px 20px rgba(58,107,62,0.36), 0 2px 6px rgba(58,107,62,0.2);
  }

  .btn-ghost {
    background: transparent;
    color: var(--clr-pri);
    border: 2px solid var(--clr-pri);
  }
  .btn-ghost:hover {
    background: var(--clr-pri);
    color: #fff;
  }

  .btn-lg { padding: 15px 36px; font-size: 1.05rem; }
  .btn-sm { padding: 9px 20px; font-size: 0.85rem; }

  
  .sec-title {
    font-family: var(--ff-head);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--clr-txt);
    margin-block-end: var(--sp-md);
  }

  .sec-head {
    text-align: center;
    margin-block-end: var(--sp-xl);
  }

  .sec-sub {
    font-size: 1.05rem;
    color: var(--clr-txt2);
    max-inline-size: 600px;
    margin-inline: auto;
    line-height: 1.7;
  }

  
  .ftr {
    background: var(--clr-hero-dark);
    color: rgba(253,250,246,0.75);
    padding-block: var(--sp-2xl) var(--sp-lg);
    margin-block-start: auto;
  }

  .ftr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
    margin-block-end: var(--sp-xl);
  }

  @media (min-width: 768px) {
    .ftr-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-2xl); }
  }

  .ftr-brand img { margin-block-end: var(--sp-md); opacity: 0.9; }
  .ftr-brand p { font-size: 0.9rem; line-height: 1.7; margin-block-end: var(--sp-md); }
  .ftr-brand address { font-size: 0.875rem; line-height: 2; }
  .ftr-brand address a { color: rgba(253,250,246,0.65); transition: color var(--transition-fast); }
  .ftr-brand address a:hover { color: var(--clr-acc-lt); }
  .ftr-brand address i { margin-inline-end: 6px; color: var(--clr-pri-lt); opacity: 0.8; }

  .ftr-nav h4, .ftr-legal h4 {
    font-family: var(--ff-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(253,250,246,0.45);
    margin-block-end: var(--sp-md);
  }

  .ftr-nav ul li + li, .ftr-legal ul li + li { margin-block-start: 6px; }
  .ftr-nav a, .ftr-legal a {
    font-size: 0.9rem;
    color: rgba(253,250,246,0.65);
    transition: color var(--transition-fast);
    display: inline-block;
    padding-block: 2px;
  }
  .ftr-nav a:hover, .ftr-legal a:hover { color: var(--clr-acc-lt); }

  .ftr-bottom {
    border-block-start: 1px solid rgba(253,250,246,0.1);
    padding-block-start: var(--sp-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-sm);
    font-size: 0.8rem;
    color: rgba(253,250,246,0.35);
  }

  
  .acc-list { max-inline-size: 860px; margin-inline: auto; }
  .acc-item {
    border: 1px solid var(--clr-border);
    border-radius: var(--rad-md);
    overflow: hidden;
    margin-block-end: var(--sp-sm);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
  }
  .acc-hdr {
    inline-size: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-md) var(--sp-lg);
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--clr-txt);
    text-align: start;
    gap: var(--sp-sm);
    transition: background var(--transition-fast);
  }
  .acc-hdr:hover { background: var(--clr-bg2); }
  .acc-item.open .acc-hdr { background: var(--clr-bg2); color: var(--clr-pri); }
  .acc-ico { flex-shrink: 0; transition: transform var(--transition-base); color: var(--clr-txt3); font-size: 0.85rem; }
  .acc-item.open .acc-ico { transform: rotate(180deg); color: var(--clr-pri); }
  .acc-body {
    padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
    border-block-start: 1px solid var(--clr-border);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--clr-txt2);
  }
  .acc-body p + p { margin-block-start: var(--sp-sm); }
  .acc-body ul { margin-block-start: var(--sp-sm); padding-inline-start: var(--sp-md); list-style: disc; }
  .acc-body ul li { padding-block: 2px; }
}

@layer pages {

  
  .hero {
    block-size: 100dvh;
    min-block-size: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-block: 0;
    overflow: hidden;
    background: var(--clr-hero-dark);
  }

  .hero-bg-layer {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1208 0%, #2d1e0f 40%, #1a2410 100%);
    z-index: 0;
  }

  .hero-img-reveal {
    position: absolute;
    inset: 0;
    z-index: 1;
    clip-path: polygon(55% 0%, 100% 0%, 100% 100%, 38% 100%);
  }
  .hero-bg-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.55;
    filter: saturate(0.8);
  }

  .hero-cutout {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    clip-path: polygon(0% 0%, 60% 0%, 42% 100%, 0% 100%);
    background: linear-gradient(135deg, rgba(26,18,8,0.97) 0%, rgba(45,30,15,0.85) 100%);
  }

  .hero-content {
    position: relative;
    z-index: 3;
    max-inline-size: 620px;
    padding-inline-start: clamp(1.5rem, 8vw, 5rem);
    padding-block-start: var(--nav-h);
  }

  .hero-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(192,68,14,0.2);
    border: 1px solid rgba(192,68,14,0.4);
    color: var(--clr-pri-lt);
    padding: 5px 14px;
    border-radius: var(--rad-full);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-block-end: var(--sp-md);
  }

  .hero-h1 {
    font-family: var(--ff-head);
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--clr-white);
    margin-block-end: var(--sp-md);
    letter-spacing: -0.02em;
  }

  .hero-typed {
    color: var(--clr-acc-lt);
    display: inline-block;
    min-inline-size: 4ch;
  }

  .hero-sub {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(253,250,246,0.72);
    max-inline-size: 480px;
    line-height: 1.7;
    margin-block-end: var(--sp-lg);
  }

  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
  }

  .hero-scroll-hint {
    position: absolute;
    inset-block-end: var(--sp-lg);
    inset-inline-start: clamp(1.5rem, 8vw, 5rem);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(253,250,246,0.4);
    font-weight: 600;
  }
  .hero-scroll-hint i {
    animation: bounce 2s ease-in-out infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }

  
  .cutout-sec { background: var(--clr-bg); padding-block: 0; }
  .cutout-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .cutout-reveal-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.12;
    filter: saturate(0.5);
  }
  .cutout-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }
  .cutout-circle {
    inset-block-start: -80px;
    inset-inline-start: -80px;
    inline-size: 320px;
    block-size: 320px;
    background: var(--clr-pri);
    border-radius: 50%;
    opacity: 0.08;
    clip-path: circle(50%);
  }
  .cutout-sec .ctr { position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 7rem); }

  .intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
    align-items: center;
  }
  @media (min-width: 768px) {
    .intro-grid { grid-template-columns: 1fr 1fr; }
  }

  .intro-txt h2 { margin-block-end: var(--sp-md); }
  .intro-txt p { color: var(--clr-txt2); line-height: 1.8; margin-block-end: var(--sp-sm); }
  .intro-txt p:last-of-type { margin-block-end: var(--sp-lg); }
  .intro-img-wrap {
    border-radius: var(--rad-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 94%);
  }
  .intro-img { inline-size: 100%; block-size: 420px; object-fit: cover; }

  
  .why-sec { background: var(--clr-bg2); }
  .why-cutout-top {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 80px;
    background: var(--clr-bg);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%);
    z-index: 1;
    pointer-events: none;
  }
  .why-sec .ctr { position: relative; z-index: 2; }

  .why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
  @media (min-width: 600px) { .why-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

  .why-crd {
    background: var(--clr-surface);
    border-radius: var(--rad-lg);
    padding: var(--sp-lg);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  .why-crd:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }

  .crd-ico {
    inline-size: 52px;
    block-size: 52px;
    background: linear-gradient(135deg, var(--clr-pri), var(--clr-pri-lt));
    border-radius: var(--rad-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--sp-md);
    font-size: 1.3rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(192,68,14,0.3);
    flex-shrink: 0;
  }

  .crd-ttl {
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-txt);
    margin-block-end: var(--sp-xs);
  }
  .crd-txt { font-size: 0.9rem; color: var(--clr-txt2); line-height: 1.7; }

  
  .sticky-sec {
    background: var(--clr-bg);
    padding-block: 0;
    overflow: visible;
  }

  .sticky-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: auto;
  }

  @media (min-width: 900px) {
    .sticky-layout {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
    .sticky-visual {
      position: sticky;
      inset-block-start: var(--nav-h);
      block-size: calc(100dvh - var(--nav-h));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--sp-xl) var(--sp-lg) var(--sp-xl) clamp(1.5rem, 5vw, 3rem);
    }
  }

  .sticky-img-wrap {
    position: relative;
    border-radius: var(--rad-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    inline-size: 100%;
    aspect-ratio: 4/5;
    max-block-size: 600px;
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  }

  @media (max-width: 899px) {
    .sticky-img-wrap {
      margin: var(--sp-xl) clamp(1.5rem, 5vw, 3rem) 0;
      clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    }
  }

  .sticky-img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .sticky-badge {
    position: absolute;
    inset-block-end: var(--sp-lg);
    inset-inline-start: var(--sp-lg);
    background: rgba(26,18,8,0.85);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--rad-full);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(253,250,246,0.15);
  }
  .sticky-badge i { color: var(--clr-acc-lt); }

  .sticky-content {
    padding: var(--sp-xl) clamp(1.5rem, 5vw, 3rem) var(--sp-xl) var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xl);
  }

  .sticky-item { position: relative; padding-inline-start: var(--sp-xl); }
  .sticky-num {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    font-family: var(--ff-head);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--clr-pri);
    letter-spacing: 0.08em;
    background: rgba(192,68,14,0.1);
    border-radius: var(--rad-sm);
    padding: 3px 7px;
  }
  .sticky-item h3 {
    font-family: var(--ff-head);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--clr-txt);
    margin-block-end: var(--sp-sm);
    margin-block-start: 28px;
  }
  .sticky-item p { color: var(--clr-txt2); line-height: 1.8; }

  
  .tbl-sec { background: var(--clr-surface); }
  .tbl-cutout-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: ellipse(70% 40% at 50% 50%);
    overflow: hidden;
    pointer-events: none;
  }
  .tbl-bg-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.06;
    filter: saturate(0);
  }
  .tbl-sec .ctr { position: relative; z-index: 2; }

  .tbl-wrap {
    overflow-x: auto;
    border-radius: var(--rad-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--clr-border);
  }

  .cmp-tbl {
    inline-size: 100%;
    border-collapse: collapse;
    background: var(--clr-surface);
    font-size: 0.9rem;
    min-inline-size: 560px;
  }

  .cmp-tbl thead tr {
    background: var(--clr-bg3);
  }
  .cmp-tbl th {
    padding: 18px 16px;
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    color: var(--clr-txt);
    border-block-end: 2px solid var(--clr-border);
  }
  .tbl-feat { text-align: start !important; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--clr-txt3) !important; }
  .tier-sub { display: block; font-size: 0.75rem; font-weight: 500; color: var(--clr-txt3); margin-block-start: 3px; font-family: var(--ff-body); }

  .tbl-rec {
    background: linear-gradient(180deg, rgba(192,68,14,0.10) 0%, rgba(192,68,14,0.05) 100%) !important;
    border-inline: 2px solid rgba(192,68,14,0.30) !important;
    position: relative;
  }

  .cmp-tbl tbody tr {
    border-block-end: 1px solid var(--clr-border);
    transition: background var(--transition-fast);
  }
  .cmp-tbl tbody tr:hover { background: var(--clr-bg2); }
  .cmp-tbl tbody td {
    padding: 14px 16px;
    text-align: center;
    color: var(--clr-txt2);
  }
  .cmp-tbl tbody td:first-child {
    text-align: start;
    font-weight: 500;
    color: var(--clr-txt);
  }

  .tbl-y { color: var(--clr-sec); font-size: 1rem; }
  .tbl-n { color: var(--clr-border); font-size: 1rem; }

  .cmp-tbl tfoot tr { background: var(--clr-bg2); }
  .tbl-cta-cell { padding: 18px 16px !important; }
  .tbl-cta-cell.tbl-rec { background: rgba(192,68,14,0.06); }

  .tbl-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--clr-txt3);
    margin-block-start: var(--sp-lg);
    font-style: italic;
  }

  
  .gal-sec { background: var(--clr-bg2); }
  .gal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
  @media (min-width: 600px) {
    .gal-grid {
      grid-template-columns: 2fr 1fr;
      grid-template-rows: auto auto;
    }
    .gal-lg { grid-row: span 2; }
  }
  .gal-item {
    border-radius: var(--rad-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  .gal-item:hover { transform: scale(1.02); box-shadow: var(--shadow-xl); }
  .gal-item img {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 220px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }
  .gal-item:hover img { transform: scale(1.05); }
  .gal-lg img { min-block-size: 460px; }
  .gal-overlay {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    background: linear-gradient(transparent, rgba(26,18,8,0.75));
    padding: var(--sp-md);
    opacity: 0;
    transition: opacity var(--transition-base);
  }
  .gal-item:hover .gal-overlay { opacity: 1; }
  .gal-overlay span {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
  }

  
  .cta-band {
    background: var(--clr-sec);
    color: #fff;
    overflow: hidden;
  }
  .cta-band-cutout {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--clr-sec-dk) 0%, var(--clr-sec) 100%);
    clip-path: polygon(0 8%, 100% 0%, 100% 92%, 0% 100%);
    z-index: 0;
  }
  .cta-band-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-inline-size: 680px;
    margin-inline: auto;
  }
  .cta-band-inner h2 {
    font-family: var(--ff-head);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 800;
    margin-block-end: var(--sp-sm);
    color: #fff;
  }
  .cta-band-inner p {
    color: rgba(255,255,255,0.82);
    margin-block-end: var(--sp-lg);
    font-size: 1.05rem;
    line-height: 1.7;
  }
  .cta-band .btn-pri {
    background: var(--clr-pri);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
  .cta-band .btn-sec {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
  }
  .cta-band .btn-sec:hover { background: rgba(255,255,255,0.25); }
  .cta-duo { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; }

  
  .pg-hero {
    background: linear-gradient(135deg, var(--clr-hero-dark) 0%, #2a1c0c 60%, #1a2810 100%);
    padding-block: clamp(6rem, 12vw, 9rem);
    overflow: hidden;
  }
  .pg-hero-cutout {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(192,68,14,0.15) 0%, transparent 60%);
    clip-path: circle(60% at 80% 50%);
  }
  .pg-hero-inner {
    position: relative;
    z-index: 2;
    max-inline-size: 700px;
  }
  .pg-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(192,68,14,0.15);
    border: 1px solid rgba(192,68,14,0.35);
    color: var(--clr-pri-lt);
    padding: 4px 14px;
    border-radius: var(--rad-full);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-block-end: var(--sp-md);
    display: inline-block;
  }
  .pg-h1 {
    font-family: var(--ff-head);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--clr-white);
    margin-block-end: var(--sp-md);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .pg-sub {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: rgba(253,250,246,0.7);
    line-height: 1.7;
    max-inline-size: 540px;
  }
  .legal-hero .pg-h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
  .legal-hero .pg-sub { color: rgba(253,250,246,0.5); font-size: 0.9rem; }

  
  .mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
    align-items: center;
  }
  @media (min-width: 768px) {
    .mission-grid { grid-template-columns: 1fr 1fr; }
  }
  .mission-txt h2 { margin-block-end: var(--sp-md); }
  .mission-txt p { color: var(--clr-txt2); line-height: 1.8; margin-block-end: var(--sp-sm); }
  .rnd-img {
    inline-size: 100%;
    block-size: 460px;
    object-fit: cover;
    border-radius: var(--rad-xl);
    box-shadow: var(--shadow-xl);
    clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);
  }

  .val-sec { background: var(--clr-bg2); }
  .val-cutout {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(192,68,14,0.08) 0%, transparent 50%);
    pointer-events: none;
  }
  .val-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    margin-block-start: var(--sp-xl);
  }
  @media (min-width: 600px) { .val-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .val-grid { grid-template-columns: repeat(4, 1fr); } }

  .val-item {
    background: var(--clr-surface);
    border-radius: var(--rad-lg);
    padding: var(--sp-lg);
    text-align: center;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  .val-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .val-ico {
    font-size: 2rem;
    color: var(--clr-pri);
    margin-block-end: var(--sp-md);
    display: block;
  }
  .val-item h3 {
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: 1rem;
    margin-block-end: var(--sp-xs);
    color: var(--clr-txt);
  }
  .val-item p { font-size: 0.9rem; color: var(--clr-txt2); line-height: 1.7; }

  .quote-block {
    background: var(--clr-bg2);
    border-radius: var(--rad-xl);
    padding: var(--sp-2xl);
    text-align: center;
    position: relative;
    max-inline-size: 760px;
    margin-inline: auto;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
  }
  .quote-ico {
    font-size: 2rem;
    color: var(--clr-pri);
    opacity: 0.35;
    margin-block-end: var(--sp-md);
    display: block;
  }
  .quote-block blockquote {
    font-family: var(--ff-head);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 600;
    line-height: 1.6;
    color: var(--clr-txt);
    font-style: italic;
    margin-block-end: var(--sp-md);
  }
  .quote-block cite {
    font-size: 0.85rem;
    color: var(--clr-txt3);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  
  .steps-intro {
    max-inline-size: 720px;
    margin-inline: auto;
    text-align: center;
    margin-block-end: var(--sp-2xl);
  }
  .intro-p { font-size: 1.05rem; color: var(--clr-txt2); line-height: 1.8; }

  .steps-timeline { max-inline-size: 860px; margin-inline: auto; }

  .step-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--sp-lg);
    margin-block-end: var(--sp-xl);
    align-items: start;
  }

  .step-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .step-num {
    inline-size: 52px;
    block-size: 52px;
    background: linear-gradient(135deg, var(--clr-pri), var(--clr-pri-lt));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(192,68,14,0.3);
    flex-shrink: 0;
    z-index: 1;
  }
  .step-line {
    inline-size: 2px;
    flex: 1;
    min-block-size: 60px;
    background: linear-gradient(to bottom, var(--clr-pri), transparent);
    opacity: 0.3;
    margin-block-start: 4px;
  }
  .step-title {
    font-family: var(--ff-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-txt);
    margin-block-end: var(--sp-sm);
  }
  .step-body p { color: var(--clr-txt2); line-height: 1.8; }
  .step-body p + p { margin-block-start: var(--sp-sm); }
  .step-info-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(58,107,62,0.08);
    border: 1px solid rgba(58,107,62,0.2);
    border-radius: var(--rad-md);
    padding: 10px 14px;
    margin-block-start: var(--sp-md);
    font-size: 0.875rem;
    color: var(--clr-sec-dk);
    font-weight: 500;
  }
  .step-info-box i { color: var(--clr-sec); flex-shrink: 0; margin-block-start: 2px; }

  
  .faq-sec { background: var(--clr-bg); }
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
  @media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); } }

  .faq-item {
    border: 1px solid var(--clr-border);
    border-radius: var(--rad-lg);
    overflow: hidden;
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
  }
  .faq-item:has(.faq-q[aria-expanded="true"]) { box-shadow: var(--shadow-md); }

  .faq-q {
    inline-size: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-lg);
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--clr-txt);
    text-align: start;
    transition: background var(--transition-fast);
    line-height: 1.4;
  }
  .faq-q:hover { background: var(--clr-bg2); }
  .faq-q[aria-expanded="true"] { background: var(--clr-bg2); color: var(--clr-pri); }
  .faq-ico { flex-shrink: 0; transition: transform var(--transition-base); color: var(--clr-txt3); margin-block-start: 2px; }
  .faq-q[aria-expanded="true"] .faq-ico { transform: rotate(180deg); color: var(--clr-pri); }

  .faq-a {
    padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
    border-block-start: 1px solid var(--clr-border);
    font-size: 0.92rem;
    color: var(--clr-txt2);
    line-height: 1.75;
    display: none;
  }
  .faq-a.open { display: block; }

  
  .contact-sec { background: var(--clr-bg); }
  .contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
    align-items: start;
  }
  @media (min-width: 900px) {
    .contact-layout { grid-template-columns: 1fr 1.6fr; }
  }

  .contact-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--rad-xl);
    padding: var(--sp-xl);
    box-shadow: var(--shadow-lg);
  }
  .contact-card h2 {
    font-family: var(--ff-head);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--clr-txt);
    margin-block-end: var(--sp-lg);
    padding-block-end: var(--sp-md);
    border-block-end: 1px solid var(--clr-border);
  }
  .contact-detail {
    display: flex;
    gap: var(--sp-md);
    margin-block-end: var(--sp-lg);
    align-items: flex-start;
  }
  .contact-detail i {
    color: var(--clr-pri);
    font-size: 1.1rem;
    margin-block-start: 3px;
    flex-shrink: 0;
    inline-size: 20px;
  }
  .contact-detail strong {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-txt3);
    margin-block-end: 4px;
  }
  .contact-detail p, .contact-detail a {
    font-size: 0.95rem;
    color: var(--clr-txt2);
    line-height: 1.7;
  }
  .contact-detail a:hover { color: var(--clr-pri); }
  .contact-entry-hint {
    font-size: 0.82rem !important;
    color: var(--clr-txt3) !important;
    margin-block-start: 4px;
    font-style: italic;
  }

  
  .chat-form-container {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--rad-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
  }
  .chat-header {
    background: var(--clr-pri);
    padding: var(--sp-md) var(--sp-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
  }
  .chat-avatar {
    inline-size: 44px;
    block-size: 44px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
  }
  .chat-title strong { display: block; color: #fff; font-size: 1rem; font-weight: 700; }
  .chat-title span { font-size: 0.78rem; color: rgba(255,255,255,0.75); }

  .chat-body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); }

  .chat-bubble-q {
    align-self: flex-start;
    background: var(--clr-bg2);
    border-radius: 0 var(--rad-lg) var(--rad-lg) var(--rad-lg);
    padding: 10px 16px;
    max-inline-size: 80%;
    border: 1px solid var(--clr-border);
  }
  .chat-bubble-q p { font-size: 0.9rem; color: var(--clr-txt); font-weight: 500; margin: 0; }

  .chat-bubble-a {
    align-self: flex-end;
    inline-size: 100%;
    max-inline-size: 90%;
  }
  .chat-bubble-a input,
  .chat-bubble-a textarea {
    inline-size: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--rad-lg) 0 var(--rad-lg) var(--rad-lg);
    background: var(--clr-surface);
    font-family: var(--ff-body);
    font-size: 0.95rem;
    color: var(--clr-txt);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    resize: vertical;
    outline: none;
  }
  .chat-bubble-a input:focus,
  .chat-bubble-a textarea:focus {
    border-color: var(--clr-pri);
    box-shadow: 0 0 0 3px rgba(192,68,14,0.12);
  }

  .chat-privacy {
    max-inline-size: 100%;
    padding: var(--sp-sm) 0;
  }
  .prv-lbl {
    display: flex;
    gap: var(--sp-sm);
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--clr-txt2);
    line-height: 1.6;
  }
  .prv-lbl input {
    margin-block-start: 3px;
    flex-shrink: 0;
    accent-color: var(--clr-pri);
    inline-size: 18px;
    block-size: 18px;
  }
  .prv-lbl a { color: var(--clr-pri); text-decoration: underline; }

  .chat-send-row { display: flex; justify-content: flex-end; margin-block-start: var(--sp-sm); }
  .chat-send { display: flex; align-items: center; gap: 8px; }

  
  .map-sec { background: var(--clr-bg2); padding-block-start: var(--sp-lg); }
  .map-wrap {
    border-radius: var(--rad-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--clr-border);
    margin-block-start: var(--sp-lg);
  }
  .map-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-start: var(--sp-md);
    font-size: 0.875rem;
    color: var(--clr-txt3);
  }
  .map-note i { color: var(--clr-sec); flex-shrink: 0; margin-block-start: 2px; }

  
  .thanks-sec { min-block-size: 70vh; display: flex; align-items: center; background: var(--clr-bg); }
  .thanks-inner {
    text-align: center;
    max-inline-size: 660px;
    margin-inline: auto;
    padding-block: var(--sp-2xl);
  }
  .thanks-ico {
    inline-size: 80px;
    block-size: 80px;
    background: linear-gradient(135deg, var(--clr-pri), var(--clr-pri-lt));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-block-end: var(--sp-lg);
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 6px 24px rgba(192,68,14,0.35);
  }
  .thanks-h1 {
    font-family: var(--ff-head);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--clr-txt);
    margin-block-end: var(--sp-md);
    letter-spacing: -0.02em;
  }
  .thanks-sub {
    color: var(--clr-txt2);
    font-size: 1rem;
    line-height: 1.7;
    margin-block-end: var(--sp-xl);
  }
  .thanks-next {
    background: var(--clr-bg2);
    border-radius: var(--rad-xl);
    padding: var(--sp-xl);
    margin-block-end: var(--sp-xl);
    text-align: start;
    border: 1px solid var(--clr-border);
  }
  .thanks-next h2 {
    font-family: var(--ff-head);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-txt);
    margin-block-end: var(--sp-md);
    text-align: center;
  }
  .thanks-steps { display: flex; flex-direction: column; gap: var(--sp-md); }
  .thanks-step {
    display: flex;
    gap: var(--sp-md);
    align-items: flex-start;
  }
  .thanks-step i { font-size: 1.2rem; color: var(--clr-pri); flex-shrink: 0; margin-block-start: 3px; }
  .thanks-step strong { display: block; font-size: 0.95rem; color: var(--clr-txt); margin-block-end: 3px; }
  .thanks-step p { font-size: 0.875rem; color: var(--clr-txt2); line-height: 1.7; }
  .thanks-btn { margin-block-start: var(--sp-md); }

  
  .legal-sec { background: var(--clr-bg); }
  .legal-intro {
    max-inline-size: 860px;
    margin-inline: auto;
    margin-block-end: var(--sp-xl);
    padding: var(--sp-lg) var(--sp-xl);
    background: var(--clr-bg2);
    border-radius: var(--rad-lg);
    border: 1px solid var(--clr-border);
    font-size: 0.92rem;
    color: var(--clr-txt2);
    line-height: 1.8;
  }
}

@layer utilities {
  
  .cc-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 200;
    background: var(--clr-hero-dark);
    color: rgba(253,250,246,0.9);
    padding: 12px clamp(1rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transform: translateY(-100%);
    transition: transform var(--transition-slow);
    border-block-end: 1px solid rgba(253,250,246,0.1);
  }
  .cc-bar.visible { transform: translateY(0); }

  .cc-txt {
    font-size: 0.85rem;
    flex: 1;
    min-inline-size: 200px;
    line-height: 1.5;
  }
  .cc-txt a { color: var(--clr-acc-lt); text-decoration: underline; }

  .cc-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cc-btn {
    padding: 7px 16px;
    border-radius: var(--rad-full);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--ff-body);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    border: 1.5px solid transparent;
    white-space: nowrap;
    min-block-size: 36px;
    min-inline-size: 44px;
  }
  .cc-btn:hover { transform: translateY(-1px); }
  .cc-btn-accept { background: var(--clr-pri); color: #fff; }
  .cc-btn-accept:hover { background: var(--clr-pri-lt); }
  .cc-btn-reject { background: transparent; color: rgba(253,250,246,0.6); border-color: rgba(253,250,246,0.2); }
  .cc-btn-reject:hover { border-color: rgba(253,250,246,0.5); color: #fff; }
  .cc-btn-custom { background: transparent; color: rgba(253,250,246,0.6); border-color: rgba(253,250,246,0.2); }
  .cc-btn-custom:hover { border-color: rgba(253,250,246,0.5); color: #fff; }

  
  .cc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(26,18,8,0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }
  .cc-modal-overlay.open { opacity: 1; pointer-events: all; }
  .cc-modal {
    background: var(--clr-surface);
    border-radius: var(--rad-xl);
    padding: var(--sp-xl);
    max-inline-size: 520px;
    inline-size: 100%;
    max-block-size: 90dvh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: scale(0.95);
    transition: transform var(--transition-base);
  }
  .cc-modal-overlay.open .cc-modal { transform: scale(1); }
  .cc-modal h3 {
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: 1.2rem;
    margin-block-end: var(--sp-md);
    color: var(--clr-txt);
  }
  .cc-modal-cats { display: flex; flex-direction: column; gap: var(--sp-sm); margin-block: var(--sp-lg); }
  .cc-cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--clr-bg2);
    border-radius: var(--rad-md);
    border: 1px solid var(--clr-border);
    gap: var(--sp-md);
  }
  .cc-cat-info { flex: 1; }
  .cc-cat-info strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--clr-txt); margin-block-end: 2px; }
  .cc-cat-info span { font-size: 0.8rem; color: var(--clr-txt3); line-height: 1.5; }
  .cc-toggle {
    position: relative;
    inline-size: 44px;
    block-size: 24px;
    flex-shrink: 0;
  }
  .cc-toggle input { opacity: 0; inline-size: 0; block-size: 0; position: absolute; }
  .cc-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--clr-border);
    border-radius: var(--rad-full);
    cursor: pointer;
    transition: background var(--transition-base);
  }
  .cc-toggle-slider::before {
    content: '';
    position: absolute;
    inline-size: 18px;
    block-size: 18px;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-sm);
  }
  .cc-toggle input:checked + .cc-toggle-slider { background: var(--clr-sec); }
  .cc-toggle input:checked + .cc-toggle-slider::before { transform: translateX(20px); }
  .cc-toggle input:disabled + .cc-toggle-slider { opacity: 0.7; cursor: not-allowed; }
  .cc-modal-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 599px) {
  .step-item { grid-template-columns: 52px 1fr; gap: var(--sp-md); }
  .sticky-content { padding-inline: clamp(1rem, 4vw, 2rem); }
  .chat-bubble-a { max-inline-size: 100%; }
  .cc-btns { inline-size: 100%; justify-content: flex-end; }
}