:root {
    --primary: #0878f9;
    --primary-dark: #0561cf;
    --navy: #101c33;
    --text: #17223a;
    --muted: #52617a;
    --surface: #ffffff;
    --surface-soft: #f4f8fd;
    --border: #dbe5f1;
    --footer: #0d1a2e;
    --shadow: 0 20px 60px rgba(22, 48, 85, .14);
    --radius: 18px;
    --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--surface);
    line-height: 1.5;
}
body.dark {
    --text: #edf4ff;
    --muted: #b5c2d7;
    --surface: #0c1525;
    --surface-soft: #111e31;
    --border: #26364d;
    --footer: #07101e;
    --shadow: 0 20px 60px rgba(0,0,0,.35);
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}
.nav-wrap { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.brand-mark {
    width: 38px; height: 45px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg);
    background: linear-gradient(145deg, #08a8ff, #0878f9 55%, #10213d);
    display: grid; place-items: center; position: relative; color: white;
}
.brand-pin { transform: rotate(45deg); font-size: 19px; position: absolute; top: 5px; }
.brand-person { transform: rotate(45deg); font-size: 9px; position: absolute; top: 14px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font-size: 23px; letter-spacing: -.8px; }
.brand-copy strong span, .phone-brand span { color: var(--primary); }
.brand-copy small { font-size: 10px; margin-top: 4px; }

.desktop-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.desktop-nav a { padding: 27px 0 24px; border-bottom: 2px solid transparent; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--primary); border-color: var(--primary); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn {
    display: inline-flex; justify-content: center; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
    font-weight: 700; transition: .2s ease; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--primary); box-shadow: 0 8px 20px rgba(8,120,249,.22); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { border-color: var(--primary); color: var(--text); background: transparent; }
.btn-large { min-height: 50px; padding-inline: 28px; }
.theme-toggle { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.toggle-track { width: 39px; height: 21px; border-radius: 20px; background: var(--navy); display: inline-flex; align-items: center; padding: 2px; }
.toggle-thumb { width: 17px; height: 17px; background: #fff; border-radius: 50%; transition: .2s; }
body.dark .toggle-thumb { transform: translateX(18px); }
.menu-toggle, .mobile-menu { display: none; }

.hero { overflow: hidden; background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 45%, #eef5fb 100%); }
.hero-grid { min-height: 575px; display: grid; grid-template-columns: 48% 52%; align-items: stretch; }
.hero-copy { padding: 72px 20px 60px 0; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { display: inline-flex; gap: 15px; align-self: flex-start; background: #e8f2ff; color: var(--primary); padding: 7px 15px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 1.7px; }
.hero h1 { font-size: clamp(48px, 5.2vw, 72px); line-height: .98; letter-spacing: -3px; margin: 25px 0 20px; }
.hero h1 span { color: var(--primary); }
.hero-copy > p { max-width: 590px; font-size: 17px; color: var(--muted); margin: 0 0 27px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; }
.hero-actions .btn { min-width: 190px; }
.hero-actions .btn span, .cta-inner .btn span { font-size: 24px; line-height: 0; }
.social-proof { display: flex; align-items: center; gap: 15px; margin-top: 32px; }
.social-proof p { margin: 0; color: var(--muted); font-size: 14px; }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar-stack span, .mini-avatars i {
    width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(145deg,#263d59,#b9c9d8); color: white; border: 2px solid var(--surface); font-size: 12px; font-style: normal; margin-left: -8px;
}

.hero-visual { position: relative; min-height: 575px; overflow: hidden; }
.hero-photo {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 74% 30%, rgba(255,255,255,.2), transparent 28%),
      linear-gradient(90deg, var(--surface) 0%, rgba(255,255,255,.1) 35%, transparent 55%),
      url("../images/approved-desktop-reference.png") center right / cover no-repeat;
    filter: saturate(.95);
}
.phone {
    position: absolute; width: 205px; height: 405px; right: 28px; top: 57px;
    background: #121a25; border: 5px solid #202a35; border-radius: 34px; padding: 10px;
    box-shadow: 0 25px 50px rgba(0,0,0,.25); transform: rotate(1deg);
}
.phone-speaker { position: absolute; width: 55px; height: 7px; background: #111; border-radius: 10px; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; }
.phone-screen { height: 100%; background: var(--surface); border-radius: 25px; overflow: hidden; padding: 23px 12px 10px; display: flex; flex-direction: column; }
.phone-brand { font-size: 12px; font-weight: 800; text-align: center; margin-bottom: 10px; }
.phone-photo { height: 190px; border-radius: 14px; background: url("../images/approved-mobile-reference.png") 68% 22% / 250% auto; margin-bottom: 8px; }
.phone-screen strong { font-size: 14px; }
.phone-screen small { color: #20a85a; font-size: 9px; }
.tags { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.tags span { background: #edf4fb; border-radius: 12px; padding: 4px 7px; font-size: 8px; }
.phone-actions { display: flex; justify-content: space-around; margin-top: auto; }
.phone-actions b { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
.floating-card { position: absolute; z-index: 4; background: rgba(255,255,255,.94); color: #17223a; border-radius: 18px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; box-shadow: var(--shadow); }
.nearby-card { top: 135px; left: 8%; }
.global-card { bottom: 48px; left: 20%; }
.card-icon { color: var(--primary); font-size: 24px; }
.floating-card strong { font-size: 13px; line-height: 1.15; }
.mini-avatars { display: flex; margin-top: 8px; }
.mini-avatars i { width: 25px; height: 25px; font-size: 8px; margin-left: -6px; }
.handwritten { position: absolute; left: 16%; top: 50%; color: white; font-family: "Comic Sans MS", cursive; font-size: 25px; line-height: 1; transform: rotate(-8deg); z-index: 3; text-shadow: 0 2px 8px rgba(0,0,0,.35); }

.features { padding: 28px 0 32px; background: var(--surface); }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.feature-grid article { text-align: center; }
.feature-icon { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 13px; display: grid; place-items: center; font-size: 25px; font-weight: 900; }
.feature-icon.blue { background:#e5f0ff; color:#0878f9; }
.feature-icon.green { background:#e0faee; color:#12ad62; }
.feature-icon.purple { background:#efe7ff; color:#7135d8; }
.feature-icon.pink { background:#ffe5eb; color:#f22962; }
.feature-icon.orange { background:#fff0d2; color:#ee9911; }
.feature-icon.violet { background:#efe4ff; color:#6f2fe1; }
.feature-grid h3 { font-size: 14px; margin: 0 0 7px; }
.feature-grid p { font-size: 12px; color: var(--muted); margin: 0; }

.reach-banner { background: #0d1a2e; color: white; min-height: 165px; background-image: linear-gradient(90deg, rgba(5,17,34,.88), rgba(5,17,34,.38)), url("../images/approved-desktop-reference.png"); background-size: cover; background-position: center bottom; }
.reach-inner { min-height: 165px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.reach-inner h2 { margin: 0 0 5px; font-size: 30px; line-height: 1.1; }
.reach-inner p { margin:0; font-size:16px; }
.video-btn { min-height: 55px; border:1px solid rgba(255,255,255,.8); border-radius: 30px; background:rgba(0,0,0,.1); color:white; padding: 0 28px; font-weight: 700; font-size: 15px; cursor:pointer; }

.signup-cta { padding: 32px 0; background: var(--surface-soft); }
.cta-inner { display:flex; align-items:center; justify-content:center; gap: 100px; }
.cta-inner h2 { margin:0; font-size:29px; }
.cta-inner p { margin: 4px 0 0; color: var(--muted); }
.cta-inner > div:last-child { text-align:center; min-width:300px; }
.cta-inner .btn { width:100%; }
.login-note { font-size:13px !important; }
.login-note a { color: var(--primary); text-decoration: underline; }

.site-footer { background:var(--footer); color:#eaf2ff; padding: 38px 0 16px; }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap:40px; }
.footer-brand p { color:#b5c2d7; font-size:12px; max-width:310px; }
.brand-footer .brand-copy strong { color:#fff; }
.brand-footer .brand-copy small { color:#d2dbea; }
.footer-grid h4 { font-size:12px; margin:0 0 12px; }
.footer-grid > div:not(.footer-brand):not(.footer-tagline) a { display:block; color:#b5c2d7; font-size:12px; margin: 8px 0; }
.socials { display:flex; gap:12px; margin-top:18px; }
.socials a { width:27px; height:27px; border:1px solid #7890ae; border-radius:50%; display:grid; place-items:center; font-size:13px; }
.footer-tagline { text-align:right; }
.footer-tagline em { font-family:"Comic Sans MS", cursive; font-size:20px; }
.footer-tagline p { color:#b5c2d7; font-size:12px; }
.copyright { text-align:right; color:#8798b2; font-size:10px; margin-top:25px; }

.video-modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; place-items:center; z-index:100; padding:20px; }
.video-modal.open { display:grid; }
.video-modal-card { width:min(760px,100%); background:var(--surface); border-radius:20px; padding:16px; position:relative; }
.modal-close { position:absolute; top:8px; right:10px; width:35px; height:35px; border-radius:50%; border:0; background:var(--surface-soft); color:var(--text); font-size:25px; cursor:pointer; }
.video-placeholder { min-height:380px; border-radius:14px; background:linear-gradient(135deg,#0e2039,#172e4e); display:grid; place-items:center; align-content:center; color:white; text-align:center; }
.video-placeholder span { font-size:55px; }
.video-placeholder p { margin:8px 0 0; }

@media (max-width: 980px) {
    .desktop-nav { display:none; }
    .nav-login, .nav-signup { display:none; }
    .menu-toggle { display:inline-flex; flex-direction:column; gap:4px; border:0; background:transparent; padding:8px; cursor:pointer; }
    .menu-toggle span { width:24px; height:2px; background:var(--text); }
    .mobile-menu { padding:12px 16px 18px; border-top:1px solid var(--border); background:var(--surface); }
    .mobile-menu.open { display:grid; }
    .mobile-menu > a { padding:12px 4px; border-bottom:1px solid var(--border); font-weight:600; }
    .mobile-menu-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:14px; }
    .hero-grid { grid-template-columns:1fr; }
    .hero-copy { padding:52px 0 30px; }
    .hero-visual { min-height:520px; }
    .feature-grid { grid-template-columns:repeat(3,1fr); }
    .footer-grid { grid-template-columns:2fr 1fr 1fr; }
    .footer-tagline { text-align:left; }
    .cta-inner { gap:40px; }
}

@media (max-width: 640px) {
    .container { width:min(calc(100% - 32px), 540px); }
    .nav-wrap { min-height:68px; }
    .brand-copy strong { font-size:21px; }
    .theme-icon { font-size:18px; }
    .hero { background:var(--surface); }
    .hero-grid { min-height:0; }
    .hero-copy { padding:28px 0 12px; }
    .eyebrow { font-size:10px; gap:12px; }
    .hero h1 { font-size:43px; letter-spacing:-2px; margin:19px 0 16px; }
    .hero-copy > p { font-size:16px; line-height:1.45; }
    .hero-actions { display:grid; grid-template-columns:1fr; gap:10px; }
    .hero-actions .btn { width:100%; }
    .social-proof { margin-top:22px; }
    .hero-visual { min-height:475px; margin-inline:-16px; }
    .hero-photo {
        background:
          linear-gradient(90deg, var(--surface) 0%, rgba(255,255,255,.18) 30%, transparent 62%),
          url("../images/approved-mobile-reference.png") center / cover no-repeat;
    }
    .phone { width:165px; height:335px; right:18px; top:42px; border-radius:28px; }
    .phone-screen { border-radius:20px; }
    .phone-photo { height:150px; }
    .nearby-card { top:70px; left:30px; }
    .global-card { left:48px; bottom:24px; }
    .handwritten { left:33%; top:49%; font-size:20px; }
    .floating-card { padding:10px 12px; border-radius:15px; }
    .floating-card strong { font-size:11px; }
    .features { padding:26px 0; }
    .feature-grid { grid-template-columns:repeat(2,1fr); gap:30px 18px; }
    .feature-icon { width:58px; height:58px; }
    .feature-grid h3 { font-size:13px; }
    .feature-grid p { font-size:11px; }
    .reach-banner { min-height:220px; }
    .reach-inner { min-height:220px; flex-direction:column; align-items:flex-start; justify-content:center; padding-block:26px; }
    .reach-inner h2 { font-size:27px; }
    .video-btn { align-self:center; width:100%; }
    .signup-cta { padding:24px 0; }
    .cta-inner { flex-direction:column; gap:18px; text-align:center; }
    .cta-inner h2 { font-size:25px; }
    .cta-inner > div:last-child { min-width:0; width:100%; }
    .site-footer { padding-top:30px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:28px 22px; }
    .footer-brand { grid-column:1/-1; }
    .footer-tagline { grid-column:1/-1; text-align:center; }
    .copyright { text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { transition:none !important; }
}

.notification-button{position:relative}.notification-popover{display:none;position:absolute;right:0;top:52px;width:350px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 50px rgba(18,34,58,.18);z-index:80;overflow:hidden}.notification-popover.open{display:block}.notification-pop-head{display:flex;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--border)}.notification-pop-head a{font-size:12px;color:var(--primary);font-weight:700}.notification-pop-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text)}.notification-pop-item.unread{background:#f4f8ff}.notification-pop-icon{width:34px;height:34px;border-radius:11px;background:#e5f0ff;color:var(--primary);display:grid;place-items:center;flex:0 0 34px}.notification-pop-item b{display:block;font-size:12px}.notification-pop-item small{display:block;color:var(--muted);font-size:11px;line-height:1.35;margin-top:3px}.notification-pop-empty{text-align:center;padding:28px;color:var(--muted);font-size:12px}@media(max-width:760px){.notification-popover{position:fixed;top:68px;right:12px;left:12px;width:auto}.notification-pop-item{padding:13px}}

/* =========================================================
   STAGE 23 — UI POLISH / V1 VISUAL SYSTEM
   ========================================================= */
:root {
  --focus-ring: 0 0 0 3px rgba(8,120,249,.18);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
}

button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
button:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .58; transform: none !important; }
::selection { background: rgba(8,120,249,.18); }

.btn { min-height: 44px; border-radius: var(--radius-sm); letter-spacing: -.05px; }
.btn-secondary { border:1px solid var(--border); background:var(--surface); color:var(--text); }
.btn-secondary:hover { background:var(--surface-soft); }
.icon-button { transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.icon-button:hover { background:var(--surface-soft); border-color:#c7d6e8; transform:translateY(-1px); }

.app-header { box-shadow: 0 1px 0 rgba(15,32,55,.02); }
.app-header-inner { gap:18px; }
.profile-global-search { flex:1; max-width:560px; min-width:180px; }
.profile-global-search input { width:100%; min-height:42px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); color:var(--text); padding:0 14px 0 38px; }
.profile-global-search input::placeholder { color:#91a0b5; }
.profile-global-search { position:relative; }
.profile-global-search > span { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); z-index:1; }

.app-page { background:var(--surface-soft); }
.app-sidebar { box-shadow: 1px 0 0 rgba(15,32,55,.02); }
.nav-item { transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { transform:translateX(1px); }
.nav-item.active { font-weight:750; }

/* Standard card language across all application pages. */
.status-card, .quick-card, .person-card, .discover-card, .profile-card,
.notifications-card, .recent-card, .faq-card, .destination-card, .business-section,
.package-card, .plan-card, .setting-card, .settings-card {
  box-shadow: 0 1px 0 rgba(15,32,55,.02);
}
.status-card:hover, .discover-card:hover, .profile-card:hover, .recent-card:hover,
.destination-card:hover, .faq-card:hover, .setting-card:hover { box-shadow:var(--shadow); }

.muted { color:var(--muted); }
.small { line-height:1.5; }

/* Consistent form controls */
input, select, textarea {
  color:var(--text);
  background:var(--surface);
  border-color:var(--border);
}
input::placeholder, textarea::placeholder { color:#94a2b5; }
input:hover, select:hover, textarea:hover { border-color:#c5d4e5; }
input:focus, select:focus, textarea:focus { border-color:var(--primary); box-shadow:var(--focus-ring); outline:0; }

/* Consistent dialogs */
.modal-backdrop, .message-modal-backdrop, .plus-backdrop, .modal {
  backdrop-filter:blur(5px);
}
.modal-card, .message-dialog { box-shadow:0 28px 80px rgba(8,28,55,.28); }

/* Toast/feedback states used by existing pages. */
.form-feedback, .flash, .alert { border-radius:12px; line-height:1.45; }

/* Dark-mode refinement for pastel surfaces. */
body.dark .nav-item.active { background:#142d4d; }
body.dark .profile-global-search input { background:#101d2f; }
body.dark .notification-pop-item.unread { background:#10233b; }
body.dark .btn-secondary { background:var(--surface); }
body.dark .feature-icon.blue, body.dark .quick-icon.blue, body.dark .status-symbol,
body.dark .notification-pop-icon { background:#122b49; }
body.dark .feature-icon.green, body.dark .quick-icon.green { background:#103426; }
body.dark .feature-icon.purple, body.dark .quick-icon.purple { background:#2a1d45; }
body.dark .feature-icon.orange, body.dark .quick-icon.orange { background:#382b13; }

/* Prevent accidental horizontal overflow from cards/tables. */
.app-page, .app-layout, main { max-width:100%; overflow-x:hidden; }

@media (max-width: 900px) {
  .profile-global-search { max-width:none; }
}
@media (max-width: 640px) {
  .container { width:min(calc(100% - 24px), 540px); }
  .app-header-inner { min-height:64px; }
  .profile-global-search { display:none; }
  .app-header-actions { gap:5px; }
  .btn { min-height:46px; }
  input, select, textarea { min-height:44px; }
  .app-page { padding-bottom:env(safe-area-inset-bottom); }
}