/* ══════════════════════════════════════════════════════════════════════════
   theme-modern.css — SHIRWAN IT skin: motion, glass, gold detailing.

   Palette values are NOT defined here — they live in tokens.css, which loads
   first. This file only styles: it reads var(--gold), var(--surface), … and
   adds the animation layer. Previously it redefined the whole palette in a
   :root block in order to override style.css's indigo one; now that style.css
   references tokens directly there is nothing left to fight, so a color change
   is a one-line edit in tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */

html, body { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }

/* Generic light->dark text fixes for elements that hardcode dark ink */
.section-title, .modal-title, .result-title, .result-field span,
.service-card h3, .demo-row strong, .product-name, .loan-card-title,
.lc-stat-value, .detail-title, .admin-form-card h2, .admin-list-card h2,
.lookup-title, .reminder-title{ color:var(--ink) !important; }

/* ════════════════════════════════════════════════════════════════════════
   NAVBAR — black glass, professional, animated gold
   ════════════════════════════════════════════════════════════════════════ */
.nav{
  background:rgba(10,9,8,.78);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, box-shadow .3s ease;
  position:fixed; top:0; left:0; right:0; z-index:100;
}
.nav.scrolled{ background:rgba(8,7,6,.92); box-shadow:0 10px 34px rgba(0,0,0,.5); }
.nav::after{                                   /* animated gold underline sweep */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold-dark),var(--gold-light),var(--gold),var(--gold-dark),transparent);
  background-size:200% 100%; animation:navSweep 6s linear infinite; opacity:.8;
}
@keyframes navSweep{ to{ background-position:200% 0 } }

.nav-logo-name{ color:var(--ink); letter-spacing:.4px; }
.nav-logo-sub{ color:var(--gold); }
.nav-logo-icon{ transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.nav-logo:hover .nav-logo-icon{ transform:rotate(-6deg) scale(1.07); }

.nav-link{ position:relative; color:rgba(245,241,230,.78); transition:color .2s ease; }
.nav-link:hover{ background:transparent; color:var(--gold-light); }
.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-dark));
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--gold-light); }
.nav-link-icon svg{ opacity:.85; }

.nav-burger span{ background:var(--gold); }

.nav-login-btn{
  position:relative; background:var(--gold-grad); color:var(--ink-on-gold); font-weight:800;
  box-shadow:0 6px 18px var(--line-2); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.nav-login-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 10px 26px var(--gold-a45); }
.nav-login-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 var(--gold-a45); animation:pulseRing 3s ease-out infinite; pointer-events:none;
}
.nav-login-btn.logged-in{ background:linear-gradient(135deg,var(--surface-2),var(--surface)); color:var(--gold-light); box-shadow:0 4px 14px rgba(0,0,0,.4); }
@keyframes pulseRing{ 0%{box-shadow:0 0 0 0 var(--gold-a45)} 70%,100%{box-shadow:0 0 0 12px rgba(232,181,48,0)} }

