:root{
  --emerald:#0B3D2E;
  --emerald-dark:#062219;
  --gold-1:#F4D07A;
  --gold-2:#D4AF37;
  --gold-3:#9C7A1E;
  --ivory:#FAF7F0;
  --ink:#12181B;
  --line:rgba(11,61,46,0.12);
  --shadow-soft:0 20px 60px -20px rgba(6,34,25,0.35);
  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- Ambient background ---------- */
.grain-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(11,61,46,0.035) 1px, transparent 1px);
  background-size:3px 3px;
}
.floating-orb{
  position:fixed; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none;
  opacity:0.35;
}
.orb-1{
  width:420px; height:420px; top:-120px; right:-100px;
  background:radial-gradient(circle, var(--gold-1), transparent 70%);
  animation: drift 16s ease-in-out infinite;
}
.orb-2{
  width:360px; height:360px; bottom:-140px; left:-80px;
  background:radial-gradient(circle, var(--emerald), transparent 70%);
  opacity:0.15;
  animation: drift 20s ease-in-out infinite reverse;
}
@keyframes drift{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-30px,40px); }
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  background:rgba(250,247,240,0.72);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:8px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ height:76px; width:auto; display:block; }
.footer-logo-wrap{
  display:inline-block; background:rgba(250,247,240,0.95); border-radius:16px;
  padding:12px 20px; margin-bottom:14px;
}
.footer-logo{ height:52px; width:auto; display:block; }
.brand-mark{
  font-family:var(--font-display); font-weight:700; font-size:1.6rem;
  color:var(--emerald);
}
.brand-mark-gold{ color:var(--gold-2); }
.brand-text{
  font-family:var(--font-mono); font-weight:600; letter-spacing:0.08em;
  font-size:0.82rem; color:var(--emerald);
}
.brand-text em{ font-style:normal; color:var(--gold-3); }
.main-nav{ display:flex; gap:28px; }
.main-nav a{
  font-size:0.92rem; font-weight:500; color:var(--ink); opacity:0.75;
  transition:opacity .2s var(--ease);
}
.main-nav a:hover{ opacity:1; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:0.92rem;
  cursor:pointer; border:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  color:var(--emerald-dark);
  box-shadow:0 10px 30px -8px rgba(212,175,55,0.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(212,175,55,0.65); }
.btn-outline{
  background:transparent; border:1.5px solid var(--emerald); color:var(--emerald);
}
.btn-outline:hover{ background:var(--emerald); color:var(--ivory); }
.btn-small{ padding:9px 18px; font-size:0.82rem; }

/* ---------- Hero ---------- */
.hero{ padding:64px 28px 40px; position:relative; z-index:1; }
.hero-inner{
  max-width:1200px; margin:0 auto; display:grid;
  grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
}
.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold-3); font-weight:600; margin:0 0 14px;
}
h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem, 4.5vw, 3.8rem);
  line-height:1.05; margin:0 0 20px; color:var(--emerald-dark);
}
.text-gold{
  background:linear-gradient(120deg, var(--gold-2), var(--gold-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:1.05rem; line-height:1.6; color:rgba(18,24,27,0.7); max-width:52ch; margin:0 0 28px; }
.hero-actions{ display:flex; gap:14px; margin-bottom:44px; }
.hero-stats{ display:flex; gap:36px; }
.hero-stats strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--emerald); }
.hero-stats span{ font-size:0.8rem; color:rgba(18,24,27,0.55); }

/* ---------- 3D hero stage ---------- */
.hero-stage{
  position:relative; height:600px; display:flex; align-items:center; justify-content:center;
  perspective:1000px;
}

/* ---------- The Sun (logo) ---------- */
.token-3d{
  width:150px; height:150px; position:relative; transform-style:preserve-3d;
  animation:float-token 6s ease-in-out infinite;
  transition:transform .1s linear;
  z-index:5;
}
@keyframes float-token{
  0%,100%{ transform:translateY(0) rotateY(0deg); }
  50%{ transform:translateY(-14px) rotateY(8deg); }
}
.token-face{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(250,247,240,0.6) 45%, rgba(212,175,55,0.22) 100%);
  display:flex; align-items:center; justify-content:center; padding:24px;
  box-shadow:0 0 0 8px rgba(244,208,122,0.12), 0 0 60px 14px rgba(212,175,55,0.55), 0 30px 60px -15px rgba(212,175,55,0.55), inset 0 4px 12px rgba(255,255,255,0.6), inset 0 -8px 16px rgba(90,60,10,0.18);
  border:3px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(6px);
  animation:sun-pulse 4s ease-in-out infinite;
}
@keyframes sun-pulse{
  0%,100%{ box-shadow:0 0 0 8px rgba(244,208,122,0.12), 0 0 60px 14px rgba(212,175,55,0.5), 0 30px 60px -15px rgba(212,175,55,0.5), inset 0 4px 12px rgba(255,255,255,0.6), inset 0 -8px 16px rgba(90,60,10,0.18); }
  50%{ box-shadow:0 0 0 14px rgba(244,208,122,0.18), 0 0 80px 22px rgba(212,175,55,0.7), 0 30px 60px -15px rgba(212,175,55,0.65), inset 0 4px 12px rgba(255,255,255,0.6), inset 0 -8px 16px rgba(90,60,10,0.18); }
}
.token-face img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(6,34,25,0.35));
  transform:translateZ(30px);
}
.token-ring{
  position:absolute; inset:-18px; border-radius:50%;
  border:2px solid rgba(212,175,55,0.35);
  animation:spin-ring 14s linear infinite;
}
.token-ring::before{
  content:''; position:absolute; inset:-12px; border-radius:50%;
  border:1px dashed rgba(11,61,46,0.18);
  animation:spin-ring 24s linear reverse infinite;
}
@keyframes spin-ring{ to{ transform:rotate(360deg); } }

