/* =========================================================
   DAXOLABO / DAXOOPS — Design system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500&display=swap');

:root{
  /* Couleurs */
  --gold: #E09C05;
  --gold-hover: #B87C03;
  --gold-light: #FDF3DF;
  --ink: #141210;
  --text-secondary: #5C554C;
  --bg-page: #FFFDF9;
  --bg-alt: #F6F1E8;
  --surface: #FFFFFF;
  --border: #E8E0D2;
  --bg-dark: #1A1713;
  --success: #1F7A4C;
  --error: #C4342C;

  /* Ombres */
  --shadow-rest: 0 1px 2px rgba(20,18,16,.06);
  --shadow-hover: 0 14px 34px rgba(20,18,16,.10);

  /* Rayons */
  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-img: 14px;
  --radius-field: 12px;

  /* Rythme */
  --space-section-mobile: 64px;
  --space-section-desktop: 112px;
  --container-max: 1200px;

  /* Transitions */
  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --ease-reveal: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin:0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px){
  body{ font-size: 17px; }
}

img{ max-width: 100%; display:block; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3{
  font-family: 'Sora', sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}

h1{ font-size: 32px; font-weight: 700; }
h2{ font-size: 24px; font-weight: 700; }
h3{ font-size: 19px; font-weight: 600; }

@media (min-width: 900px){
  h1{ font-size: 56px; }
  h2{ font-size: 38px; }
  h3{ font-size: 24px; }
}

p{ margin: 0 0 16px; color: var(--text-secondary); max-width: 68ch; }
small, .small-text{ font-size: 14px; }

.container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

section{
  padding: var(--space-section-mobile) 0;
}
@media (min-width: 900px){
  section{ padding: var(--space-section-desktop) 0; }
}

.bg-alt{ background: var(--bg-alt); }
.bg-dark{ background: var(--bg-dark); color: #F6F1E8; }
.bg-dark p{ color: #C9C2B4; }
.bg-dark h1, .bg-dark h2, .bg-dark h3{ color: #FFFDF9; }

.eyebrow-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; }

/* Skip link */
.skip-link{
  position:absolute; left: -999px; top: 0;
  background: var(--ink); color:#fff; padding: 12px 20px;
  z-index: 300; border-radius: 0 0 10px 0;
}
.skip-link:focus{ left: 0; }

/* Focus visible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top: 0; z-index: 200;
  background: transparent;
  transition: background-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), backdrop-filter 200ms var(--ease-standard);
}
.site-header.scrolled{
  background: rgba(255,253,249,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.logo-link{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.logo-link img{ height: 40px; width:auto; }

.main-nav{ display:none; }
@media (min-width: 1000px){
  .main-nav{
    display:flex; align-items:center; gap: 28px;
    font-weight: 500; font-size: 15px;
  }
  .main-nav > a{
    position:relative; padding: 6px 2px; color: var(--ink);
  }
  .main-nav > a[aria-current="page"]{
    box-shadow: inset 0 -2px 0 0 var(--gold);
  }
  .main-nav > a:hover{ color: var(--gold-hover); }
}

/* Sous-menu déroulant (desktop) */
.nav-item-dropdown{ position:relative; }
.nav-parent-link{
  display:inline-flex; align-items:center; gap:4px;
  padding: 6px 2px; color: var(--ink);
}
.nav-parent-link[aria-current="page"]{ box-shadow: inset 0 -2px 0 0 var(--gold); }
.nav-parent-link:hover{ color: var(--gold-hover); }
.nav-caret{ font-size:11px; transition: transform 200ms var(--ease-standard); color: var(--gold-hover); }
.nav-item-dropdown:hover .nav-caret,
.nav-item-dropdown:focus-within .nav-caret{ transform: rotate(180deg); }
.nav-dropdown-panel{
  position:absolute; top: 100%; left:0; margin-top:12px;
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover); padding: 8px; min-width:180px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-standard), visibility 200ms;
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown:focus-within .nav-dropdown-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.nav-dropdown-panel a{
  padding:10px 12px; border-radius: 10px; color: var(--ink); font-weight:500;
}
.nav-dropdown-panel a:hover{ background: var(--gold-light); color: var(--gold-hover); }
.nav-dropdown-panel a[aria-current="page"]{ color: var(--gold-hover); background: var(--gold-light); }

/* Sous-menu (mobile) */
.mobile-submenu{
  list-style:none; margin: 0 0 4px 16px; padding: 0 0 0 14px;
  border-left: 2px solid var(--border);
  display:flex; flex-direction:column;
}
.mobile-submenu .mobile-sub-item a{
  font-size:16px; font-weight:500; padding: 10px 4px; border-bottom:none;
}

.header-actions{ display:flex; align-items:center; gap: 12px; }
.header-actions .btn-primary{ display:none; }
@media (min-width: 1000px){
  .header-actions .btn-primary{ display:inline-flex; }
}

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width: 44px; height:44px; border-radius: 10px;
  border: 1.5px solid var(--ink); background: transparent;
  cursor:pointer;
}
@media (min-width: 1000px){ .nav-toggle{ display:none; } }

.nav-toggle .bar{
  display:block; position:relative; width:20px; height:2px; background: var(--ink);
  transition: transform 200ms var(--ease-standard), opacity 200ms var(--ease-standard);
}
.nav-toggle .bar::before, .nav-toggle .bar::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background: var(--ink);
  transition: transform 200ms var(--ease-standard), top 200ms var(--ease-standard);
}
.nav-toggle .bar::before{ top: -6px; }
.nav-toggle .bar::after{ top: 6px; }
.nav-toggle[aria-expanded="true"] .bar{ background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before{ top:0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after{ top:0; transform: rotate(-45deg); }

.mobile-nav{
  position: fixed; inset: 0 0 0 auto;
  width: min(86vw, 360px); height: 100vh;
  background: var(--bg-page);
  box-shadow: -14px 0 34px rgba(20,18,16,.14);
  transform: translateX(100%);
  transition: transform 280ms var(--ease-standard);
  z-index: 250;
  padding: 20px;
  overflow-y: auto;
  display:flex; flex-direction:column; gap: 24px;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-nav-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.mobile-nav-links a{
  display:block; padding: 14px 4px; font-family:'Sora',sans-serif; font-weight:600; font-size: 20px;
  border-bottom: 1px solid var(--border);
  opacity:0; transform: translateY(10px);
}
.mobile-nav.open .mobile-nav-links a{
  animation: cascade-in 320ms var(--ease-reveal) forwards;
}
.mobile-nav.open .mobile-nav-links a:nth-child(1){ animation-delay: 40ms; }
.mobile-nav.open .mobile-nav-links a:nth-child(2){ animation-delay: 80ms; }
.mobile-nav.open .mobile-nav-links a:nth-child(3){ animation-delay: 120ms; }
.mobile-nav.open .mobile-nav-links a:nth-child(4){ animation-delay: 160ms; }
.mobile-nav.open .mobile-nav-links a:nth-child(5){ animation-delay: 200ms; }
.mobile-nav.open .mobile-nav-links a:nth-child(6){ animation-delay: 240ms; }
.mobile-nav.open .mobile-nav-links a:nth-child(7){ animation-delay: 280ms; }
@keyframes cascade-in{ to{ opacity:1; transform: translateY(0); } }

.nav-scrim{
  position: fixed; inset:0; background: rgba(20,18,16,.4);
  opacity:0; pointer-events:none; transition: opacity 200ms var(--ease-standard);
  z-index: 240;
}
.nav-scrim.open{ opacity:1; pointer-events:auto; }

body.nav-open{ overflow: hidden; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary, .btn-secondary, .btn-tertiary{
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  cursor:pointer; border:none; display:inline-flex; align-items:center; gap:8px;
  transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard), transform 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
  text-align:center; justify-content:center;
}
.btn-primary{
  background: var(--gold); color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 14px 26px;
}
.btn-primary:hover{ background: var(--gold-hover); transform: translateY(-2px); color: var(--ink); }

.btn-secondary{
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 12.5px 26px;
}
.btn-secondary:hover{ background: var(--ink); color:#fff; }
.bg-dark .btn-secondary{ border-color:#fff; color:#fff; }
.bg-dark .btn-secondary:hover{ background:#fff; color: var(--ink); }

.btn-tertiary{
  background:none; color: var(--gold-hover); padding: 4px 0; font-weight:600;
}
.btn-tertiary .arrow{ display:inline-block; transition: transform 200ms var(--ease-standard); }
.btn-tertiary:hover .arrow{ transform: translateX(4px); }
.bg-dark .btn-tertiary{ color: var(--gold); }

button:disabled{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   BADGE
   ========================================================= */
.badge{
  display:inline-block; background: var(--gold-light); color: var(--gold-hover);
  text-transform: uppercase; font-size:12px; letter-spacing: 0.08em;
  font-weight:700; padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.bg-dark .badge{ background: rgba(224,156,5,.15); color: var(--gold); }

/* =========================================================
   CARD
   ========================================================= */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-rest);
  transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
  display:flex; flex-direction:column; gap: 8px; height:100%;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--gold);
}
.card .card-icon{
  width:44px; height:44px; color: var(--gold); margin-bottom: 8px;
}
.card h3{ margin-bottom: 4px; }
.card p{ margin-bottom: 8px; flex:1; }
.card.placeholder{
  background: transparent; border: 1.5px dashed var(--border); box-shadow:none;
  color: var(--text-secondary);
}
.card.placeholder:hover{ transform:none; border-color: var(--border); box-shadow:none; }

.card-grid{
  display:grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 640px){ .card-grid.cols-2{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){
  .card-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
  .card-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
}

/* =========================================================
   FORMS
   ========================================================= */
.form-field{ margin-bottom: 20px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-weight:600; font-size:14px; }
.form-field .required{ color: var(--gold-hover); }
.form-field input, .form-field select, .form-field textarea{
  height:48px; border:1px solid var(--border); border-radius: var(--radius-field);
  padding: 0 16px; font-family:'Inter',sans-serif; font-size:15px; background:#fff; color: var(--ink);
  width:100%; transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.form-field textarea{ height:auto; min-height:120px; padding: 12px 16px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color: var(--gold); outline:none; box-shadow: 0 0 0 3px rgba(224,156,5,.22);
}
.form-field.error input, .form-field.error select, .form-field.error textarea{
  border-color: var(--error);
}
.form-error-msg{ color: var(--error); font-size:13px; display:none; }
.form-field.error .form-error-msg{ display:block; }
.form-success{
  display:none; align-items:flex-start; gap:12px; background: #EAF6EF; border:1px solid #BFE3CD;
  color: var(--success); padding: 20px; border-radius: var(--radius-card); font-weight:500;
}
.form-success.show{ display:flex; }
.form-success svg{ flex-shrink:0; margin-top:2px; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0; transform: translateY(18px);
  transition: opacity 600ms var(--ease-reveal), transform 600ms var(--ease-reveal);
}
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--bg-dark); color:#E7E1D4; padding: 64px 0 24px; }
.footer-grid{
  display:grid; grid-template-columns:1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 900px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; } }
.site-footer h3{ color:#fff; font-size:16px; margin-bottom:16px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.site-footer a{ color:#C9C2B4; transition: color 200ms var(--ease-standard); }
.site-footer a:hover{ color: var(--gold); }
.footer-logo img{ height:36px; margin-bottom:14px; }
.footer-tagline{ color:#C9C2B4; max-width: 32ch; }
.footer-dept-note{
  font-size:13px; color:#A79E8D; margin-top:12px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.15);
}
.footer-bottom{
  display:flex; flex-direction:column; gap:20px; padding-top:24px;
}
@media (min-width:700px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }
.social-links{ display:flex; gap:14px; list-style:none; margin:0; padding:0; }
.social-links a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; transition: border-color 200ms, background-color 200ms;
}
.social-links a:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.legal-links{ display:flex; flex-wrap:wrap; gap:16px; font-size:13px; }
.copyright{ font-size:13px; color:#A79E8D; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background: var(--gold-light);
  border-radius: var(--radius-card);
  padding: 40px 24px;
  text-align:center;
  margin: 0 20px;
  max-width: calc(var(--container-max) - 40px);
}
@media (min-width:900px){ .cta-band{ padding: 56px; margin: 0 auto; } }
.cta-band h2{ margin-bottom:8px; }
.cta-band .cta-actions{ display:flex; flex-direction:column; gap:12px; justify-content:center; margin-top:24px; }
@media (min-width:600px){ .cta-band .cta-actions{ flex-direction:row; } }
.cta-band-wrap{ display:flex; justify-content:center; }

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.whatsapp-float{
  position: fixed; right:20px; bottom:20px; z-index: 260;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(20,18,16,.22);
}
.whatsapp-float::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border: 2px solid rgba(37,211,102,.5);
  animation: wa-pulse 3s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform: scale(.85); opacity:.9; }
  70%{ transform: scale(1.35); opacity:0; }
  100%{ opacity:0; }
}
.whatsapp-float .wa-tooltip{
  position:absolute; right:66px; white-space:nowrap; background: var(--ink); color:#fff;
  padding:6px 12px; border-radius: 8px; font-size:13px; opacity:0; pointer-events:none;
  transition: opacity 200ms var(--ease-standard);
}
@media (min-width:900px){
  .whatsapp-float:hover .wa-tooltip{ opacity:1; }
}

/* =========================================================
   STEPS / TIMELINE
   ========================================================= */
.steps-frise{ display:flex; flex-direction:column; gap:0; position:relative; }
@media (min-width:900px){ .steps-frise{ flex-direction:row; align-items:flex-start; } }
.step-item{ position:relative; flex:1; padding: 0 0 40px 56px; }
@media (min-width:900px){ .step-item{ padding: 56px 20px 0; text-align:center; } }
.step-num{
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background: var(--gold-light); color: var(--gold-hover); font-family:'Sora',sans-serif; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:16px; z-index:2;
}
@media (min-width:900px){ .step-num{ left:50%; top:0; transform: translateX(-50%); width:48px; height:48px; font-size:18px; } }
.step-item::before{
  content:""; position:absolute; left:19px; top:40px; bottom:-4px; width:2px; background: var(--border);
}
@media (min-width:900px){
  .step-item::before{ left:0; right:0; top:24px; bottom:auto; height:2px; width:100%; }
  .step-item:first-child::before{ left:50%; }
  .step-item:last-child::before{ right:50%; width:50%; }
}
.step-item:last-child::before{ display:none; }
@media (min-width:900px){ .step-item:last-child::before{ display:block; } }

/* =========================================================
   ACCORDION
   ========================================================= */
.accordion-item{ border-bottom: 1px solid var(--border); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 20px 4px; font-family:'Sora',sans-serif; font-weight:600; font-size:17px; color: var(--ink);
}
.accordion-trigger .chevron{ flex-shrink:0; transition: transform 260ms var(--ease-standard); color: var(--gold); }
.accordion-trigger[aria-expanded="true"] .chevron{ transform: rotate(180deg); }
.accordion-panel{ height:0; overflow:hidden; transition: height 260ms var(--ease-standard); }
.accordion-panel-inner{ padding: 0 4px 20px; }

/* =========================================================
   MISC UTILITIES
   ========================================================= */
.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.text-columns{ display:grid; grid-template-columns:1fr; gap: 32px; align-items:center; }
@media (min-width:900px){ .text-columns{ grid-template-columns: 1fr 1fr; gap: 56px; } }
.img-frame{ border-radius: var(--radius-img); overflow:hidden; }
.img-frame img{ transition: transform 400ms var(--ease-standard); width:100%; height:100%; object-fit:cover; }
.img-frame:hover img{ transform: scale(1.04); }

.stats-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; text-align:center; }
@media (min-width:900px){ .stats-grid{ grid-template-columns: repeat(4,1fr); } }
.stat-number{ font-family:'Sora',sans-serif; font-weight:700; font-size:40px; color: var(--gold-hover); }
.stat-label{ font-size:14px; color: var(--text-secondary); }

.pill-filter{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-filter button{
  border-radius: var(--radius-pill); border:1px solid var(--border); background:#fff;
  padding: 10px 18px; font-size:14px; font-weight:500; cursor:pointer; color: var(--text-secondary);
  transition: all 200ms var(--ease-standard);
}
.pill-filter button[aria-pressed="true"]{ background: var(--ink); color:#fff; border-color: var(--ink); }
.pill-filter button:hover{ border-color: var(--gold); }

.testimonial-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-card); padding:24px; box-shadow: var(--shadow-rest); }
.testimonial-quote-mark{ color: var(--gold); font-family:'Sora',sans-serif; font-size:40px; line-height:1; display:block; margin-bottom:8px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.testimonial-author img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.testimonial-author .name{ font-weight:600; font-size:14px; color: var(--ink); }
.testimonial-author .role{ font-size:13px; color: var(--text-secondary); }

.offer-card{ position:relative; }
.offer-card.featured{ border: 2px solid var(--gold); }
.offer-card .offer-badge{ position:absolute; top:-14px; left:24px; }
.offer-price{ font-family:'Sora',sans-serif; font-weight:700; font-size:32px; color: var(--ink); margin: 8px 0; }
.offer-price span{ font-size:14px; color: var(--text-secondary); font-weight:500; }
.offer-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; }
.offer-list li{ display:flex; gap:10px; font-size:14px; color: var(--text-secondary); align-items:flex-start; }
.offer-list li svg{ flex-shrink:0; color: var(--gold); margin-top:3px; }

table.compare-table{ width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--border); border-radius: var(--radius-card); overflow:hidden; }
table.compare-table th, table.compare-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:14px; }
table.compare-table th{ font-family:'Sora',sans-serif; background: var(--bg-alt); }
@media (max-width: 700px){
  table.compare-table{ display:none; }
  .compare-cards{ display:flex; flex-direction:column; gap:16px; }
}
@media (min-width: 701px){ .compare-cards{ display:none; } }

.info-box{
  background: var(--gold-light); border: 1px solid #F1DCA0; border-radius: var(--radius-card);
  padding: 24px; color: var(--ink);
}
.info-box p{ color: var(--ink); margin-bottom:0; }

.breadcrumb{ font-size:13px; color: var(--text-secondary); margin-bottom:16px; }
.breadcrumb a:hover{ color: var(--gold-hover); }

.hero-mini-facts{ display:flex; flex-wrap:wrap; gap: 12px 28px; margin-top: 24px; }
.hero-mini-facts li{ list-style:none; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color: var(--text-secondary); }
.hero-mini-facts svg{ color: var(--gold); flex-shrink:0; }

.tag-category{
  display:inline-block; background: var(--gold-light); color: var(--gold-hover); font-size:12px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 12px; border-radius: var(--radius-pill);
}

.article-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-card); overflow:hidden; box-shadow: var(--shadow-rest); transition: all 200ms var(--ease-standard); display:flex; flex-direction:column; }
.article-card:hover{ box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: var(--gold); }
.article-card .img-frame{ border-radius:0; aspect-ratio: 16/10; }
.article-card .article-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.article-meta{ font-size:13px; color: var(--text-secondary); display:flex; gap:10px; flex-wrap:wrap; }

