/* ==========================================================================
   PRERONA ARMAN — SRC PRESIDENT CAMPAIGN
   Design tokens: Deep teal (#053B3F) + emerald accent (#00A88F) on a soft
   fog background (#E8ECEF). Editorial Arimo display type over calm Open
   Sans body copy. Signature element: the "ballot check" mark used in the
   loader, hero, and section markers — a small motif tying every page back
   to the act of voting/being heard.
   ========================================================================== */

:root{
  --primary:#053B3F;
  --dark-accent:#0A2E23;
  --neutral:#B0B7BC;
  --bg:#E8ECEF;
  --accent:#00A88F;

  --primary-rgb:5,59,63;
  --accent-rgb:0,168,143;
  --dark-rgb:10,46,35;

  --surface:#ffffff;
  --text-strong:var(--dark-accent);
  --text-body:#33474A;
  --text-muted:#5F7175;

  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:32px;

  --shadow-soft:0 20px 60px -20px rgba(5,59,63,0.25);
  --shadow-lift:0 30px 80px -25px rgba(5,59,63,0.35);

  --font-display:'Arimo', sans-serif;
  --font-body:'Open Sans', sans-serif;

  --nav-h:84px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"]{
  --bg:#071B1A;
  --surface:#0D2624;
  --text-strong:#EAF2F0;
  --text-body:#C7D6D3;
  --text-muted:#93A6A2;
  --neutral:#3C4E4F;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
::selection{ background:var(--accent); color:#fff; }

body{
  font-family:var(--font-body);
  color:var(--text-body);
  background:var(--bg);
  overflow-x:hidden;
  transition:background .4s var(--ease-out), color .4s var(--ease-out);
  line-height:1.7;
}
img, svg, canvas{ max-width:100%; height:auto; display:block; }
.container{ padding-left:1rem; padding-right:1rem; }
h1,h2,h3,h4,h5,h6,p,li{ overflow-wrap:anywhere; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:10px; border:2px solid var(--bg); }

h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); color:var(--text-strong); letter-spacing:-0.02em; }
.eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--accent); display:inline-block; }

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

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--primary); color:#fff; padding:.75rem 1.25rem;
  z-index:2000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* ==================== Page loader ==================== */
#page-loader{
  position:fixed; inset:0; z-index:3000; background:linear-gradient(160deg,var(--primary),var(--dark-accent));
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:1.5rem; transition:opacity .6s var(--ease-out), visibility .6s;
}
#page-loader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ text-align:center; color:#fff; width:min(100%, 320px); }
.loader-mark svg{ width:min(64px, 28vw); height:auto; margin:0 auto; }
.loader-ring{ stroke:rgba(255,255,255,.25); }
.loader-check{ stroke:var(--accent); stroke-dasharray:70; stroke-dashoffset:70; animation:draw-check 1.2s var(--ease-out) forwards .3s infinite; }
@keyframes draw-check{ to{ stroke-dashoffset:0; } }
.loader-mark p{ margin-top:1rem; font-family:var(--font-display); font-weight:600; letter-spacing:.03em; opacity:.85; font-size:clamp(.95rem, 2.2vw, 1.1rem); line-height:1.5; }

/* ==================== Custom cursor ==================== */
.custom-cursor, .custom-cursor-dot{ position:fixed; top:0; left:0; pointer-events:none; z-index:2500; border-radius:50%; transform:translate(-50%,-50%); transition:opacity .3s; }
.custom-cursor{ width:36px; height:36px; border:1.5px solid rgba(var(--accent-rgb),.6); }
.custom-cursor-dot{ width:6px; height:6px; background:var(--accent); }
@media (hover:none), (pointer:coarse){ .custom-cursor, .custom-cursor-dot{ display:none; } }

