/* ============================================================
   LETSTRY — DESIGN SYSTEM (colors from the Letstry logo)
   ============================================================ */

:root {
  /* Brand palette */
  --primary: #0B536E;
  --primary-dark: #082D4C;
  --primary-light: #149B95;
  --secondary: #F98343;
  --accent: #FEB62F;

  /* Neutrals (light mode) */
  --ink: #082D4C;
  --ink-soft: #5D6B78;
  --bg: #ffffff;
  --bg-soft: #F1F5F6;
  --bg-alt: #E9F0F2;
  --border: #E6EAEE;
  --card: #ffffff;
  --overlay: rgba(8, 45, 76, 0.55);

  /* Typography */
  --font-heading: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(8, 45, 76, 0.06);
  --shadow-md: 0 10px 34px rgba(8, 45, 76, 0.10);
  --shadow-lg: 0 26px 64px rgba(8, 45, 76, 0.16);

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Fixed "always-dark" panel background (footer, store buttons, contact
     card, cookie banner, organizer hero, hero float-card text) — intentionally
     NOT theme-reactive so bg/text keep their relationship in dark mode too. */
  --panel-dark: #082D4C;
}

:root[data-theme="dark"] {
  --ink: #F2F5F7;
  --ink-soft: #9AA8B4;
  --bg: #0B1620;
  --bg-soft: #0F1C28;
  --bg-alt: #13222F;
  --border: #1E3344;
  --card: #13222F;
  --overlay: rgba(4, 14, 24, 0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F2F5F7;
    --ink-soft: #9AA8B4;
    --bg: #0B1620;
    --bg-soft: #0F1C28;
    --bg-alt: #13222F;
    --border: #1E3344;
    --card: #13222F;
    --overlay: rgba(4, 14, 24, 0.65);
  }
}

/* ===================== RESET / BASE ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x:hidden on BOTH html and body, not just body: mobile browsers scroll the <html>
   element itself, not <body>, so body-only overflow-x:hidden still let the page shift/clip
   horizontally on phones whenever anything (even something purely decorative, far down the page)
   rendered wider than the viewport - exactly what was cutting off the topbar/hero text on mobile. */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  max-width: 100%;
  transition: background .3s var(--ease), color .3s var(--ease);
}
h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
p { color: var(--ink-soft); }
a { text-decoration: none; transition: all .25s var(--ease); color: inherit; }
img { max-width: 100%; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

.btn-primary-adv {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--secondary); color: #fff; border: none;
  padding: .85rem 1.7rem; border-radius: var(--r-full); font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 24px rgba(249, 131, 67, .30);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-primary-adv:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(240, 86, 63, .34); background: #F0563F; color: #fff; }

.btn-outline-adv {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; color: var(--ink); border: 1.5px solid var(--border);
  padding: .8rem 1.6rem; border-radius: var(--r-full); font-weight: 700; font-size: .95rem;
  transition: all .25s var(--ease);
}
.btn-outline-adv:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }

.btn-store {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--panel-dark); color: #fff; padding: .65rem 1.25rem; border-radius: var(--r-md);
  font-weight: 600; transition: all .25s var(--ease); border: 1px solid transparent;
}
.btn-store:hover { transform: translateY(-2px); background: var(--primary-dark); color: #fff; }
.btn-store i { font-size: 1.5rem; }
.btn-store .stxt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.btn-store .stxt small { font-size: .65rem; opacity: .75; }
.btn-store .stxt span { font-size: .95rem; font-weight: 700; }

.glass {
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.section-pad { padding: var(--sp-9) 0; }
.slbl {
  display: inline-block; color: var(--primary); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--sp-2);
}
.stitle { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: var(--sp-3); }
.sline { width: 56px; height: 4px; background: var(--secondary); border-radius: var(--r-full); margin: 0 auto var(--sp-4); }
.sdesc { color: var(--ink-soft); max-width: 620px; margin: 0 auto; font-size: 1.05rem; }
.text-center .sline { margin-left: auto; margin-right: auto; }

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--bg-soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s var(--ease);
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* ===================== TOP BAR ===================== */
#topbar { padding: 8px 0; font-size: .82rem; }
#topbar span { color: rgba(255,255,255,.8); margin-right: 16px; }
#topbar span i { color: var(--secondary); margin-right: 5px; }
.tsoc a {
  width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: inline-flex; align-items: center; justify-content: center; color: #eaeaea; font-size: .75rem; transition: .3s;
}
.tsoc a:hover { background: var(--secondary); color: #fff; }
.ttag { background: var(--primary); color: #fff; padding: 3px 12px; border-radius: 20px; font-size: .7rem; font-weight: 700; text-transform: uppercase; }

/* ===================== NAVBAR ===================== */
#nav { background: var(--bg); position: sticky; top: 0; z-index: 990; box-shadow: 0 1px 0 var(--border); transition: .3s; }
#nav.scrolled { box-shadow: var(--shadow-md); }
.blogo { display: flex; align-items: center; gap: 10px; }
.bico {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff;
  box-shadow: 0 4px 15px rgba(11, 83, 110, .35);
}
.bname { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; line-height: 1.1; color: var(--ink); }
.bname small { display: block; font-size: .68rem; font-weight: 600; color: var(--secondary); letter-spacing: .06em; text-transform: uppercase; }
.nav-link-adv { font-weight: 600; color: var(--ink) !important; padding: .5rem 1rem !important; font-size: .93rem; }
.nav-link-adv:hover, .nav-link-adv.active { color: var(--primary) !important; }
.navbar-toggler { border: none !important; box-shadow: none !important; }

/* ===================== HERO ===================== */
#hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  background-size: cover; background-position: center; overflow: hidden;
  color: #fff;
}
#hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,45,76,.94) 0%, rgba(8,45,76,.82) 45%, rgba(11,83,110,.45) 100%); }
#hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 45, 76,.15) 0%, rgba(8, 45, 76,.55) 100%);
}
#hero .hero-inner { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); font-size: .8rem; font-weight: 600; margin-bottom: var(--sp-4);
}
.hero-title { font-size: clamp(2.4rem, 5.5vw, 4rem); color: #fff; line-height: 1.05; margin-bottom: var(--sp-4); }
.hero-subtitle { font-size: 1.15rem; color: rgba(255,255,255,.88); max-width: 520px; margin-bottom: var(--sp-5); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: var(--sp-6); }
.hero-stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.hero-stats .hs-item strong { font-size: 1.6rem; font-family: var(--font-heading); display: block; }
.hero-stats .hs-item span { font-size: .8rem; color: rgba(255,255,255,.75); }

.hero-phone-wrap { position: relative; display: flex; justify-content: center; z-index: 2; perspective: 1200px; }

/* JS-driven pointer tilt layer (see main.js) - nests OUTSIDE the ambient 3D
   float below so the two motions (pointer-follow + idle) compose instead of
   fighting over the same transform. */
.phone-tilt { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22,.9,.3,1); }

.phone-mockup {
  position: relative; width: 260px; height: 540px; border-radius: 42px;
  background: #0e1f1c; padding: 12px; box-shadow: var(--shadow-lg);
  animation: phoneFloat 6s ease-in-out infinite;
  border: 2px solid rgba(255,255,255,.15);
  transform-style: preserve-3d;
}
.phone-mockup .screen {
  width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: linear-gradient(160deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center; position: relative;
}
.phone-mockup .screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-mockup .notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: #0e1f1c; border-radius: 14px; z-index: 3; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) translateZ(var(--tiltZ,0px)) rotateY(var(--tiltY,0deg)); }
  50% { transform: translateY(-16px) translateZ(var(--tiltZ,0px)) rotateY(var(--tiltY,0deg)); }
}
/* The phone itself gets a heavier, genuinely-3D idle motion - it's the hero
   object, so it earns the most pronounced depth on the page. */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotateY(-7deg) rotateX(3deg); }
  50% { transform: translateY(-16px) rotateY(7deg) rotateX(-3deg); }
}