/* mobile menu */
@media (max-width:860px){
  .nav-links{ background:rgba(8,7,6,.98); border-bottom:1px solid var(--line); }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════ */
.hero{
  background:
    radial-gradient(1100px 560px at 82% -12%, var(--line) 0%, transparent 60%),
    radial-gradient(900px 500px at 8% 8%, rgba(200,145,26,.12) 0%, transparent 55%),
    linear-gradient(160deg,var(--bg) 0%,var(--bg-2) 55%,var(--bg) 100%);
  color:var(--ink); overflow:hidden; position:relative;
}
.hero-title{ color:var(--ink); }
.hero-desc{ color:var(--ink-2); }
.hero-badge{
  background:var(--gold-a12); color:var(--gold-light);
  border:1px solid var(--line-3);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.hero-stat{ color:var(--ink-2); }
.hero-stat .stat-num, .stat-num{ color:var(--gold-light); }
.hero-stat-divider{ background:rgba(232,181,48,.25); }

.gradient-text{
  background:linear-gradient(100deg,var(--gold-dark) 0%,var(--gold) 25%,var(--gold-light) 50%,var(--gold) 75%,var(--gold-dark) 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 5s linear infinite;
}
@keyframes goldShimmer{ to{ background-position:-220% center } }

/* hero entrance */
.hero-content > *{ animation:heroUp .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-content > *:nth-child(1){ animation-delay:.05s }
.hero-content > *:nth-child(2){ animation-delay:.15s }
.hero-content > *:nth-child(3){ animation-delay:.25s }
.hero-content > *:nth-child(4){ animation-delay:.35s }
.hero-content > *:nth-child(5){ animation-delay:.45s }
@keyframes heroUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes floaty{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-24px) scale(1.08)} }

/* floating gold orbs */
.hero-blob{ animation:floaty 11s ease-in-out infinite; }
.hero-blob.blob-1{ background:radial-gradient(circle,var(--gold),transparent 70%); opacity:.30; }
.hero-blob.blob-2{ background:radial-gradient(circle,var(--gold-dark),transparent 70%); opacity:.22; animation-duration:14s; animation-direction:reverse; }
.hero::before{
  content:""; position:absolute; width:480px; height:480px; left:-120px; bottom:-180px;
  background:radial-gradient(circle,var(--gold-light),transparent 70%); opacity:.10; border-radius:50%;
  filter:blur(10px); pointer-events:none; animation:floaty 16s ease-in-out infinite;
}
.hero-stat .stat-num{ text-shadow:0 0 16px rgba(252,230,160,.10); animation:numGlow 4s ease-in-out infinite; }
@keyframes numGlow{ 0%,100%{text-shadow:0 0 16px rgba(252,230,160,.12)} 50%{text-shadow:0 0 28px rgba(252,230,160,.55)} }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════════ */
.btn-primary-lg{
  position:relative; z-index:0;
  background:var(--gold-grad); color:var(--ink-on-gold); font-weight:800;
  box-shadow:0 12px 32px var(--line-2);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary-lg:hover{ transform:translateY(-3px); box-shadow:0 18px 44px var(--gold-a45); filter:brightness(1.05); }
.btn-primary-lg::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1;
  background:linear-gradient(120deg,var(--gold-light),var(--gold),var(--gold-deep),var(--gold-light));
  background-size:300% 300%; filter:blur(12px); opacity:.5; animation:btnGlow 6s ease infinite;
}
.btn-primary-lg:hover::before{ opacity:.85; }
@keyframes btnGlow{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.btn-ghost-lg{ color:var(--ink); border:1.5px solid var(--gold-a45); transition:background .2s,border-color .2s,color .2s,transform .2s; }
.btn-ghost-lg:hover{ background:var(--gold-a12); border-color:var(--gold-light); color:var(--gold-light); transform:translateY(-2px); }

/* ════════════════════════════════════════════════════════════════════════
   SECTIONS & HEADINGS
   ════════════════════════════════════════════════════════════════════════ */
.section-title{ color:var(--ink); }
.section-label{
  background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light),var(--gold-dark));
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.services-section, .contact-section, .verify-section{ background:var(--bg); }
.services-section.alt-bg{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); }

/* ════════════════════════════════════════════════════════════════════════
   CARDS & SURFACES (dark with gold borders + sheen)
   ════════════════════════════════════════════════════════════════════════ */
.service-card,.contact-card,.verify-card,.lookup-card,.result-grid,.result-field,
.recent-item,.about-card-demo,.loan-stat,.loan-card,.product-card,.category-tabs,
.admin-form-card,.admin-list-card,.trust-card,.reminder-card,.lookup-tab.active,
.detail-card,.modal-card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  color:var(--ink);
}
.reminder-card{ background:linear-gradient(160deg,var(--surface-2),var(--surface-3)) !important; }

