/* Sahivox shared design system */
:root{
  --paper:#F3F4F7;
  --paper-raised:#FFFFFF;
  --ink:#12151C;
  --ink-soft:#5B6472;
  --line:#E1E4EA;
  --line-strong:#CBD0DA;
  --brand:#14B892;
  --brand-deep:#0E8A6E;
  --brand-tint:#E4F6F1;
  --navy:#0B0F16;
  --navy-raised:#161C27;
  --navy-line:#2A3140;
  --navy-text:#EDEFF3;
  --navy-text-soft:#9AA3B2;
  --amber:#B4740E;
  --amber-tint:#FBF0DD;
  --radius:14px;
  --shadow: 0 1px 2px rgba(18,21,28,0.04), 0 8px 24px -12px rgba(18,21,28,0.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B0F16; --paper-raised:#161C27; --ink:#EDEFF3; --ink-soft:#9AA3B2;
    --line:#2A3140; --line-strong:#394152; --brand:#22D3AE; --brand-deep:#5FE7C9;
    --brand-tint:#122A24; --navy:#05070B; --navy-raised:#10151F; --navy-line:#242B39;
    --navy-text:#EDEFF3; --navy-text-soft:#8891A0; --amber:#E7B15C; --amber-tint:#2A2011;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --paper:#0B0F16; --paper-raised:#161C27; --ink:#EDEFF3; --ink-soft:#9AA3B2;
  --line:#2A3140; --line-strong:#394152; --brand:#22D3AE; --brand-deep:#5FE7C9;
  --brand-tint:#122A24; --navy:#05070B; --navy-raised:#10151F; --navy-line:#242B39;
  --navy-text:#EDEFF3; --navy-text-soft:#8891A0; --amber:#E7B15C; --amber-tint:#2A2011;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:640px;margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:'Fraunces',ui-serif,Georgia,serif;font-weight:600;letter-spacing:-0.01em;text-wrap:balance;margin:0;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--brand-deep);font-weight:500;display:inline-flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;}
section{padding:96px 0;}
@media(max-width:720px){section{padding:64px 0;}}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 86%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1120px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{width:34px;height:34px;border-radius:9px;flex:none;}
.brand span{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--ink);}
nav.links{display:flex;align-items:center;gap:26px;}
nav.links a{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink-soft);transition:color .15s;white-space:nowrap;}
nav.links a:hover, nav.links a.active{color:var(--ink);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:700;font-size:14.5px;text-decoration:none;border:1px solid transparent;transition:transform .15s, box-shadow .15s, background .15s;white-space:nowrap;cursor:pointer;font-family:inherit;}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(18,21,28,0.35);}
.btn-brand{background:var(--brand);color:#052620;}
.btn-brand:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px color-mix(in srgb, var(--brand) 60%, transparent);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink-soft);}
.btn-block{width:100%;justify-content:center;}
.nav-cta{display:none;}
@media(min-width:640px){.nav-cta{display:inline-flex;}}
.nav-links-desktop{display:none;gap:26px;}
@media(min-width:900px){.nav-links-desktop{display:flex;}}

.nav-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:1px solid var(--line-strong);background:none;cursor:pointer;flex:none;}
@media(min-width:900px){.nav-toggle{display:none;}}
.nav-toggle span{display:block;width:16px;height:2px;background:var(--ink);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink);}
.nav-toggle span::before{top:-5px;} .nav-toggle span::after{top:5px;}
.mobile-menu{display:none;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);background:var(--paper);padding:8px 0 14px;}
.mobile-menu.open{display:flex;}
@media(min-width:900px){.mobile-menu{display:none !important;}}
.mobile-menu a{padding:12px 28px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:8px;}
.mobile-menu a:active{background:var(--brand-tint);}
.mobile-menu .btn{margin:8px 28px 0;}

/* Responsive grid utilities */
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);}
.about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}
.contact-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.info-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .grid-3{grid-template-columns:1fr;}
}
@media(max-width:880px){
  .about-grid{grid-template-columns:1fr;gap:36px;}
  .contact-grid-2{grid-template-columns:1fr;gap:32px;}
}
@media(max-width:820px){
  .grid-4{grid-template-columns:repeat(2,1fr);gap:28px;}
  .grid-4 > div{padding:0 !important;border:none !important;}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr;}
  .info-grid-2{grid-template-columns:1fr;}
}

.section-head{max-width:56ch;margin-bottom:48px;}
.section-head h2{font-size:clamp(26px,3.4vw,36px);margin-top:14px;}
.section-head p{color:var(--ink-soft);font-size:16.5px;margin-top:14px;}

/* Cards / generic */
.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.badge{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.06em;padding:3px 9px;border-radius:999px;font-weight:600;display:inline-block;}
.badge-brand{background:var(--brand-tint);color:var(--brand-deep);}
.badge-amber{background:var(--amber-tint);color:var(--amber);}

