/* ══════════════════════════════════════════════════════════
   TOKENS & RESET
══════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --ink:#0b1427;--ink2:#1a2744;--ink3:#243358;
  --muted:#5a6a8a;--muted2:#8898b8;--muted3:#b8c5da;
  --border:#e4eaf5;--border2:#f0f4fc;
  --bg:#f5f7ff;--surface:#ffffff;--surface2:#f8faff;--surface3:#f0f4fc;
  --teal:#0fbcb0;--teal-d:#0a9e93;--teal-light:#e0faf9;
  --blue:#2563eb;--blue-light:#dbeafe;
  --emerald:#059669;--emerald-light:#d1fae5;
  --amber:#d97706;--amber-light:#fef3c7;
  --rose:#e11d48;--rose-light:#ffe4e6;
  --violet:#7c3aed;--violet-light:#ede9fe;
  --r:12px;--r-sm:8px;--r-lg:18px;--r-xl:24px;
  --shadow:0 1px 6px rgba(11,20,39,.06),0 4px 20px rgba(11,20,39,.04);
  --shadow-md:0 4px 24px rgba(11,20,39,.1);
  --shadow-lg:0 16px 56px rgba(11,20,39,.15);
  --shadow-xl:0 32px 80px rgba(11,20,39,.2);
  --nav-h:68px;
  --transition:all .22s cubic-bezier(.4,0,.2,1);
}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--surface);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,.serif{font-family:'Fraunces',serif}
a{text-decoration:none;color:inherit}
button{font-family:'DM Sans',sans-serif;cursor:pointer}
input,select,textarea{font-family:'DM Sans',sans-serif}
img{max-width:100%}

/* ══════════════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════════════ */
.hidden{display:none!important}
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-sm{gap:.5rem}
.gap{gap:1rem}
.gap-lg{gap:1.5rem}
.text-muted{color:var(--muted)}
.text-sm{font-size:.82rem}
.text-xs{font-size:.72rem}
.font-bold{font-weight:700}
.w-full{width:100%}

/* ══════════════════════════════════════════════════════════
   WEBSITE SECTIONS (visible when .mode-site)
══════════════════════════════════════════════════════════ */
#site{display:block}
#app-shell{display:none}

/* ── TOP NAV ── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:0 2.5rem;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  transition:var(--transition);
}
.site-nav.scrolled{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 20px rgba(11,20,39,.07);
}
.nav-logo{display:flex;align-items:center;gap:.625rem;font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;color:var(--ink)}
.nav-logo-mark{width:38px;height:38px;background:linear-gradient(135deg,var(--teal),var(--blue));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:2.25rem}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.btn-nav-ghost{padding:.55rem 1.1rem;border:1.5px solid var(--border);border-radius:9px;font-size:.875rem;font-weight:600;color:var(--ink);background:transparent;transition:var(--transition)}
.btn-nav-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-nav-solid{padding:.55rem 1.25rem;background:var(--ink);color:#fff;border-radius:9px;font-size:.875rem;font-weight:600;border:none;transition:var(--transition)}
.btn-nav-solid:hover{background:var(--ink2);transform:translateY(-1px)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:.25rem;cursor:pointer}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:var(--transition)}
@media(max-width:820px){.nav-links{display:none}.nav-right .btn-nav-ghost{display:none}.nav-hamburger{display:flex}}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;inset:0;z-index:199;background:#fff;flex-direction:column;padding:calc(var(--nav-h) + 1.5rem) 2rem 2rem}
.mobile-menu.open{display:flex}
.mobile-menu a{display:block;padding:.875rem 0;font-size:1.05rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border2)}
.mobile-menu .mm-btns{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}

/* ── PAGE SECTIONS ── */
.site-page{display:none}
.site-page.active{display:block}

/* ══ HOME ══ */
/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 4rem) 1.5rem 5rem;
  text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(170deg,#f0f6ff 0%,#e8f4ff 25%,#edfcfa 60%,#f8fff5 100%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.hero-glow-1{width:600px;height:600px;background:radial-gradient(circle,rgba(15,188,176,.14) 0%,transparent 70%);top:-100px;left:50%;transform:translateX(-50%)}
.hero-glow-2{width:400px;height:400px;background:radial-gradient(circle,rgba(37,99,235,.1) 0%,transparent 70%);bottom:0;right:0}
.hero-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;background:rgba(15,188,176,.1);border:1px solid rgba(15,188,176,.25);border-radius:100px;font-size:.78rem;font-weight:600;color:var(--teal-d);margin-bottom:1.75rem;animation:fadeUp .5s ease both}
.hero-pill-dot{width:7px;height:7px;background:var(--teal);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.6)}}
.hero h1{font-size:clamp(2.6rem,7vw,5.5rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;max-width:820px;margin-bottom:1.5rem;animation:fadeUp .5s .1s ease both;color:var(--ink)}
.hero h1 em{font-style:italic;font-weight:600;background:linear-gradient(135deg,var(--teal),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(.95rem,2vw,1.15rem);color:var(--muted);max-width:560px;line-height:1.75;margin-bottom:2.5rem;animation:fadeUp .5s .2s ease both}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeUp .5s .3s ease both}
.btn-hero-p{padding:.875rem 2rem;background:var(--ink);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition);font-family:'DM Sans',sans-serif}
.btn-hero-p:hover{background:var(--ink2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(11,20,39,.25)}
.btn-hero-s{padding:.875rem 2rem;background:transparent;color:var(--ink);border:2px solid var(--border);border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);font-family:'DM Sans',sans-serif}
.btn-hero-s:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}

/* hero mockup */
.hero-mockup{margin-top:4.5rem;position:relative;max-width:940px;width:100%;animation:fadeUp .7s .4s ease both}
.mockup-frame{background:#fff;border-radius:20px;box-shadow:0 36px 110px rgba(11,20,39,.18),0 0 0 1px rgba(11,20,39,.06);overflow:hidden}
.mockup-bar{background:#f8fafc;border-bottom:1px solid var(--border);padding:.6rem 1rem;display:flex;align-items:center;gap:.5rem}
.m-dot{width:10px;height:10px;border-radius:50%}
.m-dot:nth-child(1){background:#ff5f57}.m-dot:nth-child(2){background:#febc2e}.m-dot:nth-child(3){background:#28c840}
.m-url{flex:1;background:var(--border);border-radius:6px;height:22px;margin:0 .75rem}
.mockup-body{display:grid;grid-template-columns:220px 1fr;min-height:380px}
.m-sidebar{background:var(--ink);padding:1.25rem 0;display:flex;flex-direction:column;gap:4px}
.m-logo{padding:.375rem 1.25rem .875rem;display:flex;align-items:center;gap:.5rem}
.m-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--teal),var(--blue));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.m-logo-txt{color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:.9rem}
.m-item{display:flex;align-items:center;gap:.625rem;padding:.5rem 1.25rem;font-size:.75rem;color:rgba(255,255,255,.45)}
.m-item.act{background:rgba(15,188,176,.15);color:#fff;font-weight:600}
.m-content{background:var(--bg);padding:1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow:hidden}
.m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.m-stat{background:#fff;border-radius:10px;padding:.75rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.m-stat-icon{font-size:.95rem;margin-bottom:.2rem}
.m-stat-val{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:var(--ink)}
.m-stat-lbl{font-size:.6rem;color:var(--muted);margin-top:2px}
.m-table{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.m-th{display:grid;grid-template-columns:1fr 1fr 80px;gap:.5rem;padding:.45rem .875rem;background:#f8fafc;font-size:.6rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.m-tr{display:grid;grid-template-columns:1fr 1fr 80px;gap:.5rem;align-items:center;padding:.5rem .875rem;border-bottom:1px solid var(--border2);font-size:.72rem}
.m-tr:last-child{border:none}
.m-chip{display:inline-block;padding:.175rem .55rem;border-radius:20px;font-size:.6rem;font-weight:700}
.chip-g{background:#dcfce7;color:#14532d}.chip-y{background:#fef3c7;color:#92400e}.chip-b{background:#dbeafe;color:#1e40af}
@media(max-width:640px){.mockup-body{grid-template-columns:1fr}.m-sidebar{display:none}.m-stats{grid-template-columns:repeat(2,1fr)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* STATS STRIP */
.stats-strip{background:var(--ink);padding:3rem 2rem;display:flex;justify-content:center;gap:5rem;flex-wrap:wrap}
.stat-item-val{font-family:'Fraunces',serif;font-size:2.5rem;font-weight:800;color:#fff;line-height:1}
.stat-item-lbl{font-size:.82rem;color:rgba(255,255,255,.45);margin-top:.4rem}

/* SECTIONS */
.section{padding:7rem 1.5rem}
.section-inner{max-width:1180px;margin:0 auto}
.section-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-d);margin-bottom:.875rem;display:flex;align-items:center;gap:.5rem}
.section-label::before{content:'';display:block;width:20px;height:2px;background:var(--teal)}
.section-title{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:1rem;color:var(--ink)}
.section-sub{font-size:1.05rem;color:var(--muted);max-width:540px;line-height:1.75}

/* FEATURES GRID */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-top:4rem}
.feat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:2rem;transition:var(--transition);position:relative;overflow:hidden}
.feat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--blue));opacity:0;transition:.3s}
.feat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(15,188,176,.2)}
.feat-card:hover::after{opacity:1}
.feat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.25rem}
.fi-teal{background:var(--teal-light)}.fi-blue{background:var(--blue-light)}.fi-green{background:var(--emerald-light)}.fi-amber{background:var(--amber-light)}.fi-violet{background:var(--violet-light)}.fi-rose{background:var(--rose-light)}
.feat-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;color:var(--ink);font-family:'DM Sans',sans-serif}
.feat-card p{font-size:.875rem;color:var(--muted);line-height:1.7}