.service-card,.contact-card,.verify-card,.lookup-card,.result-grid,
.trust-card,.reminder-card,.loan-stat,.admin-form-card,.admin-list-card,.product-card{
  position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover,.contact-card:hover,.verify-card:hover,.lookup-card:hover,
.trust-card:hover,.reminder-card:hover,.loan-stat:hover,.product-card:hover,
.admin-form-card:hover,.admin-list-card:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 56px rgba(0,0,0,.55);
  border-color:var(--gold-a45) !important;
}
/* gold light-sweep on hover */
.service-card::before,.contact-card::before,.verify-card::before,
.lookup-card::before,.loan-stat::before,.product-card::before{
  content:""; position:absolute; top:0; left:-75%; width:55%; height:100%;
  background:linear-gradient(115deg,transparent,var(--gold-a12),rgba(252,230,160,.28),transparent);
  transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; z-index:1;
}
.service-card:hover::before,.contact-card:hover::before,.verify-card:hover::before,
.lookup-card:hover::before,.loan-stat:hover::before,.product-card:hover::before{ left:130%; }

.service-icon{ background:var(--gold-grad); color:var(--ink-on-gold); box-shadow:0 10px 24px rgba(232,181,48,.28); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.service-card:hover .service-icon{ transform:scale(1.08) rotate(-4deg); }
.service-card h3, .service-card p{ position:relative; z-index:2; }
.service-tag{ background:var(--line); color:var(--gold-light); }
.contact-icon{ color:var(--gold); }
.contact-card p, .contact-card a{ color:var(--ink-2); }

/* product / loan / admin specifics */
.product-images, .product-img.placeholder{ background:var(--bg-2); }
.product-card{ border-radius:16px; }
.loan-card-meta, .lc-stat-label, .loan-card-stat .lc-stat-label{ color:var(--ink-3); }
.loan-card-title, .lc-stat-value{ color:var(--ink); }
.category-tab{ color:var(--ink-2); }
.category-tab.active{ background:var(--gold-grad); color:var(--ink-on-gold); }
.payment-row{ border-color:var(--line) !important; }
.payment-row.overdue{ background:rgba(232,181,48,.06) !important; border-color:rgba(232,181,48,.3) !important; }

/* ════════════════════════════════════════════════════════════════════════
   INPUTS, TABS, BADGES
   ════════════════════════════════════════════════════════════════════════ */
.form-group input,.form-group select,.form-group textarea,
.verify-input,.lookup-input,input[type="text"],input[type="email"],
input[type="password"],input[type="number"],textarea,select{
  background:var(--bg-2) !important; color:var(--ink) !important;
  border:1.5px solid var(--gold-a30) !important;
}
.form-group input::placeholder,.verify-input::placeholder,
.lookup-input::placeholder,input::placeholder,textarea::placeholder{ color:var(--ink-4) !important; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.verify-input:focus,.lookup-input:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px var(--gold-a18) !important; background:var(--surface-3) !important;
}
.form-group label{ color:var(--ink-2); }

.verify-tab{ color:var(--ink-3); }
.verify-tab:hover:not(.active){ background:var(--gold-a08); }
.verify-tab.active{ color:var(--ink-on-gold); background:var(--gold-grad); border-bottom:2px solid var(--gold); }
.verify-btn,.result-btn.primary,.lookup-btn{ background:var(--gold-grad) !important; color:var(--ink-on-gold) !important; font-weight:800; }
.result-btn.ghost{ background:var(--surface-2) !important; color:var(--ink-2) !important; border:1px solid var(--line) !important; }

.type-payment{ background:rgba(232,181,48,.14) !important; color:var(--gold-light) !important; }
.type-debt{ background:var(--warn-bg) !important; color:var(--warn-ink) !important; border-color:var(--warn-line) !important; }
.demo-badge.verified{ background:var(--gold-grad); color:var(--ink-on-gold); }
.feature-check{ background:var(--gold-grad); color:var(--ink-on-gold); }
.demo-amount, .demo-status{ color:var(--gold-light); }
.recent-item:hover{ background:rgba(232,181,48,.07) !important; }

.staff-unlock-banner button{ background:var(--gold-grad) !important; color:var(--ink-on-gold) !important; }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.footer{ background:linear-gradient(160deg,var(--bg-2),var(--bg)) !important; color:var(--ink-2); border-top:1px solid var(--line); }
.footer-brand-name{ color:var(--ink); }
.footer-brand-sub{ color:var(--gold); }
.footer-links a{ color:var(--ink-2); transition:color .2s ease; }
.footer-links a:hover{ color:var(--gold-light); }

/* ════════════════════════════════════════════════════════════════════════
   LOGO MARK — black tile, gold growth-line, animated
   ════════════════════════════════════════════════════════════════════════ */
.nav-logo-icon{
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--bg) 45%,var(--surface-3) 75%,var(--bg) 100%);
  background-size:220% 220%;
  animation:logoGrad 7s ease infinite;
  box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(232,181,48,.55);
  position:relative; overflow:hidden;
}
.nav-logo-icon::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(252,230,160,.55) 50%,transparent 68%);
  transform:translateX(-130%); animation:logoShine 6s ease-in-out infinite;
}
.nav-logo-icon svg{ position:relative; z-index:1; }
.nav-logo-icon svg path{ stroke:var(--gold-light) !important; }
.nav-logo-icon svg circle[fill]{ fill:var(--gold-light) !important; }
.footer .nav-logo-icon, .modal-logo .nav-logo-icon{ animation-duration:8s; }
@keyframes logoGrad{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes logoShine{ 0%,60%{transform:translateX(-130%)} 82%,100%{transform:translateX(130%)} }

/* ── Scroll-reveal ─────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }

/* ════════════════════════════════════════════════════════════════════════
   LANGUAGE DROPDOWN — dark glass + gold
   ════════════════════════════════════════════════════════════════════════ */
.lang-dropdown{ position:relative; margin:0 8px; flex-shrink:0; }
.lang-toggle{
  display:flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:11px; cursor:pointer;
  border:1px solid var(--gold-a30);
  background:rgba(232,181,48,.06);
  color:var(--ink); font-size:13px; font-weight:700; font-family:var(--font);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.lang-toggle:hover{ transform:translateY(-1px); background:var(--gold-a12); box-shadow:0 6px 16px rgba(0,0,0,.45); border-color:var(--gold); }
.lang-globe{ width:17px; height:17px; color:var(--gold); flex-shrink:0; }
.lang-caret{ width:14px; height:14px; color:var(--gold); flex-shrink:0; transition:transform .25s ease; }
.lang-toggle[aria-expanded="true"] .lang-caret{ transform:rotate(180deg); }

.lang-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:190px;
  background:var(--surface-3); border-radius:14px; padding:6px;
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:300;
}
.lang-menu.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.lang-option{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:none; border-radius:10px; cursor:pointer;
  background:none; color:var(--ink); font-family:var(--font); text-align:start;
  transition:background .18s ease;
}
.lang-option:hover{ background:var(--gold-a12); }
.lang-native{ font-size:15px; font-weight:700; }
.lang-tag{ font-size:11px; color:var(--ink-3); font-weight:600; }
.lang-check{ width:17px; height:17px; color:var(--gold); opacity:0; margin-inline-start:auto; flex-shrink:0; }
.lang-option.active{ background:rgba(232,181,48,.14); }
.lang-option.active .lang-native{ color:var(--gold-light); }
.lang-option.active .lang-check{ opacity:1; }

/* ════════════════════════════════════════════════════════════════════════
   LOGIN MODAL — black & gold
   ════════════════════════════════════════════════════════════════════════ */
#loginModal.modal-overlay{
  background:
    radial-gradient(800px 500px at 50% -10%, var(--gold-a30), transparent 60%),
    radial-gradient(700px 500px at 100% 120%, rgba(200,145,26,.20), transparent 60%),
    rgba(5,4,3,.86);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
#loginModal .login-card{
  max-width:420px; padding:0; overflow:hidden; border-radius:26px;
  background:var(--surface-3) !important; border:1px solid var(--line) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px var(--gold-a18) inset;
  animation:modalIn .35s cubic-bezier(.2,.9,.25,1);
}
#loginModal .modal-close{
  top:14px; inset-inline-end:14px; inset-inline-start:auto;
  width:34px; height:34px; border-radius:50%;
  background:var(--line); color:var(--gold-light); backdrop-filter:blur(4px);
  z-index:3; transition:background .2s ease, transform .25s ease;
}
#loginModal .modal-close:hover{ background:var(--line-2); transform:rotate(90deg); }

