@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 { min-height: 100vh; display: flex; flex-direction: column; }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  button { cursor: pointer; border: none; background: none; font: inherit; }
  input, textarea, select { font: inherit; }
  table { border-collapse: collapse; width: 100%; }
}

@layer tokens {
  :root {
    --clr-bg: #f5f3ff;
    --clr-bg2: #ede9fe;
    --clr-surface: #ffffff;
    --clr-surface2: #faf8ff;
    --clr-border: rgba(139, 92, 246, 0.15);
    --clr-primary: #7c3aed;
    --clr-primary-dark: #5b21b6;
    --clr-primary-light: #a78bfa;
    --clr-secondary: #0ea5e9;
    --clr-accent: #f59e0b;
    --clr-text: #1e1b2e;
    --clr-text-muted: #6b6880;
    --clr-text-light: #9ca3af;
    --clr-blob1: rgba(124, 58, 237, 0.28);
    --clr-blob2: rgba(14, 165, 233, 0.22);
    --clr-blob3: rgba(245, 158, 11, 0.18);
    --clr-blob4: rgba(167, 139, 250, 0.2);
    --clr-blob5: rgba(56, 189, 248, 0.18);

    --ff-head: 'Urbanist', sans-serif;
    --ff-body: 'DM Sans', sans-serif;

    --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);
    --fs-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.05rem);
    --fs-md: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
    --fs-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
    --fs-3xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    --rad-sm: 8px;
    --rad-md: 14px;
    --rad-lg: 20px;
    --rad-xl: 28px;
    --rad-2xl: 40px;
    --rad-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(30,27,46,0.06), 0 1px 2px rgba(30,27,46,0.04);
    --shadow-md: 0 4px 12px rgba(124,58,237,0.08), 0 2px 4px rgba(30,27,46,0.06);
    --shadow-lg: 0 10px 30px rgba(124,58,237,0.12), 0 4px 10px rgba(30,27,46,0.08);
    --shadow-xl: 0 20px 50px rgba(124,58,237,0.16), 0 8px 20px rgba(30,27,46,0.1);
    --shadow-glow: 0 0 40px rgba(124,58,237,0.2);

    --trans-fast: 150ms ease;
    --trans-base: 250ms ease;
    --trans-slow: 400ms ease;
    --trans-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@layer layout {
  body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    line-height: 1.65;
    overflow-x: hidden;
  }

  main { flex: 1; }

  .sec {
    position: relative;
    padding: var(--sp-20) var(--sp-6);
    overflow: hidden;
  }

  .sec-title {
    font-family: var(--ff-head);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.2;
    margin-bottom: var(--sp-6);
  }

  .sec-label {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-primary);
    background: rgba(124, 58, 237, 0.08);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--rad-full);
    margin-bottom: var(--sp-4);
  }

  .sec-intro {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
    max-width: 60ch;
    margin-bottom: var(--sp-12);
    line-height: 1.7;
  }

  @media (min-width: 768px) {
    .sec { padding: var(--sp-24) var(--sp-12); }
  }

  @media (min-width: 1200px) {
    .sec { padding: var(--sp-24) clamp(var(--sp-12), 8vw, 120px); }
  }
}