/* ABOUT PAGE */
.about-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 5rem;background:linear-gradient(160deg,#f0f6ff,#edfcfa);text-align:center}
.about-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;max-width:700px;margin:0 auto 1rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem;margin-top:3.5rem}
.team-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:1.75rem;text-align:center;transition:var(--transition)}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.team-av{width:72px;height:72px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:#fff}
.team-name{font-weight:700;font-size:.95rem;margin-bottom:.25rem}
.team-role{font-size:.8rem;color:var(--muted)}
.values-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem;margin-top:3rem}
.value-card{background:var(--surface2);border-radius:var(--r-lg);padding:1.75rem;border:1px solid var(--border)}
.value-icon{font-size:2rem;margin-bottom:.875rem}
.value-card h3{font-weight:700;margin-bottom:.5rem;font-family:'DM Sans',sans-serif}
.value-card p{font-size:.85rem;color:var(--muted);line-height:1.65}

/* SERVICES PAGE */
.services-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 5rem;background:linear-gradient(160deg,#f0fff9,#e8f4ff);text-align:center}
.service-item{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:5rem}
.service-item:nth-child(even){direction:rtl}
.service-item:nth-child(even)>*{direction:ltr}
.service-visual{background:var(--surface);border-radius:var(--r-xl);padding:2.5rem;box-shadow:var(--shadow-md);border:1.5px solid var(--border)}
.service-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-d);margin-bottom:.625rem}
.service-title{font-size:1.75rem;font-weight:800;letter-spacing:-.025em;margin-bottom:.875rem;color:var(--ink);font-family:'DM Sans',sans-serif}
.service-desc{color:var(--muted);line-height:1.75;margin-bottom:1.5rem}
.service-features{display:flex;flex-direction:column;gap:.5rem}
.sf-item{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;color:var(--muted)}
.sf-item::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0;margin-top:.05rem}
@media(max-width:768px){.service-item{grid-template-columns:1fr;direction:ltr;gap:1.5rem}}

/* PLANS PAGE */
.plans-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 5rem;background:linear-gradient(160deg,#f0f6ff,#f8f0ff);text-align:center}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:3.5rem}
.plan-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--r-xl);padding:2.25rem;transition:var(--transition);position:relative}
.plan-card.featured{border-color:var(--teal);box-shadow:0 0 0 4px rgba(15,188,176,.1)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;padding:.35rem 1.1rem;border-radius:100px;font-size:.72rem;font-weight:700;white-space:nowrap}
.plan-tier{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.875rem}
.plan-amount{font-family:'Fraunces',serif;font-size:2.75rem;font-weight:800;color:var(--ink)}
.plan-period{font-size:.875rem;color:var(--muted)}
.plan-desc{font-size:.85rem;color:var(--muted);margin:1rem 0 1.5rem;line-height:1.6}
.plan-feats{list-style:none;margin-bottom:2rem}
.plan-feats li{display:flex;align-items:flex-start;gap:.5rem;padding:.45rem 0;font-size:.875rem;color:var(--muted);border-bottom:1px solid var(--border2)}
.plan-feats li:last-child{border:none}
.plan-feats li::before{content:'✓';color:var(--emerald);font-weight:700;flex-shrink:0}
.btn-plan{width:100%;padding:.825rem;border-radius:11px;font-size:.9rem;font-weight:700;cursor:pointer;transition:var(--transition);border:none;font-family:'DM Sans',sans-serif}
.btn-plan-outline{background:transparent;border:2px solid var(--border);color:var(--ink)}
.btn-plan-outline:hover{border-color:var(--teal);color:var(--teal)}
.btn-plan-fill{background:var(--ink);color:#fff}
.btn-plan-fill:hover{background:var(--ink2)}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:1.25rem 0}
.faq-q{font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.95rem}
.faq-q::after{content:'＋';font-size:1.1rem;color:var(--muted);flex-shrink:0;transition:var(--transition)}
.faq-item.open .faq-q::after{transform:rotate(45deg);color:var(--teal)}
.faq-a{font-size:.875rem;color:var(--muted);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:200px;margin-top:.75rem}