.login-hero{
  position:relative; padding:34px 36px 30px; text-align:center; overflow:hidden;
  background:linear-gradient(150deg,var(--surface-2) 0%,var(--bg) 55%,var(--surface-3) 100%);
  border-bottom:1px solid var(--line);
}
.login-hero-orbs span{ position:absolute; border-radius:50%; filter:blur(6px); pointer-events:none; }
.login-hero-orbs span:nth-child(1){ width:150px;height:150px; top:-50px; inset-inline-start:-40px; background:radial-gradient(circle,var(--gold),transparent 70%); opacity:.40; animation:floaty 9s ease-in-out infinite; }
.login-hero-orbs span:nth-child(2){ width:130px;height:130px; bottom:-50px; inset-inline-end:-30px; background:radial-gradient(circle,var(--gold-dark),transparent 70%); opacity:.30; animation:floaty 12s ease-in-out infinite reverse; }
.login-hero-orbs span:nth-child(3){ width:120px;height:120px; top:10px; inset-inline-end:40%; background:radial-gradient(circle,var(--gold-light),transparent 70%); opacity:.22; animation:floaty 14s ease-in-out infinite; }
.login-hero .modal-logo{ margin:0 0 14px; position:relative; z-index:1; }
.login-hero .nav-logo-icon{
  width:66px; height:66px; border-radius:20px; margin:0 auto;
  box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(232,181,48,.6);
}
.login-hero .nav-logo-icon svg{ width:36px; height:36px; }
.login-brand{ position:relative; z-index:1; color:var(--ink); font-weight:800; font-size:19px; letter-spacing:1px; }
.login-brand-sub{ position:relative; z-index:1; color:var(--gold-light); font-size:12px; margin-top:3px; font-weight:600; }