.hero-float-card {
  position: absolute; background: #fff; color: var(--panel-dark); border-radius: var(--r-md);
  padding: .8rem 1rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .6rem;
  font-size: .82rem; font-weight: 700; animation: floaty 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
.hero-float-card i { color: var(--primary); font-size: 1.1rem; }
/* Each card sits at its own depth (--tiltZ) and angle (--tiltY), like three
   real cards planted around the phone rather than flat labels pasted on top. */
.hero-float-card.fc1 { top: 8%; left: -6%; animation-delay: .3s; --tiltZ: 50px; --tiltY: -12deg; }
.hero-float-card.fc2 { bottom: 18%; right: -8%; animation-delay: 1s; --tiltZ: 70px; --tiltY: 10deg; }
.hero-float-card.fc3 { bottom: -3%; left: 8%; animation-delay: 1.6s; --tiltZ: 30px; --tiltY: -8deg; }

@media (prefers-reduced-motion: reduce) {
  .phone-tilt { transition: none; }
  .phone-mockup, .hero-float-card { animation: none; }
}

.scroll-indicator {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,.8); display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.scroll-indicator .dot-track { width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 20px; position: relative; }
.scroll-indicator .dot-track::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 5px; height: 8px; background: #fff; border-radius: 3px;
  animation: scrolldot 1.6s infinite;
}
@keyframes scrolldot { 0% { opacity: 1; top: 6px; } 100% { opacity: 0; top: 22px; } }

/* ===================== MARQUEE ===================== */
.mqsec { overflow: hidden; padding: 14px 0; white-space: nowrap; }
.mqtrack { display: inline-flex; animation: mqscroll linear infinite; }
.mqtrack span, .mqitem { display: inline-flex; align-items: center; gap: .5rem; margin: 0 2rem; font-weight: 700; font-size: .95rem; }
@keyframes mqscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===================== ACTIVITY CATEGORIES ===================== */
.cat-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; height: 220px; display: block;
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cat-card:hover img { transform: scale(1.08); }
.cat-card::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 45, 76,0) 30%, rgba(8, 45, 76,.85) 100%);
}
.cat-card .cat-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem; z-index: 2; color: #fff; }
.cat-card .cat-icon {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; font-size: 1rem;
}
.cat-card .cat-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; margin-bottom: .15rem; }
.cat-card .cat-desc { font-size: .78rem; color: rgba(255,255,255,.8); }

/* ===================== FEATURE CARDS ===================== */
.feat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5);
  height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.feat-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: var(--sp-3);
}
.feat-card h5, .feat-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.feat-card p { font-size: .92rem; margin: 0; }

/* ===================== HOW IT WORKS ===================== */
.hiw-step { position: relative; text-align: center; padding: 0 1rem; }
.hiw-num {
  width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-heading);
  font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4);
  box-shadow: 0 10px 24px rgba(11, 83, 110,.3);
}
.hiw-step h5, .hiw-step h3 { margin-bottom: .5rem; }
.hiw-step p { font-size: .92rem; }
.hiw-arrow { color: var(--border); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; }