/* Empty / coming-soon state */
.empty-state{text-align:center;padding:64px 32px;border:1px dashed var(--line-strong);border-radius:var(--radius);}
.empty-state .icon{width:52px;height:52px;border-radius:14px;background:var(--brand-tint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.empty-state h3{font-size:21px;margin-bottom:10px;}
.empty-state p{color:var(--ink-soft);font-size:15px;max-width:44ch;margin:0 auto;}

/* Forms */
.form-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink);}
.field input, .field textarea{width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);font-family:inherit;font-size:14.5px;}
.field input:focus, .field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);}
.field textarea{resize:vertical;min-height:110px;}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:14px;text-align:center;}
.form-msg{display:none;padding:12px 14px;border-radius:9px;font-size:14px;margin-bottom:16px;}
.form-msg.show{display:block;}
.form-msg.ok{background:var(--brand-tint);color:var(--brand-deep);}
.form-msg.err{background:var(--amber-tint);color:var(--amber);}

/* Login pages */
.auth-shell{min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;padding:56px 20px;}
.auth-card{width:100%;max-width:400px;}
.auth-card .card-inner{padding:36px 32px;}
.auth-head{text-align:center;margin-bottom:26px;}
.auth-head img{width:44px;height:44px;border-radius:11px;margin:0 auto 16px;}
.auth-head h1{font-size:23px;}
.auth-head p{color:var(--ink-soft);font-size:14px;margin-top:8px;}
.auth-switch{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-soft);}
.auth-switch button{background:none;border:none;color:var(--brand-deep);font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;padding:0;}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--ink-soft);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* Admin badge strip */
.admin-strip{background:var(--navy);color:var(--navy-text-soft);font-family:'IBM Plex Mono';font-size:12px;text-align:center;padding:8px;letter-spacing:.03em;}
.admin-strip strong{color:var(--navy-text);}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px;}
@media(max-width:820px){.dash-grid{grid-template-columns:1fr;}}
.dash-tile{padding:22px 24px;}
.dash-tile .lbl{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-family:'IBM Plex Mono';margin-bottom:8px;}
.dash-tile .val{font-family:'IBM Plex Mono';font-size:24px;font-weight:600;}
.dash-row{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;flex-wrap:wrap;gap:10px;}
.dash-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.dash-list > div{background:var(--paper-raised);}
.userbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0 32px;border-bottom:1px solid var(--line);margin-bottom:32px;flex-wrap:wrap;gap:14px;}
.userbar .who{display:flex;align-items:center;gap:12px;}
.userbar .avatar{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#052620;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'IBM Plex Mono';}
.userbar .name{font-weight:700;font-size:15px;}
.userbar .role{font-size:12.5px;color:var(--ink-soft);}

/* WhatsApp chat bubble */
.chat-bubble{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,0.35);text-decoration:none;transition:transform .15s;}
.chat-bubble:hover{transform:scale(1.06);}
.chat-tip{position:fixed;right:90px;bottom:36px;z-index:60;background:var(--paper-raised);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:10px 14px;font-size:13px;max-width:190px;display:none;}
@media(min-width:640px){.chat-tip.show{display:block;}}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Fraunces';font-size:17px;font-weight:600;color:var(--ink);gap:16px;}
.faq-q .plus{flex:none;width:22px;height:22px;position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--ink-soft);top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-q .plus::before{width:14px;height:2px;}
.faq-q .plus::after{width:2px;height:14px;transition:transform .2s;}
.faq-item[data-open="true"] .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 4px 20px;color:var(--ink-soft);font-size:14.5px;max-width:64ch;margin:0;}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:720px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{padding:26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:transform .15s;}
.blog-card:hover{transform:translateY(-2px);}
.blog-card .date{font-family:'IBM Plex Mono';font-size:12px;color:var(--ink-soft);}
.blog-card h3{font-size:19px;}
.blog-card p{color:var(--ink-soft);font-size:14.5px;margin:0;}
article.post{max-width:68ch;margin:0 auto;}
article.post h1{font-size:clamp(28px,4vw,40px);margin-bottom:14px;}
article.post .meta{font-family:'IBM Plex Mono';font-size:13px;color:var(--ink-soft);margin-bottom:36px;}
article.post p{font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 20px;}
article.post h2{font-size:24px;margin:36px 0 14px;}

footer{background:var(--navy);color:var(--navy-text);padding:72px 0 32px;}
.footer-cta{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:28px;padding-bottom:56px;margin-bottom:44px;border-bottom:1px solid var(--navy-line);}
.footer-cta h2{font-size:clamp(26px,3.6vw,38px);color:var(--navy-text);max-width:16ch;}
.footer-cta p{color:var(--navy-text-soft);margin-top:10px;max-width:40ch;font-size:15.5px;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center;}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-brand img{width:30px;height:30px;border-radius:8px;}
.footer-brand span{font-family:'Fraunces';font-weight:600;font-size:17px;}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;}
.footer-links a{color:var(--navy-text-soft);text-decoration:none;font-size:14px;}
.footer-links a:hover{color:var(--navy-text);}
.footer-fine{color:var(--navy-text-soft);font-size:12.5px;margin-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-fine a{color:var(--navy-text-soft);text-decoration:underline;}

@media(prefers-reduced-motion: reduce){*{scroll-behavior:auto !important;animation:none !important;transition:none !important;}}