/* BLOG PAGE */
.blog-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 4rem;background:linear-gradient(160deg,#fffbeb,#f0f6ff);text-align:center}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.75rem;margin-top:3rem}
.blog-card{background:var(--surface);border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--border);transition:var(--transition)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.blog-thumb{height:180px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;font-family:'Fraunces',serif}
.blog-body{padding:1.5rem}
.blog-tag{display:inline-block;padding:.25rem .7rem;background:var(--teal-light);color:var(--teal-d);border-radius:100px;font-size:.72rem;font-weight:700;margin-bottom:.75rem}
.blog-card h3{font-weight:700;font-size:1rem;line-height:1.4;margin-bottom:.5rem;font-family:'DM Sans',sans-serif}
.blog-card p{font-size:.82rem;color:var(--muted);line-height:1.65;margin-bottom:1rem}
.blog-meta{font-size:.75rem;color:var(--muted2);display:flex;gap:.875rem}
.blog-read-more{font-size:.82rem;font-weight:600;color:var(--teal-d);cursor:pointer;background:none;border:none;padding:0;font-family:'DM Sans',sans-serif}

/* CONTACT PAGE */
.contact-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 4rem;background:linear-gradient(160deg,#f0fff9,#f5f0ff);text-align:center}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3rem}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.contact-info-item{display:flex;align-items:flex-start;gap:1rem}
.c-icon{width:46px;height:46px;border-radius:12px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.c-label{font-weight:700;font-size:.9rem;margin-bottom:.25rem}
.c-val{font-size:.85rem;color:var(--muted);line-height:1.55}
.contact-form{background:var(--surface);border-radius:var(--r-xl);padding:2.5rem;box-shadow:var(--shadow-md);border:1.5px solid var(--border)}
.fg{margin-bottom:1.125rem}
.fg label{display:block;font-size:.78rem;font-weight:600;color:var(--ink2);margin-bottom:.4rem}
.fi{width:100%;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.9rem;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--ink);transition:var(--transition);-webkit-appearance:none}
.fi:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,188,176,.12)}
textarea.fi{resize:vertical;min-height:120px}
.btn-contact{width:100%;padding:.875rem;background:var(--ink);color:#fff;border:none;border-radius:11px;font-size:.95rem;font-weight:700;cursor:pointer;transition:var(--transition);font-family:'DM Sans',sans-serif}
.btn-contact:hover{background:var(--ink2);transform:translateY(-1px)}
.contact-success{display:none;background:var(--emerald-light);border:1px solid var(--emerald);border-radius:var(--r-sm);padding:1rem;font-size:.875rem;color:#064e3b;margin-top:1rem;text-align:center}

/* FOOTER */
site-footer,.site-footer{background:var(--ink);padding:5rem 1.5rem 2.5rem;color:rgba(255,255,255,.5)}
.footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
@media(max-width:768px){.footer-inner{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:480px){.footer-inner{grid-template-columns:1fr}}
.footer-brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;color:#fff;display:flex;align-items:center;gap:.625rem;margin-bottom:.875rem}
.footer-brand-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--teal),var(--blue));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.footer-desc{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.35);max-width:260px}
.footer-col h4{font-size:.82rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.footer-col a{display:block;font-size:.82rem;color:rgba(255,255,255,.35);padding:.3rem 0;transition:.2s;cursor:pointer}
.footer-col a:hover{color:rgba(255,255,255,.75)}
.footer-bottom{max-width:1180px;margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.78rem}

/* CTA STRIP */
.cta-strip{background:linear-gradient(135deg,var(--ink),#1a3a6e,#0a4060);padding:6rem 1.5rem;text-align:center;position:relative;overflow:hidden}
.cta-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(15,188,176,.15),transparent 70%)}
.cta-strip h2{font-size:clamp(1.75rem,4vw,3rem);color:#fff;font-weight:800;letter-spacing:-.025em;margin-bottom:1rem;position:relative}
.cta-strip p{color:rgba(255,255,255,.6);font-size:1.05rem;margin-bottom:2.5rem;position:relative}
.btn-cta-white{display:inline-flex;align-items:center;gap:.625rem;padding:1rem 2.25rem;background:#fff;color:var(--ink);border:none;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition);font-family:'DM Sans',sans-serif}
.btn-cta-white:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.3)}

/* TESTIMONIALS */
.testimonials{background:var(--bg);padding:7rem 1.5rem}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:3.5rem}
.testi-card{background:var(--surface);border-radius:var(--r-xl);padding:1.75rem;border:1.5px solid var(--border);transition:var(--transition)}
.testi-card:hover{box-shadow:var(--shadow-md)}
.testi-stars{color:#f59e0b;font-size:1rem;margin-bottom:1rem;letter-spacing:.1em}
.testi-text{font-size:.9rem;color:var(--ink);line-height:1.7;margin-bottom:1.25rem;font-style:italic}
.testi-author{display:flex;align-items:center;gap:.75rem}
.testi-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;color:#fff;font-size:.9rem;flex-shrink:0}
.testi-name{font-weight:700;font-size:.875rem}
.testi-role{font-size:.75rem;color:var(--muted)}

/* TRUST BADGES */
.trust-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:1.75rem 1.5rem}
.trust-inner{max-width:900px;margin:0 auto;display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;align-items:center}
.trust-badge{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.trust-badge-icon{font-size:1.25rem}

/* ══════════════════════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════════════════════ */
#auth-screen{
  display:none;position:fixed;inset:0;z-index:300;
  background:var(--bg);
  flex-direction:row;
  min-height:100dvh;
}
#auth-screen.visible{display:flex}
.auth-left{
  flex:1;
  background:linear-gradient(145deg,var(--ink) 0%,#1a3a6e 55%,#0a4a60 100%);
  display:none;flex-direction:column;justify-content:space-between;
  padding:3rem;position:relative;overflow:hidden;
}
@media(min-width:900px){.auth-left{display:flex}}
.auth-left-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(15,188,176,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(37,99,235,.12) 0%,transparent 50%);pointer-events:none}
.auth-left-logo{display:flex;align-items:center;gap:.625rem;margin-bottom:3rem}
.al-logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--teal),var(--blue));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.al-logo-txt{font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;color:#fff}
.auth-left h2{font-size:2.1rem;color:#fff;font-weight:800;line-height:1.2;letter-spacing:-.03em;margin-bottom:1rem}
.auth-left p{color:rgba(255,255,255,.5);font-size:.9rem;line-height:1.75;max-width:340px}
.auth-feats{display:flex;flex-direction:column;gap:.75rem;margin-top:2.5rem}
.auth-feat{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:rgba(255,255,255,.65)}
.auth-feat-icon{width:32px;height:32px;background:rgba(255,255,255,.1);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.auth-left-foot{font-size:.75rem;color:rgba(255,255,255,.25)}

.auth-right{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:2rem 1.5rem;flex:0 0 100%;max-width:100%;
}
@media(min-width:900px){.auth-right{flex:0 0 460px;max-width:460px;padding:3rem}}
.auth-box{width:100%;max-width:380px}
.auth-mobile-logo{display:flex;align-items:center;gap:.625rem;justify-content:center;margin-bottom:2rem}
@media(min-width:900px){.auth-mobile-logo{display:none}}
.auth-mobile-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--teal),var(--blue));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.auth-mobile-logo-txt{font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;color:var(--ink)}
.auth-heading{font-size:1.6rem;font-weight:800;margin-bottom:.375rem;color:var(--ink)}
.auth-sub{font-size:.875rem;color:var(--muted);margin-bottom:1.75rem}
.tab-switch{display:flex;background:var(--surface3);border-radius:10px;padding:3px;margin-bottom:1.5rem;border:1px solid var(--border)}
.tab-btn{flex:1;padding:.55rem;border:none;background:transparent;border-radius:8px;font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer;transition:var(--transition);font-family:'DM Sans',sans-serif}
.tab-btn.active{background:#fff;color:var(--teal-d);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.auth-error{background:var(--rose-light);border:1px solid #fda4af;color:#9f1239;padding:.65rem .875rem;border-radius:var(--r-sm);font-size:.82rem;margin-bottom:1rem;display:none;border-left:3px solid var(--rose)}
.auth-success{background:var(--emerald-light);border:1px solid #6ee7b7;color:#064e3b;padding:.65rem .875rem;border-radius:var(--r-sm);font-size:.82rem;margin-bottom:1rem;display:none}
.fi-auth{width:100%;padding:.75rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.9rem;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--ink);transition:var(--transition);-webkit-appearance:none}
.fi-auth:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,188,176,.12)}
select.fi-auth{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}
.auth-fg{margin-bottom:.875rem}
.auth-fg label{display:block;font-size:.78rem;font-weight:600;color:var(--ink2);margin-bottom:.35rem}
.auth-fg-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.btn-auth{width:100%;padding:.825rem;border-radius:10px;font-size:.925rem;font-weight:700;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem}
.btn-auth-primary{background:var(--ink);color:#fff}
.btn-auth-primary:hover{background:var(--ink2);transform:translateY(-1px);box-shadow:0 8px 24px rgba(11,20,39,.2)}
.btn-auth-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.auth-demo-box{background:var(--blue-light);border:1px solid rgba(37,99,235,.2);border-radius:var(--r-sm);padding:.75rem 1rem;font-size:.78rem;color:#1e40af;margin-top:1rem;line-height:1.6;cursor:pointer}
.auth-demo-box strong{font-weight:700}
.auth-back-site{margin-top:1.5rem;text-align:center;font-size:.82rem;color:var(--muted)}
.auth-back-site a{color:var(--teal-d);font-weight:600;cursor:pointer}
.auth-demo-accounts{margin-top:.75rem}
.demo-acc-item{display:flex;align-items:center;justify-content:space-between;padding:.3rem 0;cursor:pointer;border-radius:6px;padding:.3rem .5rem;transition:background .15s}
.demo-acc-item:hover{background:rgba(37,99,235,.06)}
.demo-acc-role{font-weight:600;font-size:.78rem;color:#1e40af}
.demo-acc-creds{font-size:.72rem;color:#1e40af;opacity:.7}

/* LOADING SPINNER */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════════════════ */
#app-shell{height:100dvh;overflow:hidden;flex-direction:row}
.sidebar{width:256px;background:var(--ink);display:none;flex-direction:column;overflow-y:auto;flex-shrink:0}
@media(min-width:768px){.sidebar{display:flex}#app-bottom-nav{display:none!important}}
.sb-top{padding:1.125rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo{display:flex;align-items:center;gap:.625rem}
.sb-logo-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--teal),var(--blue));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.sb-logo-txt{font-family:'Fraunces',serif;font-weight:700;color:#fff;font-size:.95rem}
.sb-user{padding:.875rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.625rem}
.sb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;flex-shrink:0}
.sb-uname{font-size:.82rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-urole{font-size:.7rem;color:rgba(255,255,255,.4);text-transform:capitalize}
.sb-nav{flex:1;padding:.5rem 0;overflow-y:auto}
.sb-section{padding:.5rem .875rem .25rem;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.25);margin-top:.375rem}
.sb-item{display:flex;align-items:center;gap:.625rem;padding:.575rem .875rem;margin:1px .5rem;border-radius:9px;cursor:pointer;transition:var(--transition);font-size:.82rem;font-weight:500;color:rgba(255,255,255,.5);border:none;background:transparent;width:calc(100% - 1rem);text-align:left;font-family:'DM Sans',sans-serif}
.sb-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.sb-item.active{background:rgba(15,188,176,.18);color:#fff;font-weight:600}
.sb-item.active .sb-icon{color:var(--teal)}
.sb-icon{font-size:.9rem;width:20px;text-align:center;flex-shrink:0}
.sb-footer{padding:.875rem;border-top:1px solid rgba(255,255,255,.08)}
.sb-logout{width:100%;padding:.55rem .875rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:9px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.45);cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--transition);text-align:left;display:flex;align-items:center;gap:.5rem}
.sb-logout:hover{background:rgba(225,29,72,.15);color:var(--rose);border-color:rgba(225,29,72,.3)}

.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.top-bar{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;flex-shrink:0;z-index:5}
.top-title{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--ink)}
.top-right{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:1rem;transition:var(--transition)}
.icon-btn:hover{border-color:var(--teal);background:var(--teal-light)}
.top-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;cursor:pointer}
#app-content{flex:1;overflow-y:auto;padding:1.25rem;padding-bottom:calc(60px + 1.25rem);-webkit-overflow-scrolling:touch}
@media(min-width:768px){#app-content{padding-bottom:1.25rem}}

/* BOTTOM NAV */
#app-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--surface);border-top:1px solid var(--border);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom,.5rem)}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;border:none;background:transparent;color:var(--muted2);font-size:.6rem;font-weight:500;padding:.2rem 0;transition:color .15s}
.bn-icon{font-size:1.2rem}
.bn-item.active{color:var(--teal)}

/* APP COMPONENTS */
.page-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.625rem}
.page-hd h2{font-size:1.15rem;font-weight:800;font-family:'Fraunces',serif;color:var(--ink)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.875rem;margin-bottom:1.25rem}
@media(min-width:480px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{background:var(--surface);border-radius:var(--r);padding:1.125rem;box-shadow:var(--shadow);display:flex;align-items:flex-start;gap:.875rem;border:1.5px solid transparent;transition:var(--transition)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-icon-wrap{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.s-teal{background:var(--teal-light)}.s-blue{background:var(--blue-light)}.s-green{background:var(--emerald-light)}.s-amber{background:var(--amber-light)}.s-violet{background:var(--violet-light)}.s-rose{background:var(--rose-light)}
.stat-val{font-family:'Fraunces',serif;font-size:1.65rem;font-weight:800;color:var(--ink);line-height:1.1}
.stat-lbl{font-size:.72rem;color:var(--muted);margin-top:.2rem}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--border2);margin-bottom:1rem;overflow:hidden}
.card-head{padding:.875rem 1.125rem;border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-head h3{font-size:.9rem;font-weight:700;flex:1;color:var(--ink);font-family:'DM Sans',sans-serif}
.card-body{padding:1.125rem}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{padding:.6rem .875rem;text-align:left;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:.7rem .875rem;border-bottom:1px solid var(--border2);vertical-align:middle}
tr:last-child td{border:none}
tr:hover td{background:#f8faff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.55rem 1rem;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;cursor:pointer;border:none;transition:var(--transition);font-family:'DM Sans',sans-serif;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--teal);color:#fff}.btn-primary:hover:not(:disabled){background:var(--teal-d)}
.btn-secondary{background:var(--surface2);color:var(--ink2);border:1.5px solid var(--border)}.btn-secondary:hover{background:var(--surface3)}
.btn-danger{background:var(--rose);color:#fff}.btn-danger:hover{background:#be123c}
.btn-sm{padding:.375rem .75rem;font-size:.76rem}
.btn-xs{padding:.25rem .55rem;font-size:.7rem;border-radius:7px}
.btn-full{width:100%;padding:.8rem}
.badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:20px;font-size:.68rem;font-weight:700}
.badge-pending{background:var(--amber-light);color:#92400e}
.badge-confirmed{background:var(--blue-light);color:#1e40af}
.badge-completed{background:var(--emerald-light);color:#064e3b}
.badge-cancelled{background:var(--rose-light);color:#9f1239}
.badge-active{background:var(--emerald-light);color:#064e3b}
.badge-inactive{background:var(--rose-light);color:#9f1239}
.badge-paid{background:var(--emerald-light);color:#064e3b}
.badge-pending-pay{background:var(--amber-light);color:#92400e}
.apt-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:.75rem;border:1.5px solid var(--border2);overflow:hidden;position:relative;padding-left:4px}
.apt-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.apt-card.pending::before{background:var(--amber)}
.apt-card.confirmed::before{background:var(--teal)}
.apt-card.completed::before{background:var(--emerald)}
.apt-card.cancelled::before{background:var(--rose)}
.apt-content{padding:.875rem 1rem}
.apt-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.375rem;gap:.5rem}
.apt-name{font-weight:700;font-size:.9rem;color:var(--ink)}
.apt-meta{display:flex;gap:.625rem;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.apt-actions{display:flex;gap:.375rem;flex-wrap:wrap;padding:.625rem 1rem;border-top:1px solid var(--border2);background:var(--surface2)}
.empty{text-align:center;padding:3rem 1rem}
.empty-icon{font-size:3rem;margin-bottom:1rem}
.empty p{color:var(--muted);font-size:.9rem}
.list-item{display:flex;align-items:center;gap:.875rem;padding:.75rem 0;border-bottom:1px solid var(--border2)}
.list-item:last-child{border:none}
.li-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.li-body{flex:1;min-width:0}
.li-title{font-weight:600;font-size:.875rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-sub{font-size:.75rem;color:var(--muted);margin-top:.15rem}
/* SKELETON */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.sk{background:linear-gradient(90deg,var(--border2) 25%,var(--border) 50%,var(--border2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}

/* TOAST */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:.65rem 1.25rem;border-radius:100px;font-size:.82rem;font-weight:600;z-index:9999;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.error{background:var(--rose)}
#toast.success{background:var(--emerald)}
@media(min-width:768px){#toast{bottom:1.5rem}}

/* MODAL */
#modal-overlay{position:fixed;inset:0;background:rgba(11,20,39,.4);z-index:500;display:none;backdrop-filter:blur(4px)}
#modal-overlay.open{display:block}
#modal-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:501;max-height:88dvh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
#modal-sheet.open{transform:translateY(0)}
@media(min-width:640px){#modal-sheet{left:50%;right:auto;bottom:50%;transform:translate(-50%,50%);max-width:520px;width:90%;border-radius:var(--r-xl);max-height:85dvh}#modal-sheet.open{transform:translate(-50%,50%)}}
.modal-head{padding:1.125rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);z-index:1;border-radius:var(--r-xl) var(--r-xl) 0 0}
.modal-title{font-weight:800;font-size:1rem;font-family:'Fraunces',serif;color:var(--ink)}
.modal-close{background:var(--surface3);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.875rem;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.modal-body{padding:1.25rem}
.modal-body .fg{margin-bottom:.875rem}
.modal-body .fg label{display:block;font-size:.78rem;font-weight:600;color:var(--ink2);margin-bottom:.35rem}
.modal-body .fi{width:100%;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.9rem;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--ink);transition:var(--transition)}
.modal-body .fi:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,188,176,.12)}
.modal-body select.fi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem;-webkit-appearance:none}
.modal-body textarea.fi{resize:vertical;min-height:80px}
.modal-body .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* ══════════════════════════════════════════════════════════
   APP SHELL ADDITIONS (PHP port)
══════════════════════════════════════════════════════════ */

/* Ensure app shell fills full height */
#app-shell{display:flex;height:100dvh;overflow:hidden}

/* TOP BAR */
.top-bar{
  height:56px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem;flex-shrink:0;
}
.top-title{font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;color:var(--ink)}
.top-right{display:flex;align-items:center;gap:.625rem}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:var(--transition)}
.icon-btn:hover{background:var(--surface2);border-color:var(--teal)}
.top-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0}

/* CONTENT AREA */
#app-content{flex:1;overflow-y:auto;padding:1.25rem;background:var(--bg)}

/* BOTTOM NAV */
#app-bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1px solid var(--border);
  display:none;align-items:center;justify-content:space-around;
  padding:.5rem 0 env(safe-area-inset-bottom,.5rem);z-index:100;
}
@media(max-width:767px){#app-bottom-nav{display:flex}#app-shell>.sidebar{display:none}}
.bn-item{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  background:none;border:none;font-size:.65rem;font-weight:600;
  color:var(--muted);cursor:pointer;padding:.375rem .75rem;border-radius:10px;
  transition:var(--transition);font-family:'DM Sans',sans-serif;
}
.bn-item.active,.bn-item:hover{color:var(--teal-d)}
.bn-icon{font-size:1.2rem}

/* MODAL */
#app-modal{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center}
#app-modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(11,20,39,.45);backdrop-filter:blur(4px)}
.modal-box{
  position:relative;background:var(--surface);border-radius:var(--r-xl);
  width:calc(100% - 2rem);max-width:480px;max-height:85dvh;
  display:flex;flex-direction:column;box-shadow:var(--shadow-xl);
  border:1px solid var(--border);overflow:hidden;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;color:var(--ink)}
.modal-close{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--muted);padding:.25rem;border-radius:6px;line-height:1}
.modal-close:hover{background:var(--surface2);color:var(--ink)}
.modal-body{padding:1.25rem;overflow-y:auto;flex:1}

/* TOAST */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;
  background:var(--ink);color:#fff;border-radius:10px;
  padding:.7rem 1.1rem;font-size:.85rem;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);
  transition:all .25s ease;pointer-events:none;max-width:300px;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-success{background:var(--emerald)}
.toast-error{background:var(--rose)}

/* AUTH SCREEN show/hide */
#auth-screen{display:none;position:fixed;inset:0;z-index:300;background:var(--surface);flex-direction:row;overflow:hidden}
#auth-screen.visible{display:flex}

/* SKELETON */
.sk{background:linear-gradient(90deg,var(--border) 25%,var(--border2) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* STATS GRID */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.25rem}
.stat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.125rem 1.25rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow)}
.stat-icon-wrap{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.s-teal{background:var(--teal-light)}.s-blue{background:var(--blue-light)}.s-green{background:var(--emerald-light)}.s-amber{background:var(--amber-light)}.s-violet{background:var(--violet-light)}.s-rose{background:var(--rose-light)}
.stat-val{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1}
.stat-lbl{font-size:.75rem;color:var(--muted);margin-top:.2rem}

/* CARD */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.125rem;border-bottom:1px solid var(--border)}
.card-head h3{font-size:.9rem;font-weight:700;color:var(--ink)}
.card-body{padding:1.125rem}

/* TABLE */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
thead th{padding:.6rem .875rem;text-align:left;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--border)}
tbody td{padding:.7rem .875rem;border-bottom:1px solid var(--border2);color:var(--ink)}
tbody tr:last-child td{border:none}
tbody tr:hover{background:var(--surface2)}

/* BADGE */
.badge{display:inline-block;padding:.2rem .55rem;border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap}
.badge-active,.badge-completed{background:var(--emerald-light);color:#064e3b}
.badge-confirmed{background:var(--blue-light);color:#1e40af}
.badge-pending{background:var(--amber-light);color:#92400e}
.badge-cancelled{background:var(--rose-light);color:#9f1239}

/* BTN */
.btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:9px;font-size:.82rem;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:var(--transition)}
.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:var(--ink2)}
.btn-secondary{background:var(--surface);color:var(--ink);border:1.5px solid var(--border)}.btn-secondary:hover{background:var(--surface2)}
.btn-success{background:var(--emerald);color:#fff}
.btn-sm{padding:.375rem .75rem;font-size:.78rem}
.btn-xs{padding:.25rem .55rem;font-size:.72rem;border-radius:7px}
.btn-full{width:100%;justify-content:center}

/* FORM INPUTS */
.fg{margin-bottom:.875rem}
.fg label{display:block;font-size:.78rem;font-weight:600;color:var(--ink2);margin-bottom:.35rem}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fi{width:100%;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.875rem;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--ink);transition:var(--transition);-webkit-appearance:none}
.fi:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,188,176,.12)}
textarea.fi{min-height:80px;resize:vertical}
select.fi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}

/* PAGE HEADER */
.page-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem}
.page-hd h2{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;color:var(--ink)}

/* LIST ITEM */
.list-item{display:flex;align-items:center;gap:.875rem;padding:.625rem 0;border-bottom:1px solid var(--border2)}
.list-item:last-child{border:none}
.li-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;flex-shrink:0}
.li-body{flex:1;min-width:0}
.li-title{font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-sub{font-size:.75rem;color:var(--muted);margin-top:.1rem}

/* APPOINTMENT CARD */
.apt-card{border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.875rem;margin-bottom:.625rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.apt-card.completed{background:var(--surface2);opacity:.8}
.apt-content{flex:1;min-width:0}
.apt-header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.apt-name{font-weight:700;font-size:.875rem;color:var(--ink)}
.apt-meta{display:flex;gap:.625rem;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.apt-actions{display:flex;gap:.375rem;flex-wrap:wrap;flex-shrink:0}

/* EMPTY STATE */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;color:var(--muted)}
.empty-icon{font-size:2.5rem;margin-bottom:.875rem;opacity:.5}
.empty p{font-size:.9rem}

/* CONTACT PAGE */
.contact-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 5rem;background:linear-gradient(160deg,#f0f6ff,#edfcfa);text-align:center}
.contact-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;max-width:600px;margin:0 auto}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.contact-info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.c-icon{width:40px;height:40px;background:var(--teal-light);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.c-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.25rem}
.c-val{font-size:.875rem;color:var(--ink);line-height:1.6}
.c-val a{color:var(--teal-d)}
.contact-form{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:2rem}
.contact-success{background:var(--emerald-light);border:1px solid #6ee7b7;color:#064e3b;padding:.75rem 1rem;border-radius:var(--r-sm);font-size:.85rem;margin-top:1rem}
.btn-contact{width:100%;padding:.875rem;background:var(--ink);color:#fff;border:none;border-radius:10px;font-size:.925rem;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--transition);margin-top:.25rem}
.btn-contact:hover{background:var(--ink2);transform:translateY(-1px)}

/* SERVICES HERO */
.services-hero{padding:calc(var(--nav-h) + 5rem) 1.5rem 5rem;background:linear-gradient(160deg,#f0fff9,#e8f4ff);text-align:center}
.services-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;max-width:600px;margin:0 auto}

/* FOOTER BRAND */
.footer-brand{display:flex;align-items:center;gap:.5rem}
.footer-brand-mark{font-size:1.3rem}

/* ══════════════════════════════════════════════════════════
   ENHANCED FEATURES STYLES
   ══════════════════════════════════════════════════════════ */

/* NOTIFICATIONS */
.notif-btn{position:relative;}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--rose,#f43f5e);color:#fff;border-radius:100px;font-size:.6rem;font-weight:700;padding:.1rem .3rem;min-width:16px;text-align:center;line-height:1.4}
.notif-panel{position:absolute;top:calc(var(--nav-h,56px) + .5rem);right:1rem;width:340px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl,16px);box-shadow:0 20px 60px rgba(0,0,0,.15);z-index:200;overflow:hidden}
.notif-hd{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1rem;border-bottom:1px solid var(--border);font-size:.85rem}
.notif-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border2,#f3f4f6)}
.notif-item:hover{background:var(--surface2)}
.notif-item.read{opacity:.6}
.notif-ic{font-size:1.25rem;flex-shrink:0;margin-top:.1rem}
.notif-body{flex:1}
.notif-title{font-size:.82rem;font-weight:700;color:var(--ink)}
.notif-desc{font-size:.75rem;color:var(--muted);line-height:1.5;margin:.1rem 0}
.notif-time{font-size:.72rem;color:var(--muted3,#9ca3af)}
.notif-dot{width:8px;height:8px;background:var(--teal);border-radius:50%;flex-shrink:0;margin-top:.35rem}

/* FOLLOW-UP ALERT BANNER */
.followup-alert{display:flex;align-items:center;gap:.875rem;background:linear-gradient(135deg,var(--teal-light),#e0f2fe);border:1.5px solid var(--teal,#0fbcb0);border-radius:var(--r-xl,16px);padding:1rem 1.25rem;margin-bottom:1.25rem}
.fu-icon{font-size:1.5rem;flex-shrink:0}
.fu-body{flex:1}
.fu-title{font-weight:700;font-size:.9rem;color:var(--teal-d,#0e7490)}
.fu-sub{font-size:.78rem;color:var(--muted)}

/* FOLLOW-UP TAG on appointment cards */
.follow-up-tag{display:inline-block;margin-top:.375rem;font-size:.72rem;font-weight:600;background:var(--blue-light,#dbeafe);color:#1e40af;padding:.2rem .5rem;border-radius:6px}

/* APT FILTER CHIPS */
.apt-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.filter-chip{padding:.35rem .875rem;border-radius:100px;font-size:.78rem;font-weight:600;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .15s}
.filter-chip.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.filter-chip:hover:not(.active){background:var(--surface2)}

/* SEARCH BAR */
.search-bar-wrap{margin-bottom:1rem}
.search-bar{width:100%;padding:.7rem 1rem;border:1.5px solid var(--border);border-radius:var(--r-sm,8px);font-size:.9rem;font-family:inherit;background:var(--surface);color:var(--ink);transition:border-color .15s}
.search-bar:focus{outline:none;border-color:var(--teal)}

/* DOCTOR CARDS GRID */
.doctors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.doctor-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl,16px);padding:1.25rem;display:flex;gap:1rem;transition:box-shadow .2s,transform .15s}
.doctor-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.08);transform:translateY(-2px)}
.doc-av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.1rem;flex-shrink:0}
.doc-info{flex:1}
.doc-name{font-weight:800;font-size:.95rem;color:var(--ink)}
.doc-spec{font-size:.8rem;color:var(--teal-d,#0e7490);font-weight:600;margin:.1rem 0}
.doc-qual{font-size:.75rem;color:var(--muted);margin:.1rem 0}
.doc-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0;font-size:.75rem;color:var(--ink2)}

/* DOCTOR INFO CARD in booking */
.doctor-info-card{margin:.5rem 0}

/* RX CARD */
.rx-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl,16px);padding:1.25rem;margin-bottom:1.25rem;transition:box-shadow .2s}
.rx-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.07)}
.rx-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.875rem}
.rx-patient{font-size:1rem;font-weight:800;color:var(--ink)}
.rx-meta{font-size:.78rem;color:var(--muted);margin:.1rem 0}
.rx-diagnosis{font-size:.78rem;font-weight:600;color:var(--teal-d,#0e7490);margin:.1rem 0}
.rx-section-lbl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:.875rem 0 .375rem}
.rx-text{font-size:.85rem;color:var(--ink2);line-height:1.6}
.rx-note{background:var(--amber-light,#fef3c7);border-radius:8px;padding:.625rem .875rem;font-size:.82rem;color:#92400e;margin-top:.75rem}
.rx-followup{background:var(--teal-light);border-radius:8px;padding:.625rem .875rem;font-size:.82rem;color:var(--teal-d,#0e7490);margin-top:.625rem}
.lab-tag{background:var(--violet-light,#ede9fe);color:#5b21b6;font-size:.75rem;font-weight:600;padding:.25rem .625rem;border-radius:6px}
.med-row{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0;border-bottom:1px solid var(--border2,#f3f4f6)}
.med-icon{font-size:1rem;flex-shrink:0;margin-top:.1rem}
.med-body{flex:1}
.med-name{font-weight:700;font-size:.88rem;color:var(--ink)}
.med-sub{font-size:.75rem;color:var(--muted);margin-top:.1rem}

/* VITALS STRIP */
.vitals-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin:.625rem 0;background:var(--surface2,#f9fafb);border-radius:10px;padding:.625rem .875rem}
.vs-item{display:flex;flex-direction:column;align-items:center;min-width:64px}
.vs-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.1rem}
.vs-val{font-size:.82rem;font-weight:700;color:var(--ink)}

/* VITALS CHART */
.vitals-chart-wrap{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl,16px);padding:1.25rem;margin-bottom:1.25rem}
.chart-title{font-weight:700;font-size:.9rem;margin-bottom:.875rem;color:var(--ink)}

/* RX PAD MODAL */
.rx-pad{display:flex;flex-direction:column;gap:.125rem}
.rx-pad-patient{display:flex;align-items:center;gap:.875rem;background:var(--teal-light);border-radius:10px;padding:.75rem 1rem;margin-bottom:.5rem}
.rxp-av{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.rx-section-hd{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d,#0e7490);margin:1rem 0 .375rem;padding-bottom:.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
.vitals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.med-input-row{display:flex;gap:.375rem;align-items:center;flex-wrap:wrap;margin-bottom:.375rem;padding:.5rem;background:var(--surface2,#f9fafb);border-radius:8px}
.med-input-row .fi{flex:1;min-width:80px}
.lab-input-row{display:flex;gap:.375rem;align-items:center;margin-bottom:.375rem}
.lab-input-row .fi{flex:1}
.writing-pad{font-family:'Georgia',serif;line-height:1.8;resize:vertical;min-height:100px}
.writing-pad-toolbar{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:.375rem}
.pad-tool-btn{padding:.25rem .625rem;border:1.5px solid var(--border);border-radius:6px;background:var(--surface);font-size:.72rem;font-weight:600;cursor:pointer;color:var(--ink2);transition:all .15s}
.pad-tool-btn:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

/* CLINICAL NOTES */
.note-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl,16px);padding:1.25rem;margin-bottom:1rem}
.note-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}
.note-type{font-weight:700;font-size:.88rem;color:var(--ink)}
.note-meta{font-size:.75rem;color:var(--muted);margin-top:.1rem}
.note-content{font-size:.85rem;color:var(--ink2);line-height:1.7;white-space:pre-wrap}

/* SLOT BUTTON SELECTED STATE */
.slot-btn.selected{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)!important}

/* INVOICE VIEW */
.btn-success{background:var(--emerald,#10b981);color:#fff;border-color:var(--emerald,#10b981)}
.btn-success:hover{opacity:.9}

/* BADGE PAID */
.badge-paid{background:var(--emerald-light,#d1fae5);color:#064e3b}
.badge-pending-pay{background:var(--amber-light,#fef3c7);color:#92400e}


/* ══════════════════════════════════════════════════════════
   FEATURE ACCESS CONTROL
   ══════════════════════════════════════════════════════════ */
.fa-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.fa-toggle input{position:absolute;opacity:0;width:0;height:0}
.fa-track{width:44px;height:24px;background:var(--border);border-radius:99px;transition:background .25s;position:relative;display:block}
.fa-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.fa-toggle input:checked+.fa-track{background:var(--teal)}
.fa-toggle input:checked+.fa-track .fa-thumb{transform:translateX(20px)}

/* ══════════════════════════════════════════════════════════
   FORM EDITOR
   ══════════════════════════════════════════════════════════ */
.fe-palette-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:8px;cursor:pointer;font-size:.82rem;color:var(--ink2);border:1px solid transparent;transition:all .15s;margin-bottom:.25rem}
.fe-palette-item:hover{background:var(--teal-light);color:var(--teal);border-color:var(--teal);font-weight:600}
.fe-field-card{display:flex;align-items:center;gap:.625rem;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:.625rem .75rem;margin-bottom:.5rem;cursor:grab;transition:box-shadow .15s,border-color .15s}
.fe-field-card:active{cursor:grabbing}
.fe-field-card.drag-over{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-light)}
.fe-fc-drag{color:var(--muted);font-size:1rem;cursor:grab;flex-shrink:0;user-select:none}
.fe-fc-body{flex:1;min-width:0}
.fe-fc-type{font-size:1rem;flex-shrink:0;opacity:.6}
.fe-fc-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:.15rem .35rem;border-radius:6px;transition:color .15s,background .15s;flex-shrink:0}
.fe-fc-del:hover{background:#fee2e2;color:#b91c1c}

/* ══════════════════════════════════════════════════════════
   PATIENT HISTORY TIMELINE
   ══════════════════════════════════════════════════════════ */
.ph-timeline{padding-left:.5rem}
.ph-event{display:grid;grid-template-columns:40px 1px 1fr;gap:0 .75rem;margin-bottom:1.25rem}
.ph-event-dot{grid-column:1;grid-row:1 2;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:1}
.ph-event-line{grid-column:2;grid-row:1;background:var(--border);width:2px;margin:40px auto 0;height:calc(100% + 1.25rem)}
.ph-event-card{grid-column:3;grid-row:1;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:.875rem 1rem;min-width:0}
.ph-event-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.ph-event-type{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ph-event-date{font-size:.75rem;color:var(--muted)}


/* ═══════════════════════════════════════════════════════════
   HOME PAGE REDESIGN — glassmorphism · claymorphism · scroll
   ═══════════════════════════════════════════════════════════ */

/* ── Glassmorphism nav override ── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: .875rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.6);
  transition: background .3s, box-shadow .3s;
}
.site-nav.scrolled {
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 32px rgba(0,0,0,.07);
}

/* ── HERO ── */
.hp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 7rem 2rem 5rem;
  background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 30%, #f0fdf4 60%, #fefce8 100%);
}

/* Animated mesh gradient */
.hp-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(15,188,176,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(37,99,235,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(245,158,11,.08) 0%, transparent 60%);
  animation: meshMove 12s ease-in-out infinite alternate;
}
@keyframes meshMove {
  0%   { background-position: 0% 0%, 100% 100%, 50% 90%; }
  100% { background-position: 10% 10%, 90% 80%, 55% 85%; }
}

/* Floating orbs */
.hp-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite;
}
.hp-orb-1 { width: 500px; height: 500px; top: -150px; left: -100px; background: radial-gradient(circle, rgba(15,188,176,.18), transparent 70%); animation-delay: 0s; }
.hp-orb-2 { width: 350px; height: 350px; bottom: 0; right: -100px; background: radial-gradient(circle, rgba(37,99,235,.14), transparent 70%); animation-delay: -3s; }
.hp-orb-3 { width: 250px; height: 250px; top: 40%; left: 30%; background: radial-gradient(circle, rgba(245,158,11,.1), transparent 70%); animation-delay: -6s; }
@keyframes orbFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } }

/* Floating clay notification badges */
.hp-float { position: absolute; pointer-events: none; }
.hp-float-1 { top: 22%; left: 2%; animation: floatA 6s ease-in-out infinite; }
.hp-float-2 { top: 60%; left: 3%; animation: floatB 7s ease-in-out infinite; }
.hp-float-3 { top: 18%; right: 3%; animation: floatA 5.5s ease-in-out infinite .5s; }
.hp-float-4 { top: 72%; right: 4%; animation: floatB 6.5s ease-in-out infinite 1s; }
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes floatB { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-10px) rotate(-1deg); } }

/* Clay badge pill */
.clay-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.clay-badge.clay-green { background: rgba(209,250,229,.9); color: #065f46; border: 1.5px solid rgba(16,185,129,.3); }
.clay-badge.clay-blue  { background: rgba(219,234,254,.9); color: #1e3a8a; border: 1.5px solid rgba(59,130,246,.3); }
.clay-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: pulse 2s infinite; }

/* Clay stat pill */
.clay-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1.125rem;
  background: rgba(255,255,255,.85);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.8);
}
.csp-icon { font-size: 1.4rem; }
.csp-val { font-size: 1.1rem; font-weight: 800; color: var(--ink); line-height:1; }
.csp-lbl { font-size: .7rem; color: var(--muted); font-weight: 600; }

/* Hero layout */
.hp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media(max-width: 900px) { .hp-hero-inner { grid-template-columns: 1fr; } .hp-float { display: none; } }

.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  background: rgba(15,188,176,.08);
  border: 1.5px solid rgba(15,188,176,.25);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--teal-d, #0e7490);
  margin-bottom: 1.5rem;
}
.hp-pill-dot { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; animation: pulse 2s infinite; }

.hp-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.04em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.hp-h1-gradient {
  background: linear-gradient(135deg, var(--teal), #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hp-h1 em { font-style: italic; color: var(--teal); -webkit-text-fill-color: var(--teal); }

.hp-sub {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 2rem;
}

.hp-hero-btns { display: flex; gap: .875rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hp-btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.75rem;
  background: linear-gradient(135deg, var(--teal), #0ea5e9);
  color: #fff;
  font-weight: 700; font-size: .95rem;
  border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,188,176,.35), 0 2px 6px rgba(15,188,176,.2);
  transition: transform .2s, box-shadow .2s;
}
.hp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,188,176,.45); }
.hp-btn-ghost {
  padding: .875rem 1.5rem;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-weight: 600; font-size: .95rem;
  border: 1.5px solid rgba(0,0,0,.1); border-radius: 14px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hp-btn-ghost:hover { background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.2); }
.hp-btn-white { background: #fff; color: var(--teal); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.hp-btn-white:hover { box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.hp-btn-ghost-light { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); }
.hp-btn-ghost-light:hover { background: rgba(255,255,255,.2); }

.hp-trust { display: flex; align-items: center; gap: .875rem; }
.hp-avatars { display: flex; }
.hp-avatars img { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #fff; object-fit: cover; margin-left: -10px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.hp-avatars img:first-child { margin-left: 0; }
.hp-trust-txt { font-size: .82rem; color: var(--muted); }
.hp-trust-txt strong { color: var(--ink); }

/* ── GLASSMORPHISM DASHBOARD CARD ── */
.hp-glass-card {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.hp-glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), #2563eb, #7c3aed);
  border-radius: 24px 24px 0 0;
}
.hp-dash-main { max-width: 440px; width: 100%; }

.hp-dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.hp-dash-logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: var(--ink); }
.hp-dash-logo-mark { font-size: 1.1rem; }
.hp-dash-today { font-size: .75rem; color: var(--muted); font-weight: 500; }

.hp-dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-bottom: 1.25rem; }
.hp-ds { background: rgba(15,188,176,.08); border-radius: 12px; padding: .75rem; text-align: center; }
.hp-ds-n { font-size: 1.4rem; font-weight: 800; color: var(--ink); font-family: 'Fraunces',serif; }
.hp-ds-l { font-size: .68rem; color: var(--muted); font-weight: 600; margin-top: .1rem; }

.hp-mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-bottom: 1.25rem; padding: .5rem; background: rgba(0,0,0,.02); border-radius: 10px; }
.hp-bar { flex: 1; background: rgba(15,188,176,.25); border-radius: 4px 4px 0 0; transition: height .8s ease; }
.hp-bar-active { background: var(--teal); }

.hp-queue-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .625rem; }
.hp-queue { display: flex; flex-direction: column; gap: .5rem; }
.hp-qrow { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; background: rgba(0,0,0,.025); border-radius: 10px; }
.hp-qrow img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hp-qinfo { flex: 1; min-width: 0; }
.hp-qname { font-size: .8rem; font-weight: 600; color: var(--ink); }
.hp-qdoc  { font-size: .7rem; color: var(--muted); }
.hp-qbadge { font-size: .67rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.hp-qbadge-done { background: #d1fae5; color: #065f46; }
.hp-qbadge-conf { background: #dbeafe; color: #1e3a8a; }
.hp-qbadge-pend { background: #fef3c7; color: #78350f; }

/* ── STATS BAR ── */
.hp-stats-bar {
  background: var(--ink, #0f172a);
  padding: 2.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.hp-stat-item { text-align: center; padding: .75rem 3rem; }
.hp-stat-n { font-family: 'Fraunces',serif; font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; }
.hp-stat-l { font-size: .78rem; color: rgba(255,255,255,.45); margin-top: .35rem; font-weight: 500; }
.hp-stat-sep { width: 1px; height: 48px; background: rgba(255,255,255,.1); }
@media(max-width:640px) { .hp-stat-sep { display: none; } .hp-stat-item { padding: .75rem 1.5rem; } }

/* ── SECTIONS ── */
.hp-section { padding: 7rem 2rem; }
.hp-feat-section { background: #f8fffe; }
.hp-roles-section { background: #fff; }
.hp-test-section  { background: linear-gradient(160deg, #f0f9ff, #f0fdf4); }
.hp-section-inner { max-width: 1200px; margin: 0 auto; }
.hp-section-eyebrow {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--teal-d, #0e7490); margin-bottom: .875rem; display: flex; align-items: center; gap: .5rem;
}
.hp-section-eyebrow::before { content:''; display:block; width:20px; height:2px; background:var(--teal); border-radius:2px; }
.hp-section-h { font-family: 'Fraunces',serif; font-size: clamp(2rem,4.5vw,3.5rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.08; color: var(--ink); margin-bottom: 1rem; }
.hp-h-accent { background: linear-gradient(135deg, var(--teal), #2563eb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hp-section-sub { font-size: 1.05rem; color: var(--muted); max-width: 500px; line-height: 1.75; margin-bottom: 3.5rem; }

/* ── CLAYMORPHISM FEATURE CARDS ── */
.hp-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media(max-width:900px) { .hp-feat-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:580px) { .hp-feat-grid { grid-template-columns: 1fr; } }

.clay-card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 0 0 rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.08);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s;
  cursor: default;
  background: #fff;
}
.clay-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 12px 0 0 rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.12); }
.clay-wide { grid-column: span 2; }
@media(max-width:900px) { .clay-wide { grid-column: span 2; } }
@media(max-width:580px) { .clay-wide { grid-column: span 1; } }

.clay-card-img { width: 100%; height: 180px; overflow: hidden; position: relative; }
.clay-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.clay-card:hover .clay-card-img img { transform: scale(1.06); }
.clay-card-img-overlay { position: absolute; inset: 0; }

.clay-teal .clay-card-img-overlay { background: linear-gradient(180deg, transparent 50%, rgba(15,188,176,.15)); }
.clay-blue .clay-card-img-overlay  { background: linear-gradient(180deg, transparent 50%, rgba(37,99,235,.15)); }
.clay-amber .clay-card-img-overlay { background: linear-gradient(180deg, transparent 50%, rgba(245,158,11,.15)); }
.clay-violet .clay-card-img-overlay{ background: linear-gradient(180deg, transparent 50%, rgba(124,58,237,.15)); }
.clay-rose .clay-card-img-overlay  { background: linear-gradient(180deg, transparent 50%, rgba(225,29,72,.15)); }

.clay-card-body { padding: 1.25rem 1.25rem 1.5rem; }
.clay-card-icon { font-size: 1.6rem; margin-bottom: .625rem; }
.clay-card-body h3 { font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: .375rem; }
.clay-card-body p  { font-size: .85rem; color: var(--muted); line-height: 1.65; }

/* colour accents on card tops */
.clay-teal  { border-top: 4px solid #0fb0a0; }
.clay-blue  { border-top: 4px solid #2563eb; }
.clay-amber { border-top: 4px solid #f59e0b; }
.clay-violet{ border-top: 4px solid #7c3aed; }
.clay-rose  { border-top: 4px solid #e11d48; }

/* ── MARQUEE ── */
.hp-marquee-wrap { position: relative; overflow: hidden; padding: 1rem 0; background: #f0f9ff; display: flex; flex-direction: column; gap: .75rem; }
.hp-marquee { overflow: hidden; }
.hp-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.hp-marquee-rev .hp-marquee-track { animation-direction: reverse; animation-duration: 32s; }
.hp-marquee-track img { width: 260px; height: 160px; object-fit: cover; border-radius: 16px; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.hp-marquee-wrap:hover .hp-marquee-track { animation-play-state: paused; }
.hp-marquee-fade-l, .hp-marquee-fade-r { position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 2; }
.hp-marquee-fade-l { left: 0; background: linear-gradient(to right, #f0f9ff, transparent); }
.hp-marquee-fade-r { right: 0; background: linear-gradient(to left, #f0f9ff, transparent); }

/* ── ROLES SECTION ── */
.hp-roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media(max-width:900px) { .hp-roles-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:480px) { .hp-roles-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } }

.hp-role-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 360px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.hp-role-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 16px 48px rgba(0,0,0,.18); }
.hp-role-img { position: absolute; inset: 0; }
.hp-role-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hp-role-card:hover .hp-role-img img { transform: scale(1.08); }

.hp-role-glass {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.25rem;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.35);
  transform: translateY(60px);
  transition: transform .35s ease;
}
.hp-role-card:hover .hp-role-glass { transform: translateY(0); }
.hp-role-icon { font-size: 1.5rem; margin-bottom: .375rem; }
.hp-role-name { font-weight: 800; font-size: 1rem; color: #fff; margin-bottom: .25rem; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.hp-role-desc { font-size: .78rem; color: rgba(255,255,255,.85); line-height: 1.55; text-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* Overlay gradient on each role card */
.hp-role-admin  { }
.hp-role-admin::after  { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(6,78,59,.7)); pointer-events:none; }
.hp-role-doctor::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(30,58,138,.7)); pointer-events:none; }
.hp-role-staff::after  { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(76,29,149,.7)); pointer-events:none; }
.hp-role-patient::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(120,53,15,.7)); pointer-events:none; }
.hp-role-glass { z-index: 2; }

/* ── TESTIMONIALS ── */
.hp-test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media(max-width:900px) { .hp-test-grid { grid-template-columns: 1fr; } }

.glass-test {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,.8);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .3s, box-shadow .3s;
}
.glass-test:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.1); }
.glass-test-stars { color: #f59e0b; font-size: 1rem; letter-spacing: .1em; margin-bottom: .875rem; }
.glass-test p { font-size: .9rem; color: var(--ink); line-height: 1.75; margin-bottom: 1.25rem; font-style: italic; }
.glass-test-person { display: flex; align-items: center; gap: .75rem; }
.glass-test-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.glass-test-person strong { display: block; font-size: .85rem; color: var(--ink); font-weight: 700; }
.glass-test-person span  { font-size: .75rem; color: var(--muted); }

/* ── CTA SECTION ── */
.hp-cta-section {
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f2027 100%);
  padding: 8rem 2rem;
  text-align: center;
  overflow: hidden;
}
.hp-cta-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.hp-cta-orb-1 { width: 500px; height: 500px; top: -200px; left: -100px; background: radial-gradient(circle, rgba(15,188,176,.2), transparent 70%); animation: orbFloat 10s ease-in-out infinite; }
.hp-cta-orb-2 { width: 350px; height: 350px; bottom: -100px; right: 0; background: radial-gradient(circle, rgba(37,99,235,.2), transparent 70%); animation: orbFloat 8s ease-in-out infinite -4s; }
.hp-cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.hp-cta-h { font-family: 'Fraunces',serif; font-size: clamp(2.2rem,5vw,4rem); font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1.1; margin-bottom: 1.25rem; }
.hp-cta-sub { font-size: 1rem; color: rgba(255,255,255,.55); line-height: 1.75; max-width: 520px; margin: 0 auto 2.5rem; }
.hp-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
.hp-footer { background: #0f172a; padding: 3rem 2rem 2rem; }
.hp-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.hp-footer-brand { display: flex; align-items: center; gap: .625rem; font-family: 'Fraunces',serif; font-weight: 700; font-size: 1.1rem; color: #fff; }
.hp-footer-logo { font-size: 1.4rem; }
.hp-footer-links { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.hp-footer-links a { font-size: .85rem; color: rgba(255,255,255,.35); cursor: pointer; transition: color .2s; }
.hp-footer-links a:hover { color: rgba(255,255,255,.75); }
.hp-footer-copy { font-size: .75rem; color: rgba(255,255,255,.2); text-align: center; }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-float {
  opacity: 0;
  transform: scale(.85) translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.34,1.56,.64,1);
}
.reveal-float.visible { opacity: 1; transform: scale(1) translateY(0); }