/* ===================== SCREENSHOTS ===================== */
.screens-bg { background: linear-gradient(160deg, var(--primary-dark), var(--primary)); color: #fff; position: relative; overflow: hidden; }
.screens-bg .stitle, .screens-bg .slbl { color: #fff; }
.screens-bg .sdesc { color: rgba(255,255,255,.8); }
.screenSwiper { padding: 2rem 0 3rem; }
.screen-phone {
  width: 220px; margin: 0 auto; border-radius: 34px; background: var(--panel-dark); padding: 10px; box-shadow: var(--shadow-lg);
}
.screen-phone .screen-inner { border-radius: 26px; overflow: hidden; aspect-ratio: 9/19; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; }
.screen-phone .screen-inner img { width: 100%; height: 100%; object-fit: cover; }
.screen-phone .screen-inner .placeholder-screen {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  color: #fff; text-align: center; padding: 1rem; font-weight: 700;
}
.screen-caption { text-align: center; margin-top: 1rem; font-weight: 600; color: rgba(255,255,255,.85); }

/* ===================== STATISTICS ===================== */
.stat-box { text-align: center; }
.stat-icon { width: 50px; height: 50px; border-radius: 50%; background: color-mix(in srgb, var(--secondary) 15%, transparent); color: var(--secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3); font-size: 1.2rem; }
.stat-value { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--primary); }
.stat-label { color: var(--ink-soft); font-weight: 600; font-size: .92rem; }

/* ===================== TESTIMONIALS ===================== */
.tes-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); height: 100%; }
.tes-quote { color: var(--primary); font-size: 1.8rem; margin-bottom: .5rem; opacity: .5; }
.tes-stars { color: #f6b23c; margin-bottom: .5rem; font-size: .85rem; }
.tes-comment { color: var(--ink); font-size: .95rem; margin-bottom: 1.2rem; }
.tes-person { display: flex; align-items: center; gap: .7rem; }
.tes-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tes-name { font-weight: 700; font-size: .9rem; }
.tes-role { font-size: .78rem; color: var(--ink-soft); }

/* ===================== FAQ ===================== */
.faq-accordion .accordion-item { border: 1px solid var(--border); border-radius: var(--r-md) !important; margin-bottom: .75rem; overflow: hidden; background: var(--card); }
.faq-accordion .accordion-button { font-weight: 700; font-family: var(--font-heading); background: var(--card); color: var(--ink); padding: 1.1rem 1.3rem; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card)); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-body { color: var(--ink-soft); padding: 0 1.3rem 1.2rem; }

/* ===================== DOWNLOAD CTA ===================== */
.download-cta {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 60%, var(--secondary));
  border-radius: var(--r-lg); color: #fff; padding: var(--sp-8) var(--sp-6); text-align: center; position: relative; overflow: hidden;
}
.download-cta h2 { color: #fff; }
.download-cta p { color: rgba(255,255,255,.85); }
.download-cta .cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: var(--sp-5); }
.download-cta.compact { padding: var(--sp-6) var(--sp-5); }

/* ===================== GALLERY ===================== */
.ggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gitem { position: relative; border-radius: var(--r-md); overflow: hidden; height: 220px; }
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gitem:hover img { transform: scale(1.1); }
.gitem .gover {
  position: absolute; inset: 0; background: rgba(8, 45, 76,.55); opacity: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; transition: opacity .3s var(--ease); text-align: center; padding: 1rem;
}
.gitem:hover .gover { opacity: 1; }

