/* ============================================================
     SUNSET WANDERLUST — Budgetarian Techies
     Art direction: warm, friendly, playful, light-mode
     Coral/tangerine + golden amber + teal accent on warm cream
     ============================================================ */

  :root {
    /* Core palette */
    --cream:        #FFF7EF;
    --cream-2:      #FFEFE0;
    --coral:        #FF6B4A;
    --coral-deep:   #F2543A;
    --tangerine:    #FF8A3D;
    --amber:        #FFB23E;
    --amber-soft:   #FFD27A;
    --teal:         #1FA8A0;
    --teal-deep:    #14807A;
    --ink:          #3A2418;
    --ink-soft:     #6B5446;
    --white:        #FFFFFF;

    /* Functional */
    --bg:           var(--cream);
    --card:         #FFFFFF;
    --radius-lg:    28px;
    --radius-md:    20px;
    --radius-sm:    14px;
    --radius-pill:  999px;

    /* Shadows — soft, layered, warm-tinted */
    --shadow-sm:  0 2px 6px rgba(242, 84, 58, 0.08), 0 1px 2px rgba(58, 36, 24, 0.06);
    --shadow-md:  0 10px 24px rgba(242, 84, 58, 0.12), 0 4px 8px rgba(58, 36, 24, 0.06);
    --shadow-lg:  0 24px 50px rgba(242, 84, 58, 0.18), 0 10px 20px rgba(58, 36, 24, 0.08);
    --shadow-xl:  0 36px 80px rgba(242, 84, 58, 0.22), 0 14px 30px rgba(58, 36, 24, 0.10);

    --grad-warm:  linear-gradient(135deg, var(--coral) 0%, var(--tangerine) 48%, var(--amber) 100%);
    --grad-sunset: linear-gradient(180deg, #FFE7CE 0%, #FFF7EF 60%);

    --maxw: 1180px;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  /* ---------- Reset & base ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; margin: 0; }

  /* ---------- Layout helpers ---------- */
  .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
  .section { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }

  .eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    font-size: .78rem; color: var(--coral-deep);
    background: rgba(255, 138, 61, 0.14);
    padding: .4rem .9rem; border-radius: var(--radius-pill);
  }
  .section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .section-head h2 {
    font-size: clamp(2rem, 5.2vw, 3.2rem);
    margin-top: 1rem; letter-spacing: -0.01em;
  }
  .section-head p { color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.15rem); margin-top: .85rem; }

  /* Hand-drawn underline accent */
  .squiggle {
    position: relative; display: inline-block;
  }
  .squiggle::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.12em; height: 0.32em;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C 40 3, 70 14, 100 8 S 165 3, 198 9' stroke='%231FA8A0' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
      no-repeat center / 100% 100%;
    z-index: -1;
  }
  .squiggle.coral::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C 40 3, 70 14, 100 8 S 165 3, 198 9' stroke='%23FF6B4A' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-weight: 800; font-size: 1rem; line-height: 1;
    padding: .95rem 1.5rem; border-radius: var(--radius-pill);
    border: 2px solid transparent; white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }
  .btn-primary {
    background: var(--grad-warm); color: #fff;
    box-shadow: var(--shadow-md);
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .btn-secondary {
    background: #fff; color: var(--ink); border-color: rgba(58,36,24,0.12);
    box-shadow: var(--shadow-sm);
  }
  .btn-secondary:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal); color: var(--teal-deep); }
  .btn-ghost { background: transparent; color: var(--ink); }

  :focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* ---------- Skip link ---------- */
  .skip {
    position: absolute; left: 1rem; top: -3rem; z-index: 2000;
    background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 10px;
    transition: top .2s ease; font-weight: 700;
  }
  .skip:focus { top: 1rem; }

  /* ============================================================
     NAV
     ============================================================ */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: 1000;
    transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  }
  .nav.scrolled {
    background: rgba(255, 247, 239, 0.86);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 24px rgba(242, 84, 58, 0.10);
    border-bottom: 1px solid rgba(255, 138, 61, 0.18);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
  }
  .logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); }
  .logo .mark {
    width: 38px; height: 38px; border-radius: 12px; flex: none;
    background: var(--grad-warm); color: #fff;
    display: grid; place-items: center; font-size: 1.15rem;
    box-shadow: var(--shadow-sm); transform: rotate(-6deg);
  }
  .logo b { color: var(--coral-deep); }

  .nav-links { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
  .nav-links a {
    font-weight: 700; font-size: .98rem; color: var(--ink-soft);
    padding: .5rem .8rem; border-radius: var(--radius-pill);
    transition: color .15s ease, background-color .15s ease;
  }
  .nav-links a:hover { color: var(--coral-deep); background: rgba(255,138,61,0.12); }
  .nav-cta { margin-left: .6rem; }
  .nav-cta .btn { padding: .7rem 1.25rem; font-size: .95rem; }

  .hamburger {
    display: none; width: 46px; height: 46px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(58,36,24,0.1);
    box-shadow: var(--shadow-sm);
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  }
  .hamburger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Mobile menu */
  .mobile-menu {
    position: fixed; inset: 72px 0 auto 0; z-index: 999;
    background: rgba(255, 247, 239, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 1.2rem clamp(1.1rem, 4vw, 2.5rem) 1.8rem;
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid rgba(255,138,61,0.2);
    transform: translateY(-120%);
    transition: transform .32s cubic-bezier(.22,1,.36,1);
    visibility: hidden;
  }
  .mobile-menu.open { transform: translateY(0); visibility: visible; }
  .mobile-menu ul { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .25rem; }
  .mobile-menu a { display: block; font-weight: 800; font-size: 1.15rem; padding: .8rem .6rem; border-radius: 14px; color: var(--ink); }
  .mobile-menu a:hover { background: rgba(255,138,61,0.12); color: var(--coral-deep); }
  .mobile-menu .btn { width: 100%; }

  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    position: relative; overflow: hidden;
    padding-top: clamp(6.5rem, 14vw, 9rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
    background: var(--grad-sunset);
  }
  /* Organic blob background shapes */
  .blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .55; z-index: 0; pointer-events: none; }
  .blob-1 { width: 460px; height: 460px; top: -160px; right: -120px; background: radial-gradient(circle at 30% 30%, var(--amber-soft), transparent 70%); opacity: .85; }
  .blob-2 { width: 380px; height: 380px; bottom: -140px; left: -120px; background: radial-gradient(circle at 50% 50%, rgba(31,168,160,0.35), transparent 70%); }
  .blob-3 { width: 280px; height: 280px; top: 30%; left: 42%; background: radial-gradient(circle at 50% 50%, rgba(255,107,74,0.30), transparent 70%); }

  .hero-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.15fr 0.95fr; gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: var(--teal-deep); font-weight: 800; font-size: .82rem;
    padding: .45rem .9rem; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm); border: 1px solid rgba(31,168,160,0.25);
    margin-bottom: 1.3rem;
  }
  .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(31,168,160,0.18); }

  .hero h1 {
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    letter-spacing: -0.02em;
  }
  .hero h1 .accent { color: var(--coral-deep); }
  .hero .lede {
    font-size: clamp(1.05rem, 2.3vw, 1.3rem); color: var(--ink-soft);
    margin-top: 1.2rem; max-width: 34ch; font-weight: 600;
  }

  /* Pillar pills */
  .pillar-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
  .pill {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; font-weight: 800; font-size: .92rem;
    padding: .55rem 1rem; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm); border: 1px solid rgba(58,36,24,0.06);
    transition: transform .15s ease;
  }
  .pill:hover { transform: translateY(-2px) rotate(-1.5deg); }
  .pill .emo { font-size: 1.05rem; }

  .hero-ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }

  /* Stat row */
  .stats {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2rem);
    margin: 2.4rem 0 0; padding: 1.8rem 0 0;
    border-top: 2px dashed rgba(242,84,58,0.22);
  }
  .stat { display: flex; flex-direction: column; }
  .stat b { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--ink); line-height: 1; }
  .stat span { font-weight: 700; font-size: .82rem; color: var(--ink-soft); margin-top: .35rem; letter-spacing: .02em; }

  /* Hero portrait */
  .hero-portrait { position: relative; justify-self: center; }
  .portrait-frame {
    position: relative; width: clamp(260px, 34vw, 400px); aspect-ratio: 1; z-index: 2;
  }
  .portrait-frame img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 36px;
    border: 6px solid #fff;
    box-shadow: var(--shadow-xl);
  }
  .portrait-frame::before {
    content: ""; position: absolute; inset: -18px -18px auto auto; width: 100%; height: 100%;
    border-radius: 44px; background: var(--grad-warm); z-index: -1; transform: rotate(5deg);
    opacity: .9;
  }
  /* Floating chips around portrait */
  .float-chip {
    position: absolute; z-index: 4; background: #fff; border-radius: 16px;
    padding: .6rem .9rem; box-shadow: var(--shadow-md); font-weight: 800; font-size: .9rem;
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid rgba(58,36,24,0.06);
  }
  .float-chip .emo { font-size: 1.2rem; }
  .fc-1 { top: 6%; left: -8%; color: var(--coral-deep); animation: floaty 5s ease-in-out infinite; }
  .fc-2 { bottom: 16%; right: -10%; color: var(--teal-deep); animation: floaty 6s ease-in-out .8s infinite; }
  .fc-3 { bottom: -4%; left: 8%; color: var(--tangerine); animation: floaty 5.5s ease-in-out .4s infinite; }

  @keyframes floaty {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .float-chip { animation: none !important; }
  }

  /* ============================================================
     MARQUEE / DESTINATIONS quick strip under hero
     ============================================================ */
  .pillbar {
    position: relative; z-index: 2; background: var(--ink);
    color: #fff; overflow: hidden;
    padding-block: .9rem;
  }
  .pillbar-track {
    display: flex; gap: 2.5rem; white-space: nowrap; width: max-content;
    animation: scroll-x 28s linear infinite;
    font-weight: 800; letter-spacing: .03em;
  }
  .pillbar-track span { display: inline-flex; align-items: center; gap: .5rem; opacity: .92; font-size: .95rem; }
  .pillbar-track span::after { content: "✦"; color: var(--amber); margin-left: 2.3rem; }
  @keyframes scroll-x { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .pillbar-track { animation: none; } }

  /* ============================================================
     PILLARS
     ============================================================ */
  .pillars-grid {
    display: grid; gap: clamp(1rem, 2.5vw, 1.4rem);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .pillar-card {
    background: var(--card); border-radius: var(--radius-md);
    padding: 1.7rem 1.5rem; box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58,36,24,0.05);
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative; overflow: hidden;
  }
  .pillar-card::before {
    content: ""; position: absolute; inset: auto auto -40px -40px; width: 110px; height: 110px;
    border-radius: 50%; opacity: .12; background: var(--accent, var(--coral));
    transition: transform .25s ease;
  }
  .pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .pillar-card:hover::before { transform: scale(1.4); }
  .pillar-icon {
    width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
    font-size: 1.7rem; margin-bottom: 1.1rem;
    background: color-mix(in srgb, var(--accent, var(--coral)) 16%, #fff);
    box-shadow: var(--shadow-sm); position: relative; z-index: 1;
    transform: rotate(-5deg);
  }
  .pillar-card h3 { font-size: 1.35rem; position: relative; z-index: 1; }
  .pillar-card p { color: var(--ink-soft); margin-top: .55rem; font-size: .96rem; font-weight: 600; position: relative; z-index: 1; }
  .pillar-card .tag { display: inline-block; margin-top: .9rem; font-weight: 800; font-size: .8rem; color: var(--accent, var(--coral-deep)); position: relative; z-index: 1; }

  /* ============================================================
     FEATURED VIDEOS
     ============================================================ */
  .video-grid {
    display: grid; gap: clamp(1rem, 2.2vw, 1.5rem);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .video-card {
    background: var(--card); border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--shadow-sm); border: 1px solid rgba(58,36,24,0.05);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
  }
  .video-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .video-thumb {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-2);
  }
  .video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .video-card:hover .video-thumb img { transform: scale(1.06); }
  .play-overlay {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(58,36,24,0) 35%, rgba(58,36,24,0.45) 100%);
    opacity: 0; transition: opacity .25s ease;
  }
  .video-card:hover .play-overlay,
  .video-card:focus-within .play-overlay { opacity: 1; }
  .play-btn {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,0.95); display: grid; place-items: center;
    box-shadow: var(--shadow-md); transform: scale(.8); transition: transform .25s ease;
  }
  .video-card:hover .play-btn { transform: scale(1); }
  .play-btn svg { width: 26px; height: 26px; fill: var(--coral-deep); margin-left: 3px; }
  .chip {
    position: absolute; top: .8rem; left: .8rem; z-index: 2;
    background: rgba(255,247,239,0.95); color: var(--ink);
    font-weight: 800; font-size: .76rem; padding: .35rem .7rem; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm); backdrop-filter: blur(4px);
  }
  .video-body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; align-items: flex-start; }
  .video-body h3 {
    font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; line-height: 1.32;
    color: var(--ink);
  }

  /* ============================================================
     TRAVELS strip
     ============================================================ */
  .travels { background: linear-gradient(135deg, #FFEFE0, #FFF7EF); }
  .dest-grid {
    display: grid; gap: clamp(.8rem, 2vw, 1.2rem);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .dest-card {
    background: #fff; border-radius: var(--radius-md); padding: 1.6rem 1rem;
    text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(58,36,24,0.05);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .dest-card:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow-md); }
  .dest-flag { font-size: clamp(2.4rem, 6vw, 3.2rem); line-height: 1; }
  .dest-card b { display: block; margin-top: .7rem; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }

  /* ============================================================
     KLOOK
     ============================================================ */
  .klook-card {
    position: relative; overflow: hidden;
    background: var(--grad-warm); color: #fff;
    border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem);
    box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: center;
  }
  .klook-card::after {
    content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255,255,255,0.14); top: -120px; right: -80px; pointer-events: none;
  }
  .klook-card .eyebrow { background: rgba(255,255,255,0.22); color: #fff; }
  .klook-card h2 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 2.7rem); margin-top: 1rem; }
  .klook-card p { color: rgba(255,255,255,0.95); font-weight: 600; margin-top: .85rem; max-width: 42ch; }
  .klook-right { position: relative; z-index: 1; }
  .promo-box {
    background: #fff; border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-md);
    color: var(--ink);
  }
  .promo-box label { font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
  .promo-row { display: flex; align-items: stretch; gap: .6rem; margin-top: .6rem; }
  .promo-code {
    flex: 1; min-width: 0; background: var(--cream); border: 2px dashed var(--coral);
    border-radius: 12px; padding: .85rem 1rem; font-family: var(--font-body); font-weight: 900;
    font-size: clamp(.85rem, 2.4vw, 1.05rem); letter-spacing: .02em; color: var(--coral-deep);
    display: flex; align-items: center; overflow-x: auto; white-space: nowrap;
  }
  .copy-btn {
    flex: none; background: var(--teal); color: #fff; border: none; border-radius: 12px;
    padding: 0 1.1rem; font-weight: 800; display: inline-flex; align-items: center; gap: .4rem;
    box-shadow: var(--shadow-sm); transition: background-color .18s ease, transform .15s ease;
  }
  .copy-btn:hover { background: var(--teal-deep); transform: translateY(-2px); }
  .copy-btn svg { width: 1.05em; height: 1.05em; }
  .copy-status {
    min-height: 1.3rem; margin-top: .7rem; font-weight: 800; font-size: .88rem; color: var(--teal-deep);
    display: flex; align-items: center; gap: .35rem;
  }
  .klook-benefit { margin-top: 1.1rem; font-size: .92rem; font-weight: 700; color: var(--ink-soft); }
  .klook-right .btn { margin-top: 1.2rem; width: 100%; }

  /* ============================================================
     FOLLOW
     ============================================================ */
  .follow-grid {
    display: grid; gap: clamp(1rem, 2.2vw, 1.4rem);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .social-card {
    display: flex; flex-direction: column; gap: .35rem;
    background: var(--card); border-radius: var(--radius-md); padding: 1.6rem;
    box-shadow: var(--shadow-sm); border: 1px solid rgba(58,36,24,0.05);
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative; overflow: hidden;
  }
  .social-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .social-card .s-icon {
    width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
    color: #fff; margin-bottom: .7rem; box-shadow: var(--shadow-sm);
  }
  .social-card .s-icon svg { width: 26px; height: 26px; fill: currentColor; }
  .social-card b { font-family: var(--font-display); font-size: 1.25rem; }
  .social-card span { color: var(--ink-soft); font-weight: 700; font-size: .92rem; }
  .social-card .s-go { margin-top: .9rem; font-weight: 800; color: var(--coral-deep); display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; }
  .social-card:hover .s-go svg { transform: translateX(4px); }
  .social-card .s-go svg { width: 1em; height: 1em; transition: transform .2s ease; }

  .s-youtube { background: #FF0000; }
  .s-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF 90%); }
  .s-tiktok { background: #111; }
  .s-facebook { background: #1877F2; }

  .follow-cta {
    text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem);
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  .footer {
    background: var(--ink); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
    position: relative; overflow: hidden;
  }
  .footer-top {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start;
    padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer .logo { color: #fff; }
  .footer .logo b { color: var(--amber); }
  .footer-tag { color: rgba(255,255,255,0.7); font-weight: 600; margin-top: .9rem; max-width: 46ch; }
  .footer-social { display: flex; gap: .7rem; justify-content: flex-end; flex-wrap: wrap; }
  .footer-social a {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255,255,255,0.08); transition: background-color .18s ease, transform .18s ease;
  }
  .footer-social a:hover { background: rgba(255,255,255,0.18); transform: translateY(-3px); }
  .footer-social svg { width: 20px; height: 20px; fill: #fff; }
  .footer-bottom {
    margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
    color: rgba(255,255,255,0.72); font-size: .85rem; font-weight: 600;
  }
  .footer-bottom .fine { max-width: 60ch; }
  .footer-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
  .footer-pills span { font-size: .8rem; font-weight: 800; padding: .3rem .7rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }

  /* ============================================================
     Scroll reveal
     ============================================================ */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 920px) {
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: inline-flex; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero .lede { margin-inline: auto; }
    .pillar-pills, .hero-ctas, .stats { justify-content: center; }
    .stats { justify-content: center; }
    .hero-portrait { order: -1; margin-bottom: 1rem; }
    .klook-card { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-social { justify-content: flex-start; }
  }
  @media (max-width: 540px) {
    .nav-inner { height: 64px; }
    .mobile-menu { inset-block-start: 64px; }
    .stats { gap: 1.2rem 1.6rem; }
    .stat { min-width: 28%; }
    .float-chip { font-size: .8rem; padding: .5rem .7rem; }
    .fc-1 { left: -2%; }
    .fc-2 { right: -2%; }
    .btn { width: 100%; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
  }