:root{--bg:#0b0f1a;--surface:#ffffff;--text:#0f172a;--muted:#64748b;--primary:#0f172a;--primary-700:#1e293b;--accent:#c2410c;--ring:rgba(15,23,42,.25);--grad-start:#003b8e;--grad-mid:#6b5b71;--grad-end:#d96a07}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f6f8fc;color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{width:min(1100px,100% - 2rem);margin-inline:auto}
a{text-decoration:none;color:inherit}

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eef2f7}
.header-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.5rem}
.brand-logo{height:57px;width:auto;display:block}
@media (max-width:640px){.brand-logo{height:52px}}
.nav{display:flex;gap:.75rem;align-items:center}
.nav .dropdown{position:relative}
.dropdown-toggle{padding:.5rem .75rem;border-radius:10px;color:var(--muted);display:inline-block;border:1px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.dropdown-toggle::after{content:'▾';margin-left:.35rem}
.dropdown.open .dropdown-toggle,.dropdown-toggle.active{background:#fff7ed;color:#d26206;border-color:#f59e0b}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #e5e9f2;border-radius:12px;box-shadow:0 18px 36px -18px var(--ring);padding:.5rem;display:none;min-width:220px;z-index:120}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:.5rem .75rem;border-radius:10px;color:#334155}
.dropdown-menu a:hover{background:#eef4ff;color:var(--primary)}
.nav a:not(.btn){padding:.5rem .75rem;border-radius:10px;color:var(--muted);position:relative;display:inline-block;border:1px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.nav a:not(.btn):hover{background:#eef4ff;color:var(--primary);border-color:#dbe7ff}
.nav a:not(.btn).active{background:#fff7ed;color:#d26206;border-color:#f59e0b;box-shadow:inset 0 -3px 0 0 #d26206}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:.7rem 1rem;font-weight:600;transition:transform .2s ease,box-shadow .3s ease,background .3s ease;color:#0f172a}
.btn.primary{background:linear-gradient(90deg,var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);color:#fff;border:0;box-shadow:0 14px 28px -16px var(--ring)}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(0.95)}
.btn.ghost{border:1px solid #e5e9f2;background:#fff;color:var(--text)}
.btn.ghost:hover{box-shadow:0 8px 16px -10px var(--ring)}
.nav-toggle{display:none;border:0;background:transparent;font-size:1.3rem}

.hero{position:relative;padding:96px 0;background:#eef2f7}
.hero-wrap{display:grid;gap:1rem;place-items:center;text-align:center}
.hero-title{font-size:clamp(2.8rem,6vw,4.8rem);line-height:1.05;margin:0;font-weight:800;color:#0f172a;animation:fadeUp 1.1s cubic-bezier(.22,1,.36,1) both, bob 6s ease-in-out 1.1s infinite}
.accent{display:block;font-family:'Playfair Display',serif;font-style:italic;background:linear-gradient(90deg,var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{max-width:820px;color:#64748b;animation:fadeUp 1.1s cubic-bezier(.22,1,.36,1) .15s both, bob 6.2s ease-in-out 1.25s infinite}
.hero-actions{display:flex;gap:1rem;margin-top:.75rem;animation:fadeUp 1.1s cubic-bezier(.22,1,.36,1) .3s both, bob 6.4s ease-in-out 1.4s infinite}
.btn.primary{box-shadow:0 16px 32px -18px var(--ring)}
.btn.ghost{border-width:2px}
.hero-floats{position:absolute;inset:0;pointer-events:none}
.float-badge{position:absolute;width:80px;height:80px;border-radius:26px;background:#e0f2fe;border:1px solid #bae6fd;display:grid;place-items:center;color:var(--accent);box-shadow:0 20px 40px -22px var(--ring);animation:float 12s cubic-bezier(.45,.05,.55,.95) infinite}
.float-badge i{font-size:50px;color:var(--accent)}
.float-left{left:8%;bottom:14%}
.float-right{right:10%;top:18%;animation-delay:1.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}

.section-title{font-size:clamp(1.6rem,3.5vw,2.2rem);text-align:center;margin:0}
.accent-inline{font-family:'Playfair Display',serif;font-style:italic;background:linear-gradient(90deg,var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.section-sub{text-align:center;color:var(--muted);margin:.5rem 0 2rem}

.steps{padding:56px 0;background:#fff}
.steps-progress{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.25rem}
.steps-progress .dot{height:36px;width:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(90deg,var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);color:#fff;border:0;font-weight:700;box-shadow:0 8px 20px -12px var(--ring)}
.steps-progress .bar{position:absolute;inset:auto 0 50%;height:4px;background:linear-gradient(90deg,rgba(15,23,42,.15),rgba(15,23,42,.3));transform:translateY(-2px)}

.cards{display:grid;gap:1rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid #eef2f7;border-radius:16px;box-shadow:0 10px 30px -20px var(--ring);padding:1rem;transition:transform .2s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 36px -18px var(--ring)}
.card-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(90deg,var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);color:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 20px -14px var(--ring);display:grid;place-items:center;margin-bottom:.75rem}
.step h3{margin:.25rem 0 .25rem;font-size:1rem}
.step p{color:var(--muted);font-size:.95rem}

.info{padding:56px 0;background:#f8fafc}
.info-card .btn{margin-top:.5rem}

.articles{padding:56px 0;background:#fff}
.article-card{padding:0;overflow:hidden}
.article-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-card .card-body{padding:1rem}
.article-card h3{margin:.25rem 0}
.link{color:var(--primary);font-weight:600}

.faq{padding:56px 0;background:#f8fafc}
.accordion{max-width:900px;margin:0 auto;border-radius:14px}
.accordion .item{border:1px solid #e6ecf5;background:#fff;border-radius:14px;margin-bottom:.75rem;overflow:hidden}
.accordion .trigger{width:100%;text-align:left;padding:1rem 1.25rem;background:#fff;border:0;font-weight:600;cursor:pointer}
.accordion .content{max-height:0;opacity:.5;transition:max-height .35s ease,opacity .35s ease;padding:0 1.25rem}
.accordion .item.active .content{max-height:200px;opacity:1;padding:0 1.25rem 1rem}

.site-footer{padding:24px 0;background:linear-gradient(90deg,var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);color:#fff;text-align:center;border-top:1px solid rgba(255,255,255,.9)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}

@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .nav-toggle{display:inline-block}
  .nav{position:fixed;top:64px;left:0;height:calc(100vh - 64px);width:min(80vw,320px);display:flex;flex-direction:column;align-items:stretch;background:#fff;border-right:1px solid #eef2f7;padding:.75rem 1rem;gap:.5rem;transform:translateX(-102%);transition:transform .3s ease;z-index:110;overflow-y:auto}
  .nav.open{transform:translateX(0)}
  .nav a{display:block;padding:.6rem .75rem}
  .nav .btn{width:100%}
  .nav .dropdown{width:100%}
  .nav .dropdown-menu{position:static;box-shadow:none;border:1px solid #eef2f7;margin-top:.35rem}
  .nav-overlay{position:fixed;inset:64px 0 0 0;background:rgba(15,23,42,.35);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:90}
  .nav.open + .nav-overlay,
  .nav-overlay.show{opacity:1;pointer-events:auto}
}
@media (max-width:640px){
  .nav-toggle{display:inline-block}
  .nav{position:fixed;top:64px;left:0;height:calc(100vh - 64px);width:min(80vw,320px);display:flex;flex-direction:column;align-items:stretch;background:#fff;border-right:1px solid #eef2f7;padding:.75rem 1rem;gap:.5rem;transform:translateX(-102%);transition:transform .3s ease;z-index:110;overflow-y:auto}
  .nav.open{transform:translateX(0)}
  .nav a{display:block;padding:.6rem .75rem}
  .nav .btn{width:100%}
  .nav-overlay{position:fixed;inset:64px 0 0 0;background:rgba(15,23,42,.35);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:90}
  .nav.open + .nav-overlay,
  .nav-overlay.show{opacity:1;pointer-events:auto}
  .hero-actions{flex-direction:column;width:100%;max-width:420px}
  .grid-4,.grid-3{grid-template-columns:1fr}
  .hero-floats,.float-badge{display:none}
}
.article-hero{padding:40px 0;background:#fff}
.breadcrumb{display:flex;gap:.5rem;color:var(--muted);font-size:.95rem;margin-bottom:.5rem}
.article-title{font-size:clamp(1.8rem,4vw,2.6rem);margin:0}
.article-meta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:.75rem 0 1rem;color:var(--muted)}
.article-hero .cover{overflow:hidden;border-radius:16px;border:1px solid #eef2f7;box-shadow:0 12px 28px -20px var(--ring)}
.article-hero .cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-content{padding:24px 0 56px;background:#fff}
.prose{max-width:840px;margin:0 auto;font-size:1.02rem;line-height:1.8;color:#0f172a}
.prose h2{font-size:1.4rem;margin:1.25rem 0 .5rem}
.prose p{margin:.6rem 0;color:#1f2937}
.prose ul{margin:.6rem 0 .6rem 1.25rem}
.prose li{margin:.3rem 0}
.prose blockquote{margin:1rem 0;padding:.75rem 1rem;border-left:3px solid var(--primary);background:#f8fbff;color:#0f172a;border-radius:8px}
.article-nav{display:flex;justify-content:space-between;gap:.75rem;margin-top:1.25rem}
.auth{padding:48px 0;background:#fff}
.auth-wrap{display:grid;place-items:center}
.auth-card{width:min(440px,100%);background:#fff;border:1px solid #eef2f7;border-radius:16px;box-shadow:0 16px 30px -20px var(--ring);padding:1.25rem}
.field{display:grid;gap:.4rem;margin:.6rem 0}
.field label{font-weight:600;color:#334155}
.field input{height:42px;border:1px solid #e5e9f2;border-radius:12px;padding:0 .9rem;font-size:.98rem;outline:none;transition:border .2s ease,box-shadow .2s ease}
.field input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.field.checkbox{display:flex;align-items:center}
.password-wrap{display:flex;align-items:center;border:1px solid #e5e9f2;border-radius:12px;overflow:hidden;background:#fff;transition:border .2s ease,box-shadow .2s ease}
.password-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.password-wrap input{height:42px;border:0;flex:1;padding:0 .9rem;font-size:.98rem;outline:none}
.password-wrap .toggle-pass{width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:#64748b;border-left:1px solid #e5e9f2}
.actions{display:flex;align-items:center;justify-content:space-between;margin:.8rem 0}
.form-message{margin-top:.4rem;color:#16a34a;font-weight:600}
.error{border-color:#ef4444 !important}
.error-text{color:#ef4444}
.body, body{min-height:100vh}
body{display:flex;flex-direction:column}
main{flex:1}
.btn.danger{background:#ef4444;color:#fff}
.btn.tag{background:#f1f5f9;color:#0f172a}

.admin-hero{padding:28px 0;background:#fff}
.hero-card{background:var(--primary);color:#fff;border-radius:18px;padding:1.25rem 1.5rem;box-shadow:0 18px 36px -18px var(--ring)}
.hero-card h1{margin:0}
.hero-card p{margin:.25rem 0 0;opacity:.85}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.stat-card .stat-top{display:flex;align-items:center;justify-content:space-between;color:#64748b}
.stat-card .value{font-size:1.8rem;font-weight:800;margin-top:.5rem}
.stat-card .icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#eef4ff;color:#2563eb}

.admin-table{padding:8px 0 56px;background:#fff}
.table-card{padding:1rem}
.table-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.search-input{height:42px;border:1px solid #e5e9f2;border-radius:12px;padding:0 .9rem;outline:none}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.tabs{display:flex;gap:.5rem;margin:.5rem 0 1rem}
.tab{padding:.5rem .85rem;border:1px solid #e5e9f2;background:#fff;border-radius:10px;cursor:pointer}
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{font-weight:700;text-align:left;color:#334155;border-bottom:1px solid #e5e9f2;padding:.75rem}
tbody td{padding:.6rem .75rem;border-bottom:1px solid #f1f5f9}
.pill{display:inline-block;border-radius:999px;padding:.25rem .6rem;font-weight:700;font-size:.85rem}
.pill.success{background:#dcfce7;color:#166534}
.pill.warning{background:#fef9c3;color:#a16207}
.pill.info{background:#e0f2fe;color:#075985}
.pill.muted{background:#f1f5f9;color:#334155}
.badge-num{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:999px;padding:0 .5rem;font-weight:700}
.badge-num.success{background:#dcfce7;color:#166534}
.badge-num.warning{background:#fee2e2;color:#7f1d1d}
.table-foot{margin:.6rem 0 0;color:#64748b;text-align:right}

@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr}
}
/* overrides for gradient buttons */
.btn-primary{background:linear-gradient(90deg,var(--grad-start) 0%, var(--grad-mid) 50%, var(--grad-end) 100%);color:#fff;border:0}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline-success{border-color:#16a34a;color:#0f172a}
.btn-outline-success.active,.btn-outline-success:focus{background:linear-gradient(90deg,#16a34a 0%, #22c55e 100%);color:#fff;border:0}