/* ==================== Navigation ==================== */
.glass-nav{
  height:var(--nav-h); background:linear-gradient(90deg, rgba(5,59,63,.94), rgba(10,46,35,.9));
  backdrop-filter:blur(14px) saturate(160%); border:1px solid rgba(255,255,255,.08);
  transition:all .4s var(--ease-out); padding:0; color:#f4f8f7;
  border-radius:0 0 24px 24px; margin:0 auto; width:min(92%, 1200px);
  box-shadow:0 10px 30px -18px rgba(5,59,63,.25);
}
.glass-nav.scrolled{
  --nav-h:70px;
  background:rgba(255,255,255,.94); color:var(--text-strong);
  backdrop-filter:blur(20px) saturate(180%); border-color:rgba(var(--primary-rgb),.08);
  box-shadow:0 16px 42px -24px rgba(5,59,63,.24);
  border-radius:999px; width:min(94%, 1080px); margin-top:10px;
}
.glass-nav.compact{ --nav-h:62px; border-radius:999px; width:min(90%, 1040px); margin-top:12px; }
.home-page .glass-nav{
  background:rgba(255,255,255,.16); backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.2); color:#f5fbf9; box-shadow:0 10px 30px -18px rgba(5,59,63,.25);
}
.home-page .glass-nav.scrolled{
  background:rgba(255,255,255,.92); color:var(--text-strong);
  backdrop-filter:blur(22px) saturate(190%); border-color:rgba(var(--primary-rgb),.08);
  box-shadow:0 16px 42px -24px rgba(5,59,63,.24);
}
[data-theme="dark"] .glass-nav.scrolled{ background:rgba(7,27,26,.92); color:#EAF2F0; }
.glass-nav .container{ height:var(--nav-h); display:flex; align-items:center; transition:height .35s var(--ease-out); }
.navbar-brand{ display:flex; align-items:center; gap:.75rem; transition:transform .35s var(--ease-out); }
.glass-nav.scrolled .navbar-brand, .glass-nav.compact .navbar-brand{ transform:scale(.96); }
.brand-mark{
  width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:.95rem;
  box-shadow:0 10px 24px -10px rgba(var(--accent-rgb),.65); overflow:hidden; padding:2px;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.glass-nav.scrolled .brand-mark{ width:40px; height:40px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-display); color:inherit; font-size:1rem; }
.brand-text small{ color:rgba(255,255,255,.74); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; }
.glass-nav.scrolled .brand-text strong{ color:var(--text-strong); }
.glass-nav.scrolled .brand-text small{ color:var(--text-muted); }

.navbar-nav .nav-link{
  font-family:var(--font-display); font-weight:600; color:inherit; position:relative; padding:.5rem .9rem !important; margin:0 .1rem;
}
.navbar-nav .nav-link::after{
  content:''; position:absolute; left:.9rem; right:.9rem; bottom:.15rem; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after{ transform:scaleX(1); }
.navbar-nav .nav-link.active{ color:var(--accent); }

.btn-nav-cta{
  font-family:var(--font-display); font-weight:600; background:linear-gradient(135deg,var(--accent),#00c4a3); color:#fff !important; border-radius:999px;
  padding:.6rem 1.25rem; margin-left:.5rem; box-shadow:0 12px 26px -12px rgba(var(--accent-rgb),.8); transition:transform .3s var(--ease-out), box-shadow .3s;
}
.glass-nav.scrolled .btn-nav-cta{ box-shadow:0 12px 22px -14px rgba(var(--accent-rgb),.7); }
.btn-nav-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(var(--accent-rgb),.9); }

.theme-toggle{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:inherit; margin-left:.5rem; position:relative;
}
.glass-nav.scrolled .theme-toggle{ border-color:rgba(var(--primary-rgb),.12); background:rgba(var(--primary-rgb),.04); }
.theme-toggle .moon-icon{ display:none; }
[data-theme="dark"] .theme-toggle .sun-icon{ display:none; }
[data-theme="dark"] .theme-toggle .moon-icon{ display:block; }

.navbar-toggler{ border:none; padding:.4rem; }
.toggler-bar{ display:block; width:24px; height:2px; background:currentColor; margin:5px 0; transition:.3s; }

/* ==================== Flash messages ==================== */
.flash-wrap{ position:fixed; top:calc(var(--nav-h) + 12px); right:16px; z-index:1500; display:flex; flex-direction:column; gap:.5rem; max-width:340px; }
.flash-toast{
  background:var(--surface); border-radius:var(--radius-sm); padding:.85rem 1rem; box-shadow:var(--shadow-soft);
  display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.9rem; border-left:4px solid var(--accent);
}
.flash-success{ border-color:var(--accent); }
.flash-danger{ border-color:#c0392b; }
.flash-warning{ border-color:#d19a1f; }
.flash-close{ margin-left:auto; background:none; border:none; font-size:1.2rem; line-height:1; color:var(--text-muted); }

/* ==================== Buttons ==================== */
.btn-campaign{
  font-family:var(--font-display); font-weight:600; border-radius:999px; padding:.9rem 2rem; border:none; position:relative;
  overflow:hidden; display:inline-flex; align-items:center; gap:.6rem; transition:transform .35s var(--ease-out), box-shadow .35s;
}
.btn-campaign.primary{ background:linear-gradient(135deg,var(--accent),#00c4a3); color:#fff; box-shadow:0 16px 40px -14px rgba(var(--accent-rgb),.8); }
.btn-campaign.outline{ background:transparent; color:var(--text-strong); border:1.5px solid rgba(var(--primary-rgb),.35); }
.home-page .btn-campaign.outline{ background:rgba(255,255,255,.16); color:#fff; border:1.5px solid rgba(255,255,255,.35); backdrop-filter:blur(10px); }
.home-page section:not(.hero) .btn-campaign.outline{ background:transparent; color:var(--text-strong); border:1.5px solid rgba(var(--primary-rgb),.35); }
[data-theme="dark"] .btn-campaign.outline{ color:#EAF2F0; border-color:rgba(255,255,255,.25); }
.btn-campaign:hover{ transform:translateY(-3px); }
.btn-campaign.primary:hover{ box-shadow:0 22px 50px -14px rgba(var(--accent-rgb),.9); }
.btn-campaign .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s linear; pointer-events:none; }
@keyframes ripple{ to{ transform:scale(3); opacity:0; } }

/* ==================== Sections & layout ==================== */
section{ position:relative; padding:6.5rem 0; }
.bg-highlight{ background:linear-gradient(180deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),.02)); }
.home-page .bg-highlight{ background:linear-gradient(180deg, rgba(var(--accent-rgb),.05), rgba(var(--accent-rgb),0)); }
.section-tight{ padding:4rem 0; }
.container-narrow{ max-width:820px; margin:0 auto; }

/* ==================== Hero ==================== */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--dark-accent) 0%, var(--primary) 55%, #064943 100%); color:#fff; padding-top:var(--nav-h);
}
.hero-gradient-anim{
  position:absolute; inset:-20%; background:radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb),.35), transparent 45%),
  radial-gradient(circle at 80% 70%, rgba(var(--accent-rgb),.25), transparent 50%);
  animation:heroDrift 16s ease-in-out infinite alternate; filter:blur(10px);
}
@keyframes heroDrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(3%,-4%) scale(1.08); } }
.hero-particles{ position:absolute; inset:0; z-index:1; }
.hero-blob{ position:absolute; opacity:.5; filter:blur(2px); }
.hero-content{ position:relative; z-index:2; }
.hero-eyebrow{ color:rgba(255,255,255,.75); }
.hero-eyebrow::before{ background:#fff; }
.hero-title{ font-size:clamp(2.6rem,6vw,5rem); font-weight:800; line-height:1.05; color:#fff; margin:1rem 0 1.25rem; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .accent-word{ color:var(--accent); }
.hero-sub{ font-size:1.15rem; color:rgba(255,255,255,.82); max-width:560px; }
.hero-typed{ color:var(--accent); font-weight:700; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero-portrait-wrap{ position:relative; }
.hero-portrait{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lift); border:1px solid rgba(255,255,255,.15);
  aspect-ratio:4/5; background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  display:flex; align-items:center; justify-content:center; padding:1.4rem;
}
.hero-portrait img{ width:100%; height:100%; object-fit:cover; }
.hero-logo-frame{ aspect-ratio:1/1; max-width:430px; margin:0 auto; background:rgba(255,255,255,.94); padding:2rem; }
.hero-logo-image{ object-fit:contain; max-width:100%; max-height:100%; width:auto; height:auto; }
.hero-float-card{
  position:absolute; background:rgba(255,255,255,.1); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-md); padding:1rem 1.2rem; color:#fff; box-shadow:var(--shadow-soft);
}
.scroll-indicator{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.75);
  display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.scroll-indicator .mouse{ width:26px; height:42px; border:2px solid rgba(255,255,255,.6); border-radius:14px; position:relative; }
.scroll-indicator .mouse::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background:#fff; border-radius:2px;
  transform:translateX(-50%); animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ opacity:1; top:6px; } 100%{ opacity:0; top:22px; } }

