:root{
    --bg:#fbfaf7;
    --ink:#161a1f;
    --ink-mid:#5b6068;
    --ink-faint:#9a9da3;
    --line:#e9e6de;
    --card:#ffffff;
    --blue:#2c5aa0;
    --blue-soft:#eaf1fa;
    --green:#1f8f5f;
    --green-soft:#e6f5ee;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html, body{height:100%;}
  body{
    min-height:100vh;
    background:var(--bg);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    line-height:1.5;
    display:flex;
    flex-direction:column;
  }
  .page-main{flex:1 0 auto;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  @media (max-width:480px){
    .wrap{padding:0 18px;}
  }
  .mono{font-family:'JetBrains Mono',monospace;}

  /* ---------- floating nav ---------- */
  .nav-shell{padding:20px 0;}
  nav{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px 12px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    box-shadow:0 1px 2px rgba(20,20,15,0.04);
  }
  .logo{flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .nav-links{min-width:0;}
  .pill-btn{flex-shrink:0;}
  .logo{
    font-weight:800;
    font-size:16px;
    letter-spacing:-0.01em;
  }
  .logo .dot{
    display:inline-block;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--green);
    margin-right:8px;
    vertical-align:middle;
  }
  .nav-links{
    display:flex;
    gap:28px;
    font-size:14px;
    font-weight:500;
    color:var(--ink-mid);
  }
  .nav-links a.active{color:var(--ink); font-weight:700;}
  .logo{text-decoration:none; color:inherit;}
  .pill-btn{
    background:var(--ink);
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:11px 20px;
    border-radius:10px;
  }

  /* ---------- hero ---------- */
  .hero{
    border-radius:8px;
    overflow:hidden;
    position:relative;
    background:#0e1420;
    min-height:520px;
    padding:52px 48px 90px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  /* scaled-down replica of the real dashboard, used as the hero's "photo" */
  .dash-shot{
    position:absolute;
    top:-40px; right:-60px;
    width:780px;
    transform:scale(1.05) rotate(1.2deg);
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 30px 60px rgba(0,0,0,0.4);
    overflow:hidden;
    opacity:0.92;
  }
  .dash-shot-inner{
    background:#0a0a0d;
    padding:18px 20px;
    font-family:'JetBrains Mono',monospace;
  }
  .ds-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
  .ds-brand{font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; color:#f2f3f5;}
  .ds-brand span{color:#f0a83c;}
  .ds-clock{font-size:11px; color:#5a5d66;}
  .ds-row{display:grid; grid-template-columns:1fr 1.3fr; gap:12px; margin-bottom:10px;}
  .ds-card{background:#151519; border:1px solid #232329; border-radius:10px; padding:14px;}
  .ds-label{font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:#9497a0; margin-bottom:8px;}
  .ds-dep{display:grid; grid-template-columns:34px 1fr 44px; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid #232329; font-size:10px;}
  .ds-dep:last-child{border-bottom:none;}
  .ds-badge{background:rgba(240,168,60,0.14); color:#f0a83c; border-radius:4px; text-align:center; padding:3px 0; font-weight:700;}
  .ds-dest{color:#f2f3f5; font-family:'Manrope',sans-serif; font-weight:500; font-size:11px;}
  .ds-eta{text-align:right; color:#f2f3f5; font-weight:700;}
  .hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(100deg, #0e1420 0%, #0e1420 32%, rgba(14,20,32,0.7) 52%, rgba(14,20,32,0.15) 74%);
    pointer-events:none;
  }
  .hero-content{position:relative; z-index:2;}
  .hero-tag{
    align-self:flex-start;
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:13px;
    font-weight:600;
    padding:8px 16px;
    border-radius:10px;
    margin-bottom:auto;
  }
  h1{
    color:#fff;
    font-size:44px;
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.15;
    max-width:460px;
    margin-bottom:16px;
    overflow-wrap:break-word;
  }
  .hero-sub{
    color:rgba(255,255,255,0.75);
    font-size:16px;
    max-width:460px;
    font-weight:500;
  }

  /* floating widget overlapping hero bottom edge */
  .float-widget{
    background:var(--card);
    border-radius:10px;
    box-shadow:0 12px 32px rgba(20,20,15,0.12);
    padding:20px 24px;
    margin:-56px 32px 0;
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr auto;
    gap:0;
    align-items:center;
  }
  .fw-item{padding:0 20px; border-right:1px solid var(--line);}
  .fw-item:first-child{padding-left:4px;}
  .fw-label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:4px;}
  .fw-value{font-weight:700; font-size:15px;}
  .fw-value.green{color:var(--green);}
  .fw-cta{
    background:var(--ink);
    color:#fff;
    font-weight:600;
    font-size:14px;
    padding:13px 22px;
    border-radius:12px;
    margin-left:16px;
    white-space:nowrap;
  }

  /* ---------- sections ---------- */
  section{padding:96px 0 0;}
  .section-head{text-align:center; max-width:560px; margin:0 auto 44px;}
  .eyebrow{
    font-size:13px;
    font-weight:700;
    color:var(--green);
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-bottom:12px;
  }
  h2{font-size:30px; font-weight:800; letter-spacing:-0.01em;}
  .section-head p{color:var(--ink-mid); margin-top:10px; font-size:15px;}

  /* three-card row (mirrors the trip-card layout) */
  .card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
  }
  .card-art{
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .card-art .badge{
    position:absolute; top:14px; left:14px;
    background:rgba(255,255,255,0.9);
    font-size:12px; font-weight:700;
    padding:5px 11px;
    border-radius:8px;
  }
  .card-body{padding:20px 20px 24px;}
  .card-body h3{font-size:16px; font-weight:700; margin-bottom:8px;}
  .card-body p{font-size:13.5px; color:var(--ink-mid);}

  /* icon-column section (mirrors "reason travelers choose") */
  .icon-row{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center;}
  .icon-item .icon-badge{
    width:44px; height:44px;
    border-radius:12px;
    background:var(--blue-soft);
    color:var(--blue);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace;
    font-weight:700;
    margin:0 auto 14px;
  }
  .icon-item h3{font-size:15px; font-weight:700; margin-bottom:6px;}
  .icon-item p{font-size:13px; color:var(--ink-mid);}

  /* pilot CTA band */
  .pilot-band{
    background:var(--green-soft);
    border-radius:10px;
    padding:52px 48px;
    text-align:center;
    margin-top:96px;
  }
  .pilot-band h2{max-width:480px; margin:0 auto 12px;}
  .pilot-band p{color:var(--ink-mid); max-width:440px; margin:0 auto 26px; font-size:15px;}

  .pilot-form{
    max-width:420px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    text-align:left;
  }
  .pilot-form input,
  .pilot-form textarea{
    font-family:'Manrope',sans-serif;
    font-size:16px;
    padding:13px 16px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
  }
  .pilot-form textarea{resize:vertical; min-height:88px;}
  .pilot-form input:focus,
  .pilot-form textarea:focus{outline:2px solid var(--green); outline-offset:1px;}
  .pilot-form button{
    background:var(--ink);
    color:#fff;
    font-weight:600;
    font-size:14px;
    padding:13px 22px;
    border-radius:12px;
    border:none;
    cursor:pointer;
    font-family:'Manrope',sans-serif;
  }
  .pilot-form button:hover{background:#000;}
  .form-note{font-size:12px; color:var(--ink-faint); margin-top:10px; text-align:center;}

  /* footer */
  footer{
    background:var(--ink);
    color:rgba(255,255,255,0.6);
    margin-top:auto;
    padding:52px 0 28px;
    flex-shrink:0;
  }
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:32px;
    padding-bottom:36px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .footer-brand .f-logo{
    color:#fff;
    font-weight:800;
    font-size:16px;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }
  .footer-brand .f-logo .dot{width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block;}
  .footer-brand p{font-size:13px; max-width:220px; color:rgba(255,255,255,0.45);}
  .footer-col h4{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(255,255,255,0.4);
    margin-bottom:14px;
    font-weight:700;
  }
  .footer-col a, .footer-col span{
    display:block;
    font-size:13.5px;
    color:rgba(255,255,255,0.72);
    margin-bottom:10px;
  }
  .footer-col a:hover{color:#fff;}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:22px;
    font-size:12px;
    color:rgba(255,255,255,0.35);
  }
  .footer-bottom a{color:rgba(255,255,255,0.5);}
  .footer-bottom a:hover{color:#fff;}

  /* nav links get their own, wider breakpoint — the logo + 3 links + button
     need more room than the rest of the tablet layout does, and flex items
     don't shrink below their text width by default, so leaving this tied
     to the 820px breakpoint left a cramped zone where they'd overlap. */
  @media (max-width:900px){
    .nav-links{display:none;}
  }

  @media (max-width:820px){
    .card-row, .icon-row{grid-template-columns:1fr 1fr;}
    .float-widget{grid-template-columns:1fr 1fr; row-gap:14px; margin:-40px 16px 0; padding:18px;}
    .fw-item{border-right:none; padding:0;}
    .fw-cta{grid-column:span 2; margin-left:0; text-align:center;}
    h1{font-size:30px; max-width:100%;}
    .hero{padding:40px 28px 70px; min-height:auto;}
    .dash-shot{display:none;}
    .hero-overlay{background:#0e1420;}
    .pilot-band{padding:36px 24px;}
  }

  @media (max-width:560px){
    .card-row, .icon-row{grid-template-columns:1fr;}
    .float-widget{grid-template-columns:1fr; margin:-32px 12px 0; padding:16px;}
    .fw-item{border-bottom:1px solid var(--line); padding:10px 0;}
    .fw-item:first-child{padding-top:0;}
    .fw-item:last-of-type{border-bottom:none;}
    .fw-cta{grid-column:1; margin-top:6px;}
    nav{padding:10px 10px 10px 16px;}
    .logo{font-size:14px;}
    .pill-btn{padding:9px 14px; font-size:13px;}
    h1{font-size:25px; max-width:100%;}
    .hero-sub{font-size:14.5px;}
    .hero{padding:32px 20px 56px; min-height:auto; border-radius:10px;}
    .dash-shot{display:none;}
    .hero-overlay{background:#0e1420;}
    .hero-tag{font-size:12px;}
    h2{font-size:22px;}
    .pilot-band{padding:28px 18px; border-radius:10px;}
    footer{padding:32px 0 24px;}
    .footer-top{grid-template-columns:1fr; gap:26px; padding-bottom:26px;}
    .footer-brand p{max-width:none;}
    .footer-bottom{flex-direction:column; gap:8px; text-align:center; padding-top:18px;}
  }