/* ---------- Floating status/trust taglines around the logo ---------- */
.hero-badges{
  position:absolute; inset:0; z-index:6; pointer-events:none;
}
.hero-badge{
  position:absolute; display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.82); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.7);
  padding:7px 14px 7px 10px; border-radius:999px;
  font-family:var(--font-mono); font-size:0.68rem; font-weight:600;
  letter-spacing:0.01em; color:var(--emerald-dark); white-space:nowrap;
  box-shadow:0 14px 28px -12px rgba(6,34,25,0.4);
  animation:badge-float 5s ease-in-out infinite;
}
.hb-dot{
  width:6px; height:6px; border-radius:50%; background:#3FBF7F; flex:none;
  box-shadow:0 0 0 0 rgba(63,191,127,0.6);
  animation:badge-pulse 2.2s ease-out infinite;
}
.hb-icon{ font-size:0.85rem; line-height:1; }
@keyframes badge-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
@keyframes badge-pulse{
  0%{ box-shadow:0 0 0 0 rgba(63,191,127,0.55); }
  70%{ box-shadow:0 0 0 7px rgba(63,191,127,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,191,127,0); }
}

.badge-tl{ top:4%; left:-6%; animation-delay:0s; }
.badge-tr{ top:2%; right:-8%; animation-delay:.9s; }
.badge-rm{ top:48%; right:-13%; animation-delay:1.8s; }
.badge-br{ bottom:10%; right:-6%; animation-delay:2.6s; }
.badge-bl{ bottom:6%; left:-8%; animation-delay:1.3s; }
.badge-lm{ top:52%; left:-13%; animation-delay:2.1s; }

@media (max-width:1100px){
  .hero-badges{ display:none; }
}

/* ---------- Solar system: 12 services orbiting the logo like planets ---------- */
.solar-system{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}

/* faint circular orbit paths, purely decorative */
.orbit-path{
  position:absolute; top:50%; left:50%;
  width:calc(var(--radius) * 2); height:calc(var(--radius) * 2);
  margin:calc(var(--radius) * -1) 0 0 calc(var(--radius) * -1);
  border-radius:50%;
  border:1px dashed rgba(11,61,46,0.16);
  pointer-events:none;
}

.orbit-ring{
  position:absolute; width:1px; height:1px;
  animation:orbit-spin var(--duration) linear infinite;
}
.orbit-item{
  position:absolute; top:0; left:0; width:1px; height:1px;
  --angle: calc(360deg / var(--count) * var(--i));
  transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
}

.planet{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  animation:orbit-spin-reverse var(--duration) linear infinite;
  text-decoration:none; pointer-events:auto;
}
.planet-orb{
  position:relative; width:var(--size); height:var(--size); border-radius:50%;
  box-shadow:0 6px 16px -4px rgba(6,34,25,0.55), 0 0 0 3px rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.planet-icon{ font-size:calc(var(--size) * 0.46); line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }
.planet-name{
  font-size:0.6rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--emerald-dark); background:rgba(255,255,255,0.88); backdrop-filter:blur(6px);
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  opacity:1; transform:translateY(0); transition:opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
  box-shadow:0 6px 14px -6px rgba(6,34,25,0.35);
  pointer-events:none;
}
.planet:hover .planet-orb,
.planet:focus-visible .planet-orb{
  transform:scale(1.22);
  box-shadow:0 10px 22px -4px rgba(6,34,25,0.6), 0 0 0 4px rgba(255,255,255,0.55);
}
.planet:hover .planet-name,
.planet:focus-visible .planet-name{ background:var(--emerald); color:var(--ivory); transform:translateY(-2px); }

