/* heartitude demo fleet: shared "Luna-modern" layer (loaded after each demo's own styles)
   Each page sets --accent (and --accent-rgb) inline; everything else keys off the shared token names. */
:root {
 --accent: #4FD1B5; --accent-rgb: 79, 209, 181;
 --bg: #FFFFFF !important; --card: #FFFFFF !important; --card2: #F5F7F9 !important;
 --line: #E5EAEF !important; --line2: #D3DAE2 !important;
 --text: #151A20 !important; --ink: #151A20 !important; --soft: #55606E !important; --mute: #8A94A2 !important;
 --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
 --ease: cubic-bezier(.22, .61, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
}
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body {
 font-family: 'General Sans', 'Anuphan', 'Outfit', system-ui, sans-serif;
 background: var(--bg); position: relative; overflow-x: clip;
}
/* ambient: fine grid + accent glow + vignette (static, cheap) */
body::before {
 content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
 background-image:
  radial-gradient(70% 45% at 50% -5%, rgba(var(--accent-rgb), 0.14), transparent 70%),
  linear-gradient(rgba(21,26,32,0.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(21,26,32,0.045) 1px, transparent 1px);
 background-size: auto, 64px 64px, 64px 64px;
 -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 85%);
 mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 85%);
}
body > * { position: relative; z-index: 1; }

/* type: thin display, tight tracking, balanced wraps */
h1, h2, h3, .logo, .brand, .hero h1 {
 font-family: 'Outfit', 'Anuphan', sans-serif; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance;
}
.hero h1, h1 { font-size: clamp(34px, 6vw, 64px) !important; line-height: 1.08 !important; font-weight: 500 !important; }
h2 { font-weight: 500; letter-spacing: -0.02em; }
p, li { text-wrap: pretty; }

/* eyebrow / section labels -> Luna pill */
.sec-label, .eyebrow, .kicker, .tag, .sec-eyebrow {
 display: inline-flex !important; align-items: center; gap: 8px;
 padding: 6px 12px 6px 10px !important; border-radius: 100px !important;
 background: linear-gradient(180deg, rgba(21,26,32,0.05), rgba(21,26,32,0.02)) !important;
 border: 0 !important; color: var(--soft) !important;
 font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; text-transform: none !important;
 line-height: 1 !important; white-space: nowrap; max-width: calc(100vw - 40px);
 box-shadow: 0 10px 30px -18px rgba(var(--accent-rgb), 0.4), inset 0 1px 0 rgba(255,255,255,0.8);
}
.sec-label::before, .eyebrow::before, .kicker::before {
 content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none;
 box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.9);
}

/* surfaces: glass cards, generous radius, no heavy shadows */
.svc, .slot, .summary, .panel, .stat, .dcard, .room, .zone, .card, .sv, .pj, .tm, .area, .stat-card, .today, .box,
.field input, .field select, .field textarea, .success, .pitch, .open-chip, .hero-card {
 border-radius: var(--r-md);
}
.svc, .panel, .dcard, .room, .zone, .card, .sv, .pj, .tm, .area, .pitch, .success { border-radius: var(--r-lg) !important; }
.svc, .slot, .panel, .stat, .dcard, .room, .zone, .card, .sv, .pj, .tm, .area, .summary {
 background: #FFFFFF !important;
 border: 1px solid var(--line) !important; box-shadow: 0 1px 2px rgba(21,26,32,0.04), 0 10px 30px -24px rgba(21,26,32,0.25) !important;
 transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.svc:hover, .dcard:hover, .room:hover, .zone:hover, .card:hover, .sv:hover, .pj:hover, .tm:hover, .area:hover {
 transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.45) !important;
 background: #FFFFFF !important; box-shadow: 0 18px 40px -22px rgba(21,26,32,0.25) !important;
}
.svc.sel, .slot.sel, .room.sel, .zone.sel, .sel {
 border-color: var(--accent) !important;
 box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -18px rgba(var(--accent-rgb), 0.45) !important; background: rgba(var(--accent-rgb), 0.06) !important;
}
.slot { border-radius: var(--r-sm) !important; }
.slot:disabled { opacity: 0.3 !important; }

/* forms */
.field label { color: var(--soft) !important; font-weight: 500 !important; letter-spacing: 0.01em; }
.field input, .field select, .field textarea {
 background: #FFFFFF !important; border: 1px solid var(--line2) !important; color: var(--text) !important;
 border-radius: 14px !important; min-height: 48px; padding: 0 16px !important; font-size: 15px !important;
 transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea { padding: 12px 16px !important; }
.field input:focus, .field select:focus, .field textarea:focus {
 outline: none; border-color: var(--accent) !important;
 box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18) !important; background: #FFFFFF !important;
}