.progress-steps{ display:flex; gap:8px; margin-bottom:32px; }
.progress-steps .seg{ flex:1; height:6px; border-radius: var(--radius-pill); background: var(--border); }
.progress-steps .seg.active{ background: var(--gold); }

.choice-card{
  border:1.5px solid var(--border); border-radius: var(--radius-card); padding:20px; cursor:pointer;
  display:flex; align-items:center; gap:14px; background:#fff; transition: all 200ms var(--ease-standard);
}
.choice-card input{ width:20px; height:20px; accent-color: var(--gold); flex-shrink:0; }
.choice-card:hover{ border-color: var(--gold); }
.choice-card.selected{ border-color: var(--gold); background: var(--gold-light); }

.slider-compare{ position:relative; border-radius: var(--radius-img); overflow:hidden; aspect-ratio: 4/3; user-select:none; }
.slider-compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slider-compare .after-wrap{ position:absolute; inset:0; overflow:hidden; width:50%; }
.slider-compare .handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff;
  transform: translateX(-50%); cursor: ew-resize;
}
.slider-compare .handle::after{
  content:"↔"; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:#fff; color: var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-hover); font-size:16px;
}
.slider-compare .label{ position:absolute; top:12px; background: rgba(20,18,16,.65); color:#fff; font-size:12px; padding:4px 10px; border-radius: var(--radius-pill); }
.slider-compare .label.before{ left:12px; }
.slider-compare .label.after{ right:12px; }

.anchor-sidebar{ display:none; }
@media (min-width: 1000px){
  .legal-layout{ display:grid; grid-template-columns: 240px 1fr; gap:48px; align-items:start; }
  .anchor-sidebar{ display:block; position:sticky; top:110px; }
  .anchor-sidebar ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
  .anchor-sidebar a{ color: var(--text-secondary); }
  .anchor-sidebar a:hover{ color: var(--gold-hover); }
}
.legal-content h2{ margin-top:40px; }
.legal-content h2:first-child{ margin-top:0; }

.hero-404{ text-align:center; padding: 100px 0; }
.hero-404 .code-404{ font-family:'Sora',sans-serif; font-weight:700; font-size:96px; color: var(--gold); line-height:1; }
@media (min-width:900px){ .hero-404 .code-404{ font-size:140px; } }

.geo-pattern{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(circle, rgba(224,156,5,.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}