:root{ --bg: #ffffff;
       --fg: #0f172a;
       --muted:#475569;
       --brand:#2563eb;
       --brand-600:#1e40af;
       --accent:#10b981;
       --surface:#f8fafc;
       --surface-alt:#f1f5f9;
       --border:#e2e8f0;
       --focus:#f59e0b; }

*{ box-sizing:border-box }
html,body{ padding:0;
           margin:0 }
body{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color:var(--fg);
      background:var(--bg);
      line-height:1.6; }

.container{ max-width:1100px;
            margin-inline:auto;
            padding:0 1rem }
.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 }

.skip-link{ position:absolute;
            left:0;
            top:-40px;
            background:#000;
            color:#fff;
            padding:8px;
            z-index:1000 }
.skip-link:focus{ top:0 }

.site-header{ position:sticky;
              top:0;
              background:rgba(255,255,255,.9);
              backdrop-filter:saturate(180%) blur(8px);
              border-bottom:1px solid var(--border);
              z-index:20 }
.header-inner{ display:flex;
               align-items:center;
               justify-content:space-between;
               gap:.75rem;
               padding:0.75rem 0 }
.brand{ display:flex;
        align-items:center;
        gap:.5rem;
        color:var(--fg);
        text-decoration:none;
        font-weight:700 }
.brand img{ display:block }
.site-nav ul{ display:flex;
              gap:1rem;
              list-style:none;
              margin:0;padding:0 }
.site-nav a{ color:var(--muted);
             text-decoration:none;
             padding:.5rem .75rem;
             border-radius:.5rem }