/* ===================== TIMELINE (About/Mission) ===================== */
.about-stack { position: relative; }
.about-stack .amain { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.about-stack .asm { position: absolute; bottom: -30px; right: -30px; width: 45%; border-radius: var(--r-md); border: 6px solid var(--bg); box-shadow: var(--shadow-md); }
.about-stack .aexp {
  position: absolute; top: -20px; left: -20px; background: var(--primary); color: #fff; width: 100px; height: 100px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 800; box-shadow: var(--shadow-md); font-size: 1.1rem;
}
.aexp small { font-size: .62rem; font-weight: 600; line-height: 1.1; }
.pillar-row { display: flex; gap: 1rem; margin-bottom: 1.2rem; }
.pillar-ico { width: 46px; height: 46px; min-width:46px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; }
.pillar-ico.r { background: #e8281a; } .pillar-ico.g { background: var(--primary); } .pillar-ico.y { background: #f6a623; } .pillar-ico.b { background: var(--accent); }

/* ===================== PARTNERS ===================== */
.partner-logo { filter: grayscale(1) opacity(.6); transition: all .3s var(--ease); max-height: 46px; }
.partner-logo:hover { filter: none; opacity: 1; }

/* ===================== ORGANIZER BENEFITS PAGE ===================== */
.organizer-hero { background: linear-gradient(160deg, var(--panel-dark), var(--primary-dark)); color: #fff; }

/* ===================== ACTIVITIES DETAIL PAGE ===================== */
.activity-section { padding: var(--sp-8) 0; border-bottom: 1px solid var(--border); }
.activity-section:nth-child(even) { background: var(--bg-soft); }
.difficulty-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--bg-alt); color: var(--primary); padding: .35rem .9rem; border-radius: var(--r-full); font-size: .78rem; font-weight: 700; }
.activity-banner { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.activity-banner img { width: 100%; height: 100%; object-fit: cover; }
.benefit-list { list-style: none; padding: 0; margin: 1rem 0; }
.benefit-list li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; color: var(--ink-soft); }
.benefit-list li i { color: var(--primary); margin-top: .25rem; }

/* ===================== CONTACT PAGE ===================== */
.contact-info-card { background: var(--panel-dark); color: #fff; border-radius: var(--r-lg); padding: var(--sp-6); }
.contact-info-card .ci-row { display: flex; gap: .8rem; margin-bottom: 1.2rem; align-items: flex-start; }
.contact-info-card .ci-row i { color: var(--secondary); margin-top: .2rem; }
.fctrl { border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: .85rem 1rem; width: 100%; background: var(--bg); color: var(--ink); font-size: .95rem; }
.fctrl:focus { outline: none; border-color: var(--primary); }
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.star-rating { display: inline-flex; gap: .35rem; font-size: 1.5rem; color: var(--border); cursor: pointer; }
.star-rating i { transition: color .15s var(--ease), transform .15s var(--ease); }
.star-rating i.active { color: #f6b23c; }
.star-rating i:hover { transform: scale(1.15); }

/* ===================== NEWSLETTER ===================== */
.nlbg { background: var(--bg-alt); border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-5); text-align: center; }
.nl-form-wrap { display: flex; max-width: 460px; margin: 1.2rem auto 0; gap: .6rem; }
.nl-form-wrap input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: var(--r-full); padding: .85rem 1.3rem; background: var(--bg); color: var(--ink); }
.nl-form-wrap input:focus { outline: none; border-color: var(--primary); }

/* ===================== FOOTER ===================== */
#footer { background: var(--panel-dark); color: rgba(255,255,255,.7); padding-top: var(--sp-8); }
#footer .fbrand { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; color: #fff; }
#footer .fbrand span { color: var(--secondary); }
#footer h6 { color: #fff; font-family: var(--font-heading); margin-bottom: 1.1rem; }
#footer a { color: rgba(255,255,255,.65); }
#footer a:hover { color: var(--secondary); }
#footer ul { list-style: none; padding: 0; }
#footer li { margin-bottom: .6rem; }
.fsoc a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex;
  align-items: center; justify-content: center; color: #fff; margin-right: .5rem;
}
.fsoc a:hover { background: var(--primary); }
.fbot { border-top: 1px solid rgba(255,255,255,.1); padding: 1.2rem 0; margin-top: var(--sp-7); font-size: .82rem; }
#btt {
  position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 900;
  opacity: 0; pointer-events: none; transition: all .3s var(--ease); border: none;
}
#btt.show { opacity: 1; pointer-events: auto; }

/* ===================== COOKIE BANNER ===================== */
#cookieBanner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; max-width: 620px; margin: 0 auto;
  background: var(--panel-dark); color: #fff; border-radius: var(--r-md); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
#cookieBanner p { color: rgba(255,255,255,.8); font-size: .85rem; margin: 0; flex: 1; min-width: 200px; }