/* buttons: pill, spring press, accent glow */
.btn, .btn-go, .btn-back, .btn-main, .btn-gold, .nav-cta, .play, .adm, button.btn {
 border-radius: 100px !important; font-family: 'Outfit', 'Anuphan', sans-serif; font-weight: 500 !important; letter-spacing: 0.01em;
 transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
 -webkit-tap-highlight-color: transparent;
}
.btn-go, .btn-main, .btn-gold, .nav-cta, .play { box-shadow: 0 14px 34px -14px rgba(var(--accent-rgb), 0.55); }
.btn-go:hover, .btn-main:hover, .btn-gold:hover, .nav-cta:hover, .play:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(var(--accent-rgb), 0.7); }
.btn:active, .btn-go:active, .btn-back:active, .btn-main:active, .play:active, .adm:active { transform: scale(0.96) !important; }
.btn-back, .adm { background: #FFFFFF !important; border: 1px solid var(--line2) !important; color: var(--text) !important; }
.btn-back:hover, .adm:hover { border-color: rgba(var(--accent-rgb), 0.5) !important; background: rgba(var(--accent-rgb), 0.06) !important; }

/* demo bar: heartitude mint, quiet glass */
.demo-bar { background: rgba(8,8,9,0.9) !important; backdrop-filter: blur(16px) saturate(1.4); color: #C9CED6 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.demo-bar b { color: #4FD1B5 !important; }
.demo-bar a { border-color: rgba(79,209,181,0.45) !important; color: #F2F2F4 !important; }
.demo-bar a:hover { border-color: #4FD1B5 !important; color: #4FD1B5 !important; }

/* misc chrome */
.open-chip { background: #FFFFFF !important; border: 1px solid var(--line) !important; border-radius: 100px !important; color: var(--text) !important; }
.logo i, .logo-mark { border-radius: 12px; rotate: -8deg; transition: rotate .4s var(--spring); }
.logo:hover i, .logo:hover .logo-mark { rotate: 0deg; }
.step-dots i.on { background: var(--accent) !important; box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8); }
::selection { background: var(--accent); color: #06100D; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(21,26,32,0.18); border-radius: 100px; border: 2.5px solid var(--bg); }

/* admin dashboards */
.stat b, .stat .num { font-family: 'Outfit', sans-serif; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.panel-head { border-bottom: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; }
td, th { border-bottom: 1px solid var(--line) !important; }
th { color: var(--mute); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

/* reveal-in (progressive enhancement; JS adds .dm-in) */
.dm-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.dm-rv.dm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
 .dm-rv { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
 .hero { padding-top: 44px !important; }
 .sec-label, .eyebrow, .kicker, .tag { font-size: 10px !important; }
}

/* light theme: neutralize per-demo dark chrome */
nav, .nav { background: rgba(255,255,255,0.86) !important; border-bottom: 1px solid var(--line) !important; }
.hero::before { opacity: 0.5; }
.brand, .logo { color: var(--text); }
.consult h2, .consult h3, .consult p, .contact .info h3, .contact .info p { color: #F3EEE3 !important; }
.mech { color: #1F2630 !important; }
.price { color: var(--accent) !important; }
.pax, .who, .when { color: var(--soft) !important; }
.summary { border-style: solid !important; }
.slot:disabled { opacity: 0.38 !important; text-decoration: line-through; }
.stat { background: #FFFFFF !important; }
.pitch { background: #0B0D10 !important; color: #F2F2F4; }
.pitch h2, .pitch p { color: #F2F2F4 !important; }
.pitch .cta { color: #06100D !important; }
.success .big, .logo i { color: #fff; }
td, th { color: var(--text); }
.empty, .note, .hint { color: var(--mute) !important; }
@media (max-width: 600px) {
 .demo-bar { padding: 6px 10px !important; font-size: 11px !important; gap: 3px 8px !important; line-height: 1.35; }
 .demo-bar a { padding: 2px 9px !important; font-size: 11px !important; }
}

/* app-like scrolling on phones */
html { overscroll-behavior-x: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img, svg, canvas { max-width: 100%; }

/* real photography (Unsplash, free licence; credits in /img/CREDITS.md) */
.photo { max-width: 1120px; margin: 6px auto 30px; border-radius: 26px; aspect-ratio: 16 / 7; background-size: cover; background-position: center; box-shadow: 0 24px 50px -30px rgba(21,26,32,0.35); position: relative; overflow: hidden; }
.photo::after { content: attr(data-cap); position: absolute; left: 14px; bottom: 12px; background: rgba(255,255,255,0.85); color: #151A20; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(8px); }
@media (max-width: 640px) { .photo { aspect-ratio: 16 / 10; border-radius: 20px; margin-bottom: 22px; } }
.art.photo-art { background-size: cover !important; background-position: center !important; font-size: 0 !important; }
.art.photo-art .float { font-size: 12.5px; z-index: 1; }
.art.photo-art > :not(.float) { display: none !important; }
.art.photo-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.25) 100%); }

/* app feel: native-like touch behaviour + standalone safe areas */
nav.sn, .demo-bar, button, .btn, .btn-go, .btn-main, .btn-gold, .btn-back, .adm, .chip, summary { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
img { -webkit-user-drag: none; user-drag: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
@media (display-mode: standalone) {
 body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
}