/* ==========================================================================
   NATIVITAS DOMINI — Design System (Elegant revision)
   Phase 1: UI/UX (static, no backend wiring yet)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* --- Color tokens: satu warna gelap dominan (deep pine),
         krem hangat untuk terang, emas asli sbg aksen tipis,
         merah brick untuk highlight kecil saja --- */
  --pine-900:#1987d1;   /* deep forest green — dipakai di semua section gelap */
  --pine-800:#207da8;   /* satu tingkat lebih terang, untuk variasi halus */
  --pine-700:#2b5b9b;
  --cream-100:#FFFDF8;  /* krem hangat, bukan putih dingin */
  --cream-200:#F3EEE2;
  --cream-300:#EAE2D0;
  --ink-900:#232821;    /* teks utama: charcoal hangat, bukan navy */
  --ink-600:#4B5449;
  --ink-400:#7C8578;
  --berry-600:#8C3A34;  /* merah brick redup — aksen kecil, bukan blok besar */
  --berry-100:#F1E3DE;
  --gold-500:#B08B3F;   /* emas sungguhan, dipakai sangat sedikit */
  --gold-100:#F1E7D1;
  --sage-600:#3E6B54;
  --sage-100:#E4ECE3;
  --line:#DFD8C6;
  --line-dark:#28453A;

  /* --- Status colors (sudah cukup redup, dipertahankan) --- */
  --status-waiting:#9A8B54;
  --status-waiting-bg:#F3EBCF;
  --status-on-the-way:#B4652F;
  --status-on-the-way-bg:#F4E1CD;
  --status-arrived:#2D6C8C;
  --status-arrived-bg:#D9E9F0;
  --status-visiting:#9C3B3B;
  --status-visiting-bg:#F3E1DD;
  --status-completed:#3E7A52;
  --status-completed-bg:#DDEDE0;

  /* --- Type --- */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
body[data-home-theme]{ transition:background-color .3s ease,color .3s ease; }
body[data-home-theme="dark"]{
  color-scheme:dark;
  --pine-900:#070d18;
  --pine-800:#0d1930;
  --pine-700:#2454a6;
  --cream-100:#070b14;
  --cream-200:#0d1422;
  --cream-300:#17243a;
  --ink-900:#f8fafc;
  --ink-600:#d5deeb;
  --ink-400:#9facbf;
  --berry-100:#2b1e2a;
  --gold-500:#80b4ff;
  --gold-100:#132c51;
  --sage-100:#102644;
  --line:#263854;
  --line-dark:#344a68;
  --status-waiting-bg:#302a20;
  --status-on-the-way-bg:#33241d;
  --status-arrived-bg:#132943;
  --status-visiting-bg:#321e29;
  --status-completed-bg:#173126;
  --home-hover:#183762;
  --home-accent:#4f8df7;
  background:var(--cream-100);
  color:var(--ink-900);
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0 0 .4em 0;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--pine-900);
}
p{ margin:0 0 1em 0; color:var(--ink-600); }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

.container{ max-width:1120px; margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:640px; margin:0 auto; padding:0 24px; }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--pine-700); color:var(--cream-100); }
.btn-primary:hover{ background:var(--pine-700); }
.btn-gold{ background:var(--gold-500); color:#fff; }
.btn-gold:hover{ background:#96742f; }
.btn-blue{ background:var(--pine-700); color:var(--cream-300); }
.btn-blue:hover{ background:var(--pine-900); }
.btn-outline{ background:transparent; border-color:var(--line-dark); color:var(--pine-900); }
.btn-outline:hover{ background:var(--cream-200); }
.btn-outline-light{ background:transparent; border-color:rgba(255,253,248,.5); color:var(--cream-100); }
.btn-outline-light:hover{ background:rgba(255,253,248,.1); }
.btn-ghost{ background:transparent; color:var(--pine-800); padding:12px 14px; }
.btn-ghost:hover{ background:var(--cream-200); }
.btn-sm{ padding:8px 16px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- Badges / status pills --- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:700;
}
.pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status-waiting{ color:var(--status-waiting); background:var(--status-waiting-bg); }
.status-on_the_way{ color:var(--status-on-the-way); background:var(--status-on-the-way-bg); }
.status-arrived{ color:var(--status-arrived); background:var(--status-arrived-bg); }
.status-visiting{ color:var(--status-visiting); background:var(--status-visiting-bg); }
.status-completed{ color:var(--status-completed); background:var(--status-completed-bg); }

.pill-pay-pending{ color:var(--status-waiting); background:var(--status-waiting-bg); }
.pill-pay-paid{ color:var(--status-completed); background:var(--status-completed-bg); }
.pill-pay-expired{ color:var(--ink-400); background:var(--cream-300); }
.pill-pay-cancelled{ color:var(--berry-600); background:var(--berry-100); }

/* --- Cards --- */
.card{
  background:var(--cream-100);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
}
.card-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; }
.card-title-row h3{ margin:0; font-size:1.05rem; }

/* --- Forms --- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:700; color:var(--pine-800); margin-bottom:6px; }
.field .hint{ font-size:.78rem; color:var(--ink-400); margin-top:5px; }
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],input[type=time],input[type=number],select,textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--cream-100); font-family:inherit;
  font-size:.95rem; color:var(--ink-900);
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--pine-700); box-shadow:0 0 0 3px var(--sage-100); }
textarea{ resize:vertical; min-height:90px; }
.input-locked{ background:var(--cream-200); color:var(--ink-400); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

/* --- Tables --- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
table{ width:100%; border-collapse:collapse; min-width:640px; }
thead th{
  text-align:left; font-size:.75rem; text-transform:none; letter-spacing:.02em;
  color:var(--ink-400); font-weight:700; padding:12px 16px; background:var(--cream-200);
  border-bottom:1px solid var(--line);
}
tbody td{ padding:14px 16px; border-bottom:1px solid var(--line); font-size:.92rem; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--cream-200); }
.cell-muted{ color:var(--ink-400); }
.cell-private{ color:var(--ink-400); font-style:italic; }

/* --- Top marketing nav --- */
.scroll-progress{ position:fixed; inset:0 0 auto; height:3px; z-index:60; pointer-events:none; }
.scroll-progress span{ display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,var(--pine-700),var(--gold-500)); }
.site-header{ position:sticky; top:0; z-index:50; height:77px; background:transparent; color:#fff; border-bottom:0; transition:transform .42s cubic-bezier(.2,.8,.2,1),background-color .25s ease,border-color .25s ease,color .25s ease; }
.site-header.is-scrolled{ background:transparent; border-bottom-color:transparent; }
.site-nav{ position:absolute; top:14px; left:50%; display:flex; align-items:center; justify-content:space-between; width:min(920px,calc(100% - 24px)); max-width:none; margin:0; padding:12px 14px 12px 20px; gap:12px; transform:translateX(-50%); border:1px solid transparent; border-radius:999px; background:transparent; transition:transform .5s cubic-bezier(.2,.8,.2,1),top .35s ease,width .5s cubic-bezier(.2,.8,.2,1),padding .4s ease,background .4s ease,border-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease; }
.site-header.is-scrolled .site-nav{ top:7px; width:min(760px,calc(100% - 24px)); padding:7px 8px 7px 16px; border-color:rgba(35,40,33,.1); background:rgba(255,253,248,.76); -webkit-backdrop-filter:blur(15px) saturate(1.25); backdrop-filter:blur(15px) saturate(1.25); box-shadow:0 12px 40px -12px rgba(30,50,42,.28); }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:1.45rem; font-weight:600; color:var(--cream-100); text-decoration:none; white-space:nowrap; }
.site-header .brand{ color:#111; }
.brand-mark{ color:var(--ink-900); width:38px; height:38px; object-fit:contain; border-radius:50%; }
.brand-mark{ transition:width .25s ease,height .25s ease,transform .6s cubic-bezier(.3,1.6,.5,1); }
.site-header .brand:hover .brand-mark{ transform:rotate(135deg) scale(1.08); }
.site-header.is-scrolled .brand-mark{ width:34px; height:34px; }
.site-nav-links{ position:relative; display:flex; align-items:center; justify-content:center; gap:4px; list-style:none; margin:0; padding:0; flex:1; }
.site-nav-links > li:not(.site-nav-pill){ position:relative; z-index:1; }
.site-nav-links a,.site-nav-dropdown-toggle{ display:block; padding:8px 13px; border:0; border-radius:999px; background:transparent; text-decoration:none; color:var(--ink-600); font-family:inherit; font-size:.92rem; font-weight:700; opacity:.9; cursor:pointer; transition:color .2s ease,opacity .2s ease,background .2s ease; }
.site-nav-links a:hover,.site-nav-links a.active,.site-nav-dropdown-toggle:hover{ opacity:1; color:var(--ink-900); }
.site-nav-dropdown-toggle{ display:flex; align-items:center; gap:5px; }
.site-nav-dropdown-toggle svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.3,1.3,.5,1); }
.site-nav-dropdown.open .site-nav-dropdown-toggle svg{ transform:rotate(180deg); }
.site-nav-dropdown-menu{ position:absolute; top:calc(100% + 14px); left:50%; display:grid; width:300px; gap:3px; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--cream-100); box-shadow:0 24px 60px -20px rgba(20,38,59,.3); opacity:0; visibility:hidden; transform:translate(-50%,-8px) scale(.96); transform-origin:top center; transition:opacity .22s ease,transform .32s cubic-bezier(.2,.9,.3,1.2),visibility .22s; }
.site-nav-dropdown.open .site-nav-dropdown-menu,.site-nav-dropdown:focus-within .site-nav-dropdown-menu{ opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); }
.site-nav-dropdown-menu a{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:11px; color:var(--ink-900); font-size:.84rem; font-weight:500; }
.site-nav-dropdown-menu a:hover{ background:var(--cream-200); }
.site-nav-dropdown-menu strong,.site-nav-dropdown-menu small{ display:block; }
.site-nav-dropdown-menu strong{ font-size:.86rem; }
.site-nav-dropdown-menu small{ margin-top:2px; color:var(--ink-400); font-size:.72rem; font-weight:500; }
.nav-menu-icon{ display:grid; width:36px; height:36px; flex:none; place-items:center; border-radius:10px; background:var(--gold-100); color:var(--pine-700); font-size:1rem; }
.site-nav-pill{ position:absolute; z-index:0; top:0; left:0; height:100%; width:0; border-radius:999px; background:var(--gold-100); opacity:0; pointer-events:none; transition:transform .42s cubic-bezier(.3,1.25,.5,1),width .42s cubic-bezier(.3,1.25,.5,1),opacity .22s ease; }
.site-nav-tools{ display:flex; align-items:center; gap:8px; }
.nav-theme-toggle{ display:grid; width:40px; height:40px; flex:none; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink-900); cursor:pointer; transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .2s ease,border-color .2s ease; }
.nav-theme-toggle:hover{ background:var(--cream-200); }
.nav-theme-toggle:active{ transform:scale(.9); }
.nav-theme-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s cubic-bezier(.3,1.5,.5,1); }
.nav-join-cta{ white-space:nowrap; }
.site-header .nav-join-cta{ border-radius:999px; }
.nav-toggle{ display:none; position:relative; z-index:51; width:42px; height:42px; background:transparent; border:1px solid var(--line); border-radius:50%; color:var(--ink-900); cursor:pointer; padding:0; transition:transform .3s cubic-bezier(.3,1.5,.5,1),background .2s ease; }
.nav-toggle:active{ transform:scale(.9); }
.nav-toggle span{ position:absolute; left:11px; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .38s cubic-bezier(.3,1.2,.5,1),opacity .2s ease,top .38s cubic-bezier(.3,1.2,.5,1); }
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:24px; }
.nav-toggle.is-open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle.is-open span:nth-child(3){ top:19px; transform:rotate(-45deg); }
.mobile-only{ display:none; }

