:root{
    --blue-deep:#122E6B;
    --blue:#1B4EC7;
    --blue-soft:#EAF0FD;
    --yellow:#FFC72C;
    --green:#1E9E4E;
    --green-soft:#E9F8EE;
    --ink:#101828;
    --ink-soft:#5B6474;
    --line:#E7EAF1;
    --white:#ffffff;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:#F4F6FB;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{font-family:'Poppins',sans-serif;}
  img,svg{display:block;}
  button{font-family:inherit; cursor:pointer; border:none;}
  a{text-decoration:none; color:inherit;}

  /* ============ shared bits ============ */
  .pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:.04em;
  }
  .pill.green{background:var(--green-soft); color:var(--green);}
  .pill.blue{background:var(--blue-soft); color:var(--blue);}

  .cta{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; border-radius:999px; color:#fff; font-weight:700;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .cta:hover{transform:translateY(-1px);}
  .cta.green{background:linear-gradient(180deg,#26B85E,#1C9A4C); box-shadow:0 6px 14px rgba(30,158,78,.28);}
  .cta.blue{background:linear-gradient(180deg,#2857DB,#1B41B0); box-shadow:0 6px 14px rgba(27,78,199,.28);}

  .feat-row{display:flex; align-items:flex-start; gap:6px;}
  .feat-row svg{flex:none; margin-top:1px;}
  .feat-row span{line-height:1.15;}

  /* =====================================================================
     MOBILE — normal scrolling page, matches the reference app screenshot
     ===================================================================== */
  .mobile-shell{
    max-width:480px;
    margin:0 auto;
    background:var(--white);
    min-height:100dvh;
    padding:16px 18px 90px;
    position:relative;
  }

  .m-topbar{display:flex; align-items:center; justify-content:space-between;}
  .m-back{
    width:40px; height:40px; border-radius:12px; background:var(--white);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(16,24,40,.05); flex:none;
  }
  .m-brand{display:flex; flex-direction:column; align-items:center; gap:6px;}
  .m-logo{width:44px; height:44px; border-radius:13px; background:var(--yellow); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(255,199,44,.4); border:2px solid #E9AE00;}
  .m-logo svg{width:24px; height:24px;}
  .m-brand-text{text-align:center;}
  .m-brand-text .name{font-size:17px; font-weight:800; color:var(--blue); letter-spacing:.01em; line-height:1.1;}
  .m-brand-text .name b{color:var(--ink);}
  .m-brand-text .tag{font-size:10px; color:var(--blue); font-style:italic; font-weight:600; opacity:.85; margin-top:1px;}
  .m-bell{
    width:40px; height:40px; border-radius:12px; background:var(--white);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative;
    box-shadow:0 2px 6px rgba(16,24,40,.05); flex:none;
  }
  .m-bell .dot{position:absolute; top:-4px; right:-4px; background:#E8384F; color:#fff; font-size:10px; font-weight:800; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff;}

  .m-heading{margin-top:22px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
  .m-heading h1{font-size:26px; font-weight:800; color:var(--blue-deep);}
  .m-heading p{font-size:13px; color:var(--ink-soft); margin-top:4px;}
  .m-how{
    flex:none; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
    padding:8px 13px; border-radius:999px; border:1px solid var(--line); color:var(--ink); white-space:nowrap; margin-top:2px;
  }

  .m-card{
    margin-top:18px;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    padding:18px;
    overflow:hidden;
  }
  .m-card.tour-group{background:linear-gradient(180deg,#F2FBF4,#FFFFFF 55%);}
  .m-card.tour-private{background:linear-gradient(180deg,#F0F4FE,#FFFFFF 55%);}

  .m-card .pill{font-size:10.5px; padding:5px 11px;}
  .m-card h2{font-size:26px; font-weight:800; margin-top:10px;}
  .m-card.tour-group h2{color:var(--green);}
  .m-card.tour-private h2{color:var(--blue);}
  .m-card p.desc{font-size:13.5px; color:var(--ink-soft); line-height:1.4; margin-top:5px; max-width:70%;}

  .m-art{
    margin-top:-46px; margin-bottom:12px; border-radius:14px; overflow:hidden;
    height:150px; position:relative; background:#DCE9E0;
  }
  .m-card.tour-private .m-art{background:#DCE3F5;}
  .m-art img{width:100%; height:100%; object-fit:cover;}
  .m-art .ph-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; font-size:11px; font-weight:700; color:#7A8AA0; padding:0 20px; line-height:1.4;
  }

  .m-chips{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; margin-top:14px;}
  .m-chip{
    display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--white); border:1px solid var(--line);
    border-radius:12px; padding:10px 4px; font-size:10.5px; font-weight:700; color:var(--ink); text-align:center;
  }
  .m-chip svg{width:22px; height:22px; flex:none;}

  .m-feats{display:flex; flex-wrap:wrap; row-gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(16,24,40,.06);}
  .m-feats .feat-row{width:50%; font-size:11.5px; font-weight:700;}
  .m-feats svg{width:18px; height:18px;}

  .m-cta{margin-top:16px; padding:14px; font-size:14.5px;}

  .m-help{
    margin-top:18px; display:flex; align-items:center; justify-content:space-between;
    gap:10px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:14px 16px;
  }
  .m-help .txt strong{font-size:14.5px; display:block;}
  .m-help .txt span{font-size:11.5px; color:var(--ink-soft);}
  .m-help .btns{display:flex; gap:8px; flex:none;}
  .m-help .btns a{
    display:flex; align-items:center; gap:6px; padding:9px 12px; border-radius:9px; color:#fff; font-weight:700; font-size:11.5px;
  }
  .m-help .btns a.wa{background:#25D366;}
  .m-help .btns a.call{background:var(--blue);}
  .m-help .btns a svg{width:14px; height:14px;}

  .m-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    max-width:480px; margin:0 auto;
    background:#fff; display:flex; align-items:center; justify-content:space-around;
    padding:10px 8px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(16,24,40,.06);
  }
  .m-nav a{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; color:var(--ink-soft); font-weight:600;}
  .m-nav a svg{width:21px; height:21px;}
  .m-nav a.active{color:var(--blue);}
  .m-nav .fab{
    width:48px; height:48px; margin-top:-26px; border-radius:50%; background:var(--blue);
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(27,78,199,.4);
  }
  .m-nav .fab svg{width:22px; height:22px;}

  /* =====================================================================
     DESKTOP VIEW — professional rebuild
     ===================================================================== */
  .desktop-shell{display:none;}

  @media (min-width:900px){
    .mobile-shell{display:none;}
    .desktop-shell{
      display:block;
      --paper:#F8F5EF;
      --paper-raised:#FFFFFF;
      --ink-d:#161A22;
      --muted-d:#666B78;
      --line-d:#E5E0D3;
      --blue-deep-d:#0F2A5C;
      --blue-d:#1B4EC7;
      --green-d:#14683A;
      --gold-d:#C98A12;
      font-family:'Inter',sans-serif;
      background:var(--paper);
      color:var(--ink-d);
    }
    .desktop-shell .disp{font-family:'Fraunces',serif;}

    /* ---------- nav ---------- */
    .d-nav{
      position:sticky; top:0; z-index:50;
      display:flex; align-items:center; justify-content:space-between;
      padding:18px 64px; background:rgba(248,245,239,.86); backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line-d);
    }
    .d-brand{display:flex; align-items:center; gap:12px;}
    .d-logo{width:42px; height:42px; border-radius:11px; background:var(--yellow); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(201,138,18,.3);}
    .d-logo svg{width:24px; height:24px;}
    .d-brand-text .name{font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--blue-deep-d); letter-spacing:.01em;}
    .d-brand-text .name b{font-weight:700;}
    .d-brand-text .tag{font-size:10.5px; color:var(--gold-d); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-top:1px;}

    .d-links{display:flex; align-items:center; gap:40px;}
    .d-links a{font-size:14px; font-weight:500; color:var(--muted-d); position:relative; padding:6px 0;}
    .d-links a.active{color:var(--ink-d); font-weight:600;}
    .d-links a.active::after{content:"";position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--gold-d); border-radius:2px;}
    .d-links a:hover{color:var(--ink-d);}

    .d-actions{display:flex; align-items:center; gap:18px;}
    .d-bell{width:40px; height:40px; border-radius:11px; border:1px solid var(--line-d); display:flex; align-items:center; justify-content:center; position:relative; background:var(--paper-raised);}
    .d-bell .dot{position:absolute; top:-3px; right:-3px; background:#C6392E; color:#fff; font-size:9.5px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);}
    .d-signup{
      display:flex; align-items:center; gap:8px;
      padding:11px 20px; border-radius:10px; background:var(--blue-deep-d); color:#fff; font-weight:600; font-size:13.5px;
      box-shadow:0 8px 18px rgba(15,42,92,.22); transition:transform .15s ease, box-shadow .15s ease;
    }
    .d-signup:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,42,92,.28);}
    .d-signup svg{width:15px; height:15px;}

    /* ---------- hero ---------- */
    .d-hero{
      max-width:1280px; margin:0 auto; padding:76px 64px 60px;
      display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px;
    }
    .d-eyebrow{
      display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
      letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d);
    }
    .d-eyebrow::before{content:""; width:22px; height:1.5px; background:var(--gold-d);}
    .d-hero h1{
      font-family:'Fraunces',serif; font-weight:600; font-size:52px; line-height:1.06;
      color:var(--ink-d); letter-spacing:-.01em; margin-top:18px; max-width:560px;
    }
    .d-hero h1 em{font-style:italic; color:var(--blue-deep-d);}
    .d-hero p.lead{font-size:16.5px; color:var(--muted-d); margin-top:20px; max-width:460px; line-height:1.6;}

    .d-hero-ctas{display:flex; align-items:center; gap:14px; margin-top:32px;}
    .d-hero-ctas a.primary{
      display:flex; align-items:center; gap:9px; padding:14px 24px; border-radius:10px;
      background:var(--ink-d); color:#fff; font-weight:600; font-size:14.5px;
      box-shadow:0 10px 22px rgba(22,26,34,.18); transition:transform .15s ease;
    }
    .d-hero-ctas a.primary:hover{transform:translateY(-2px);}
    .d-hero-ctas a.secondary{
      display:flex; align-items:center; gap:8px; padding:14px 6px; font-weight:600; font-size:14.5px; color:var(--ink-d);
      border-bottom:1.5px solid var(--ink-d);
    }

    .d-trust{display:flex; align-items:center; gap:28px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line-d); max-width:480px;}
    .d-trust .stat b{font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--ink-d); display:block;}
    .d-trust .stat span{font-size:11.5px; color:var(--muted-d); font-weight:500;}

    /* route graphic */
    .d-route-wrap{position:relative;}
    .d-route-wrap svg{width:100%; height:auto; display:block;}

    /* ---------- section label ---------- */
    .d-section-head{max-width:1280px; margin:0 auto; padding:0 64px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px;}
    .d-section-head h2{font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:var(--ink-d);}
    .d-section-head p{font-size:14px; color:var(--muted-d); margin-top:6px; max-width:420px;}
    .d-how{
      flex:none; display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
      padding:11px 18px; border-radius:10px; border:1px solid var(--line-d); color:var(--ink-d); white-space:nowrap; background:var(--paper-raised);
    }
    .d-how:hover{border-color:var(--ink-d);}

    /* ---------- package cards ---------- */
    .d-grid{
      max-width:1280px; margin:32px auto 0; padding:0 64px;
      display:grid; grid-template-columns:1fr 1fr; gap:30px;
    }

    .d-card{
      background:var(--paper-raised);
      border-radius:20px; border:1px solid var(--line-d);
      display:flex; flex-direction:column; overflow:hidden;
      transition:transform .2s ease, box-shadow .2s ease;
      box-shadow:0 1px 2px rgba(22,26,34,.04);
    }
    .d-card:hover{transform:translateY(-4px); box-shadow:0 24px 40px -18px rgba(22,26,34,.18);}

    .d-art{position:relative; height:230px; overflow:hidden; background:#E7E1D2;}
    .d-card.private .d-art{background:#E4E9F3;}
    .d-art img{width:100%; height:100%; object-fit:cover; display:block;}
    .d-art .ph-label{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
      text-align:center; font-size:12px; font-weight:600; color:#8B8371; padding:0 30px; line-height:1.5;
    }
    .d-card.private .d-art .ph-label{color:#7885A3;}
    .d-art .d-badge{
      position:absolute; top:16px; left:16px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
      padding:7px 13px; border-radius:999px; backdrop-filter:blur(6px);
    }
    .d-card.group .d-badge{background:rgba(20,104,58,.92); color:#fff;}
    .d-card.private .d-badge{background:rgba(15,42,92,.92); color:#fff;}

    .d-card-body{padding:30px 32px 32px; display:flex; flex-direction:column; flex:1;}
    .d-card h3{font-family:'Fraunces',serif; font-size:27px; font-weight:600;}
    .d-card.group h3{color:var(--green-d);}
    .d-card.private h3{color:var(--blue-deep-d);}
    .d-card p.desc{font-size:14.5px; color:var(--muted-d); margin-top:8px; line-height:1.55;}

    .d-chips{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:22px;}
    .d-chip{border:1px solid var(--line-d); border-radius:11px; padding:11px 8px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;}
    .d-chip svg{width:22px; height:22px;}
    .d-chip span{font-size:11.5px; font-weight:600; line-height:1.25;}
    .d-chip small{display:block; font-size:9.5px; font-weight:500; color:var(--muted-d);}

    .d-feats{display:flex; flex-direction:column; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-d);}
    .d-feats .feat-row{font-size:13px; font-weight:500; color:var(--ink-d); width:auto;}
    .d-feats svg{width:17px; height:17px;}

    .d-cta{
      margin-top:26px; padding:15px; font-size:14.5px; border-radius:10px;
      background:none; box-shadow:none;
    }
    .d-card.group .d-cta{background:var(--green-d);}
    .d-card.private .d-cta{background:var(--blue-deep-d);}
    .d-card.group .d-cta:hover{background:#0E4F2B;}
    .d-card.private .d-cta:hover{background:#0B1F45;}

    /* ---------- help banner ---------- */
    .d-help{
      max-width:1280px; margin:64px auto 0; padding:30px 40px;
      display:flex; align-items:center; justify-content:space-between; gap:20px;
      background:var(--ink-d); border-radius:20px; color:#fff;
    }
    .d-help .txt{display:flex; align-items:center; gap:16px;}
    .d-help .txt .ic{width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex:none;}
    .d-help .txt strong{font-family:'Fraunces',serif; font-size:19px; font-weight:600; display:block;}
    .d-help .txt span{font-size:13px; color:#B7BAC4;}
    .d-help .btns{display:flex; gap:12px;}
    .d-help .btns a{display:flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px; color:#fff; font-weight:600; font-size:13.5px;}
    .d-help .btns a.wa{background:#25D366;}
    .d-help .btns a.call{background:var(--gold-d); color:#1a1305;}
    .d-help .btns a svg{width:16px; height:16px;}

    /* ---------- footer ---------- */
    .d-footer{margin-top:72px; background:var(--blue-deep-d); color:#fff;}
    .d-footer-inner{max-width:1280px; margin:0 auto; padding:58px 64px 30px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px;}
    .d-footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
    .d-footer-brand .d-logo{width:36px; height:36px; border-radius:9px;}
    .d-footer-brand .name{font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:#fff;}
    .d-footer p.about{font-size:13.5px; color:#A8B4D6; line-height:1.65; max-width:300px;}
    .d-footer h4{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:#7488B8; margin-bottom:16px; font-weight:700;}
    .d-footer ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
    .d-footer ul a{font-size:13.5px; color:#D2D9EE;}
    .d-footer ul a:hover{color:#fff;}
    .d-footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:20px 64px; display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:0 auto; font-size:12.5px; color:#7488B8;}
    .d-social{display:flex; gap:10px;}
    .d-social a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;}
    .d-social a svg{width:15px; height:15px;}
    .d-social a:hover{background:rgba(255,255,255,.16);}
  }