@layer components {

  
  .blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
  }
  .blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--clr-blob1) 0%, transparent 70%); filter: blur(90px); top: -200px; left: -200px; animation: blobDrift1 18s ease-in-out infinite alternate; }
  .blob-2 { width: 500px; height: 500px; background: radial-gradient(circle, var(--clr-blob2) 0%, transparent 70%); filter: blur(100px); top: 100px; right: -150px; animation: blobDrift2 22s ease-in-out infinite alternate; }
  .blob-3 { width: 400px; height: 400px; background: radial-gradient(circle, var(--clr-blob3) 0%, transparent 70%); filter: blur(80px); bottom: -100px; left: 30%; animation: blobDrift3 16s ease-in-out infinite alternate; }
  .blob-4 { width: 700px; height: 700px; background: radial-gradient(circle, var(--clr-blob4) 0%, transparent 70%); filter: blur(120px); top: -100px; right: -200px; animation: blobDrift1 20s ease-in-out infinite alternate; }
  .blob-5 { width: 500px; height: 500px; background: radial-gradient(circle, var(--clr-blob5) 0%, transparent 70%); filter: blur(100px); bottom: 0; left: -100px; animation: blobDrift2 25s ease-in-out infinite alternate; }
  .blob-6 { width: 450px; height: 450px; background: radial-gradient(circle, var(--clr-blob1) 0%, transparent 70%); filter: blur(110px); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: blobDrift3 19s ease-in-out infinite alternate; }
  .blob-7 { width: 600px; height: 600px; background: radial-gradient(circle, var(--clr-blob2) 0%, transparent 70%); filter: blur(130px); bottom: -200px; right: -100px; animation: blobDrift1 23s ease-in-out infinite alternate; }
  .blob-8 { width: 800px; height: 800px; background: radial-gradient(circle, var(--clr-blob4) 0%, transparent 60%); filter: blur(150px); top: 50%; left: 50%; transform: translate(-50%,-50%); }

  @keyframes blobDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(40px, 30px) scale(1.08); } }
  @keyframes blobDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-30px, 50px) scale(0.95); } }
  @keyframes blobDrift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(20px, -40px) scale(1.05); } }

  
  .hdr {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    padding: var(--sp-5) var(--sp-6);
    transition: padding var(--trans-base), background var(--trans-base), box-shadow var(--trans-base);
  }
  .hdr.scrolled {
    padding: var(--sp-3) var(--sp-6);
    background: rgba(245, 243, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(124,58,237,0.1), 0 1px 4px rgba(30,27,46,0.06);
  }
  .hdr-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; }
  .hdr-logo img { transition: width var(--trans-base), height var(--trans-base); }
  .hdr.scrolled .hdr-logo img { width: 130px; height: 32px; }

  .hdr-burger {
    width: 44px; height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    border-radius: var(--rad-md);
    transition: background var(--trans-fast);
    z-index: 910;
  }
  .hdr-burger:hover { background: rgba(124,58,237,0.08); }
  .hdr-burger span {
    display: block; width: 22px; height: 2px;
    background: var(--clr-text);
    border-radius: var(--rad-full);
    transition: transform var(--trans-base), opacity var(--trans-base), width var(--trans-base);
  }
  .hdr-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr-burger.open span:nth-child(2) { opacity: 0; width: 0; }
  .hdr-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  
  .desk-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1800;
    padding: var(--sp-5) var(--sp-6);
    transition: padding var(--trans-base);
  }
  .desk-nav.scrolled { padding: var(--sp-3) var(--sp-6); }
  .desk-nav-inner {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--sp-2); max-width: 1400px; margin: 0 auto;
  }
  .desk-nav-lnk {
    font-size: var(--fs-sm); font-weight: 500;
    color: var(--clr-text-muted);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--rad-full);
    transition: color var(--trans-fast), background var(--trans-fast);
  }
  .desk-nav-lnk:hover, .desk-nav-lnk.active { color: var(--clr-primary); background: rgba(124,58,237,0.08); }
  .desk-nav-cta {
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--clr-surface);
    background: var(--clr-primary);
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--rad-full);
    transition: background var(--trans-fast), transform var(--trans-spring), box-shadow var(--trans-fast);
    box-shadow: var(--shadow-md);
  }
  .desk-nav-cta:hover { background: var(--clr-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
  .desk-nav-cta.active { background: var(--clr-primary-dark); }

  @media (min-width: 900px) {
    .desk-nav { display: block; }
    .hdr-burger { display: none; }
  }

  
  .mob-sheet { position: fixed; inset: 0; z-index: 950; pointer-events: none; }
  .mob-sheet.open { pointer-events: auto; }
  .mob-sheet-overlay {
    position: absolute; inset: 0;
    background: rgba(30,27,46,0.5);
    opacity: 0; transition: opacity var(--trans-base);
    backdrop-filter: blur(4px);
  }
  .mob-sheet.open .mob-sheet-overlay { opacity: 1; }
  .mob-sheet-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--clr-surface);
    border-radius: var(--rad-2xl) var(--rad-2xl) 0 0;
    padding: var(--sp-3) var(--sp-6) var(--sp-10);
    transform: translateY(100%);
    transition: transform var(--trans-slow) cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -10px 40px rgba(124,58,237,0.15), 0 -2px 8px rgba(30,27,46,0.08);
  }
  .mob-sheet.open .mob-sheet-panel { transform: translateY(0); }
  .mob-sheet-handle {
    width: 40px; height: 4px;
    background: var(--clr-border);
    border-radius: var(--rad-full);
    margin: 0 auto var(--sp-6);
  }
  .mob-nav { display: flex; flex-direction: column; gap: var(--sp-2); }
  .mob-nav-lnk {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-md); font-weight: 500;
    color: var(--clr-text);
    padding: var(--sp-4) var(--sp-4);
    border-radius: var(--rad-lg);
    transition: background var(--trans-fast), color var(--trans-fast), transform var(--trans-fast);
    min-height: 52px;
  }
  .mob-nav-lnk i { width: 20px; color: var(--clr-primary-light); }
  .mob-nav-lnk:hover, .mob-nav-lnk.active { background: rgba(124,58,237,0.07); color: var(--clr-primary); }
  .mob-nav-lnk:active { transform: scale(0.98); }
  .mob-nav-cta {
    background: var(--clr-primary); color: var(--clr-surface);
    border-radius: var(--rad-lg);
    margin-top: var(--sp-2);
  }
  .mob-nav-cta i { color: rgba(255,255,255,0.8); }
  .mob-nav-cta:hover { background: var(--clr-primary-dark); color: var(--clr-surface); }

  
  .sidebar-cta {
    position: fixed;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 700;
    transition: right var(--trans-slow);
  }
  .sidebar-cta.visible { right: 0; }
  .sidebar-cta-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-2);
    background: var(--clr-primary);
    color: var(--clr-surface);
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--rad-lg) 0 0 var(--rad-lg);
    font-size: var(--fs-xs); font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-lg);
    transition: background var(--trans-fast), padding var(--trans-base), box-shadow var(--trans-fast);
  }
  .sidebar-cta-btn i { font-size: 1.1rem; writing-mode: horizontal-tb; }
  .sidebar-cta-btn:hover { background: var(--clr-primary-dark); padding-right: var(--sp-4); box-shadow: var(--shadow-xl); }

  
  .btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--rad-full);
    transition: transform var(--trans-spring), box-shadow var(--trans-fast), background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
    cursor: pointer; border: 2px solid transparent;
    text-align: center;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn-primary {
    background: var(--clr-primary); color: var(--clr-surface);
    box-shadow: var(--shadow-md), 0 0 0 0 rgba(124,58,237,0);
  }
  .btn-primary:hover { background: var(--clr-primary-dark); box-shadow: var(--shadow-lg), 0 0 20px rgba(124,58,237,0.3); }
  .btn-ghost {
    background: transparent; color: var(--clr-primary);
    border-color: rgba(124,58,237,0.3);
  }
  .btn-ghost:hover { background: rgba(124,58,237,0.06); border-color: var(--clr-primary); }
  .btn-lg { font-size: var(--fs-md); padding: var(--sp-4) var(--sp-8); }

  
  .sec-hero {
    min-height: 100vh;
    display: flex; align-items: center;
    padding-top: calc(var(--sp-20) + 80px);
  }
  .hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-12); align-items: center;
    max-width: 1300px; margin: 0 auto; width: 100%;
  }
  @media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  }
  .hero-tag {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--clr-primary);
    background: rgba(124,58,237,0.08);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--rad-full);
    margin-bottom: var(--sp-5);
  }
  .hero-h1 {
    font-family: var(--ff-head);
    font-size: var(--fs-3xl);
    font-weight: 800; line-height: 1.1;
    color: var(--clr-text);
    margin-bottom: var(--sp-6);
  }
  .hero-accent {
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero-sub {
    font-size: var(--fs-md); color: var(--clr-text-muted);
    line-height: 1.7; max-width: 50ch;
    margin-bottom: var(--sp-8);
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

  .hero-atropos { width: 100%; max-width: 520px; margin: 0 auto; }
  .hero-img {
    width: 100%; aspect-ratio: 4/3;
    object-fit: cover; border-radius: var(--rad-xl);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
  }
  .hero-card-badge {
    position: absolute; bottom: 20px; left: -20px;
    display: flex; align-items: center; gap: var(--sp-2);
    background: var(--clr-surface);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--rad-lg);
    font-size: var(--fs-sm); font-weight: 600; color: var(--clr-primary);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--clr-border);
  }
  .hero-card-float {
    position: absolute; top: -16px; right: -16px;
    display: flex; align-items: center; gap: var(--sp-2);
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
    color: white;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--rad-lg);
    font-size: var(--fs-sm); font-weight: 600;
    box-shadow: var(--shadow-lg);
  }
  .hero-card-wrap { position: relative; z-index: 1; }

  
  .sec-industries { text-align: center; }
  .sec-industries .sec-title, .sec-industries .sec-intro { margin-left: auto; margin-right: auto; }
  .ind-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-6); position: relative; z-index: 1;
    max-width: 1300px; margin: 0 auto;
  }
  @media (min-width: 600px) { .ind-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } }

  .ind-crd {
    background: var(--clr-surface);
    border-radius: var(--rad-xl);
    overflow: hidden;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--trans-spring), box-shadow var(--trans-base);
    text-align: left;
  }
  .ind-crd:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
  .ind-crd-img { height: 180px; overflow: hidden; }
  .ind-crd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--trans-slow); }
  .ind-crd:hover .ind-crd-img img { transform: scale(1.05); }
  .ind-crd-body { padding: var(--sp-5); }
  .ind-ico {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(124,58,237,0.1); color: var(--clr-primary);
    border-radius: var(--rad-md); font-size: 1.1rem;
    margin-bottom: var(--sp-3);
  }
  .ind-crd-body h3 {
    font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700;
    margin-bottom: var(--sp-3); color: var(--clr-text);
  }
  .ind-crd-body p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.6; margin-bottom: var(--sp-4); }
  .ind-lnk {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); font-weight: 600; color: var(--clr-primary);
    transition: gap var(--trans-fast), color var(--trans-fast);
  }
  .ind-lnk:hover { gap: var(--sp-3); color: var(--clr-primary-dark); }
  .ind-lnk i { font-size: 0.75rem; transition: transform var(--trans-fast); }
  .ind-lnk:hover i { transform: translateX(3px); }

  
  .proc-wrap {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-12); align-items: start;
    max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 900px) { .proc-wrap { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } }
  .proc-left p { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-8); }
  .proc-img { width: 100%; border-radius: var(--rad-xl); object-fit: cover; aspect-ratio: 16/10; box-shadow: var(--shadow-lg); }
  .proc-steps { display: flex; flex-direction: column; gap: var(--sp-6); }
  .proc-step {
    display: flex; gap: var(--sp-5); align-items: flex-start;
    padding: var(--sp-5);
    background: var(--clr-surface);
    border-radius: var(--rad-lg);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--trans-spring), box-shadow var(--trans-base), border-color var(--trans-base);
  }
  .proc-step:hover { transform: translateX(6px); box-shadow: var(--shadow-md); border-color: rgba(124,58,237,0.25); }
  .proc-step-num {
    font-family: var(--ff-head); font-size: var(--fs-xl); font-weight: 800;
    color: var(--clr-primary-light); opacity: 0.5;
    min-width: 40px; line-height: 1;
    transition: opacity var(--trans-base), color var(--trans-base);
  }
  .proc-step:hover .proc-step-num { opacity: 1; color: var(--clr-primary); }
  .proc-step-body h4 {
    font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700;
    color: var(--clr-text); margin-bottom: var(--sp-2);
  }
  .proc-step-body p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.6; }

  
  .sec-services { text-align: center; }
  .sec-services .sec-title { margin-left: auto; margin-right: auto; }
  .srv-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-5); max-width: 1300px; margin: 0 auto;
    position: relative; z-index: 1;
    counter-reset: srv-counter;
  }
  @media (min-width: 600px) { .srv-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .srv-grid { grid-template-columns: repeat(3, 1fr); } }
  .srv-grid .crd:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; }
  @media (min-width: 1000px) { .srv-grid .crd:last-child:nth-child(odd) { grid-column: auto; max-width: none; margin: 0; } }

  .crd {
    background: var(--clr-surface);
    border-radius: var(--rad-xl);
    padding: var(--sp-6);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: transform var(--trans-spring), box-shadow var(--trans-base), border-color var(--trans-base);
    position: relative;
    counter-increment: srv-counter;
  }
  .crd::before {
    content: counter(srv-counter, decimal-leading-zero);
    position: absolute; top: var(--sp-5); right: var(--sp-5);
    font-family: var(--ff-head); font-size: var(--fs-xl); font-weight: 800;
    color: var(--clr-primary); opacity: 0.08;
    transition: opacity var(--trans-base);
  }
  .crd:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); border-color: rgba(124,58,237,0.2); }
  .crd:hover::before { opacity: 0.15; }
  .crd-ico {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(14,165,233,0.08));
    color: var(--clr-primary); font-size: 1.3rem;
    border-radius: var(--rad-lg); margin-bottom: var(--sp-4);
    transition: background var(--trans-base), transform var(--trans-spring);
  }
  .crd:hover .crd-ico { background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(14,165,233,0.14)); transform: scale(1.08); }
  .crd-txt h3 {
    font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700;
    color: var(--clr-text); margin-bottom: var(--sp-3);
  }
  .crd-txt p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.65; }

  
  .about-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-12); align-items: center;
    max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } }
  .about-img-wrap { position: relative; }
  .about-img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--rad-xl); box-shadow: var(--shadow-xl);
  }
  .about-img-tag {
    position: absolute; bottom: -16px; right: -16px;
    display: flex; align-items: center; gap: var(--sp-2);
    background: var(--clr-primary); color: white;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--rad-lg);
    font-size: var(--fs-sm); font-weight: 600;
    box-shadow: var(--shadow-lg);
  }
  .about-content p {
    font-size: var(--fs-md); color: var(--clr-text-muted);
    line-height: 1.7; margin-bottom: var(--sp-5);
  }
  .about-points { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }
  .about-pt {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-sm); font-weight: 500; color: var(--clr-text);
  }
  .about-pt i { color: var(--clr-primary); width: 16px; flex-shrink: 0; }

  
  .sec-cta-band {
    background: linear-gradient(135deg, var(--clr-primary) 0%, #4f46e5 50%, var(--clr-secondary) 100%);
    padding: var(--sp-16) var(--sp-6);
  }
  .sec-cta-band .blob { opacity: 0.15; }
  .cta-band-inner {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-8); text-align: center;
    max-width: 800px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 768px) {
    .cta-band-inner { flex-direction: row; text-align: left; justify-content: space-between; max-width: 1300px; }
  }
  .cta-band-text h2 {
    font-family: var(--ff-head); font-size: var(--fs-2xl); font-weight: 700;
    color: white; margin-bottom: var(--sp-3); line-height: 1.2;
  }
  .cta-band-text p { font-size: var(--fs-md); color: rgba(255,255,255,0.8); line-height: 1.6; }
  .sec-cta-band .btn-primary {
    background: white; color: var(--clr-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    white-space: nowrap; flex-shrink: 0;
  }
  .sec-cta-band .btn-primary:hover { background: var(--clr-bg); box-shadow: 0 8px 30px rgba(0,0,0,0.25); }

  
  .sec-page-hero {
    padding-top: calc(var(--sp-16) + 100px);
    padding-bottom: var(--sp-12);
  }
  .pg-hero-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
  .pg-hero-h1 {
    font-family: var(--ff-head); font-size: var(--fs-3xl); font-weight: 800;
    line-height: 1.15; color: var(--clr-text); margin-bottom: var(--sp-6);
  }
  .pg-hero-sub {
    font-size: var(--fs-md); color: var(--clr-text-muted);
    line-height: 1.7; max-width: 60ch;
  }

  
  .res-intro-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-12); align-items: center;
    max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 900px) { .res-intro-grid { grid-template-columns: 1fr 1fr; } }
  .res-intro-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rad-xl); box-shadow: var(--shadow-xl); }
  .res-intro-text h2 {
    font-family: var(--ff-head); font-size: var(--fs-2xl); font-weight: 700;
    color: var(--clr-text); margin-bottom: var(--sp-5); line-height: 1.2;
  }
  .res-intro-text p { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-4); }

  .chg-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-5); max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 600px) { .chg-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .chg-grid { grid-template-columns: repeat(4, 1fr); } }
  .chg-crd {
    background: var(--clr-surface); border-radius: var(--rad-xl);
    padding: var(--sp-6); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--trans-spring), box-shadow var(--trans-base);
  }
  .chg-crd:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
  .chg-ico {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: rgba(124,58,237,0.1); color: var(--clr-primary);
    border-radius: var(--rad-md); font-size: 1.2rem; margin-bottom: var(--sp-4);
  }
  .chg-crd h3 { font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-3); }
  .chg-crd p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.65; }

  .case-list { display: flex; flex-direction: column; gap: var(--sp-12); max-width: 1300px; margin: 0 auto; position: relative; z-index: 1; }
  .case-item {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-8); align-items: center;
    background: var(--clr-surface); border-radius: var(--rad-2xl);
    padding: var(--sp-8); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
  }
  @media (min-width: 900px) {
    .case-item { grid-template-columns: 1fr 1fr; }
    .case-item-rev .case-img { order: 2; }
    .case-item-rev .case-body { order: 1; }
  }
  .case-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rad-lg); box-shadow: var(--shadow-md); }
  .case-tag {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--clr-primary);
    background: rgba(124,58,237,0.08);
    padding: var(--sp-1) var(--sp-3); border-radius: var(--rad-full);
    margin-bottom: var(--sp-4);
  }
  .case-body h3 { font-family: var(--ff-head); font-size: var(--fs-xl); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-4); }
  .case-body p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-3); }

  
  .audit-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-12); align-items: center;
    max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 900px) { .audit-grid { grid-template-columns: 1fr 1fr; } }
  .audit-content h2 { font-family: var(--ff-head); font-size: var(--fs-2xl); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-5); line-height: 1.2; }
  .audit-content p { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-4); }
  .audit-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rad-xl); box-shadow: var(--shadow-xl); }

  .audit-steps {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-5); max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 700px) { .audit-steps { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1100px) { .audit-steps { grid-template-columns: repeat(4, 1fr); } }
  .audit-step {
    background: var(--clr-surface); border-radius: var(--rad-xl);
    padding: var(--sp-6); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--trans-spring), box-shadow var(--trans-base);
  }
  .audit-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .audit-step-icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(14,165,233,0.08));
    color: var(--clr-primary); font-size: 1.3rem;
    border-radius: var(--rad-lg); margin-bottom: var(--sp-4);
    transition: transform var(--trans-spring);
  }
  .audit-step:hover .audit-step-icon { transform: scale(1.1) rotate(-5deg); }
  .audit-step h3 { font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-3); }
  .audit-step p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.65; }

  .area-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-5); max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
    counter-reset: srv-counter;
  }
  @media (min-width: 600px) { .area-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }

  
  .mgr-ch-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-12); align-items: center;
    max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 900px) { .mgr-ch-grid { grid-template-columns: 1fr 1fr; } }
  .mgr-ch-text h2 { font-family: var(--ff-head); font-size: var(--fs-2xl); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-5); line-height: 1.2; }
  .mgr-ch-text p { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-4); }
  .mgr-ch-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rad-xl); box-shadow: var(--shadow-xl); }

  .sol-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-5); max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 700px) { .sol-grid { grid-template-columns: 1fr 1fr; } }
  .sol-crd {
    background: var(--clr-surface); border-radius: var(--rad-xl);
    padding: var(--sp-7); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--trans-spring), box-shadow var(--trans-base), border-color var(--trans-base);
  }
  .sol-crd:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); border-color: rgba(124,58,237,0.2); }
  .sol-num {
    font-family: var(--ff-head); font-size: var(--fs-3xl); font-weight: 800;
    color: var(--clr-primary); opacity: 0.12;
    line-height: 1; margin-bottom: var(--sp-3);
    transition: opacity var(--trans-base);
  }
  .sol-crd:hover .sol-num { opacity: 0.25; }
  .sol-crd h3 { font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-3); }
  .sol-crd p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.65; }

  .fmt-wrap {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-12); align-items: center;
    max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (min-width: 900px) { .fmt-wrap { grid-template-columns: 1fr 1fr; } }
  .fmt-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--rad-xl); box-shadow: var(--shadow-xl); }
  .fmt-content h2 { font-family: var(--ff-head); font-size: var(--fs-2xl); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-5); line-height: 1.2; }
  .fmt-content p { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-4); }
  .fmt-tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }
  .fmt-tag {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); font-weight: 500; color: var(--clr-primary);
    background: rgba(124,58,237,0.08);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--rad-full);
  }
  .fmt-tag i { font-size: 0.7rem; }

  .faq-list { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
  .faq-item {
    background: var(--clr-surface); border-radius: var(--rad-lg);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--trans-base), border-color var(--trans-base);
  }
  .faq-item:hover { box-shadow: var(--shadow-md); border-color: rgba(124,58,237,0.2); }
  .faq-q {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    font-family: var(--ff-head); font-size: var(--fs-md); font-weight: 700;
    color: var(--clr-text); cursor: pointer;
    list-style: none;
    transition: color var(--trans-fast);
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q::after {
    content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--clr-primary); font-size: 0.9rem;
    transition: transform var(--trans-base);
    flex-shrink: 0; margin-left: var(--sp-4);
  }
  details[open] .faq-q::after { transform: rotate(180deg); }
  details[open] .faq-q { color: var(--clr-primary); }
  .faq-a { padding: 0 var(--sp-6) var(--sp-5); }
  .faq-a p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.7; }

  
  .contact-main {
    position: relative; padding: calc(var(--sp-16) + 80px) var(--sp-6) var(--sp-16);
    overflow: hidden;
  }
  .contact-wrap { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
  .contact-header { text-align: center; margin-bottom: var(--sp-12); }
  .contact-h1 {
    font-family: var(--ff-head); font-size: var(--fs-3xl); font-weight: 800;
    color: var(--clr-text); margin-bottom: var(--sp-4); line-height: 1.1;
  }
  .contact-sub { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; max-width: 50ch; margin: 0 auto; }

  .contact-tips {
    background: var(--clr-surface); border-radius: var(--rad-xl);
    padding: var(--sp-8); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md); margin-bottom: var(--sp-10);
  }
  .tips-title {
    font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700;
    color: var(--clr-text); margin-bottom: var(--sp-6);
  }
  .tips-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
  @media (min-width: 600px) { .tips-grid { grid-template-columns: repeat(3, 1fr); } }
  .tip-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
  .tip-ico {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(124,58,237,0.1); color: var(--clr-primary);
    border-radius: var(--rad-md); font-size: 1rem;
  }
  .tip-body h4 { font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-1); }
  .tip-body p { font-size: var(--fs-xs); color: var(--clr-text-muted); line-height: 1.6; }

  
  .frm {
    background: var(--clr-surface); border-radius: var(--rad-2xl);
    padding: var(--sp-10) var(--sp-8);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--sp-12);
  }
  @media (max-width: 600px) { .frm { padding: var(--sp-6) var(--sp-5); } }
  .frm-field { margin-bottom: var(--sp-6); }
  .frm-lbl {
    display: block; font-size: var(--fs-sm); font-weight: 600;
    color: var(--clr-text); margin-bottom: var(--sp-2);
  }
  .frm-inp {
    width: 100%; padding: var(--sp-4) var(--sp-4);
    background: var(--clr-bg); border: 2px solid var(--clr-border);
    border-radius: var(--rad-md); font-size: var(--fs-base);
    color: var(--clr-text);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
    outline: none;
  }
  .frm-inp:focus {
    border-color: var(--clr-primary);
    background: var(--clr-surface);
    box-shadow: 0 0 0 4px rgba(124,58,237,0.1);
  }
  .frm-inp::placeholder { color: var(--clr-text-light); }
  .frm-textarea { resize: vertical; min-height: 140px; }
  .frm-hint { display: block; font-size: var(--fs-xs); color: var(--clr-text-light); margin-top: var(--sp-2); }
  .frm-check-field { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .frm-check-lbl {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    font-size: var(--fs-sm); color: var(--clr-text-muted);
    cursor: pointer; line-height: 1.5;
  }
  .frm-check {
    width: 20px; height: 20px; flex-shrink: 0;
    accent-color: var(--clr-primary); cursor: pointer;
    margin-top: 2px;
  }
  .frm-check-lbl a { color: var(--clr-primary); text-decoration: underline; text-underline-offset: 2px; }
  .frm-error {
    color: #dc2626; font-size: var(--fs-sm);
    padding: var(--sp-3); border-radius: var(--rad-md);
    background: rgba(220,38,38,0.06);
    margin-bottom: var(--sp-4);
    display: none;
  }
  .frm-error:not(:empty) { display: block; }
  .frm-submit { width: 100%; justify-content: center; margin-top: var(--sp-4); }

  .contact-info-row {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-4); margin-bottom: var(--sp-10);
  }
  @media (min-width: 600px) { .contact-info-row { grid-template-columns: repeat(3, 1fr); } }
  .ci-item {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    background: var(--clr-surface); border-radius: var(--rad-lg);
    padding: var(--sp-5); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--trans-spring), box-shadow var(--trans-base);
  }
  .ci-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .ci-item i { color: var(--clr-primary); font-size: 1.1rem; margin-top: 3px; flex-shrink: 0; }
  .ci-item div { display: flex; flex-direction: column; gap: var(--sp-1); }
  .ci-item strong { font-size: var(--fs-sm); font-weight: 600; color: var(--clr-text); }
  .ci-item span, .ci-item a { font-size: var(--fs-sm); color: var(--clr-text-muted); transition: color var(--trans-fast); }
  .ci-item a:hover { color: var(--clr-primary); }
  .contact-map { border-radius: var(--rad-xl); overflow: hidden; box-shadow: var(--shadow-lg); }

  
  .thanks-main {
    position: relative; min-height: 80vh;
    display: flex; align-items: center; justify-content: center;
    padding: calc(var(--sp-16) + 80px) var(--sp-6) var(--sp-16);
    overflow: hidden;
  }
  .thanks-wrap { text-align: center; position: relative; z-index: 1; max-width: 500px; }
  .envelope-anim { margin: 0 auto var(--sp-8); width: 120px; height: 90px; }
  .env-body {
    position: relative; width: 120px; height: 90px;
    background: var(--clr-surface);
    border-radius: var(--rad-sm);
    border: 2px solid var(--clr-primary);
    box-shadow: var(--shadow-lg);
    overflow: visible;
  }
  .env-flap {
    position: absolute; top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-primary));
    clip-path: polygon(0 0, 50% 60%, 100% 0);
    transform-origin: top center;
    animation: flapOpen 1s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: rotateX(0deg);
    z-index: 2;
  }
  .env-letter {
    position: absolute; bottom: 0; left: 10px; right: 10px;
    height: 75%; background: var(--clr-surface);
    border-radius: var(--rad-sm) var(--rad-sm) 0 0;
    border: 1px solid var(--clr-border);
    transform: translateY(0);
    animation: letterRise 0.8s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    padding: var(--sp-3);
    z-index: 3;
  }
  .env-letter-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .env-letter-lines span {
    display: block; height: 3px; border-radius: var(--rad-full);
    background: var(--clr-border);
    animation: lineAppear 0.4s ease forwards;
    opacity: 0;
  }
  .env-letter-lines span:nth-child(1) { animation-delay: 1.8s; width: 80%; }
  .env-letter-lines span:nth-child(2) { animation-delay: 2s; width: 60%; }
  .env-letter-lines span:nth-child(3) { animation-delay: 2.2s; width: 70%; }

  @keyframes flapOpen { to { transform: rotateX(180deg); } }
  @keyframes letterRise { from { transform: translateY(0); } to { transform: translateY(-30px); } }
  @keyframes lineAppear { to { opacity: 1; } }

  .thanks-text { animation: fadeUp 0.6s 2.5s ease both; }
  .thanks-h1 {
    font-family: var(--ff-head); font-size: var(--fs-2xl); font-weight: 800;
    color: var(--clr-text); margin-bottom: var(--sp-4);
  }
  .thanks-sub { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-8); }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

  
  .legal-main {
    position: relative; padding: calc(var(--sp-16) + 80px) var(--sp-6) var(--sp-16);
    overflow: hidden;
  }
  .legal-wrap { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
  .legal-header { margin-bottom: var(--sp-10); }
  .legal-header h1 {
    font-family: var(--ff-head); font-size: var(--fs-2xl); font-weight: 800;
    color: var(--clr-text); margin-bottom: var(--sp-3); line-height: 1.2;
  }
  .legal-meta { font-size: var(--fs-sm); color: var(--clr-text-light); margin-bottom: var(--sp-4); }
  .legal-header > p { font-size: var(--fs-md); color: var(--clr-text-muted); line-height: 1.7; }

  .legal-body { display: flex; flex-direction: column; gap: var(--sp-6); }
  .legal-body .faq-item-open {
    background: var(--clr-surface); border-radius: var(--rad-lg);
    padding: var(--sp-6); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
  }
  .legal-body .faq-item-open h2 {
    font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700;
    color: var(--clr-text); margin-bottom: var(--sp-4);
  }
  .legal-body .faq-item-open p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-3); }
  .legal-body .faq-item-open p:last-child { margin-bottom: 0; }
  .legal-body .faq-item-open a { color: var(--clr-primary); text-decoration: underline; text-underline-offset: 2px; }

  .legal-body-alpha .legal-sec, .legal-body-plain .legal-sec {
    background: var(--clr-surface); border-radius: var(--rad-lg);
    padding: var(--sp-6); border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
  }
  .legal-sec h2 {
    font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700;
    color: var(--clr-text); margin-bottom: var(--sp-4);
  }
  .legal-sec h3 {
    font-family: var(--ff-head); font-size: var(--fs-md); font-weight: 700;
    color: var(--clr-text); margin-bottom: var(--sp-3);
    display: flex; align-items: center; gap: var(--sp-2);
  }
  .legal-sec h3 i { color: var(--clr-primary); }
  .legal-sec p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--sp-3); }
  .legal-sec p:last-child { margin-bottom: 0; }
  .legal-sec a { color: var(--clr-primary); text-decoration: underline; text-underline-offset: 2px; }
  .cookie-cat { margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--clr-border); }
  .cookie-cat:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

  .cookie-table-wrap { overflow-x: auto; }
  .cookie-table { font-size: var(--fs-xs); }
  .cookie-table th {
    background: rgba(124,58,237,0.06); text-align: left;
    padding: var(--sp-3) var(--sp-4); font-weight: 600;
    color: var(--clr-text); border-bottom: 1px solid var(--clr-border);
  }
  .cookie-table td {
    padding: var(--sp-3) var(--sp-4); color: var(--clr-text-muted);
    border-bottom: 1px solid rgba(139,92,246,0.06);
  }
  .cookie-table tr:last-child td { border-bottom: none; }
  .cookie-table tr:hover td { background: rgba(124,58,237,0.03); }

  
  #cookie-bar {
    background: var(--clr-text);
    color: rgba(255,255,255,0.9);
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-xs);
    display: none;
    transition: max-height var(--trans-slow), opacity var(--trans-base);
    overflow: hidden;
    position: fixed;
    bottom: 0;
    z-index: 999;
  }
  #cookie-bar.visible { display: block; }
  .ck-bar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); max-width: 1400px; margin: 0 auto;
    flex-wrap: wrap;
  }
  .ck-bar-text { flex: 1; min-width: 200px; line-height: 1.5; }
  .ck-bar-text a { color: var(--clr-primary-light); text-decoration: underline; text-underline-offset: 2px; }
  .ck-bar-btns { display: flex; gap: var(--sp-2); flex-shrink: 0; }
  .ck-btn {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--rad-full);
    font-size: var(--fs-xs); font-weight: 600;
    cursor: pointer; border: none;
    transition: background var(--trans-fast), transform var(--trans-fast);
  }
  .ck-btn:hover { transform: translateY(-1px); }
  .ck-btn-accept { background: var(--clr-primary); color: white; }
  .ck-btn-accept:hover { background: var(--clr-primary-dark); }
  .ck-btn-reject { background: rgba(255,255,255,0.15); color: white; }
  .ck-btn-reject:hover { background: rgba(255,255,255,0.25); }

  
  .ftr {
    background: var(--clr-text);
    color: rgba(255,255,255,0.75);
    margin-top: auto;
  }
  .ftr-inner {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-8); padding: var(--sp-16) var(--sp-6);
    max-width: 1400px; margin: 0 auto;
  }
  @media (min-width: 600px) { .ftr-inner { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .ftr-inner { grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: var(--sp-12); } }
  .ftr-brand img { margin-bottom: var(--sp-4); filter: brightness(0) invert(1); opacity: 0.9; }
  .ftr-brand p { font-size: var(--fs-sm); line-height: 1.6; }
  .ftr-nav h4, .ftr-contact h4, .ftr-legal h4 {
    font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: 700;
    color: white; margin-bottom: var(--sp-4); letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .ftr-nav, .ftr-legal { display: flex; flex-direction: column; gap: var(--sp-1); }
  .ftr-nav a, .ftr-legal a {
    font-size: var(--fs-sm); color: rgba(255,255,255,0.6);
    padding: var(--sp-1) 0;
    transition: color var(--trans-fast), padding-left var(--trans-fast);
  }
  .ftr-nav a:hover, .ftr-legal a:hover { color: white; padding-left: var(--sp-2); }
  .ftr-contact { display: flex; flex-direction: column; gap: var(--sp-3); }
  .ftr-contact p { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
  .ftr-contact i { color: var(--clr-primary-light); width: 16px; flex-shrink: 0; margin-top: 3px; }
  .ftr-contact a { color: rgba(255,255,255,0.6); transition: color var(--trans-fast); }
  .ftr-contact a:hover { color: white; }
  .ftr-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: var(--sp-5) var(--sp-6);
    text-align: center;
    font-size: var(--fs-xs); color: rgba(255,255,255,0.4);
  }

  
  .hero-atropos { border-radius: var(--rad-xl); }
  .atropos-inner { border-radius: var(--rad-xl); overflow: visible; }

  
  .reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
}

@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: 0;
  }
  .text-center { text-align: center; }
  .pos-rel { position: relative; }
  .z1 { position: relative; z-index: 1; }
}