.site-nav a:hover,.site-nav a:focus{ color:white;
                                     background:#b28e5c; }
.site-nav a.active{ color:#b28e5c;
                    background:var(--brand) }

.toggles{ display:flex;
          gap:.5rem }

.nav-toggle{ display:none;
             background:none;
             border:none;
             font-size:1.25rem }
.nav-drawer{ background:#bfb7af;
             border-bottom:1px solid var(--border) }
.nav-drawer nav ul{ list-style:none;margin:0;
                    padding:0 }
.nav-drawer a{ display:block;
               padding:1rem;
               border-top:1px solid var(--border);
               text-decoration:none;
               color:var(--fg) }

.breadcrumbs{ background:var(--surface-alt);
              border-bottom:1px solid var(--border) }
.breadcrumbs ol{ margin:0;
                 padding:0.5rem 0;
                 list-style:none;
                 display:flex;
                 gap:.5rem;
                 flex-wrap:wrap }
.breadcrumbs a{ text-decoration:none;
                color:var(--brand) }
.breadcrumbs li[aria-current="page"]{ color:var(--muted) }

.hero{ padding:2.5rem 0;
       background:linear-gradient(180deg, #eef2ff, #ffffff) }
.hero-grid{ display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:2rem;align-items:center }
.hero-text .lead{ color:var(--muted);
                  font-size:1.125rem }
.hero-ctas{ margin-top:1rem;
            display:flex;
            gap:.75rem;
            flex-wrap:wrap }
.hero-media img{ width:100%;
                 height:auto;
                 border-radius:1rem;
                 border:0px solid var(--border);
                 box-shadow:0 0px 0px rgba(2,6,23,.08) }

.btn{ display:inline-block;
      padding:.55rem .85rem;
      border-radius:.6rem;
      font-weight:600;
      text-decoration:none;
      border:1px solid transparent }
.btn.primary{ background:#b28e5c;
              color:#fff }
.btn.primary:hover{ background:#5a4528 }
.btn.ghost{ background:rgba(157, 33, 72);
            color:white;
            border-color:rgba(157, 33, 72) }
.btn.ghost:hover{ background:rgb(90, 20, 42) }
.btn.ghost2{ background:#55585a;
            color:white;
            border-color:#55585a }
.btn.ghost2:hover{ background:#35383a }

.section{ padding:2.5rem 0 }
.section.alt{ background:var(--surface) }
.feature-list{ display:grid;
               grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
               gap:1rem;
               padding:0;
               margin:1rem 0;
               list-style:none }
.feature-item{ display:flex;
               gap:.75rem;
               padding:1rem;
               border:1px solid var(--border);
               border-radius:.75rem;
               background:#fff }
.feature-item img{ width:24px;
                   height:24px }

.cards{ display:grid;
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:1rem }
.card{ background:#fff;
       border:1px solid var(--border);
       border-radius:.75rem;
       padding:1rem;
       box-shadow:0 4px 16px rgba(2,6,23,.04) }
.card h3{ margin-top:.25rem }

.steps{ counter-reset:step;
        display:grid;
        gap:.5rem;
        padding-left:1rem }
.steps li{ background:#fff;
           border:1px solid var(--border);
           border-radius:.75rem;
           padding:0.75rem;
           list-style:none;
           position:relative }
.steps li::before{ counter-increment:step;
                   content:counter(step);
                   position:absolute;
                   left:-.75rem;
                   top:.5rem;
                   width:2rem;
                   height:2rem;
                   border-radius:999px;
                   background:var(--accent);
                   color:#fff;
                   display:grid;
                   place-items:center;
                   font-weight:700}

.resource-grid{ display:grid;
                grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
                gap:1rem }
.resource{ display:block;
           background:#fff;
           border:1px solid var(--border);
           border-radius:.75rem;
           padding:1rem;
           text-decoration:none;
           color:inherit }
.resource:hover{ border-color:var(--brand);
                 box-shadow:0 6px 20px rgba(2,6,23,.06) }

.accordion .accordion-item{ border:1px solid var(--border);
                            background:#fff;
                            border-radius:.75rem;
                            margin-bottom:.75rem;
                            overflow:hidden }
.accordion summary{ display:flex;
                    align-items:center;
                    justify-content:space-between;
                    gap:1rem;cursor:pointer;
                    padding:1rem;
                    font-weight:600 }
.accordion summary::-webkit-details-marker{ display:none }
.accordion .accordion-panel{ padding:0 1rem 1rem }

.contact-card{ background:#fff;
               border:1px solid var(--border);
               border-radius:.75rem;
               padding:1rem;display:grid;
               gap:.25rem;
               max-width:520px }

.site-footer{ border-top:1px solid var(--border);
              background:var(--surface-alt) }
.footer-grid{ display:grid;
              grid-template-columns:2fr 1fr;
              gap:2rem;
              padding:2rem 0 }
.footer-grid ul{ list-style:none;
                 margin:0;
                 padding:0 }
.footer-grid a{ text-decoration:none;
                color:var(--fg) }
.copy{ text-align:center;
       color:var(--muted);
       border-top:1px solid var(--border);
       padding:0.75rem }

.checklist{ display:grid;
            grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
            gap:.6rem;padding:0;
            margin:1rem 0;
            list-style: none }
.checklist li{ background:#fff;
               border:1px solid var(--border);
               border-radius:.75rem;
               padding:1rem }

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .site-nav{display:none}
  .nav-toggle{display:block}
}

/* --- Dark theme (night) --- */
:root[data-theme="dark"]{ --bg:#0b1220;
                          --fg:#e5e7eb;
                          --muted:#cbd5e1;
                          --surface:#0f172a;
                          --surface-alt:#0b1220;
                          --border:#1f2937 }
:root[data-theme="dark"] .site-header{ background:rgba(15,23,42,.8) }
:root[data-theme="dark"] .btn.ghost{ background:transparent;
                                     color:var(--fg);
                                     border-color:var(--border) }
:root[data-theme="dark"] .hero{ background:linear-gradient(180deg,#0f172a,#0b1220) }
:root[data-theme="dark"] .feature-item,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .accordion .accordion-item,
:root[data-theme="dark"] .resource{ background:#0f172a;
                                    border-color:#1f2937 }
:root[data-theme="dark"] .breadcrumbs{ background:#0f172a;
                                       border-color:#1f2937 }
:root[data-theme="dark"] .copy{ color:#94a3b8 }