/* ==================== Cards ==================== */
.premium-card{
  background:var(--surface); border-radius:var(--radius-md); padding:2.1rem; box-shadow:var(--shadow-soft);
  border:1px solid rgba(var(--primary-rgb),.05); height:100%; transition:transform .4s var(--ease-out), box-shadow .4s;
  position:relative; overflow:hidden;
}
.premium-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); }
.premium-card .card-icon{
  width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.15), rgba(var(--primary-rgb),.1)); color:var(--accent); margin-bottom:1.2rem;
}
.premium-card h3, .premium-card h4{ margin-bottom:.6rem; }
.premium-card p:last-child{ margin-bottom:0; }
.glow-border{ position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:linear-gradient(135deg,var(--accent),transparent 60%); opacity:0; transition:opacity .4s; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.premium-card:hover .glow-border{ opacity:1; }

.value-card{ text-align:center; }
.value-card .card-icon{ margin:0 auto 1.2rem; }

.stat-card{ text-align:center; }
.stat-number{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--accent); }
.stat-label{ color:var(--text-muted); font-weight:600; }

/* ==================== Testimonials ==================== */
.testimonial-card{
  background:var(--surface); border-radius:var(--radius-md); padding:2rem; box-shadow:var(--shadow-soft); height:100%;
}
.testimonial-quote{ font-size:1.05rem; color:var(--text-body); }
.testimonial-person{ display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; }
.testimonial-avatar{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }

/* ==================== Motto / CTA sections ==================== */
.motto-section{
  background:linear-gradient(150deg,var(--primary),var(--dark-accent)); color:#fff; text-align:center; position:relative; overflow:hidden;
}
.motto-section h2{ color:#fff; font-size:clamp(1.8rem,4vw,3rem); max-width:900px; margin:0 auto; }
.motto-glow{ position:absolute; width:60vw; height:60vw; background:radial-gradient(circle, rgba(var(--accent-rgb),.35), transparent 60%); top:-20%; left:50%; transform:translateX(-50%); }

.cta-section{ text-align:center; }
.cta-section .btn-campaign{ margin:.4rem; }

/* ==================== FAQ (accordion) ==================== */
.faq-item{ border-bottom:1px solid rgba(var(--primary-rgb),.12); }
.faq-question{
  width:100%; text-align:left; background:none; border:none; padding:1.25rem 0; font-family:var(--font-display); font-weight:700;
  color:var(--text-strong); display:flex; justify-content:space-between; align-items:center; font-size:1.05rem;
}
.faq-question i{ transition:transform .3s var(--ease-out); color:var(--accent); }
.faq-question[aria-expanded="true"] i{ transform:rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out); }
.faq-answer-inner{ padding-bottom:1.25rem; color:var(--text-body); }