.planet-c1 .planet-orb{ background:radial-gradient(circle at 32% 28%, #FEF3D7, #D4AF37 62%, #8A6A18 100%); }
.planet-c2 .planet-orb{ background:radial-gradient(circle at 32% 28%, #6FBFA0, #0B3D2E 65%, #051C15 100%); }
.planet-c3 .planet-orb{ background:radial-gradient(circle at 32% 28%, #F6C7AC, #C1633B 65%, #742F17 100%); }
.planet-c4 .planet-orb{ background:radial-gradient(circle at 32% 28%, #B7ECE6, #217F79 65%, #0B3B38 100%); }
.planet-c5 .planet-orb{ background:radial-gradient(circle at 32% 28%, #F8DED6, #C98A73 65%, #7C4735 100%); }
.planet-c6 .planet-orb{ background:radial-gradient(circle at 32% 28%, #FFFFFF, #B9AF9A 65%, #625A49 100%); }

@keyframes orbit-spin{ to{ transform:rotate(360deg); } }
@keyframes orbit-spin-reverse{ to{ transform:rotate(-360deg); } }

@media (max-width: 900px){
  .hero-stage{ height:480px; }
  .ring-1{ --radius:82px !important; }
  .ring-2{ --radius:128px !important; }
  .ring-3{ --radius:172px !important; }
  .orbit-path.path-1{ --radius:82px !important; }
  .orbit-path.path-2{ --radius:128px !important; }
  .orbit-path.path-3{ --radius:172px !important; }
  .planet-name{ font-size:0.56rem; padding:3px 7px; }
}
@media (max-width: 640px){
  .hero-stage{ height:400px; }
  .token-3d{ width:110px; height:110px; }
  .ring-1{ --radius:64px !important; }
  .ring-2{ --radius:98px !important; }
  .ring-3{ --radius:132px !important; }
  .orbit-path.path-1{ --radius:64px !important; }
  .orbit-path.path-2{ --radius:98px !important; }
  .orbit-path.path-3{ --radius:132px !important; }
  .planet-orb{ width:calc(var(--size) * 0.78); height:calc(var(--size) * 0.78); }
  .planet-name{ display:none; }
}

/* ---------- Page transitions ---------- */
.page-enter{ animation:page-fade-up .55s var(--ease) both; }
@keyframes page-fade-up{
  from{ opacity:0; transform:translateY(14px) scale(0.995); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------- Auth / flash ---------- */
.nav-auth{ display:flex; align-items:center; gap:14px; margin-left:8px; }
.nav-logout{ font-size:0.85rem; font-weight:600; color:var(--emerald); opacity:0.75; }
.nav-logout:hover{ opacity:1; }
.flash-wrap{ position:relative; z-index:5; max-width:1200px; margin:14px auto 0; padding:0 24px; }
.flash-msg{
  background:rgba(11,61,46,0.92); color:var(--ivory); padding:12px 18px; border-radius:12px;
  font-size:0.9rem; font-weight:500; margin-bottom:8px; box-shadow:var(--shadow-soft);
  animation:page-fade-up .4s var(--ease) both;
}
.auth-wrap{
  max-width:440px; margin:60px auto 100px; padding:0 24px;
}
.auth-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:36px 32px;
  box-shadow:var(--shadow-soft);
}
.auth-card h1{ font-family:var(--font-display); font-size:1.8rem; margin:0 0 6px; }
.auth-card p.sub{ color:rgba(18,24,27,0.6); margin:0 0 24px; font-size:0.92rem; }
.auth-card label{ display:block; font-size:0.82rem; font-weight:600; margin:14px 0 6px; }
.auth-card input{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line);
  font-family:var(--font-body); font-size:0.95rem; background:var(--ivory);
}
.auth-error{ background:rgba(200,60,60,0.1); color:#a02c2c; padding:10px 14px; border-radius:10px; font-size:0.85rem; margin-bottom:6px; }
.auth-submit{ width:100%; margin-top:22px; }
.auth-switch{ text-align:center; margin-top:18px; font-size:0.88rem; color:rgba(18,24,27,0.65); }
.auth-switch a{ color:var(--gold-3); font-weight:600; }

/* ---------- Module hero (catalog/property/franchise/etc) ---------- */
.module-hero{
  background:linear-gradient(135deg, var(--emerald), var(--emerald-dark));
  color:var(--ivory); padding:70px 24px 50px; text-align:center;
}
.module-hero .m-icon{ font-size:3rem; display:block; margin-bottom:10px; animation:float-token 5s ease-in-out infinite; }
.module-hero h1{ font-family:var(--font-display); font-size:2.2rem; margin:0 0 8px; }
.module-hero p{ color:rgba(250,247,240,0.75); max-width:560px; margin:0 auto; }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:24px; max-width:1100px; margin:0 auto; }
.chip{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); font-size:0.82rem; font-weight:600;
  background:#fff; transition:all .2s var(--ease); cursor:pointer;
}
.chip.active, .chip:hover{ background:var(--emerald); color:var(--ivory); border-color:var(--emerald); }

.card-grid{
  max-width:1200px; margin:0 auto; padding:10px 24px 70px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:20px;
}
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  transform-style:preserve-3d; display:flex; flex-direction:column; gap:8px;
}
.svc-card:hover{ box-shadow:var(--shadow-soft); }
.svc-card .cat-tag{
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:700;
  color:var(--gold-3); background:rgba(212,175,55,0.12); padding:3px 10px; border-radius:999px; align-self:flex-start;
}
.svc-card h3{ font-family:var(--font-display); font-size:1.15rem; margin:2px 0 0; }
.svc-card p{ font-size:0.86rem; color:rgba(18,24,27,0.65); margin:0; flex:1; }
.svc-card .svc-meta{ display:flex; justify-content:space-between; font-size:0.82rem; font-weight:600; color:var(--emerald); margin-top:6px; }
.svc-card .btn{ margin-top:8px; }

.detail-wrap{ max-width:760px; margin:50px auto 90px; padding:0 24px; }
.detail-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px; box-shadow:var(--shadow-soft); }
.detail-card h1{ font-family:var(--font-display); font-size:1.7rem; margin:0 0 10px; }
.detail-meta{ display:flex; gap:18px; margin:14px 0 20px; flex-wrap:wrap; }
.detail-meta span{ font-size:0.85rem; font-weight:600; color:var(--emerald); background:rgba(11,61,46,0.06); padding:6px 12px; border-radius:10px; }

.dash-grid{ max-width:1200px; margin:0 auto; padding:40px 24px 90px; display:grid; gap:24px; }
.dash-section h2{ font-family:var(--font-display); font-size:1.25rem; margin:0 0 12px; }
.dash-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-soft); }
.dash-table th, .dash-table td{ padding:12px 16px; text-align:left; font-size:0.85rem; border-bottom:1px solid var(--line); }
.dash-table th{ background:rgba(11,61,46,0.05); font-weight:700; color:var(--emerald); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.05em; }
.status-pill{ padding:3px 10px; border-radius:999px; font-size:0.72rem; font-weight:700; background:rgba(212,175,55,0.15); color:var(--gold-3); }
.empty-row{ padding:16px; color:rgba(18,24,27,0.5); font-size:0.85rem; text-align:center; }

.floating-card{
  position:absolute; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.75); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.6);
  padding:10px 16px; border-radius:14px; font-size:0.82rem; font-weight:600;
  color:var(--emerald-dark); box-shadow:var(--shadow-soft);
  animation:float-card 5s ease-in-out infinite;
}
.card-a{ top:6%; left:0%; animation-delay:0s; }
.card-b{ bottom:14%; right:2%; animation-delay:1.2s; }
.card-c{ top:52%; left:-6%; animation-delay:2.4s; }
@keyframes float-card{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.fc-icon{ font-size:1.1rem; }

/* ---------- Sections & tiles ---------- */
.section{ max-width:1200px; margin:0 auto; padding:70px 28px; position:relative; z-index:1; }
.section-head{ margin-bottom:36px; }
.section-head h2, .page-hero h1{
  font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); color:var(--emerald-dark); margin:0;
}
.page-hero{ padding-bottom:20px; }

.tile-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;
}
.tile{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:30px 26px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.tile:hover{ box-shadow:var(--shadow-soft); }
.tile-icon{
  width:52px; height:52px; border-radius:14px; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.c-blue{ background:linear-gradient(135deg,#5B9BF5,#3E7BE0); }
.c-purple{ background:linear-gradient(135deg,#B57DF0,#8E5CD6); }
.c-amber{ background:linear-gradient(135deg,#F5B94D,#E89A1C); }
.c-green{ background:linear-gradient(135deg,#4FCB85,#2FA968); }
.c-teal{ background:linear-gradient(135deg,#3FC7C0,#1FA7A0); }
.c-indigo{ background:linear-gradient(135deg,#6C7EF0,#4C5CD8); }
.c-rust{ background:linear-gradient(135deg,#F0895B,#DD6636); }
.c-magenta{ background:linear-gradient(135deg,#E56CB0,#C8408F); }
.c-pink{ background:linear-gradient(135deg,#F16D8D,#DD4468); }
.c-blue2{ background:linear-gradient(135deg,#4EA8F5,#2C86DE); }
.c-teal2{ background:linear-gradient(135deg,#2FBF9A,#189B7B); }
.c-emerald{ background:linear-gradient(135deg,#1E7A54,#0B3D2E); }
.tile h3{ font-family:var(--font-display); font-size:1.25rem; margin:0 0 8px; color:var(--emerald-dark); }
.tile p{ font-size:0.9rem; color:rgba(18,24,27,0.65); line-height:1.5; margin:0 0 18px; }
.tile-price{
  font-family:var(--font-mono); font-size:0.78rem; font-weight:600; color:var(--gold-3);
  background:rgba(212,175,55,0.12); padding:5px 10px; border-radius:999px;
}
.tile-arrow{
  position:absolute; top:26px; right:26px; opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease);
  color:var(--gold-2); font-weight:700;
}
.tile:hover .tile-arrow{ opacity:1; transform:translateX(4px); }
.tile-empty{
  border:1.5px dashed var(--line); background:transparent; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; opacity:0.65;
}
.tile-empty:hover{ transform:none; box-shadow:none; }

/* ---------- AI banner ---------- */
.ai-banner-section{ padding-top:0; }
.ai-banner{
  background:linear-gradient(120deg, var(--emerald-dark), var(--emerald));
  border-radius:20px; padding:26px 32px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.ai-banner-left{ display:flex; align-items:center; gap:16px; }
.ai-banner-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; background:linear-gradient(135deg, var(--gold-1), var(--gold-2)); flex-shrink:0;
}
.ai-banner h3{ font-family:var(--font-display); color:#fff; margin:0 0 4px; font-size:1.15rem; }
.ai-banner p{ color:rgba(255,255,255,0.7); margin:0; font-size:0.88rem; }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg, var(--emerald-dark), var(--emerald));
  border-radius:28px; margin:70px auto; max-width:1200px; padding:60px 40px; text-align:center;
}
.cta-inner h2{ font-family:var(--font-display); color:#fff; font-size:2rem; margin:0 0 10px; }
.cta-inner p{ color:rgba(255,255,255,0.75); margin:0 0 26px; }

/* ---------- Booking flow ---------- */
.booking-wrap{ max-width:720px; margin:0 auto; }
.steps-track{ display:flex; align-items:center; justify-content:center; margin-bottom:36px; }
.step-dot{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:0.72rem; color:rgba(18,24,27,0.4); font-weight:600;
}
.step-dot span{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--line); font-family:var(--font-display); color:rgba(18,24,27,0.4);
  transition:all .3s var(--ease);
}
.step-dot.active span, .step-dot.done span{
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2));
  border-color:transparent; color:var(--emerald-dark);
}
.step-dot.active, .step-dot.done{ color:var(--emerald); }
.step-line{ width:44px; height:1.5px; background:var(--line); margin:0 6px 18px; }

.floating-window{
  background:rgba(255,255,255,0.85); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7); border-radius:24px; padding:40px;
  box-shadow:var(--shadow-soft);
}
.form-step{ display:none; animation:step-in .45s var(--ease); }
.form-step.active{ display:block; }
@keyframes step-in{
  from{ opacity:0; transform:translateY(14px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.service-head{ display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.service-head .tile-icon{ margin-bottom:0; flex-shrink:0; }
.service-head h2{ margin:2px 0 0; }
.workflow-list{
  list-style:none; margin:22px 0; padding:0; display:flex; flex-direction:column; gap:12px;
}
.workflow-list li{
  display:flex; align-items:center; gap:14px; font-size:0.92rem; font-weight:500; color:var(--ink);
  background:rgba(11,61,46,0.04); border-radius:12px; padding:12px 16px;
}
.wf-num{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2)); color:var(--emerald-dark);
  font-family:var(--font-mono); font-size:0.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
.field-full{ grid-column:1 / -1; }
label{ display:flex; flex-direction:column; gap:6px; font-size:0.82rem; font-weight:600; color:var(--emerald-dark); }
input, textarea{
  font-family:var(--font-body); font-size:0.95rem; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:#fff; outline:none; transition:border-color .2s var(--ease);
}
input:focus, textarea:focus{ border-color:var(--gold-2); }
.urgency-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }
.urgency-card{
  border:1.5px solid var(--line); border-radius:14px; padding:16px; text-align:center; cursor:pointer;
  transition:all .2s var(--ease); font-weight:600; font-size:0.85rem;
}
.urgency-card input{ display:none; }
.urgency-card em{ display:block; font-style:normal; font-weight:400; font-size:0.75rem; color:rgba(18,24,27,0.5); margin-top:4px; }
.urgency-card:has(input:checked){
  border-color:var(--gold-2); background:rgba(212,175,55,0.1);
}
.fine-print{ font-size:0.78rem; color:rgba(18,24,27,0.5); }
.step-actions{ display:flex; justify-content:space-between; margin-top:30px; gap:12px; }

.confirm-section{ display:flex; justify-content:center; }
.confirm-card{ max-width:520px; text-align:center; }
.confirm-icon{
  width:60px; height:60px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2));
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--emerald-dark);
}

/* ---------- Contact panel ---------- */
.contact-panel{
  display:grid; grid-template-columns:1.3fr 1fr; gap:30px; align-items:center;
  background:linear-gradient(135deg, var(--emerald-dark), var(--emerald)); color:#fff;
  border-radius:24px; padding:48px;
}
.contact-panel h2{ font-family:var(--font-display); font-size:1.8rem; margin:6px 0 10px; }
.contact-panel .hero-sub{ color:rgba(255,255,255,0.75); }
.contact-actions{ display:flex; flex-direction:column; gap:14px; }

/* ---------- Admin table ---------- */
.admin-table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; margin-top:20px; font-size:0.88rem; }
.admin-table th, .admin-table td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; }
.badge{ padding:4px 10px; border-radius:999px; font-size:0.72rem; font-weight:600; background:rgba(11,61,46,0.1); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--emerald-dark); color:rgba(255,255,255,0.8); margin-top:60px; }
.footer-inner{
  max-width:1200px; margin:0 auto; padding:50px 28px 30px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px;
}
.footer-brand p{ font-size:0.85rem; opacity:0.7; margin-top:10px; line-height:1.5; }
.footer-links{ display:flex; gap:60px; }
.footer-links h4{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-1); margin:0 0 12px; }
.footer-links a{ display:block; font-size:0.85rem; opacity:0.75; margin-bottom:8px; }
.footer-copy{ text-align:center; font-size:0.78rem; opacity:0.5; padding:18px; margin:0; border-top:1px solid rgba(255,255,255,0.08); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .main-nav{ display:none; }
  .field-grid{ grid-template-columns:1fr; }
  .urgency-grid{ grid-template-columns:1fr; }
  .contact-panel{ grid-template-columns:1fr; }
}

/* ---------- About / Mission ---------- */
.mission-section{ padding-top:20px; }
.mission-grid{
  display:grid; grid-template-columns:1.3fr 0.7fr; gap:40px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:44px;
}
.mission-token{ display:flex; justify-content:center; }
.advantage-tile, .product-tile, .job-tile{ cursor:default; }
.advantage-tile:hover, .product-tile:hover, .job-tile:hover{ transform:none; box-shadow:var(--shadow-soft); }

/* ---------- Team ---------- */
.team-tile{ text-align:center; cursor:default; }
.team-tile:hover{ transform:none; box-shadow:var(--shadow-soft); }
.team-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:#fff;
}
.team-tile h3{ margin-bottom:4px; }
.team-degree{
  display:inline-block; font-family:var(--font-mono); font-size:0.7rem; font-weight:600;
  color:var(--gold-3); background:rgba(212,175,55,0.12); padding:3px 10px; border-radius:999px; margin-bottom:10px;
}
.team-tile p{ margin:0; }
.field-team-banner{
  display:flex; align-items:center; background:linear-gradient(135deg, var(--emerald-dark), var(--emerald)); color:#fff;
}
.field-team-banner .eyebrow{ color:var(--gold-1); }
.field-team-banner h2{ color:#fff; font-family:var(--font-display); font-size:1.7rem; margin:4px 0 10px; }
.field-team-banner .hero-sub{ color:rgba(255,255,255,0.78); max-width:70ch; }

/* ---------- Contact page ---------- */
.contact-page-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:24px; align-items:start; }
.contact-info-card{ background:linear-gradient(135deg, var(--emerald-dark), var(--emerald)); color:#fff; }
.contact-info-card .eyebrow{ color:var(--gold-1); }
.contact-info-card h2{ color:#fff; font-family:var(--font-display); font-size:1.6rem; margin:4px 0 10px; }
.contact-info-card .hero-sub{ color:rgba(255,255,255,0.78); }
.contact-detail-list{ display:flex; flex-direction:column; gap:18px; margin:26px 0; }
.contact-detail{ display:flex; align-items:flex-start; gap:14px; }
.contact-detail-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.contact-detail h4{ margin:0 0 2px; font-size:0.82rem; color:rgba(255,255,255,0.6); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.contact-detail p{ margin:0; font-size:0.98rem; }
.contact-detail a{ color:#fff; }
.contact-form-card form{ margin-top:20px; }

/* ---------- Job tiles ---------- */
.job-tile .tile-icon{ margin-bottom:14px; }

@media (max-width:900px){
  .mission-grid{ grid-template-columns:1fr; text-align:center; }
  .contact-page-grid{ grid-template-columns:1fr; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold-2); outline-offset:2px;
}

/* ---------- Prerana Guide (chatbot) ---------- */
.pbot{ position:fixed; right:22px; bottom:22px; z-index:60; }
.pbot-toggle{
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; padding:0;
  position:relative; overflow:visible;
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  box-shadow:0 16px 34px -10px rgba(212,175,55,0.6), 0 0 0 6px rgba(212,175,55,0.12);
  display:flex; align-items:center; justify-content:center;
  animation:mascot-drift 5s ease-in-out infinite;
  transition:transform .25s var(--ease);
}
.pbot-toggle:hover{ transform:scale(1.08); }
.pbot-toggle-img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  border:2px solid rgba(255,255,255,0.7);
}
.pbot-toggle-dot{
  position:absolute; bottom:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:#3FBF7F; border:2px solid var(--ivory);
  animation:badge-pulse 2.2s ease-out infinite;
}
@keyframes mascot-drift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  30%{ transform:translateY(-8px) rotate(-4deg); }
  60%{ transform:translateY(-3px) rotate(3deg); }
}
.pbot-panel{
  position:absolute; right:0; bottom:80px; width:340px; max-width:calc(100vw - 40px);
  height:490px; max-height:72vh;
  background:#fff; border-radius:20px; box-shadow:var(--shadow-soft); border:1px solid var(--line);
  display:none; flex-direction:column; overflow:hidden;
  animation:page-fade-up .3s var(--ease) both;
}
.pbot.open .pbot-panel{ display:flex; }
.pbot-header{
  background:linear-gradient(135deg, var(--emerald), var(--emerald-dark)); color:var(--ivory);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
}
.pbot-header-info{ display:flex; align-items:center; gap:10px; }
.pbot-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid rgba(255,255,255,0.55);
}
.pbot-header strong{ display:block; font-family:var(--font-display); font-size:1.02rem; }
.pbot-status{ font-size:0.72rem; color:#8fe3b0; display:block; margin-top:2px; }
.pbot-close{ background:none; border:none; color:var(--ivory); font-size:1rem; cursor:pointer; opacity:0.75; }
.pbot-close:hover{ opacity:1; }
.pbot-messages{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--ivory);
}
.pbot-welcome{ margin:-4px -4px 4px; border-radius:14px; overflow:hidden; box-shadow:0 10px 22px -10px rgba(6,34,25,0.35); }
.pbot-welcome-img{ display:block; width:100%; height:110px; object-fit:cover; }
.pbot-row{ display:flex; align-items:flex-end; gap:7px; }
.pbot-row.user{ justify-content:flex-end; }
.pbot-msg-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none; }
.pbot-msg{ max-width:78%; padding:10px 13px; border-radius:14px; font-size:0.85rem; line-height:1.4; }
.pbot-msg.bot{ background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.pbot-msg.user{ background:var(--emerald); color:var(--ivory); border-bottom-right-radius:4px; }
.pbot-msg a{ color:var(--gold-3); font-weight:700; text-decoration:underline; }
.pbot-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; background:var(--ivory); }
.pbot-chips .chip{ font-size:0.72rem; padding:6px 12px; }
.pbot-input-row{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; }
.pbot-input-row input{
  flex:1; padding:10px 14px; border-radius:999px; border:1px solid var(--line); font-size:0.85rem; background:var(--ivory);
}
.pbot-send{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--emerald); color:var(--ivory); font-size:1rem; flex-shrink:0;
}
@media (max-width:480px){
  .pbot{ right:14px; bottom:14px; }
  .pbot-panel{ width:calc(100vw - 28px); right:-8px; }
}


/* ---------- Client showcase ---------- */
.clients-section{padding-top:72px;padding-bottom:72px;}
.clients-section .section-head{max-width:760px;margin-bottom:30px;}
.client-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.client-card{min-height:190px;padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 14px 40px rgba(11,61,46,.08);transition:transform .25s ease,box-shadow .25s ease;}
.client-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(11,61,46,.14);}
.client-card h3{margin:18px 0 0;font-size:1.05rem;}
.client-logo-img{width:112px;height:84px;object-fit:contain;}
.client-text-logo{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;font-weight:800;letter-spacing:.08em;font-size:1.25rem;}
.zoro-logo{background:linear-gradient(135deg,#163a2b,#2d8b57);color:#fff;}
.municipality-logo{background:linear-gradient(135deg,#d79b2b,#f2c76b);color:#173c2e;}
@media(max-width:800px){.client-grid{grid-template-columns:1fr}.client-card{min-height:165px}}

/* ===== 2026 immersive motion system ===== */
html{scroll-behavior:smooth;}
body{overflow-x:hidden;}
.page-transition{position:fixed;inset:0;z-index:9999;pointer-events:none;visibility:hidden;}
.transition-panel{position:absolute;inset:0;transform:translateY(100%);will-change:transform;}
.transition-panel-a{background:var(--emerald-dark);}
.transition-panel-b{background:linear-gradient(135deg,var(--gold-1),var(--gold-2));clip-path:polygon(0 58%,100% 35%,100% 100%,0 100%);}
.transition-brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;opacity:0;transform:translateY(20px) scale(.96);}
.transition-brand img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 14px 30px rgba(0,0,0,.2));}
.transition-brand span{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.24em;}
body.is-transitioning .page-transition{visibility:visible;pointer-events:auto;}
body.is-transitioning .transition-panel{animation:panel-in .72s cubic-bezier(.77,0,.18,1) forwards;}
body.is-transitioning .transition-panel-b{animation-delay:.05s;}
body.is-transitioning .transition-brand{animation:brand-in .45s .22s ease forwards;}
body.page-loaded .page-enter{animation:cinematic-enter .85s cubic-bezier(.22,1,.36,1) both;}
@keyframes panel-in{to{transform:translateY(0)}}
@keyframes brand-in{to{opacity:1;transform:none}}
@keyframes cinematic-enter{from{opacity:0;transform:translateY(34px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:120;background:transparent;pointer-events:none;}
.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold-1),var(--gold-2),#fff3aa);box-shadow:0 0 16px rgba(212,175,55,.65);}
.cursor-glow{position:fixed;left:0;top:0;width:380px;height:380px;border-radius:50%;pointer-events:none;z-index:0;opacity:.16;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(212,175,55,.55),rgba(11,61,46,.12) 42%,transparent 70%);filter:blur(18px);mix-blend-mode:multiply;will-change:transform;}

.reveal-3d{opacity:0;transform:perspective(1200px) translateY(70px) rotateX(9deg) scale(.97);transform-origin:50% 100%;transition:opacity .85s ease,transform 1s cubic-bezier(.22,1,.36,1);will-change:transform,opacity;}
.reveal-3d.is-visible{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0) scale(1);}

.motion-card{position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .18s ease,box-shadow .35s ease;isolation:isolate;}
.motion-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(350px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.32),transparent 42%);opacity:0;transition:opacity .25s ease;z-index:-1;}
.motion-card:hover::after{opacity:1;}
.motion-card > *{transform:translateZ(18px);}

.hero-section,.page-hero{position:relative;overflow:hidden;}
.hero-section::before,.page-hero::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;right:-180px;top:-220px;background:conic-gradient(from 140deg,rgba(212,175,55,.28),rgba(11,61,46,.06),rgba(212,175,55,.22));filter:blur(4px);animation:orb-spin 18s linear infinite;pointer-events:none;}
@keyframes orb-spin{to{transform:rotate(360deg)}}

@media (hover:none),(max-width:800px){.cursor-glow{display:none}.motion-card > *{transform:none}.reveal-3d{transform:translateY(35px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.cursor-glow{display:none}.reveal-3d{opacity:1;transform:none}}

/* ---------- Non-blocking 3D scroll motion ---------- */
.scroll-motion-section{
  position:relative;
  opacity:1!important;
  visibility:visible!important;
  transform:perspective(1400px) translateY(22px) rotateX(1.2deg) scale(.992);
  transform-origin:50% 50%;
  transition:transform .85s cubic-bezier(.22,1,.36,1), opacity .6s ease;
  will-change:transform;
}
.scroll-motion-section.is-motion-visible{
  transform:perspective(1400px) translateY(0) rotateX(0) scale(1);
}
/* Decorative center seam only. It never covers or clips page content. */
.scroll-motion-section::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:50%;
  top:8%;
  bottom:8%;
  width:1px;
  background:linear-gradient(transparent,rgba(212,168,67,.42),transparent);
  opacity:0;
  transform:scaleY(.15);
  transition:opacity .4s ease,transform .75s cubic-bezier(.22,1,.36,1);
}
.scroll-motion-section.is-motion-visible::after{opacity:.22;transform:scaleY(1)}
.scroll-motion-section > *{position:relative;z-index:1}
@media(max-width:800px){.scroll-motion-section{transform:translateY(14px) scale(.996)}}
@media(prefers-reduced-motion:reduce){.scroll-motion-section{transform:none!important}.scroll-motion-section::after{display:none!important}}

/* ---------- Service availability states ---------- */
.services-available{margin-bottom:46px}
.services-coming{margin-top:20px;padding-top:34px;border-top:1px solid var(--line)}
.services-subhead{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.services-subhead h3{font-family:var(--font-display);font-size:clamp(1.55rem,2.5vw,2rem);margin:0;color:var(--emerald-dark)}
.services-subhead p{margin:5px 0 0;color:rgba(18,24,27,.62)}
.tile.service-live{border-color:rgba(46,189,110,.28);box-shadow:0 15px 38px rgba(16,94,59,.07)}
.tile.service-live:hover{transform:translateY(-7px)}
.tile.service-coming{overflow:hidden;cursor:not-allowed;min-height:238px;filter:saturate(.45)}
.tile.service-coming .tile-content{opacity:.34;filter:blur(.35px);pointer-events:none}
.coming-overlay{position:absolute;inset:0;z-index:6;background:rgba(255,255,255,.86);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:grid;place-items:center;text-align:center;padding:24px;border-radius:20px}
.coming-overlay-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.coming-overlay strong{font-family:var(--font-display);font-size:1.35rem;color:var(--emerald-dark)}
.coming-overlay span{font-size:.82rem;color:rgba(18,24,27,.56);max-width:180px;line-height:1.45}
.coming-lock{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f5f2ea;border:1px solid var(--line);font-size:1.15rem;margin-bottom:3px}
@media(max-width:760px){.brand-logo{height:58px}.header-inner{padding:8px 16px}.services-subhead{align-items:flex-start}}