.site-header.is-night:not(.is-scrolled){ background:transparent; border-bottom-color:transparent; }
.site-header.is-night:not(.is-scrolled) .site-nav{ border-color:rgba(148,185,245,.2); background:rgba(7,13,24,.88); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 12px 40px -12px rgba(0,0,0,.55); }
.site-header.is-night .brand,.site-header.is-night .site-nav-links a,.site-header.is-night .site-nav-dropdown-toggle,.site-header.is-night .nav-theme-toggle,.site-header.is-night .nav-toggle{ color:#f8fafc; }
.site-header.is-night .site-nav-links a:hover,.site-header.is-night .site-nav-links a.active,.site-header.is-night .site-nav-dropdown-toggle:hover{ color:#fff; }
.site-header.is-night .nav-theme-toggle,.site-header.is-night .nav-toggle{ border-color:rgba(255,255,255,.18); }
.site-header.is-night .nav-theme-toggle:hover,.site-header.is-night .nav-toggle:hover{ background:rgba(79,141,247,.18); border-color:rgba(128,180,255,.55); }
.site-header.is-night.is-scrolled .site-nav{ border-color:rgba(148,185,245,.2); background:rgba(7,13,24,.9); box-shadow:0 12px 40px -12px rgba(0,0,0,.55); }
.site-header.is-night .site-nav-pill{ background:rgba(79,141,247,.22); }
.site-header.is-night .site-nav-dropdown-menu{ background:#0e1a2e; border-color:#263854; }
.site-header.is-night .site-nav-dropdown-menu a{ color:#f8fafc; }
.site-header.is-night .site-nav-dropdown-menu a:hover{ background:#183762; }
.site-header.is-night .site-nav-dropdown-menu small{ color:#b6c5dc; }
.site-header.is-night .nav-menu-icon{ background:#183762; color:#a9cbff; }
.site-header.is-night .nav-join-cta{ background:#2454a6; color:#fff; }
.site-header.is-night .nav-join-cta:hover{ background:#3474d4; }

@media (max-width:860px){
  .site-nav{ position:absolute; top:6px; gap:12px; padding:8px 12px; }
  .site-nav .brand{ min-width:0; gap:8px; font-size:clamp(.84rem,4.2vw,1.05rem); }
  .site-nav .brand-mark{ width:34px; height:34px; flex:none; }
  .site-nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:3px;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    height:100%;
    padding:100px 32px 40px;
    background:rgba(255,253,248,.84);
    -webkit-backdrop-filter:blur(16px) saturate(1.12);
    backdrop-filter:blur(16px) saturate(1.12);
    z-index:50;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    clip-path:circle(0 at calc(100vw - 44px) 38px);
    transition:clip-path .65s cubic-bezier(.7,0,.2,1),opacity .25s ease,visibility .65s;
    transform:translateX(-50%);
  }
  .site-header.menu-open{ position:fixed; inset:0 0 auto; height:100vh; height:100dvh; background:transparent; border-color:transparent; }
  .site-header.menu-open .site-nav{ position:relative; top:auto; left:auto; width:100vw; max-width:none; height:100%; margin:0; align-items:flex-start; padding:18px 24px; transform:none; transition:none; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
  .site-nav-links.open{ opacity:1; visibility:visible; pointer-events:auto; clip-path:circle(150% at calc(100vw - 44px) 38px); }
  .site-nav-links > li:not(.site-nav-pill){ width:100%; }
  .site-nav-links a{
    padding:14px 0;
    border-radius:0;
    border-bottom:1px solid var(--line);
    font-family:var(--font-display);
    font-size:clamp(1.4rem,5vw,2rem);
    opacity:0;
    transform:translateY(20px);
    transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1),color .2s ease;
    transition-delay:0s;
  }
  .site-nav-dropdown-toggle{ width:100%; justify-content:space-between; padding:14px 0; border-radius:0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:clamp(1.4rem,5vw,2rem); opacity:0; transform:translateY(20px); transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1),color .2s ease; }
  .site-nav-links.open .site-nav-dropdown-toggle{ opacity:1; transform:none; transition-delay:calc(.16s + var(--nav-index,0)*.07s); }
  .site-nav-dropdown-menu{ position:static; display:none; width:100%; padding:4px 0 10px 12px; border:0; border-radius:0; background:transparent; box-shadow:none; opacity:1; visibility:visible; transform:none; transition:none; }
  .site-nav-dropdown.open .site-nav-dropdown-menu{ display:grid; }
  .site-nav-dropdown.open .site-nav-dropdown-menu,.site-nav-dropdown:focus-within .site-nav-dropdown-menu{ transform:none; }
  .site-nav-dropdown-menu a{ padding:10px 8px; border:0; font-family:var(--font-body); font-size:.95rem; opacity:1; transform:none; }
  .site-nav-dropdown-menu a:hover{ background:var(--cream-200); }
  .site-nav-links.open > li:not(.site-nav-pill) a{ opacity:1; transform:none; transition-delay:calc(.16s + var(--nav-index,0)*.07s); }
  .site-nav-links li:last-child a{ border-bottom:none; }
  .site-nav-pill{ display:none; }
  .mobile-only{ display:block; }
  .mobile-only:nth-last-child(2) a{ color:var(--pine-700); }
  .mobile-only:last-child a{ color:var(--gold-500); font-weight:800; }
  .site-nav-tools{ flex:none; gap:8px; margin-left:auto; margin-right:2px; }
  .nav-join-cta{ display:none; }
  .nav-toggle{ display:grid; flex:none; width:40px; height:40px; place-items:center; }
  .site-header.menu-open .nav-toggle{ background:var(--cream-200); }
  .site-header.is-night.menu-open{ background:transparent; }
  .site-header.is-night.menu-open .site-nav-links{ background:rgba(7,11,20,.84); -webkit-backdrop-filter:blur(16px) saturate(1.12); backdrop-filter:blur(16px) saturate(1.12); }
  .site-header.menu-open .site-nav-tools{ position:relative; z-index:51; }
  .site-header.is-night.menu-open .site-nav-tools{ color:#f7f3e8; }
  .site-header.is-night .site-nav-dropdown-menu a:hover{ background:#183762; }
  .site-header.is-night .site-nav-links a{ border-bottom-color:rgba(148,185,245,.2); }
  .site-header.is-night .site-nav-dropdown-toggle{ border-bottom-color:rgba(148,185,245,.2); }
}

@media (prefers-reduced-motion:reduce){
  .site-header,.site-nav,.site-nav-pill,.site-nav-links,.site-nav-links a,.nav-toggle{ transition-duration:.01ms !important; }
}

/* --- Hero --- */
.hero{ background:var(--pine-900); color:var(--cream-100); padding:64px 0 96px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-eyebrow{ color:var(--gold-500); font-weight:700; font-size:.85rem; margin-bottom:14px; }
.hero h1{ color:var(--cream-100); font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.08; margin-bottom:20px; }
.hero p.lead{ color:var(--cream-300); font-size:1.08rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-trust{ margin-top:34px; display:flex; gap:28px; flex-wrap:wrap; }
.hero-trust div{ font-size:.82rem; color:var(--cream-300); }
.hero-trust strong{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--cream-100); }
.hero .container.hero-grid{ position:relative; z-index:2; }

.route-illustration{ position:relative; }
.route-line{ stroke:var(--gold-500); stroke-width:2; stroke-dasharray:6 6; fill:none; }

.home-landing{
  position:relative;
  min-height:680px;
  background:linear-gradient(180deg, #204069 0%, #2b5b9b 72%, #245da8 100%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  text-align:center;
  padding:42px 16px 64px;
}
.home-landing::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:290px;
  background:linear-gradient(180deg, rgba(14,46,39,0) 0%, rgba(11,36,30,.35) 100%);
  z-index:0;
}
.home-sky{ position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
.home-sky::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.06), transparent 58%); }
.home-hover-particles{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.home-hover-particle{ position:absolute; display:block; width:8px; height:8px; opacity:0; pointer-events:none; animation:home-hover-particle-float var(--particle-duration,700ms) cubic-bezier(.16,.72,.28,1) forwards; }
.home-hover-particle.is-snow{ width:7px; height:7px; border:1px solid rgba(255,255,255,.9); border-radius:2px; background:rgba(229,245,255,.42); box-shadow:0 0 11px rgba(211,239,255,.8); }
.home-hover-particle.is-spark{ width:5px; height:5px; border-radius:50%; background:#ffe6a1; box-shadow:0 0 8px 2px rgba(255,225,149,.74); }
.home-hover-particle.is-berry{ width:6px; height:6px; border:1px solid rgba(255,225,205,.85); border-radius:50%; background:#d94c51; box-shadow:0 0 8px rgba(255,90,100,.62); }
@keyframes home-hover-particle-float{
  0%{ opacity:0; transform:translate3d(0,5px,0) scale(.55) rotate(0); }
  18%{ opacity:.95; }
  100%{ opacity:0; transform:translate3d(var(--particle-drift,0px),-42px,0) scale(0) rotate(130deg); }
}
.snowflake{
  position:absolute;
  top:-40px;
  color:rgba(255,253,248,.7);
  font-size:14px;
  text-shadow:0 0 10px rgba(255,253,248,.3);
  animation:snowFall 12s linear infinite;
  z-index:1;
}
.snowflake-1 { left:6%; animation-delay:-0.6s; }
.snowflake-2 { left:12%; animation-delay:-1.5s; }
.snowflake-3 { left:18%; animation-delay:-0.2s; }
.snowflake-4 { left:24%; animation-delay:-2.4s; }
.snowflake-5 { left:31%; animation-delay:-1.1s; }
.snowflake-6 { left:39%; animation-delay:-2.8s; }
.snowflake-7 { left:46%; animation-delay:-0.9s; }
.snowflake-8 { left:53%; animation-delay:-3.2s; }
.snowflake-9 { left:60%; animation-delay:-1.7s; }
.snowflake-10 { left:68%; animation-delay:-0.4s; }
.snowflake-11 { left:74%; animation-delay:-3.4s; }
.snowflake-12 { left:81%; animation-delay:-1.9s; }
.snowflake-13 { left:87%; animation-delay:-2.9s; }
.snowflake-14 { left:94%; animation-delay:-0.5s; }
.snowflake-15 { left:8%; animation-delay:-4.1s; }
.snowflake-16 { left:16%; animation-delay:-5.3s; }
.snowflake-17 { left:26%; animation-delay:-6.6s; }
.snowflake-18 { left:34%; animation-delay:-4.9s; }
.snowflake-19 { left:42%; animation-delay:-5.7s; }
.snowflake-20 { left:50%; animation-delay:-7.2s; }
.snowflake-21 { left:58%; animation-delay:-4.4s; }
.snowflake-22 { left:66%; animation-delay:-8.1s; }
.snowflake-23 { left:72%; animation-delay:-5.8s; }
.snowflake-24 { left:79%; animation-delay:-7.6s; }
.snowflake-25 { left:88%; animation-delay:-4.8s; }
.snowflake-26 { left:93%; animation-delay:-6.2s; }
.snowflake-27 { left:14%; animation-delay:-9.1s; }
.snowflake-28 { left:20%; animation-delay:-8.5s; }
.snowflake-29 { left:30%; animation-delay:-10.3s; }
.snowflake-30 { left:48%; animation-delay:-9.9s; }
.snowflake-31 { left:63%; animation-delay:-8.9s; }
.snowflake-32 { left:75%; animation-delay:-10.8s; }
.snowflake-33 { left:91%; animation-delay:-11.1s; }
.snowflake-34 { left:52%; animation-delay:-7.9s; }
.snowflake-35 { left:84%; animation-delay:-11.7s; }
@keyframes snowFall{
  0% { transform:translateY(-30px) scale(0.8); opacity:0; }
  10% { opacity:1; }
  100% { transform:translateY(820px) scale(1.1); opacity:0; }
}
.reindeer{
  position:absolute;
  top:190px;
  width:clamp(58px, 7vw, 92px);
  height:auto;
  opacity:.9;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.2));
  animation:floatReindeer 12s ease-in-out infinite alternate;
}
.reindeer-left { left:11%; }
.reindeer-right { right:11%; animation-delay:1.2s; }
@keyframes floatReindeer {
  from { transform:translateY(0); }
  to { transform:translateY(10px); }
}
.home-badge-wrap{
  position:relative;
  z-index:2;
  isolation:isolate;
  margin-top:4px;
}
.home-badge-wrap::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,239,190,.54) 0%,rgba(211,230,255,.28) 38%,rgba(255,255,255,0) 72%);
  filter:blur(20px);
  opacity:0;
  transform:scale(.82);
  transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.home-badge-image{
  position:relative;
  z-index:1;
  display:block;
  width:min(31vw, 360px);
  height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.32));
  transition:transform .25s ease, filter .25s ease;
}
.home-badge-wrap:hover::before,
.home-badge-wrap:focus-within::before{ opacity:1; transform:scale(1); }
.home-badge-wrap:hover .home-badge-image{ transform:translateY(-6px) scale(1.02); filter:drop-shadow(0 24px 34px rgba(0,0,0,.38)) drop-shadow(0 0 18px rgba(255,231,167,.32)); }
.home-wordmark{
  position:relative;
  z-index:2;
  display:block;
  width:min(62vw, 520px);
  max-height:104px;
  object-fit:contain;
  margin:20px auto 0;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.28));
}
.home-intro{
  position:relative;
  z-index:2;
  max-width:32ch;
  margin:10px auto 0;
  color:var(--cream-200);
  font-size:1rem;
  line-height:1.5;
}
.home-actions{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.home-actions .btn{
  min-width:148px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.home-actions .btn-primary{ background:var(--cream-300); color:var(--pine-700); }
.home-actions .btn-primary:hover{ background:#fcfbfa; transform:translateY(-2px); }
.home-actions .btn-outline-light:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.home-scroll-hint{
  position:relative;
  z-index:2;
  margin-top:16px;
  color:#fff;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.8;
  animation:scrollHint 2.8s ease-in-out infinite;
}
@keyframes scrollHint{
  0%,100%{ transform:translateY(0); opacity:.65; }
  50%{ transform:translateY(5px); opacity:1; }
}
.home-badge{
  position:relative;
  width:min(20vw, 780px);
  aspect-ratio:1;
  border-radius:50%;
  background:#f7f7f7;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 10px rgba(255,255,255,0.12), 0 18px 48px rgba(0,0,0,0.2);
}
.home-badge__ring{
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:rgba(14, 46, 39, 0.92);
  border:18px solid rgba(255,253,248,0.86);
}
.home-badge__inner{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.03), transparent 56%);
}
.home-badge__santa{
  position:absolute;
  width:52%;
  height:52%;
  top:26%;
  left:50%;
  transform:translateX(-50%);
}
.santa-hat{
  position:absolute;
  left:20%;
  top:6%;
  width:62%;
  height:28%;
  background:linear-gradient(90deg, #9c3e39 0%, #8c3a34 65%, #b0554d 100%);
  border-radius:50% 50% 35% 35%;
  box-shadow:0 0 0 4px rgba(255,255,255,0.08);
}
.santa-hat::before{
  content:"";
  position:absolute;
  left:8%;
  top:56%;
  width:84%;
  height:24%;
  background:rgba(255,253,248,0.94);
  border-radius:30px;
}
.santa-hat::after{
  content:"";
  position:absolute;
  width:18%;
  height:18%;
  border-radius:50%;
  background:#fff;
  right:6%;
  top:24%;
}
.santa-head{
  position:absolute;
  left:24%;
  top:24%;
  width:54%;
  height:46%;
  background:#f6f5f5;
  border-radius:50% 50% 46% 46% / 45% 45% 55% 55%;
  box-shadow:inset -10px -8px 0 rgba(196, 200, 209, 0.5);
}
.santa-eye{
  position:absolute;
  top:38%;
  width:10px;
  height:10px;
  background:#222;
  border-radius:50%;
}
.santa-eye.left{ left:42%; }
.santa-eye.right{ left:58%; }
.santa-nose{
  position:absolute;
  left:50%;
  top:44%;
  width:12px;
  height:12px;
  background:#f9b15b;
  border-radius:50%;
  transform:translateX(-50%);
}
.santa-mustache{
  position:absolute;
  top:47%;
  width:24px;
  height:12px;
  background:#fff;
  border-radius:50% 60% 50% 60%;
}
.santa-mustache.left{ left:34%; transform:rotate(-10deg); }
.santa-mustache.right{ left:56%; transform:rotate(10deg); }
.santa-beard{
  position:absolute;
  left:26%;
  top:48%;
  width:50%;
  height:28%;
  background:#ffffff;
  border-radius:48% 48% 45% 45% / 56% 56% 44% 44%;
  box-shadow:inset 0 -10px 0 rgba(208,211,219,0.5);
}
.home-badge__text{
  position:absolute;
  bottom:24%;
  left:50%;
  transform:translateX(-50%);
  font-size:clamp(0.85rem, 1.8vw, 1.5rem);
  font-weight:800;
  letter-spacing:0.12em;
  color:#f6fbf7;
  text-shadow:0 0 12px rgba(59,120,92,.4);
}
.home-title-wrap{
  position:relative;
  z-index:2;
  margin-top:24px;
  color:#fff;
  display:none;
}
.home-title{
  margin:0;
  font-family:"Trebuchet MS", "Segoe UI", sans-serif;
  font-size:clamp(2.4rem, 7vw, 8rem);
  font-weight:900;
  letter-spacing:0.08em;
  line-height:0.9;
  color:#f6fbf7;
  text-transform:uppercase;
  text-shadow:0 6px 0 rgba(255,255,255,0.18);
}
.home-subtitle{
  margin-top:12px;
  font-size:clamp(1rem, 2vw, 2rem);
  font-weight:700;
  letter-spacing:0.25em;
  color:#f7fffb;
  text-transform:uppercase;
}
.home-side-text{
  position:absolute;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  font-size:clamp(0.75rem, 1.6vw, 1.6rem);
  font-weight:800;
  letter-spacing:0.42em;
  color:#f1f8f4;
  opacity:0.92;
}
.home-side-text.left{ left:-60px; }
.home-side-text.right{ right:-70px; }
.home-snowground{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:280px;
  z-index:1;
}
.snow-ledge{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:110px;
  width:100%;
  object-fit:cover;
  background:linear-gradient(180deg, rgba(255,253,248,0.88), rgba(255,253,248,0.96));
  clip-path:ellipse(72% 68% at 50% 100%);
}
.tree{
  position:absolute;
  bottom:42px;
  width:120px;
  height:170px;
}
.tree .tree-top,
.tree .tree-mid,
.tree .tree-bottom{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, #3c7b58, #204a3b);
}
.tree .tree-top{ bottom:90px; width:80px; height:62px; }
.tree .tree-mid{ bottom:54px; width:105px; height:80px; }
.tree .tree-bottom{ bottom:18px; width:130px; height:90px; }
.tree .tree-star{
  position:absolute;
  left:50%;
  bottom:150px;
  width:12px;
  height:12px;
  background:var(--gold-500);
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 12px rgba(176,139,63,0.9);
}
.tree-left{ left:18%; }
.tree-right{ right:18%; }
.tree-mid-left{ left:52%; transform:scale(0.7); transform-origin:bottom center; }
.gift-stack{ position:absolute; bottom:20px; }

.home-badge__text::before,
.home-badge__text::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  background:rgba(255,255,255,0.2);
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
}
.home-badge__text::before{ left:-22px; }
.home-badge__text::after{ right:-22px; }

.tree .tree-top,
.tree .tree-mid,
.tree .tree-bottom,
.tree .tree-star,
.snowman,
.gift-stack,
.gift,
.reindeer,
.spark{ z-index:2; }
.gift{ position:absolute; display:block; border-radius:8px; }
.gift-1{ left:0; bottom:0; width:44px; height:34px; background:var(--sage-600); }
.gift-2{ left:34px; bottom:0; width:36px; height:30px; background:var(--gold-100); }
.gift-3{ left:18px; bottom:26px; width:38px; height:32px; background:var(--berry-600); }
.gift-4{ left:58px; bottom:6px; width:26px; height:22px; background:var(--sage-100); }
.gift-left{ left:18%; }
.snowman{
  position:absolute;
  bottom:28px;
  width:76px;
  height:88px;
  border-radius:50%;
}
.snowman::before,
.snowman::after{
  content:"";
  position:absolute;
  border-radius:50%;
}
.snowman::before{
  width:70px; height:70px;
  background:#f4f9f5;
  left:4px; bottom:0;
  box-shadow:inset -10px -8px rgba(210,224,215,0.9);
}
.snowman::after{
  width:38px; height:38px;
  background:#f4f9f5;
  left:18px; bottom:42px;
  box-shadow:inset -6px -5px rgba(210,224,215,0.8);
}
.snowman-head{ position:absolute; left:24px; bottom:62px; width:28px; height:28px; background:#f4f9f5; border-radius:50%; box-shadow:inset -6px -5px rgba(210,224,215,0.8); }
.snowman-left{ left:16%; }
.snowman-right{ right:14%; }
.spark{
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 12px rgba(255,255,255,0.8);
}
.spark-a{ left:32%; top:19%; }
.spark-b{ right:32%; top:25%; }
.spark-c{ left:56%; top:14%; }

@media (max-width:860px){
  .home-landing{ min-height:650px; padding-top:34px; }
  .home-badge-image{ width:min(58vw, 320px); }
  .home-wordmark{ width:min(70vw, 330px); margin-top:12px; }
  .tree-left{ left:4%; }
  .tree-right{ right:4%; }
  .tree-mid-left{ left:50%; }
  .snowman-left{ left:8%; }
  .snowman-right{ right:8%; }
}
@media (max-width:540px){
  .home-landing{ min-height:620px; padding:28px 18px 54px; }
  .home-badge-image{ width:min(72vw, 280px); }
  .home-intro{ font-size:.9rem; }
  .home-actions{ width:100%; }
  .home-actions .btn{ width:min(100%, 280px); }
  .reindeer{ top:170px; width:52px; }
  .reindeer-left{ left:4%; }
  .reindeer-right{ right:4%; }
  .home-title{ letter-spacing:0.04em; }
  .home-subtitle{ letter-spacing:0.14em; }
  .home-badge__text{ letter-spacing:0.08em; }
  .reindeer-left{ left:8%; }
  .reindeer-right{ right:8%; }
}

/* --- Hero background animation: Santa's sleigh + falling snow --- */
.sky-scene{ position:absolute; inset:0; overflow:hidden; z-index:1; }
.flying-santa{
  position:absolute; left:-20%; top:16%; font-size:2.1rem; white-space:nowrap;
  animation:flyAcross 17s linear infinite;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
@keyframes flyAcross{
  0%{ left:-20%; top:22%; transform:scaleX(1); }
  48%{ top:8%; }
  50%{ transform:scaleX(1); }
  100%{ left:110%; top:26%; transform:scaleX(1); }
}
.snowflake-old{
  position:absolute; top:-5%; color:var(--cream-100); opacity:.5; font-size:.85rem;
  animation-name:snowFall; animation-timing-function:linear; animation-iteration-count:infinite;
}
@media (prefers-reduced-motion:reduce){
  .flying-santa,.snowflake-old,.snowflake,.reindeer,.home-scroll-hint{ animation:none !important; }
  .home-hover-particles{ display:none; }
}

/* --- Compact bottom-center music player --- */
.music-player{
  position:fixed;
  z-index:40;
  left:50%;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:13px;
  width:min(420px, calc(100vw - 28px));
  min-height:76px;
  padding:12px 16px;
  color:#fff;
  background:rgba(18,45,77,.96);
  border:1px solid rgba(230,243,251,.22);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(9,28,49,.3);
  transform:translateX(-50%);
  backdrop-filter:blur(12px);
}
.music-play-button{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:#fff;
  background:var(--pine-900);
  cursor:pointer;
  transition:transform .16s ease, background .16s ease;
}
.music-play-button:hover{ transform:scale(1.06); background:var(--pine-700); }
.music-play-icon{
  width:0;
  height:0;
  margin-left:3px;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:10px solid currentColor;
}
.is-playing .music-play-icon{
  width:11px;
  height:14px;
  margin-left:0;
  border:0;
  background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px,currentColor 7px 11px);
}
.music-player-content{ flex:1; min-width:0; }
.music-player-heading,.music-progress-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.music-track-info{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.music-track-title{ overflow:hidden; color:#fff; font-size:.82rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.music-track-artist{ color:rgba(230,243,251,.7); font-size:.68rem; }
.music-visualizer{ height:22px; display:flex; align-items:center; gap:3px; opacity:.45; }
.music-visualizer i{ display:block; width:3px; height:5px; border-radius:3px; background:#e6f3fb; }
.is-playing .music-visualizer{ opacity:1; }
.is-playing .music-visualizer i{ animation:musicWave .75s ease-in-out infinite alternate; }
.music-visualizer i:nth-child(2n){ animation-delay:.18s; }
.music-visualizer i:nth-child(3n){ animation-delay:.36s; }
.music-visualizer i:nth-child(4n){ animation-delay:.1s; }
@keyframes musicWave{ from{ height:4px; } to{ height:20px; } }
.music-progress-row{ gap:8px; margin-top:6px; }
.music-time{ min-width:28px; color:rgba(230,243,251,.72); font-variant-numeric:tabular-nums; font-size:.63rem; }
.music-time:last-child{ text-align:right; }
.music-progress{
  --progress:0%;
  flex:1;
  min-width:0;
  height:4px;
  margin:0;
  appearance:none;
  border:0;
  border-radius:99px;
  background:linear-gradient(90deg,#fff var(--progress),rgba(230,243,251,.25) var(--progress));
  cursor:pointer;
}
.music-progress::-webkit-slider-thumb{ width:10px; height:10px; appearance:none; border:0; border-radius:50%; background:#fff; }
.music-progress::-moz-range-thumb{ width:10px; height:10px; border:0; border-radius:50%; background:#fff; }
@media (max-width:540px){
  .music-player{ bottom:12px; min-height:70px; padding:10px 12px; }
  .music-play-button{ flex-basis:40px; width:40px; height:40px; }
}
@media (prefers-reduced-motion:reduce){ .is-playing .music-visualizer i{ animation:none; height:8px; } }

/* --- Reference-inspired home sections --- */
.reference-categories{
  padding:96px 0 88px;
  background:#fff;
}
.reference-heading{
  max-width:620px;
  margin:0 auto 42px;
  text-align:center;
}
.reference-heading .kicker,.reference-feature-copy .kicker{
  display:block;
  margin-bottom:12px;
  color:var(--ink-900);
  font-size:.90rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.reference-heading h2,.reference-feature-copy h2{
  color:var(--pine-700);
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.08;
  margin-bottom:14px;
}
.reference-heading p,.reference-feature-copy p{
  max-width:56ch;
  margin:0 auto;
  color:var(--ink-600);
}
.reference-card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.reference-card{
  min-height:280px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:30px 28px 26px;
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.reference-card:hover{ transform:translateY(-7px); box-shadow:0 18px 34px rgba(14,46,39,.18); }
/* Tiga kartu kini satu keluarga warna (gelap → sedang → aksen emas tipis)
   bukan tiga warna primer bertabrakan */
.reference-card-blue{ background:var(--pine-700); }
.reference-card-red{ background:var(--pine-700); }
.reference-card-green{ background:var(--pine-700); }
.reference-card-icon{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  margin-bottom:34px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  font-size:.72rem;
  font-weight:800;
}
.reference-card h3{ margin:0 0 10px; color:#fff; font-size:1.5rem; }
.reference-card p{ margin:0; color:rgba(255,255,255,.82); font-size:.92rem; }
.reference-card-link{ margin-top:auto; padding-top:24px; font-size:.82rem; font-weight:800; color:var(--gold-100); }
.reference-card-link span{ display:inline-block; margin-left:6px; transition:transform .2s ease; }
.reference-card:hover .reference-card-link span{ transform:translateX(4px); }
.reference-feature{
  padding:88px 0;
  background:var(--cream-200);
}
.reference-feature-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:72px;
}
.reference-feature-art{
  position:relative;
  min-height:300px;
  overflow:hidden;
  background:var(--pine-900);
  border-radius:4px;
}
.reference-feature-art::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:28%;
  background:linear-gradient(180deg,transparent,#f3eee2);
}
.reference-feature-art img:first-child{
  position:absolute;
  bottom:-8px;
  left:14%;
  width:52%;
  max-width:none;
}
.reference-feature-art img:last-child{
  position:absolute;
  right:14%;
  bottom:54px;
  width:22%;
  max-width:none;
}
.reference-feature-copy h2{ max-width:12ch; }
.reference-feature-copy p{ margin:0 0 24px; }
.reference-feature-copy .btn{ color:#fff; }

/* --- Gallery and visual documentation --- */
.gallery-section{ padding:88px 0; background:var(--cream-100); color:var(--ink-900); }
.gallery-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:30px; }
.gallery-heading .kicker{ display:block; margin-bottom:10px; color:var(--pine-700); font-size:.78rem; font-weight:800; letter-spacing:.14em; }
.gallery-heading h2{ margin:0; color:var(--pine-900); font-size:clamp(1.8rem,3vw,2.5rem); }
.gallery-heading-aside{ display:grid; justify-items:end; gap:12px; max-width:42ch; }
.gallery-heading p{ margin:0; color:var(--ink-600); font-size:.92rem; }
.gallery-controls{ display:flex; align-items:center; gap:10px; }
.gallery-slider-arrow{ display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--cream-100); color:var(--ink-900); font-size:1.1rem; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.gallery-slider-arrow:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--pine-700); background:var(--home-hover,var(--cream-200)); color:var(--pine-700); }
.gallery-slider-arrow:disabled{ opacity:.38; cursor:default; }
.gallery-position{ min-width:42px; color:var(--ink-400); font-size:.78rem; font-variant-numeric:tabular-nums; text-align:center; }
.gallery-track{ display:flex; gap:14px; overflow-x:auto; padding:3px 2px 12px; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x; }
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-card{ flex:0 0 calc((100% - 28px) / 3); min-width:0; display:flex; flex-direction:column; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--cream-100); color:var(--ink-900); text-align:left; font:inherit; cursor:pointer; scroll-snap-align:start; transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.gallery-card:hover,.gallery-card:focus-visible{ z-index:1; transform:translateY(-3px); border-color:var(--pine-700); box-shadow:0 14px 30px rgba(13,35,66,.16); }
.gallery-visual{ position:relative; display:grid; flex:none; width:100%; aspect-ratio:4 / 3; place-items:center; overflow:hidden; padding:20px; background:var(--cream-200); }
.gallery-visual img{ max-width:70%; width:100%; height:100%; object-fit:contain; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.gallery-card:hover .gallery-visual img{ transform:scale(1.04); }
.gallery-caption{ display:grid; gap:3px; padding:12px 14px 14px; }
.gallery-category{ color:var(--pine-700); font-size:.65rem; font-weight:800; letter-spacing:.12em; }
.gallery-caption strong{ color:var(--ink-900); font-family:var(--font-display); font-size:1rem; }
.gallery-caption > span:last-child{ color:var(--ink-400); font-size:.76rem; }
.gallery-pagination{ display:flex; justify-content:center; gap:8px; min-height:14px; margin-top:8px; }
.gallery-pagination button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--line); cursor:pointer; transition:width .2s ease,background .2s ease; }
.gallery-pagination button[aria-current="true"]{ width:22px; border-radius:999px; background:var(--pine-700); }
.gallery-dialog{ width:min(940px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--cream-100); color:var(--ink-900); box-shadow:0 24px 80px rgba(0,0,0,.35); }
.gallery-dialog::backdrop{ background:rgba(2,8,18,.78); backdrop-filter:blur(5px); }
.gallery-viewer{ display:grid; grid-template-rows:auto minmax(240px,1fr) auto; }
.gallery-viewer-topbar{ display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:8px 14px; color:var(--ink-400); font-size:.78rem; }
.gallery-close{ display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink-900); font-size:1.4rem; cursor:pointer; }
.gallery-close:hover,.gallery-nav:hover{ background:var(--home-hover,var(--cream-200)); color:var(--ink-900); }
.gallery-image-stage{ position:relative; display:grid; min-height:300px; max-height:min(62vh,650px); place-items:center; overflow:hidden; background:var(--cream-200); }
.gallery-image-stage img{ width:100%; height:100%; max-height:min(62vh,650px); object-fit:contain; }
.gallery-nav{ position:absolute; top:50%; z-index:1; display:grid; width:42px; height:42px; place-items:center; transform:translateY(-50%); border:1px solid var(--line); border-radius:50%; background:var(--cream-100); color:var(--ink-900); font-size:1.8rem; line-height:1; cursor:pointer; }
.gallery-previous{ left:14px; }
.gallery-next{ right:14px; }
.gallery-viewer-caption{ padding:18px 22px 22px; }
.gallery-viewer-caption h3{ margin:4px 0 5px; color:var(--pine-900); font-size:1.35rem; }
.gallery-viewer-caption p{ margin:0; color:var(--ink-600); font-size:.9rem; }
@media (max-width:760px){
  .gallery-section{ padding:68px 0; }
  .gallery-heading{ align-items:flex-start; gap:16px; }
  .gallery-heading-aside{ justify-items:start; gap:10px; }
  .gallery-track{ gap:12px; }
  .gallery-card{ flex-basis:82%; }
  .gallery-visual{ aspect-ratio:4 / 3; }
}
@media (max-width:420px){
  .gallery-heading{ display:block; }
  .gallery-heading-aside{ margin-top:12px; }
  .gallery-card{ flex-basis:86%; }
  .gallery-caption{ padding:10px; }
}

/* --- Lower-page information sections --- */
.section{ padding:80px 0; }
.section-cream{ background:#fff; color:var(--ink-900); }
.section-cream h2,.section-cream h4,.section-tan h2,.section-tan h4{ color:var(--pine-800); }
.section-cream p,.section-tan p{ color:var(--ink-600); }
.section-tan{ background:var(--cream-200); color:var(--ink-900); }
.section-head{ max-width:56ch; margin-bottom:44px; }
.section-head .kicker{ color:var(--gold-500); font-weight:700; font-size:.82rem; margin-bottom:10px; }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding:26px 20px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 6px 18px rgba(32,64,105,.06); transition:transform .2s ease, box-shadow .2s ease; }
.step:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(32,64,105,.12); }
.step-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-500); margin-bottom:10px; }
.step h4{ font-size:1rem; margin-bottom:6px; }
.step p{ font-size:.88rem; margin:0; }

.privacy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:720px){ .privacy-grid{ grid-template-columns:1fr; } }
.privacy-card{ border-radius:var(--radius-md); padding:26px; }
.privacy-card.can{ background:#fff; border:1px solid #c8dcea; }
.privacy-card.cannot{ background:#fff; border:1px solid #f2c4ce; }
.privacy-card h4{ font-size:1rem; margin-bottom:14px; }
.privacy-card ul{ margin:0; padding:0; list-style:none; }
.privacy-card li{ padding:8px 0; font-size:.9rem; color:var(--ink-600); display:flex; gap:10px; border-bottom:1px solid #edf3f7; }
.privacy-card li:last-child{ border-bottom:0; }
.privacy-card li::before{ font-weight:700; }
.privacy-card.can li::before{ content:'✓'; color:var(--sage-600); }
.privacy-card.cannot li::before{ content:'✕'; color:var(--berry-600); }
.section-cream#faq .card{
  margin-bottom:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 5px 16px rgba(32,64,105,.05);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.section-cream#faq .card:hover{ border-color:#8eaccb; box-shadow:0 8px 20px rgba(32,64,105,.09); }
.section-cream#faq .card:last-child{ margin-bottom:0; }

@media (max-width:760px){
  .reference-categories,.reference-feature{ padding:68px 0; }
  .reference-card-grid{ grid-template-columns:1fr; }
  .reference-card{ min-height:230px; }
  .reference-feature-grid{ grid-template-columns:1fr; gap:38px; }
  .reference-feature-art{ min-height:250px; }
  .reference-feature-copy h2{ max-width:none; }
}

.site-footer{ background:var(--pine-900); color:#fff; padding:48px 0 28px; }
.footer-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.footer-grid .brand{ margin-bottom:8px; }
.footer-note{ font-size:.82rem; color:rgba(255,255,255,.72); border-top:1px solid rgba(255,255,255,.22); padding-top:20px; }
.footer-desc{ max-width:32ch; margin:0; color:rgba(255,255,255,.72); font-size:.82rem; }
.footer-social{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:16px; }
.footer-social a{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.24); border-radius:999px; color:rgba(255,255,255,.86); font-size:.8rem; font-weight:700; text-decoration:none; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.footer-social a:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.1); color:#fff; }
.footer-social a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.footer-social svg{ width:17px; height:17px; flex:none; fill:currentColor; }
.footer-social a:last-child svg{ fill:none; stroke:currentColor; stroke-width:2; }
.footer-social .instagram-dot{ fill:currentColor; stroke:none; }

/* --- Auth --- */
.auth-shell{ min-height:100vh; display:grid; place-items:center; padding:24px; background:#204069; }
.auth-layout{ position:relative; display:grid; grid-template-columns:minmax(340px,.86fr) minmax(0,1.14fr); width:min(100%,1000px); min-height:min(620px,calc(100vh - 48px)); overflow:hidden; background:#112343; border:1px solid rgba(230,243,251,.16); border-radius:14px; box-shadow:0 24px 70px rgba(4,18,37,.32); }
.auth-card{ position:relative; z-index:2; width:100%; max-width:none; align-self:center; padding:54px clamp(30px,5vw,64px); background:#112343; border-radius:0; color:#fff; }
.auth-back{ position:absolute; top:22px; left:26px; display:grid; width:34px; height:34px; place-items:center; color:var(--cream-200); text-decoration:none; font-size:1.4rem; border-radius:50%; transition:background .18s ease, transform .18s ease; }
.auth-back:hover{ background:rgba(230,243,251,.12); transform:translateX(-2px); }
.auth-card .brand{ justify-content:flex-start; margin:0 0 34px; color:#fff; font-family:var(--font-body); font-size:.92rem; }
.auth-card h1{ margin:0 0 8px; color:#fff; font-family:var(--font-body); font-size:clamp(1.6rem,2.5vw,2rem); font-weight:800; }
.auth-sub{ margin:0 0 30px; color:rgba(230,243,251,.76); font-size:.88rem; }
.auth-card .field label{ color:var(--cream-200); font-size:.8rem; }
.auth-card input[type=email],.auth-card input[type=password]{ border-color:rgba(230,243,251,.26); background:rgba(6,20,42,.58); color:#fff; }
.auth-card input::placeholder{ color:rgba(230,243,251,.46); }
.auth-card input:focus{ border-color:#E6F3FB; box-shadow:0 0 0 3px rgba(230,243,251,.14); }
.auth-tabs{ display:flex; gap:5px; padding:4px; margin-bottom:25px; background:rgba(230,243,251,.09); border:1px solid rgba(230,243,251,.12); border-radius:8px; }
.auth-tab{ flex:1; padding:9px 8px; border:0; border-radius:5px; background:transparent; color:rgba(230,243,251,.68); font-size:.82rem; font-weight:700; cursor:pointer; transition:background .18s ease, color .18s ease; }
.auth-tab.active{ background:rgba(230,243,251,.16); color:#fff; box-shadow:none; }
.auth-card .btn-primary{ margin-top:4px; background:#FF0032; color:#fff; border-radius:7px; }
.auth-card .btn-primary:hover{ background:#df002c; }
.auth-foot{ margin-top:14px; color:rgba(230,243,251,.72); text-align:left; font-size:.8rem; }
.auth-register{ margin:24px 0 0; color:rgba(230,243,251,.72); font-size:.8rem; }
.auth-register a{ color:#E6F3FB; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.auth-art{ position:relative; min-height:100%; overflow:hidden; isolation:isolate; background:linear-gradient(145deg,#173963 0%,#204069 54%,#01443C 130%); }
.auth-art::before,.auth-art::after{ content:""; position:absolute; z-index:-1; width:150%; height:34%; left:-22%; border-radius:50%; transform:rotate(-13deg); }
.auth-art::before{ top:34%; background:linear-gradient(180deg,transparent 0 38%,rgba(230,243,251,.82) 39% 42%,#1987d1 43% 57%,rgba(1,68,60,.94) 58% 69%,transparent 70%); filter:drop-shadow(0 0 12px rgba(230,243,251,.2)); }
.auth-art::after{ top:48%; left:-16%; height:30%; background:linear-gradient(180deg,transparent 0 28%,rgba(255,0,50,.96) 29% 36%,rgba(230,243,251,.82) 37% 40%,#207da8 41% 58%,transparent 59%); filter:drop-shadow(0 0 12px rgba(255,0,50,.3)); transform:rotate(12deg); }
.auth-art-ribbon{ position:absolute; z-index:-1; right:-20%; width:120%; height:24%; border-radius:50%; transform:rotate(17deg); }
.auth-art-ribbon-blue{ top:8%; background:linear-gradient(180deg,transparent 0 40%,rgba(25,135,209,.9) 41% 52%,transparent 53%); }
.auth-art-ribbon-snow{ bottom:10%; background:linear-gradient(180deg,transparent 0 45%,rgba(230,243,251,.9) 46% 49%,rgba(25,135,209,.78) 50% 58%,transparent 59%); transform:rotate(18deg); }
.auth-art-ribbon-red{ top:42%; right:-28%; height:18%; background:linear-gradient(180deg,transparent 0 46%,rgba(255,0,50,.78) 47% 55%,transparent 56%); transform:rotate(-18deg); }
.auth-art-ribbon-green{ bottom:-3%; left:-18%; width:130%; height:28%; background:linear-gradient(180deg,transparent 0 42%,rgba(1,68,60,.85) 43% 60%,transparent 61%); transform:rotate(-9deg); }
.auth-art-stars{ position:absolute; inset:0; }
.auth-art-stars i{ position:absolute; width:4px; height:4px; border-radius:50%; background:#E6F3FB; box-shadow:0 0 12px rgba(230,243,251,.65); opacity:.76; }
.auth-art-stars i:nth-child(1){ top:18%; left:22%; }
.auth-art-stars i:nth-child(2){ top:27%; right:18%; width:3px; height:3px; }
.auth-art-stars i:nth-child(3){ top:66%; left:16%; width:3px; height:3px; }
.auth-art-stars i:nth-child(4){ bottom:20%; right:24%; }
.auth-art-stars i:nth-child(5){ top:12%; right:42%; width:2px; height:2px; }
.auth-art-caption{ position:absolute; right:40px; bottom:36px; left:40px; display:flex; flex-direction:column; gap:6px; color:#fff; text-align:right; }
.auth-art-caption span{ color:rgba(230,243,251,.72); font-size:.68rem; font-weight:800; letter-spacing:.2em; }
.auth-art-caption strong{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
@media (max-width:720px){
  .auth-shell{ padding:16px; }
  .auth-layout{ grid-template-columns:1fr; width:min(100%,480px); min-height:0; }
  .auth-card{ padding:56px 30px 32px; }
  .auth-card .brand{ margin-bottom:24px; }
  .auth-art{ min-height:150px; }
  .auth-art-caption{ right:24px; bottom:18px; left:24px; }
}
@media (max-width:420px){
  .auth-shell{ padding:0; align-items:stretch; }
  .auth-layout{ width:100%; min-height:100vh; border:0; border-radius:0; grid-template-rows:1fr 150px; }
  .auth-card{ padding:58px 24px 28px; }
  .auth-art{ min-height:150px; }
}

/* --- App shell (dashboard layout) --- */
.app-shell{ display:flex; min-height:100vh; background:var(--cream-200); }
.sidebar{
  width:232px; background:var(--pine-900); color:var(--cream-200); flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar .brand{ padding:22px 20px; font-size:1.05rem; border-bottom:1px solid var(--line-dark); }
.sidebar-brand-logo{ width:32px; height:32px; flex:none; object-fit:contain; border-radius:50%; }
.sidebar-nav{ list-style:none; margin:0; padding:14px 10px; flex:1; }
.sidebar-nav li{ animation:sidebar-nav-enter .5s cubic-bezier(.22,1,.36,1) both; }
.sidebar-nav li:nth-child(1){ animation-delay:.04s; }
.sidebar-nav li:nth-child(2){ animation-delay:.08s; }
.sidebar-nav li:nth-child(3){ animation-delay:.12s; }
.sidebar-nav li:nth-child(4){ animation-delay:.16s; }
.sidebar-nav li:nth-child(5){ animation-delay:.2s; }
.sidebar-nav li:nth-child(6){ animation-delay:.24s; }
.sidebar-nav li:nth-child(7){ animation-delay:.28s; }
.sidebar-nav li:nth-child(8){ animation-delay:.32s; }
.sidebar-nav a{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--cream-300); font-size:.9rem; font-weight:600; margin-bottom:2px;
  transition:color .22s ease,background-color .22s ease,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .22s ease;
}
.sidebar-nav a::before{ content:""; position:absolute; top:20%; bottom:20%; left:0; width:3px; border-radius:0 3px 3px 0; background:var(--gold-500); transform:scaleY(0); transition:transform .24s cubic-bezier(.22,1,.36,1); }
.sidebar-nav a:hover{ background:rgba(255,253,248,.09); transform:translateX(4px); }
.sidebar-nav a.active{ background:var(--cream-100); color:var(--pine-900); box-shadow:0 5px 16px rgba(0,0,0,.12); }
.sidebar-nav a.active::before{ transform:scaleY(1); }
.sidebar-icon{ display:inline-block; width:20px; height:20px; flex:none; color:inherit; opacity:.9; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .28s cubic-bezier(.22,1,.36,1); }
.sidebar-nav a:hover .sidebar-icon{ transform:scale(1.16) rotate(-6deg); }
.sidebar-nav a.active .sidebar-icon{ transform:scale(1.08); }
@keyframes sidebar-nav-enter{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } }
.sidebar-foot{ padding:16px 20px; border-top:1px solid var(--line-dark); }
.sidebar-user{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--gold-500); color:var(--pine-900); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex-shrink:0; }
.sidebar-user .name{ font-size:.86rem; font-weight:700; color:var(--cream-100); }
.sidebar-user .role{ font-size:.74rem; color:var(--ink-400); }

.main-col{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; background:var(--cream-100); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.topbar h1{ font-size:1.3rem; margin:0; }
.topbar-actions{ display:flex; align-items:center; gap:14px; }
.sidebar-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); width:38px; height:38px; cursor:pointer; }
.sidebar-toggle{ transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease; }
.sidebar-toggle:hover{ transform:translateY(-2px); background:var(--cream-200); box-shadow:0 5px 12px rgba(0,0,0,.1); }
@media (max-width:900px){
  .sidebar{ position:fixed; left:-232px; z-index:20; transition:left .32s cubic-bezier(.22,1,.36,1); box-shadow:12px 0 32px rgba(0,0,0,.14); }
  .sidebar.open{ left:0; }
  .sidebar-toggle{ display:block; }
}
.page-body{ padding:28px 32px 60px; }
.password-input-wrap{ position:relative; width:100%; }
.password-input-wrap input{ padding-right:52px !important; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.password-visibility-toggle{ position:absolute; top:50%; right:8px; display:grid; width:36px; height:36px; place-items:center; padding:0; border:0; border-radius:9px; background:transparent; color:var(--ink-400); cursor:pointer; transform:translateY(-50%); transition:background-color .2s ease,color .2s ease,transform .2s cubic-bezier(.22,1,.36,1); }
.password-visibility-toggle:hover{ background:var(--cream-200); color:var(--pine-800); transform:translateY(-50%) scale(1.06); }
.password-visibility-toggle:active{ transform:translateY(-50%) scale(.92); }
.password-visibility-toggle:focus-visible{ outline:2px solid var(--pine-700); outline-offset:2px; }
.password-visibility-toggle svg{ width:19px; height:19px; overflow:visible; }
.password-visibility-toggle .password-eye-slash{ stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .28s cubic-bezier(.22,1,.36,1); }
.password-visibility-toggle[aria-pressed="true"] .password-eye-slash{ stroke-dashoffset:1; }
@keyframes password-eye-pop{ 50%{ transform:scale(1.22); } }
.password-visibility-toggle.is-changing svg{ animation:password-eye-pop .32s ease; }
@keyframes sidebar-toggle-pop{ 50%{ transform:scale(.92); } }
.sidebar-toggle.is-animating{ animation:sidebar-toggle-pop .28s ease; }
@media (prefers-reduced-motion:reduce){
  .sidebar-nav li{ animation:none; }
  .sidebar-nav a,.sidebar-icon,.sidebar-toggle,.sidebar{ transition:none; }
  .password-visibility-toggle,.password-visibility-toggle svg,.password-visibility-toggle .password-eye-slash{ transition:none; animation:none; }
}

/* --- Stat cards --- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.payment-page-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(220px,.65fr); align-items:start; gap:20px; }
.payment-entry-card .muted{ margin:0 0 20px; }
.payment-entry-card .field{ margin-bottom:14px; }
.payment-entry-card .btn{ min-width:210px; }
.payment-summary-column{ display:grid; gap:14px; }
.payment-summary-column .stat-card{ min-width:0; }
.payment-total{ font-size:clamp(1.35rem,2vw,1.8rem) !important; overflow-wrap:anywhere; }
.payment-history-card{ margin-top:24px; }
.payment-history-heading{ margin-bottom:16px; }
.payment-history-heading .card-title-row{ margin:0; }
.payment-history-heading .search-input{ width:min(100%,300px); }
@media (max-width:900px){
  .payment-page-grid{ grid-template-columns:1fr; }
  .payment-summary-column{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .payment-history-heading{ align-items:stretch; }
  .payment-history-heading .search-input{ max-width:none; }
  .payment-entry-card .btn{ width:100%; }
}
.stat-card{ background:var(--cream-100); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; }
.stat-card .label{ font-size:.8rem; color:var(--ink-400); font-weight:700; margin-bottom:8px; }
.stat-card .value{ font-family:var(--font-display); font-size:2rem; color:var(--pine-900); }
.stat-card.accent .value{ color:var(--berry-600); }

/* --- GPS control --- */
.gps-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--pine-900); color:var(--cream-100); border-radius:var(--radius-lg); padding:20px 24px; margin-bottom:28px;
}
.gps-status{ display:flex; align-items:center; gap:12px; }
.gps-dot{ width:11px; height:11px; border-radius:50%; background:var(--ink-400); }
.gps-dot.on{ background:#5FBE7C; box-shadow:0 0 0 4px rgba(95,190,124,.25); }
.gps-dot.off{ background:#C77C7C; }
.gps-label{ font-weight:700; font-size:.92rem; }
.gps-sub{ font-size:.78rem; color:var(--cream-300); }

/* --- Map placeholder --- */
.map-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background:
    linear-gradient(var(--cream-300) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, var(--cream-300) 1px, transparent 1px) 0 0/28px 28px,
    var(--cream-200);
  min-height:320px;
}
.map-frame.tall{ min-height:520px; }
.leaflet-live-map{ position:absolute; inset:0; width:100%; height:100%; min-height:260px; z-index:1; }
.visit-live-map-frame{ min-height:280px; padding:0; }
.live-map-marker{ display:grid; width:34px; height:34px; place-items:center; border:3px solid #fff; border-radius:50% 50% 50% 0; background:var(--pine-800); color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.3); font-size:.9rem; font-weight:800; transform:rotate(-45deg); }
.live-map-marker span{ transform:rotate(45deg); }
.live-map-marker.santa{ background:var(--berry-600); }
.live-map-marker.home{ background:var(--pine-700); }
.leaflet-live-map .leaflet-control-attribution{ font-size:10px !important; }
.map-search-row{ display:flex; align-items:center; gap:10px; }
.map-search-row input{ flex:1; min-width:0; }
.child-location-map{ width:100%; height:320px; margin-top:12px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--cream-200); z-index:0; }
.location-search-results{ display:grid; gap:6px; margin-top:8px; }
.location-search-results:empty{ display:none; }
.location-search-result{ width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink-900); text-align:left; font:inherit; font-size:.82rem; cursor:pointer; }
.location-search-result:hover,.location-search-result:focus-visible{ border-color:var(--pine-800); background:var(--cream-200); }
.location-coordinate-status{ margin-top:8px; color:var(--ink-600); font-size:.8rem; font-variant-numeric:tabular-nums; }
.location-coordinate-status[data-state="error"]{ color:var(--berry-600); }
.location-coordinate-status[data-state="selected"]{ color:var(--sage-600); font-weight:700; }
.child-row-actions{ display:flex; align-items:center; gap:6px; }
.child-delete-button{ border-color:var(--berry-600); color:var(--berry-600); background:transparent; }
.child-delete-button:hover{ color:#fff; background:var(--berry-600); }
.leaflet-container{ font-family:var(--font-body); }
.leaflet-control-attribution{ font-size:10px !important; }
@media (max-width:640px){
  .child-location-map{ height:260px; }
  .map-search-row{ align-items:stretch; }
  .map-search-row .btn{ padding-inline:14px; }
}
.map-note{
  position:absolute; bottom:14px; left:14px; background:rgba(14,46,39,.9); color:var(--cream-100);
  font-size:.76rem; padding:7px 12px; border-radius:999px;
}
.marker{ position:absolute; transform:translate(-50%,-100%); text-align:center; }
.marker .pin{ width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; margin:0 auto; box-shadow:0 2px 4px rgba(0,0,0,.25); }
.marker .pin span{ transform:rotate(45deg); font-size:.85rem; }
.marker.santa .pin{ background:var(--berry-600); }
.marker.home .pin{ background:var(--pine-700); }
.marker.home.completed .pin{ background:var(--status-completed); }
.marker.home.visiting .pin{ background:var(--status-visiting); }
.marker.home.you .pin{ background:var(--gold-500); }
.marker .marker-label{ margin-top:4px; font-size:.7rem; font-weight:700; background:var(--cream-100); padding:2px 7px; border-radius:6px; border:1px solid var(--line); white-space:nowrap; }

/* --- Route / visit-order list --- */
.route-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.route-item{
  display:flex; align-items:center; gap:14px; background:var(--cream-100); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:14px 16px; cursor:grab;
}
.route-item.dragging{ opacity:.5; }
.route-item .drag-handle{ color:var(--ink-400); font-size:1.1rem; letter-spacing:2px; cursor:grab; }
.route-order{ width:32px; height:32px; border-radius:50%; background:var(--gold-100); color:var(--pine-900); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex-shrink:0; }
.route-info{ flex:1; min-width:0; }
.route-info .name{ font-weight:700; font-size:.94rem; }
.route-info .addr{ font-size:.8rem; color:var(--ink-400); }

/* --- Timeline (visit status) --- */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ position:relative; padding-left:34px; padding-bottom:26px; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{ content:''; position:absolute; left:6px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--cream-300); border:2px solid var(--line); }
.timeline li::after{ content:''; position:absolute; left:11px; top:16px; bottom:0; width:1px; background:var(--line); }
.timeline li:last-child::after{ display:none; }
.timeline li.done::before{ background:var(--sage-600); border-color:var(--sage-600); }
.timeline li.current::before{ background:var(--berry-600); border-color:var(--berry-600); box-shadow:0 0 0 4px var(--berry-100); }
.timeline .t-title{ font-weight:700; font-size:.92rem; }
.timeline .t-sub{ font-size:.8rem; color:var(--ink-400); }

/* --- Misc utility --- */
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.search-input{ position:relative; max-width:280px; }
.badge-count{ background:var(--berry-600); color:var(--cream-100); font-size:.68rem; border-radius:999px; padding:1px 7px; margin-left:6px; }
.muted{ color:var(--ink-400); font-size:.85rem; }
.divider{ height:1px; background:var(--line); margin:24px 0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } }
.empty-state{ text-align:center; padding:48px 20px; color:var(--ink-400); }
.empty-state h4{ color:var(--pine-900); margin-bottom:6px; }

/* --- Floating customer-service WhatsApp --- */
.cs-fab{ position:fixed; right:max(20px,env(safe-area-inset-right,0px)); bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px)); z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; }
.cs-fab > *{ pointer-events:auto; }
.cs-btn{ position:relative; display:flex; align-items:center; height:56px; padding:0 14px; border-radius:999px; color:#fff; text-decoration:none; font-weight:700; font-size:.95rem; letter-spacing:.01em; background:linear-gradient(135deg,#2be07b,#16a34a); box-shadow:0 10px 28px -8px rgba(22,163,74,.7),0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.35); opacity:0; transform:translateY(24px) scale(.6); transition:opacity .4s ease,transform .6s cubic-bezier(.3,1.5,.5,1),box-shadow .3s ease; }
.cs-fab.is-in .cs-btn{ opacity:1; transform:none; }
.cs-fab.is-in .cs-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(22,163,74,.8),0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.35); }
.cs-fab.is-in .cs-btn:active{ transform:scale(.94); }
.cs-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px rgba(22,163,74,.55); }
.cs-icon{ display:grid; place-items:center; width:28px; height:28px; flex:none; transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.cs-icon svg{ width:28px; height:28px; }
.cs-btn:hover .cs-icon{ transform:rotate(-12deg) scale(1.12); }
.cs-label{ max-width:0; opacity:0; margin-left:0; overflow:hidden; white-space:nowrap; transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease,margin-left .4s ease; }
.cs-fab.is-open .cs-label,.cs-btn:hover .cs-label,.cs-btn:focus-visible .cs-label{ max-width:100px; opacity:1; margin-left:10px; margin-right:6px; }
.cs-ring{ position:absolute; inset:0; border-radius:999px; pointer-events:none; animation:cs-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes cs-pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); } 75%,100%{ box-shadow:0 0 0 20px rgba(34,197,94,0); } }
.cs-dot{ position:absolute; top:3px; right:3px; width:12px; height:12px; border-radius:50%; background:#a7f3d0; border:2px solid #16a34a; box-shadow:0 0 0 0 rgba(167,243,208,.8); animation:cs-dot 2s ease-in-out infinite; }
@keyframes cs-dot{ 50%{ box-shadow:0 0 0 5px rgba(167,243,208,0); } }
.cs-bubble{ position:relative; max-width:240px; padding:14px 34px 14px 16px; border:0; border-radius:18px 18px 4px 18px; background:#fff; color:var(--ink-900); box-shadow:0 18px 40px -14px rgba(20,40,80,.4),0 0 0 1px rgba(35,40,33,.06); display:flex; flex-direction:column; gap:2px; font-size:.86rem; line-height:1.4; transform-origin:bottom right; opacity:0; visibility:hidden; transform:translateY(10px) scale(.85); transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1),visibility .3s; }
.cs-bubble strong{ font-size:.95rem; }
.cs-bubble span{ color:var(--ink-600); }
.cs-fab.show-bubble .cs-bubble{ opacity:1; visibility:visible; transform:none; }
.cs-bubble-close{ position:absolute; top:6px; right:8px; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--ink-400); font-size:1.2rem; line-height:1; cursor:pointer; transition:background .2s,color .2s; }
.cs-bubble-close:hover{ background:var(--cream-200); color:var(--ink-900); }
@media (max-width:560px){ .cs-fab{ right:max(14px,env(safe-area-inset-right,0px)); bottom:max(112px,calc(env(safe-area-inset-bottom,0px) + 110px)); } .cs-btn{ height:54px; } }
@media (prefers-reduced-motion:reduce){ .cs-ring,.cs-dot{ animation:none; } .cs-btn,.cs-label,.cs-bubble,.cs-icon{ transition-duration:.01ms !important; } }

body[data-home-theme="dark"] .home-landing{ background:linear-gradient(180deg,#050912 0%,#0b1730 72%,#102449 100%); }
body[data-home-theme="dark"] .home-intro{ color:var(--ink-900); }
body[data-home-theme="dark"] .btn-outline-light{ color:var(--ink-900); }
body[data-home-theme="dark"] .reference-card-link{ color:var(--ink-900); }
body[data-home-theme="dark"] .reference-categories,
body[data-home-theme="dark"] .section-cream{ background:#090f1d; }
body[data-home-theme="dark"] .reference-feature,
body[data-home-theme="dark"] .section-tan{ background:#0d1728; }
body[data-home-theme="dark"] .reference-feature-art::after{ background:linear-gradient(180deg,transparent,#0d1728); }
body[data-home-theme="dark"] .step,
body[data-home-theme="dark"] .privacy-card.can,
body[data-home-theme="dark"] .privacy-card.cannot,
body[data-home-theme="dark"] .section-cream#faq .card{ background:#111d32; border-color:#263854; color:#f8fafc; }
body[data-home-theme="dark"] .privacy-card li{ border-bottom-color:#263854; color:#d5deeb; }
body[data-home-theme="dark"] .section-cream#faq .card{ box-shadow:0 5px 18px rgba(0,0,0,.16); }
body[data-home-theme="dark"] .section-cream#faq .card:hover{ border-color:#4f8df7; box-shadow:0 8px 22px rgba(0,0,0,.4); }
body[data-home-theme="dark"] .step:hover{ border-color:#4f8df7; box-shadow:0 12px 28px rgba(14,48,99,.42); }
body[data-home-theme="dark"] .reference-card:hover{ box-shadow:0 18px 38px rgba(18,59,125,.4); }
body[data-home-theme="dark"] .home-actions .btn-primary{ background:var(--cream-300); color:var(--ink-900); }
body[data-home-theme="dark"] .home-actions .btn-primary:hover{ background:#3474d4; color:#fff; }
body[data-home-theme="dark"] .home-actions .btn-outline-light:hover{ background:rgba(79,141,247,.22); border-color:#80b4ff; }
body[data-home-theme="dark"] .site-nav-dropdown-menu a:hover,
body[data-home-theme="dark"] .cs-bubble-close:hover{ background:#183762; color:#fff; }
body[data-home-theme="dark"] .site-nav-links a:focus-visible,
body[data-home-theme="dark"] .site-nav-dropdown-toggle:focus-visible,
body[data-home-theme="dark"] .nav-theme-toggle:focus-visible,
body[data-home-theme="dark"] .nav-toggle:focus-visible{ outline-color:#80b4ff; }
body[data-home-theme="dark"] .site-footer p{ color:rgba(248,250,252,.82) !important; }
body[data-home-theme="dark"] h1,
body[data-home-theme="dark"] h2,
body[data-home-theme="dark"] h3,
body[data-home-theme="dark"] h4{ color:#f8fafc; }
body[data-home-theme="dark"] .reference-heading h2,
body[data-home-theme="dark"] .reference-feature-copy h2{ color:#a9cbff; }
body[data-home-theme="dark"] .site-footer .brand{ color:#f8fafc; }
body[data-home-theme="dark"] .cs-bubble{ background:#111d32; color:#f8fafc; border:1px solid #263854; box-shadow:0 18px 40px -14px rgba(0,0,0,.7),0 0 0 1px rgba(128,180,255,.12); }
body[data-home-theme="dark"] .cs-bubble span{ color:#d5deeb; }

/* --- Admin and parent dashboard refresh --- */
.dashboard-page{ display:grid; gap:24px; }
.dashboard-eyebrow{ display:block; margin-bottom:3px; color:var(--ink-400); font-size:.62rem; font-weight:800; letter-spacing:.16em; }
.dashboard-date{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:var(--cream-100); color:var(--ink-600); font-size:.78rem; font-weight:700; box-shadow:0 5px 16px rgba(35,40,33,.04); }
.dashboard-date svg{ width:16px; height:16px; fill:none; stroke:var(--pine-700); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-welcome{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:190px; overflow:hidden; padding:32px 38px; border:1px solid rgba(255,255,255,.18); border-radius:24px; color:#fff; box-shadow:0 18px 44px rgba(32,64,105,.18); animation:dashboard-rise .7s cubic-bezier(.2,.75,.25,1) both; }
.admin-welcome{ background:radial-gradient(circle at 87% 5%,rgba(255,255,255,.2),transparent 27%),linear-gradient(118deg,#174f70 0%,#207da8 53%,#2b5b9b 100%); }
.parent-welcome{ background:radial-gradient(circle at 84% 18%,rgba(255,255,255,.2),transparent 24%),linear-gradient(118deg,#174f70 0%,#207da8 52%,#2b5b9b 100%); }
.welcome-copy,.welcome-actions,.parent-welcome-mark{ position:relative; z-index:1; }
.welcome-copy{ max-width:620px; }
.welcome-kicker{ display:block; margin-bottom:12px; color:rgba(255,255,255,.76); font-size:.67rem; font-weight:800; letter-spacing:.17em; }
.welcome-copy h2{ margin:0 0 9px; color:#fff; font-family:var(--font-display); font-size:clamp(1.55rem,3vw,2.25rem); font-weight:600; line-height:1.15; }
.welcome-copy p{ max-width:58ch; margin:0; color:rgba(255,255,255,.82); font-size:.9rem; line-height:1.65; }
.welcome-actions{ display:flex; flex:none; flex-wrap:wrap; gap:10px; }
.btn-welcome-light,.btn-welcome-outline{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 15px; border:1px solid rgba(255,255,255,.72); border-radius:999px; font-size:.78rem; font-weight:800; text-decoration:none; transition:transform .25s ease,background .25s ease,box-shadow .25s ease; }
.btn-welcome-light{ background:#fff; color:var(--pine-700); box-shadow:0 8px 18px rgba(8,31,54,.16); }
.btn-welcome-outline{ background:rgba(255,255,255,.08); color:#fff; }
.btn-welcome-light:hover,.btn-welcome-outline:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(8,31,54,.2); }
.btn-welcome-outline:hover{ background:rgba(255,255,255,.18); }
.btn-welcome-light svg,.btn-welcome-outline svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.welcome-orbit{ position:absolute; z-index:0; border:1px solid rgba(255,255,255,.12); border-radius:50%; pointer-events:none; }
.welcome-orbit-one{ top:-126px; right:11%; width:300px; height:300px; animation:dashboard-orbit 22s linear infinite; }
.welcome-orbit-two{ right:3%; bottom:-220px; width:380px; height:380px; border-color:rgba(255,255,255,.1); animation:dashboard-orbit 30s linear infinite reverse; }
.dashboard-stat-grid{ gap:16px; margin:0; }
.dashboard-stat-card{ position:relative; min-height:162px; overflow:hidden; padding:20px 21px; border-color:rgba(223,216,198,.9); box-shadow:0 8px 24px rgba(35,40,33,.045); animation:dashboard-rise .65s cubic-bezier(.2,.75,.25,1) both; transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease,border-color .3s ease; }
.dashboard-stat-card:nth-child(1){ animation-delay:.08s; }
.dashboard-stat-card:nth-child(2){ animation-delay:.15s; }
.dashboard-stat-card:nth-child(3){ animation-delay:.22s; }
.dashboard-stat-card:nth-child(4){ animation-delay:.29s; }
.dashboard-stat-card::after{ position:absolute; right:-28px; bottom:-54px; width:125px; height:125px; border:1px solid rgba(43,91,155,.09); border-radius:50%; content:""; transition:transform .45s ease; }
.dashboard-stat-card:hover{ transform:translateY(-5px); border-color:rgba(43,91,155,.26); box-shadow:0 18px 34px rgba(32,64,105,.11); }
.dashboard-stat-card:hover::after{ transform:scale(1.25); }
.dashboard-stat-card .label{ margin:11px 0 2px; color:var(--ink-600); font-size:.78rem; }
.dashboard-stat-card .value{ font-family:var(--font-display); font-size:2.15rem; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; }
.dashboard-stat-card .stat-caption{ display:block; margin-top:5px; color:var(--ink-400); font-size:.69rem; }
.stat-icon{ display:grid; width:36px; height:36px; place-items:center; border:1px solid #d5e4eb; border-radius:12px; background:#eaf3f7; color:#2b5b9b; transition:transform .3s ease,background .3s ease; }
.stat-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.stat-icon.completed{ border-color:#d7e9dc; background:#edf6ef; color:#3e7a52; }
.stat-icon.visiting{ border-color:#f0d9d5; background:#fbefec; color:#9c3b3b; }
.stat-icon.waiting{ border-color:#eadfbe; background:#f8f2e3; color:#9a8b54; }
.dashboard-stat-card:hover .stat-icon{ transform:translateY(-2px) rotate(-5deg); }
.dashboard-gps-bar{ position:relative; overflow:hidden; min-height:88px; margin:0; padding:18px 22px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(105deg,#173d5a,#207da8); box-shadow:0 12px 28px rgba(32,64,105,.14); animation:dashboard-rise .7s .25s both; }
.dashboard-gps-bar::after{ position:absolute; top:-64px; right:24%; width:170px; height:170px; border:1px solid rgba(255,255,255,.1); border-radius:50%; content:""; pointer-events:none; }
.dashboard-gps-bar .gps-status,.dashboard-gps-bar>div:last-child{ position:relative; z-index:1; }
.dashboard-gps-bar .gps-dot{ flex:none; }
.dashboard-gps-bar .gps-dot.on{ animation:dashboard-pulse 2s ease-in-out infinite; }
.dashboard-gps-bar .btn{ transition:transform .2s ease,box-shadow .2s ease; }
.dashboard-gps-bar .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.16); }
.dashboard-table-card,.dashboard-visit-card,.dashboard-map-card,.dashboard-timeline-card{ border-color:rgba(223,216,198,.86); box-shadow:0 10px 30px rgba(35,40,33,.045); animation:dashboard-rise .7s .32s both; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.dashboard-table-card:hover,.dashboard-visit-card:hover,.dashboard-map-card:hover,.dashboard-timeline-card:hover{ border-color:rgba(43,91,155,.19); box-shadow:0 16px 38px rgba(32,64,105,.08); }
.dashboard-section-heading{ align-items:center; margin-bottom:18px; }
.dashboard-section-heading h3{ margin:2px 0 0; color:var(--ink-900); font-size:1.08rem; }
.dashboard-section-heading p{ margin:5px 0 0; color:var(--ink-400); font-size:.77rem; }
.section-kicker{ display:block; color:var(--pine-700); font-size:.61rem; font-weight:800; letter-spacing:.15em; }
.dashboard-table-card .table-wrap{ border-color:rgba(223,216,198,.82); }
.dashboard-table-card tbody tr{ animation:dashboard-row-in .42s both; }
.dashboard-table-card tbody tr:nth-child(2){ animation-delay:.05s; }
.dashboard-table-card tbody tr:nth-child(3){ animation-delay:.1s; }
.dashboard-table-card tbody tr:nth-child(4){ animation-delay:.15s; }
.parent-dashboard-page{ gap:22px; }
.parent-welcome{ min-height:178px; }
.parent-welcome-mark{ display:grid; width:92px; height:92px; flex:none; place-items:center; border:1px solid rgba(255,255,255,.34); border-radius:28px; background:rgba(255,255,255,.14); box-shadow:inset 0 1px rgba(255,255,255,.2); animation:dashboard-float 4s ease-in-out infinite; }
.parent-welcome-mark svg{ width:44px; height:44px; fill:none; stroke:#fff; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-parent-grid{ grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr); gap:20px; margin:0; }
.dashboard-visit-card,.dashboard-map-card{ padding:22px; }
.parent-visit-highlight{ display:flex; align-items:center; gap:14px; padding:16px; border:1px solid #e0eaf0; border-radius:16px; background:linear-gradient(120deg,#f4f8fa,#fffdf8); }
.parent-visit-icon{ display:grid; width:44px; height:44px; flex:none; place-items:center; border-radius:14px; background:#e5f0f5; color:#2b5b9b; }
.parent-visit-icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.parent-visit-highlight>div{ display:grid; gap:3px; }
.parent-detail-label{ color:var(--ink-400); font-size:.69rem; font-weight:700; letter-spacing:.03em; }
.parent-visit-highlight strong{ color:var(--ink-900); font-family:var(--font-display); font-size:1.13rem; font-weight:600; }
.parent-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.parent-detail-item{ display:grid; gap:6px; min-height:70px; align-content:center; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--cream-100); }
.parent-detail-item strong{ color:var(--pine-700); font-size:.91rem; }
.parent-status-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 16px; padding:12px 0 0; border-top:1px solid var(--line); color:var(--ink-400); font-size:.78rem; }
.parent-status-line strong{ color:var(--ink-900); }
.dashboard-detail-link{ display:inline-flex; align-items:center; gap:8px; }
.dashboard-detail-link span,.dashboard-section-heading .btn span{ transition:transform .2s ease; }
.dashboard-detail-link:hover span,.dashboard-section-heading .btn:hover span{ transform:translateX(3px); }
.dashboard-contact-link{ display:inline-flex; align-items:center; gap:8px; }
.dashboard-contact-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-map-card .map-frame{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.dashboard-timeline-card{ padding:22px 26px; }
.dashboard-visit-count{ display:inline-flex; align-items:center; min-height:30px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--cream-200); color:var(--ink-600); font-size:.7rem; font-weight:700; }
.dashboard-timeline-card .timeline li{ animation:dashboard-row-in .42s both; }
.dashboard-timeline-card .timeline li:nth-child(2){ animation-delay:.07s; }
.dashboard-timeline-card .timeline li:nth-child(3){ animation-delay:.14s; }
.dashboard-parent-message-card,.dashboard-message-inbox{ padding:22px 26px; }
.parent-message-card-title{ margin:0; }
.parent-message-label{ display:block; margin-bottom:7px; color:var(--ink-600); font-size:.76rem; font-weight:700; }
.parent-message-form textarea{ display:block; width:100%; min-height:112px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--cream-100); color:var(--ink-900); font:inherit; line-height:1.55; }
.parent-message-form select{ display:block; width:100%; margin-bottom:14px; }
.parent-message-form textarea::placeholder{ color:var(--ink-400); }
.parent-message-form-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.parent-message-actions{ display:flex; align-items:center; gap:8px; }
.parent-message-counter{ color:var(--ink-400); font-size:.72rem; font-variant-numeric:tabular-nums; }
.parent-message-feedback,.admin-message-feedback{ min-height:1.2em; margin:8px 0 0; color:var(--pine-700); font-size:.78rem; }
.parent-message-history{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.parent-message-history h4{ margin:0 0 12px; color:var(--ink-900); font-size:.88rem; }
.parent-message-list,.admin-message-list{ display:grid; gap:10px; }
.parent-message-item,.admin-message-item{ min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--cream-100); }
.parent-message-item-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.parent-message-item-heading strong{ color:var(--pine-700); font-size:.8rem; }
.parent-message-body,.admin-message-body{ margin:0; color:var(--ink-900); font-size:.86rem; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.parent-message-meta,.admin-message-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:var(--ink-400); font-size:.7rem; }
.message-read-status,.admin-message-status{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-400); font-size:.68rem; font-weight:700; }
.message-read-status::before,.admin-message-status::before{ width:7px; height:7px; border-radius:50%; background:currentColor; content:""; }
.message-read-status.is-read,.admin-message-status.is-read{ color:#3e7a52; }
.admin-message-item.is-unread{ border-color:rgba(43,91,155,.28); background:linear-gradient(110deg,#f4f8fb,#fffdf8); }
.admin-message-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.admin-message-sender{ display:grid; gap:3px; min-width:0; }
.admin-message-sender strong{ color:var(--ink-900); font-size:.86rem; }
.admin-message-sender span{ color:var(--ink-400); font-size:.72rem; overflow-wrap:anywhere; }
.admin-message-status{ flex:none; padding:5px 9px; border-radius:999px; background:var(--cream-200); }
.admin-message-status:not(.is-read){ color:var(--pine-700); background:#eaf3f7; }
.message-mark-read{ padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--cream-100); color:var(--pine-700); font:inherit; font-size:.7rem; font-weight:700; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.message-mark-read:hover{ border-color:var(--pine-700); background:var(--cream-200); }
.message-mark-read:disabled{ opacity:.6; cursor:wait; }
.message-edit-button{ padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--cream-100); color:var(--pine-700); font:inherit; font-size:.7rem; font-weight:700; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.message-edit-button:hover{ border-color:var(--pine-700); background:var(--cream-200); }
.message-edit-button:disabled{ opacity:.55; cursor:not-allowed; }
.child-parent-message-cell{ min-width:210px; max-width:320px; white-space:normal; }
.child-parent-message-cell>div{ max-height:100px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.child-parent-message-cell small{ display:block; margin-top:5px; color:var(--ink-400); font-size:.68rem; }
.dashboard-page .pill{ white-space:nowrap; }
@keyframes dashboard-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes dashboard-row-in{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:translateX(0); } }
@keyframes dashboard-float{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-7px) rotate(2deg); } }
@keyframes dashboard-orbit{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes dashboard-pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(95,190,124,.18); } 50%{ box-shadow:0 0 0 8px rgba(95,190,124,.05); } }
@media (max-width:1000px){
  .dashboard-welcome{ align-items:flex-start; flex-direction:column; gap:20px; padding:28px; }
  .welcome-actions{ flex-wrap:wrap; }
  .dashboard-parent-grid{ grid-template-columns:1fr; }
  .parent-welcome-mark{ position:absolute; top:26px; right:28px; width:70px; height:70px; opacity:.7; }
  .parent-welcome-mark svg{ width:35px; height:35px; }
}
@media (max-width:640px){
  .dashboard-page{ gap:16px; }
  .page-body.dashboard-page{ padding:18px 16px 42px; }
  .dashboard-welcome{ min-height:0; padding:24px 20px; border-radius:20px; }
  .welcome-copy{ padding-right:4px; }
  .welcome-copy h2{ max-width:22ch; font-size:1.55rem; }
  .welcome-copy p{ font-size:.82rem; }
  .welcome-actions{ width:100%; }
  .welcome-actions .btn{ flex:1; padding-inline:10px; font-size:.7rem; }
  .parent-welcome-mark{ top:18px; right:18px; width:48px; height:48px; border-radius:16px; opacity:.52; }
  .parent-welcome-mark svg{ width:25px; height:25px; }
  .dashboard-stat-grid{ gap:10px; }
  .dashboard-stat-card{ min-height:145px; padding:15px; }
  .dashboard-stat-card .value{ font-size:1.8rem; }
  .dashboard-stat-card .label{ font-size:.72rem; }
  .dashboard-gps-bar{ padding:16px; }
  .dashboard-gps-bar>div:last-child{ width:100%; }
  .dashboard-gps-bar>div:last-child .btn{ flex:1; }
  .dashboard-table-card,.dashboard-visit-card,.dashboard-map-card,.dashboard-timeline-card{ padding:17px; }
  .dashboard-section-heading{ align-items:flex-start; }
  .dashboard-section-heading>.btn{ flex:none; }
  .dashboard-section-heading h3{ font-size:.98rem; }
  .dashboard-parent-grid{ gap:14px; }
  .parent-detail-grid{ gap:8px; }
  .parent-detail-item{ padding:11px; }
  .dashboard-parent-message-card,.dashboard-message-inbox{ padding:17px; }
  .parent-message-form-footer{ align-items:flex-end; }
  .parent-message-form-footer .btn{ padding-inline:15px; }
  .parent-message-actions{ flex-wrap:wrap; justify-content:flex-end; }
}
@media (prefers-reduced-motion:reduce){
  .dashboard-page *,
  .dashboard-page *::before,
  .dashboard-page *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Landing-page motion effects inspired by the supplied reference. */
body.home-reveal-enabled .home-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--home-reveal-delay,0ms);
}
body.home-reveal-enabled .home-reveal.is-visible{ opacity:1; transform:none; }

.home-landing .home-actions .btn,
.site-header .nav-join-cta{
  background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.27) 50%,transparent 65%);
  background-size:220% 100%;
  background-position:-120% 0;
  transition:background-position .65s ease,background-color .15s ease,border-color .15s ease,transform .2s ease,box-shadow .25s ease;
}
.home-landing .home-actions .btn:hover,
.site-header .nav-join-cta:hover{
  background-position:120% 0;
  box-shadow:0 10px 24px rgba(24,58,44,.2);
}

.home-cursor-glow{
  position:fixed;
  top:0;
  left:0;
  z-index:80;
  width:36px;
  height:36px;
  border:1px solid rgba(156,111,42,.55);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,width .2s ease,height .2s ease,border-color .2s ease,background-color .2s ease;
}
.home-cursor-glow.is-visible{ opacity:1; }
.home-cursor-glow.is-interactive{
  width:58px;
  height:58px;
  border-color:rgba(156,111,42,.8);
  background:rgba(201,164,90,.08);
}

@media (hover:none),(prefers-reduced-motion:reduce){
  .home-cursor-glow{ display:none; }
  .home-landing .home-actions .btn,
  .site-header .nav-join-cta{ background-image:none; }
  body.home-reveal-enabled .home-reveal{ opacity:1; transform:none; transition:none; }
}

.home-snow-canvas{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.home-cursor-sparkle{
  position:fixed;
  z-index:81;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  opacity:.9;
  pointer-events:none;
  animation:home-cursor-sparkle-fall .9s ease-out forwards;
}
@keyframes home-cursor-sparkle-fall{
  from{ opacity:.95; transform:translate3d(0,0,0) scale(1) rotate(0); }
  to{ opacity:0; transform:translate3d(var(--sparkle-drift-x),var(--sparkle-drift-y),0) scale(.15) rotate(180deg); }
}

.reference-card,
.gallery-card,
.step,
.privacy-card,
#faq .card{
  position:relative;
  overflow:hidden;
}
.reference-card::after,
.gallery-card::after,
.step::after,
.privacy-card::after,
#faq .card::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:-20%;
  opacity:0;
  pointer-events:none;
  background-size:180px 180px;
  background-image:
    radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.96) 50%,transparent 52%),
    radial-gradient(3px 3px at 90px 10px,rgba(214,231,255,.92) 50%,transparent 52%),
    radial-gradient(2px 2px at 140px 80px,rgba(255,255,255,.9) 50%,transparent 52%),
    radial-gradient(3px 3px at 50px 120px,rgba(214,231,255,.88) 50%,transparent 52%),
    radial-gradient(2px 2px at 160px 150px,rgba(255,255,255,.92) 50%,transparent 52%);
  transition:opacity .25s ease;
}
.reference-card:hover::after,
.reference-card:focus-visible::after,
.gallery-card:hover::after,
.gallery-card:focus-visible::after,
.step:hover::after,
.step:focus-within::after,
.privacy-card:hover::after,
.privacy-card:focus-within::after,
#faq .card:hover::after,
#faq .card:focus-within::after{
  opacity:.48;
  animation:home-card-snow 4s linear infinite;
}
@keyframes home-card-snow{
  from{ background-position:0 0; }
  to{ background-position:0 180px; }
}

@media (prefers-reduced-motion:reduce){
  .home-snow-canvas,
  .home-cursor-sparkle{ display:none; }
  .reference-card::after,
  .gallery-card::after,
  .step::after,
  .privacy-card::after,
  #faq .card::after{ animation:none !important; }
}