/* ==================== Timeline (About page) ==================== */
.timeline{ position:relative; padding-left:2.5rem; }
.timeline::before{ content:''; position:absolute; left:9px; top:0; bottom:0; width:2px; background:linear-gradient(var(--accent),var(--primary)); }
.timeline-item{ position:relative; padding-bottom:2.4rem; }
.timeline-item::before{ content:''; position:absolute; left:-2.5rem; top:.3rem; width:20px; height:20px; border-radius:50%; background:var(--surface); border:3px solid var(--accent); }
.timeline-item h4{ margin-bottom:.4rem; }

/* ==================== Vision feature cards ==================== */
.vision-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:2.4rem; box-shadow:var(--shadow-soft); position:relative;
  overflow:hidden; height:100%; transition:transform .4s var(--ease-out);
}
.vision-card:hover{ transform:translateY(-6px) scale(1.01); }
.vision-card .card-icon{ width:64px; height:64px; font-size:1.7rem; }
.vision-card::after{
  content:''; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.12), transparent 70%);
}

/* ==================== Suggestions form ==================== */
.glass-form{
  background:rgba(255,255,255,.65); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-lg); padding:2.6rem; box-shadow:var(--shadow-lift);
}
[data-theme="dark"] .glass-form{ background:rgba(13,38,36,.65); border-color:rgba(255,255,255,.08); }
.glass-form label{ font-family:var(--font-display); font-weight:600; color:var(--text-strong); margin-bottom:.35rem; }
.glass-form .form-control, .glass-form .form-select{
  border-radius:var(--radius-sm); border:1.5px solid rgba(var(--primary-rgb),.15); padding:.75rem 1rem; background:rgba(255,255,255,.8);
}
[data-theme="dark"] .glass-form .form-control, [data-theme="dark"] .glass-form .form-select{ background:rgba(255,255,255,.05); color:#EAF2F0; }
.glass-form .form-control:focus, .glass-form .form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15); }
.glass-form .invalid-feedback{ display:block; color:#c0392b; font-size:.85rem; margin-top:.25rem; }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }

/* ==================== Footer ==================== */
.site-footer{ background:var(--dark-accent); color:rgba(255,255,255,.85); padding-top:4rem; position:relative; }
.footer-wave{ position:absolute; top:-59px; left:0; width:100%; line-height:0; }
.footer-wave svg{ width:100%; height:60px; }
.footer-wave path{ fill:var(--dark-accent); }
.site-footer h6{ color:#fff; font-family:var(--font-display); margin-bottom:1rem; }
.footer-brand{ display:flex; gap:1rem; margin-bottom:1rem; }
.footer-tagline{ color:rgba(255,255,255,.6); max-width:320px; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-links a{ color:rgba(255,255,255,.75); }
.footer-links a:hover{ color:var(--accent); }
.footer-socials{ display:flex; gap:.7rem; margin-bottom:.6rem; }
.footer-socials a{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.footer-socials a:hover{ background:var(--accent); transform:translateY(-3px); }
.footer-note{ font-size:.85rem; color:rgba(255,255,255,.5); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding:1.5rem 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:1rem; font-size:.85rem; color:rgba(255,255,255,.55);
}
.back-to-top{
  width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; border:none; display:flex;
  align-items:center; justify-content:center; box-shadow:0 12px 26px -10px rgba(var(--accent-rgb),.7); transition:transform .3s;
}
.back-to-top:hover{ transform:translateY(-4px); }

/* ==================== 404 / 500 ==================== */
.error-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:8rem 1rem 4rem; }
.error-code{ font-family:var(--font-display); font-size:clamp(5rem,15vw,10rem); font-weight:800; color:var(--accent); line-height:1; }

/* ==================== Admin ==================== */
.admin-shell{ min-height:100vh; background:var(--bg); padding-top:calc(var(--nav-h) + 2rem); padding-bottom:4rem; }
.admin-card{ background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); padding:1.75rem; }
.admin-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--dark-accent),var(--primary)); }
.admin-login-card{ background:var(--surface); border-radius:var(--radius-lg); padding:3rem; box-shadow:var(--shadow-lift); max-width:420px; width:100%; }
.table-admin{ font-size:.92rem; }
.badge-anon{ background:var(--neutral); color:#fff; }

/* ==================== Confetti canvas ==================== */
#confetti-canvas{ position:fixed; inset:0; pointer-events:none; z-index:2600; }

/* ==================== Utility / reveal ==================== */
[data-reveal]{ opacity:0; transform:translateY(28px); }
.reveal-in{ opacity:1 !important; transform:none !important; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media (max-width: 991px){
  .navbar-collapse{ background:var(--surface); margin-top:1rem; border-radius:var(--radius-md); padding:1rem 1.25rem; box-shadow:var(--shadow-soft); }
  .navbar-nav{ gap:.25rem; }
  .navbar-nav .nav-item{ width:100%; }
  .navbar-nav .nav-link{ display:block; padding:.7rem .2rem !important; }
  .navbar-nav .nav-link::after{ display:none; }
  .btn-nav-cta{ margin:.5rem 0 0; display:inline-block; width:100%; text-align:center; }
  .theme-toggle{ margin-left:0; margin-top:.4rem; }
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 2rem); padding-bottom:5rem; }
  .hero-content .row{ gap:2rem !important; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn-campaign{ width:100%; justify-content:center; }
  .hero-portrait-wrap{ margin-top:1rem; }
  .hero-float-card{ font-size:.92rem; padding:.8rem 1rem; }
  .hero-float-card[style*="top:-8%"]{ top:2% !important; left:2% !important; }
  .hero-float-card[style*="bottom:-8%"]{ bottom:2% !important; right:2% !important; }
  .scroll-indicator{ bottom:1.2rem; }
  .premium-card, .vision-card, .glass-form, .testimonial-card, .admin-login-card{ padding:1.5rem; }
  .timeline{ padding-left:1.6rem; }
  .timeline::before{ left:6px; }
  .timeline-item::before{ left:-1.6rem; width:16px; height:16px; }
  .footer-brand{ flex-direction:column; align-items:flex-start; }
  .site-footer .col-6{ width:100%; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 767px){
  section{ padding:4.4rem 0; }
  #page-loader{ padding:1rem; }
  .loader-mark{ width:min(100%, 280px); }
  .loader-mark p{ font-size:.95rem; padding:0 .5rem; }
  .glass-nav{ width:min(100%, 1200px); border-radius:0 0 24px 24px; margin:0; }
  .glass-nav.scrolled{ width:min(100%, 1200px); margin-top:0; border-radius:0 0 24px 24px; }
  .glass-nav .container{ padding:0 1rem; }
  .hero-title{ font-size:clamp(2.1rem,8vw,3rem); }
  .hero-sub{ font-size:1rem; max-width:100%; }
  .hero-logo-frame{ padding:1.2rem; }
  .hero-portrait-wrap{ display:flex; flex-direction:column; gap:1rem; }
  .hero-float-card{ position:relative; display:inline-flex; width:fit-content; top:auto !important; bottom:auto !important; left:auto !important; right:auto !important; margin:0; }
  .motto-section h2{ font-size:clamp(1.6rem,5.5vw,2.4rem); }
  .cta-section .btn-campaign{ width:100%; justify-content:center; margin:.35rem 0; }
  .faq-question{ font-size:1rem; gap:.8rem; }
  .faq-answer-inner{ font-size:.95rem; }
  .glass-form{ padding:1.4rem; }
  .admin-login-card{ padding:1.8rem; }
  .footer-links{ gap:.35rem; }
}
@media (max-width: 575px){
  section{ padding:4rem 0; }
  .glass-form{ padding:1.2rem; }
  .hero{ padding-top:calc(var(--nav-h) + 1rem); padding-bottom:3.5rem; }
  .hero-title{ font-size:clamp(1.9rem,7.5vw,2.6rem); }
  .hero-sub{ font-size:.95rem; }
  .brand-text small{ display:none; }
  .stat-number{ font-size:2rem; }
  .timeline{ padding-left:1.25rem; }
  .timeline-item::before{ left:-1.25rem; }
  .flash-wrap{ left:12px; right:12px; max-width:none; }
}