.login-body{ padding:28px 36px 34px; }
#loginModal .modal-title{ font-size:21px; color:var(--gold-light) !important; margin-bottom:5px; }
#loginModal .modal-sub{ font-size:13.5px; color:var(--ink-3); margin-bottom:22px; }
#loginModal .form-group label{ font-size:13px; font-weight:700; color:var(--ink-2); }
#loginModal .input-wrap{ position:relative; display:flex; align-items:center; }
#loginModal .input-ico{
  position:absolute; inset-inline-start:14px; width:18px; height:18px;
  color:var(--gold); opacity:.85; pointer-events:none; z-index:1;
}
#loginModal .input-wrap input{
  width:100%; padding:13px 16px; padding-inline-start:44px;
  border:1.5px solid rgba(232,181,48,.24) !important; border-radius:13px;
  font-size:14.5px; font-family:var(--font); color:var(--ink) !important; background:var(--bg-2) !important;
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
#loginModal .input-wrap input::placeholder{ color:var(--ink-4) !important; }
#loginModal .input-wrap input:focus{
  border-color:var(--gold) !important; background:var(--surface-3) !important;
  box-shadow:0 0 0 4px var(--gold-a18) !important;
}
#loginModal .pw-toggle{
  position:absolute; inset-inline-end:12px; inset-inline-start:auto;
  background:none; border:none; cursor:pointer; font-size:17px; line-height:1; color:var(--ink-3); padding:4px;
}
#loginModal .login-btn{
  position:relative; overflow:hidden; margin-top:6px; padding:14px;
  border-radius:14px; font-size:15px; font-weight:800;
  background:var(--gold-grad); background-size:180% 180%; color:var(--ink-on-gold);
  box-shadow:0 12px 30px var(--line-3);
  transition:transform .2s ease, box-shadow .2s ease, background-position .4s ease;
}
#loginModal .login-btn:hover{ transform:translateY(-2px); background-position:100% 50%; box-shadow:0 16px 40px rgba(232,181,48,.55); }
#loginModal .login-btn::after{
  content:""; position:absolute; top:0; inset-inline-start:-120%; width:60%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); animation:loginSheen 4.5s ease-in-out infinite;
}
@keyframes loginSheen{ 0%,55%{ inset-inline-start:-120% } 80%,100%{ inset-inline-start:140% } }
#loginModal .login-error{
  background:var(--danger-bg); color:var(--danger-ink); border:1px solid var(--danger-line);
  border-radius:11px; padding:11px 15px; font-size:13px; margin-bottom:16px; font-weight:600;
}
#loginModal .login-note{
  font-size:12px; color:var(--ink-4); text-align:center; margin-top:18px; line-height:1.6;
  border-top:1px solid var(--line); padding-top:16px;
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-content > *{ animation:none; }
  .hero-blob, .hero::before{ animation:none; }
  .nav::after, .nav-logo-icon, .nav-logo-icon::after, .gradient-text, .section-label,
  .btn-primary-lg::before, .hero-stat .stat-num, .nav-login-btn::after,
  #loginModal .login-btn::after, .login-hero-orbs span{ animation:none; }
  .nav-logo:hover .nav-logo-icon{ transform:none; }
  .section-label, .gradient-text{ -webkit-text-fill-color:currentColor; color:var(--gold); }
  .lang-menu{ transition:none; }
  .nav-verify-btn::after{ animation:none; display:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   STAFF-ONLY "VERIFY INVOICE" NAV BUTTON
   Hidden by default; shown only when a staff member is signed in
   (app.js adds .is-staff to <body> on Firebase auth).
   ════════════════════════════════════════════════════════════════════════ */
.staff-only{ display:none !important; }
body.is-staff .staff-only{ display:inline-flex !important; }

.nav-verify-btn{
  align-items:center; gap:6px; padding:8px 14px; border-radius:10px;
  text-decoration:none; white-space:nowrap;
  font-size:13px; font-weight:700; font-family:var(--font);
  color:var(--gold-light); border:1.5px solid var(--gold-a45);
  background:var(--gold-a08);
  position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.nav-verify-btn svg{ color:var(--gold); flex-shrink:0; }
.nav-verify-btn:hover{
  transform:translateY(-2px); background:var(--line);
  border-color:var(--gold-light); box-shadow:0 8px 20px rgba(232,181,48,.28);
}
.nav-verify-btn::after{
  content:""; position:absolute; top:0; inset-inline-start:-120%; width:55%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(252,230,160,.5),transparent);
  transform:skewX(-18deg); animation:loginSheen 5s ease-in-out infinite; pointer-events:none;
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER — social media + Google map
   ════════════════════════════════════════════════════════════════════════ */
.footer-connect{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; margin-top:4px; }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.social-btn{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gold-light); border:1px solid var(--line-3); background:var(--gold-a08);
  text-decoration:none;
  transition:transform .2s ease, background .25s ease, border-color .25s ease, color .2s ease, box-shadow .25s ease;
}
.social-btn svg{ width:20px; height:20px; }
.social-btn:hover{ transform:translateY(-3px); color:var(--ink); }
.social-wa:hover{ background:#25D366; border-color:#25D366; box-shadow:0 8px 20px rgba(37,211,102,.45); }
.social-fb:hover{ background:#1877F2; border-color:#1877F2; box-shadow:0 8px 20px rgba(24,119,242,.45); }
.social-tt:hover{ background:var(--surface-2); border-color:var(--line-3); box-shadow:0 8px 20px rgba(0,0,0,.55); }
.social-ig:hover{ background:radial-gradient(circle at 30% 110%,#fdf497,#fd5949 45%,#d6249f 70%,#285AEB 100%); border-color:transparent; box-shadow:0 8px 20px rgba(214,36,159,.45); }
.social-sc:hover{ background:#FFFC00; border-color:#FFFC00; color:#111; box-shadow:0 8px 20px rgba(255,252,0,.45); }



/* minimal footers: center the connect block */
.footer > .container > .footer-social,
.footer > .container > .footer-mini-connect{ justify-content:center; }
.footer-mini-connect{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:18px; }

/* ════════════════════════════════════════════════════════════════════════
   SITE REDESIGN — professional navbar (mobile drawer) + new footer
   ════════════════════════════════════════════════════════════════════════ */

/* ── Nav CTA (Verify Invoice pill) ── */
.nav-cta{
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px 16px; border-radius:12px; margin-inline-start:6px;
  background:var(--gold-grad); color:var(--ink-on-gold) !important;
  font-size:13px; font-weight:800; text-decoration:none; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(232,181,48,.28);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 26px var(--line-3); filter:brightness(1.05); }
.nav-cta.active{ outline:2px solid var(--gold-a45); outline-offset:2px; }
.nav-cta svg{ flex-shrink:0; }

.nav-link.active{ background:rgba(232,181,48,.14); color:var(--gold-light); }

/* ── Burger animation ── */
.nav-burger span{ transition:transform .28s ease, opacity .2s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ── */
@media (max-width: 900px){
  .nav-links{
    display:flex !important; flex-direction:column; align-items:stretch; gap:4px;
    position:fixed; top:72px; left:14px; right:14px; z-index:99;
    padding:14px; border-radius:20px;
    background:rgba(13,11,8,.97); border:1px solid var(--line-2);
    box-shadow:0 30px 80px rgba(0,0,0,.65);
    backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
    opacity:0; visibility:hidden; transform:translateY(-14px) scale(.98);
    transition:opacity .28s ease, transform .28s ease, visibility .28s;
    max-height:calc(100dvh - 92px); overflow:auto;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:none; }
  .nav-link{ padding:13px 16px; font-size:15px; border-radius:12px; }
  .nav-cta{ justify-content:center; margin:10px 2px 2px; padding:13px 16px; font-size:15px; }
  .lang-dropdown{ margin-top:6px; }
  body.nav-open{ overflow:hidden; }
}

/* ── New footer ── */
.sfoot{
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
  border-top:0; padding:0; position:relative; margin-top:60px;
}
.sfoot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-dark),var(--gold-light),var(--gold),var(--gold-dark),transparent);
  background-size:200% 100%; animation:navSweep 6s linear infinite;
}
.sf-grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1.4fr;
  gap:44px; padding:64px 0 46px; text-align:start;
}
.sf-brand-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sf-brand-name{ font-size:18px; font-weight:800; color:var(--ink); letter-spacing:.3px; }
.sf-brand-sub{ font-size:12px; color:var(--ink-2); margin-top:2px; }
.sf-tagline{ font-size:13.5px; line-height:1.75; color:var(--ink-3); max-width:300px; margin-bottom:20px; }
.sf-col h4{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.8px;
  color:var(--gold); margin-bottom:16px;
}
.sf-col h4::after{
  content:""; display:block; width:26px; height:2px; margin-top:8px;
  background:var(--gold-grad); border-radius:2px;
}
.sf-col a, .sf-col .sf-line{
  display:flex; align-items:center; gap:9px;
  color:var(--ink-2); font-size:14px; padding:7px 0;
  text-decoration:none; transition:color .2s ease, transform .2s ease;
}
.sf-col a:hover{ color:var(--gold-light); transform:translateX(4px); }
[dir="rtl"] .sf-col a:hover{ transform:translateX(-4px); }
.sf-col a svg, .sf-col .sf-line svg{ flex-shrink:0; opacity:.65; }
.sf-social{ display:flex; gap:10px; }
.sf-map-btn{
  display:inline-flex !important; align-items:center; gap:8px; margin-top:12px;
  padding:9px 16px !important; border-radius:11px;
  border:1px solid var(--line-2); background:var(--gold-a08);
  color:var(--gold-light) !important; font-weight:700; font-size:13px !important;
  width:fit-content;
}
.sf-map-btn:hover{ background:var(--line); transform:none !important; }
.sf-bottom{
  border-top:1px solid var(--line);
  padding:20px 0; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:13px; color:var(--ink-3);
}
.sf-bottom a{ color:var(--gold); text-decoration:none; font-weight:600; }
@media (max-width: 900px){
  .sf-grid{ grid-template-columns:1fr 1fr; gap:36px; padding:52px 0 38px; }
}
@media (max-width: 560px){
  .sf-grid{ grid-template-columns:1fr; gap:34px; }
  .sf-tagline{ max-width:none; }
  .sf-bottom{ flex-direction:column; text-align:center; }
}

/* ── Simple page hero (verify page etc.) ── */
.page-hero{
  padding:130px 0 24px; text-align:center; position:relative; overflow:hidden;
}
.page-hero .section-title{ margin-bottom:8px; }