/* ===================== SEARCH OVERLAY ===================== */
#searchOv {
  position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(6px); z-index: 1100;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh;
  opacity: 0; visibility: hidden; transition: all .3s var(--ease);
}
#searchOv.active { opacity: 1; visibility: visible; }
.sovbox { background: var(--bg); border-radius: var(--r-lg); padding: var(--sp-6); width: 92%; max-width: 620px; box-shadow: var(--shadow-lg); }
.sovinput { display: flex; align-items: center; border: 2px solid var(--border); border-radius: var(--r-full); padding: .3rem .3rem .3rem 1.2rem; margin: 1rem 0 1.4rem; }
.sovinput input { border: none; flex: 1; padding: .6rem 0; background: transparent; color: var(--ink); }
.sovinput input:focus { outline: none; }
.sovinput button { background: var(--primary); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; }
.sovcats { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.sovcat { display: flex; align-items: center; gap: .5rem; border: 1.5px solid var(--border); border-radius: var(--r-full); padding: .4rem .9rem .4rem .4rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
.sovcat img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.sovcat.active, .sovcat:hover { border-color: var(--primary); color: var(--primary); }
.sovtrend p { font-size: .82rem; font-weight: 700; margin-bottom: .6rem; }
.sovtrend .ttag { margin: 0 .4rem .4rem 0; display: inline-block; }
.sovclose { position: absolute; top: 24px; right: 28px; background: rgba(255,255,255,.15); border: none; color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; }

/* ===================== EMPTY STATE / SKELETON ===================== */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--ink-soft); }
.empty-state i { font-size: 2.4rem; color: var(--border); margin-bottom: 1rem; }
.skeleton { background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 37%, var(--bg-alt) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ===================== ACCOUNT PAGES ===================== */
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }

/* ===================== ANIMATION UTILITIES ===================== */
[data-aos] { }
.fade-up-in { opacity: 0; transform: translateY(24px); transition: all .7s var(--ease); }
.fade-up-in.in { opacity: 1; transform: translateY(0); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991px) {
  .ggrid { grid-template-columns: repeat(2, 1fr); }
  #hero { min-height: auto; padding: 7rem 0 4rem; }
  .hero-phone-wrap { margin-top: 3rem; }
  .hiw-arrow { transform: rotate(90deg); margin: .5rem 0; }
  /* fc1/fc2 float outside the phone mockup's own box on purpose (left:-6%/right:-8%) for a
     desktop "floating badge" effect - there's no room for that overflow on tablet/phone widths,
     and it's what was pushing the whole page's scrollable width past the viewport, clipping
     unrelated content (topbar, hero text) elsewhere on the page. Pull them back inside instead of
     hiding them outright - fc3 already sits inside its parent (left:8%, positive) so it's unaffected. */
  .hero-float-card.fc1 { left: 4%; }
  .hero-float-card.fc2 { right: 4%; }
}
@media (max-width: 767px) {
  .ggrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gitem { height: 160px; }
  .section-pad { padding: var(--sp-7) 0; }
  .about-stack .asm { display: none; }
  .about-stack .aexp { left: 0; }
  #cookieBanner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 540px) {
  .hero-stats { gap: var(--sp-4); }
  .cat-card { height: 180px; }
  .hero-float-card { font-size: .74rem; padding: .6rem .8rem; }
  /* The Subscribe button never shrinks below its own text+padding width (buttons don't shrink
     past their content in a flex row by default), so side-by-side with the email input it was
     overflowing past the card's edge on narrow phones - stack them instead of squeezing both in. */
  .nl-form-wrap { flex-direction: column; }
  .nl-form-wrap .btn-primary-adv { width: 100%; }
}
@media (max-width: 320px) {
  /* .phone-mockup's 260px is a fixed design width (it's a literal phone-shaped illustration, not
     meant to reflow) - on the very narrowest real phones (iPhone SE and similar at 320px wide) it
     can just barely not fit next to the container's own padding. Scale it down instead of letting
     it be the one thing forcing horizontal scroll on those specific devices. */
  .phone-mockup { width: 220px; height: 460px; }
}

/* ---- Rides (ride sharing) section ---- */
.ride-card { background: var(--card, #fff); border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 22px; padding: 1.5rem; box-shadow: var(--shadow-md); }
.ride-card-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 1.2rem; }
.ride-card-head i { color: var(--primary); margin-right: .35rem; }
.ride-seats { font-size: .85rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; background: var(--bg-soft); }
.ride-stops { list-style: none; margin: 0; padding: 0; position: relative; }
.ride-stops::before { content: ""; position: absolute; left: 4.35rem; top: .7rem; bottom: .7rem; width: 2px; background: var(--primary); opacity: .35; }
.ride-stops li { display: flex; align-items: center; gap: .9rem; padding: .55rem 0; position: relative; }
.rs-time { width: 3.2rem; font-size: .85rem; opacity: .7; font-variant-numeric: tabular-nums; }
.rs-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--card, #fff); border: 3px solid var(--primary); z-index: 1; flex: none; }
.rs-city { font-weight: 600; }
.ride-stops li.hl .rs-dot { background: var(--primary); box-shadow: 0 0 0 5px rgba(20, 155, 149,.18); }
.rs-tag { margin-left: auto; font-size: .75rem; font-weight: 700; color: #fff; background: var(--primary); padding: .2rem .6rem; border-radius: 999px; }
.ride-card-note { margin: 1rem 0 0; font-size: .85rem; opacity: .8; }
.ride-card-note i { color: var(--primary); margin-right: .3rem; }

/* ---- Hide City section ---- */
.hc-section { background: linear-gradient(135deg, #0B536E, #082D4C); color: rgba(255,255,255,.88); }
.hc-label { color: #FEB62F !important; }
.hc-lead { font-size: 1.05rem; color: rgba(255,255,255,.8); margin-bottom: 1.5rem; }
.hc-steps { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .75rem; }
.hc-steps li { display: flex; gap: .8rem; align-items: flex-start; }
.hc-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F98343; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.hc-modes-title { color: #fff; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: .8rem; }
.hc-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.hc-mode { display: flex; gap: .7rem; align-items: center; padding: .8rem 1rem; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: .92rem; }
.hc-mode i { color: #FEB62F; font-size: 1.1rem; width: 22px; text-align: center; }
.hc-phone { margin: 0 auto; max-width: 280px; }

/* ---- All features grid ---- */
.feat-card.feat-compact { padding: 1.3rem; height: 100%; }
.feat-card.feat-compact .feat-icon { width: 46px; height: 46px; font-size: 1.1rem; margin-bottom: .8rem; }
.feat-card.feat-compact h5, .feat-card.feat-compact h3 { font-size: 1rem; }
.feat-card.feat-compact p { font-size: .86rem; }

/* ---- Letstry brand details ---- */
.sun-text { background: linear-gradient(90deg, #FEB62F, #F98343, #F0563F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-badge .sun-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, #FEB62F, #F98343, #F0563F); }
.bname .wm-lets { color: var(--ink); }
#footer .fbrand .wm-lets { color: #fff; }
#footer .fbrand span.sun-text { color: transparent; }
.stat-value { background: linear-gradient(90deg, #0B536E, #149B95); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hiw-step:first-child .hiw-num, .col-md-4:first-child .hiw-num { background: linear-gradient(135deg, #FEB62F, #F98343, #F0563F); }
/* The hero title animation wraps each word in its own moving box - give that box the gradient,
   or the gradient word renders invisible. */
.sun-text .split-word > span { background: linear-gradient(90deg, #FEB62F, #F98343, #F0563F); -webkit-background-clip: text; background-clip: text; color: transparent; }