:root{
    --bg: #04060a;
    --card: #0c1712;
    --card-line: rgba(57,255,106,0.16);
    --green: #39ff6a;
    --green-soft: #7dffa3;
    --mint: #a8ffb8;
    --text: #eef7f0;
    --text-dim: #9fb3a6;
    --border: rgba(57,255,106,0.18);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  button, input, select, textarea{
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    background-color: transparent;
  }
  html{ scroll-behavior:smooth; }

  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
  }

  h1,h2,h3, .brand{ font-family: 'Baloo 2', sans-serif; }
  a{ color: inherit; text-decoration: none; }
  img{ max-width: 100%; display:block; }
  svg{ display:block; }

  /* ---------- Starfield + meteors ---------- */
  #starfield{
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse 900px 500px at 15% -5%, rgba(57,255,106,0.16), transparent 60%),
      radial-gradient(ellipse 700px 700px at 90% 15%, rgba(57,255,106,0.12), transparent 55%),
      radial-gradient(ellipse 800px 600px at 50% 100%, rgba(20,60,35,0.22), transparent 60%),
      #04060a;
  }
  #starfield::after{
    content:'';
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, transparent 1px, transparent 3px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, transparent 1px, transparent 3px);
    pointer-events: none;
  }
  .star{
    position: absolute;
    border-radius: 50%;
    background: #d7f0dd;
    animation: twinkle ease-in-out infinite;
  }
  .star.green{ background: var(--green); box-shadow: 0 0 8px var(--green); }
  .star.big{ box-shadow: 0 0 6px rgba(255,255,255,0.6); }
  @keyframes twinkle{
    0%, 100%{ opacity: var(--min-o, 0.25); }
    50%{ opacity: var(--max-o, 0.9); }
  }
  .moon{
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #c3ffd6, #1b5c34 75%);
    box-shadow: 0 0 40px rgba(57,255,106,0.18);
    opacity: 0.6;
  }
  .moon-ring{
    position: absolute;
    top: 50%; left: 50%;
    width: 195%; height: 56%;
    border: 2px solid rgba(168,255,184,0.65);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(57,255,106,0.35);
    transform: translate(-50%,-50%) rotate(-18deg);
  }
  .meteor{
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #eafff0;
    box-shadow: 0 0 10px 2px rgba(180,255,200,0.9);
    opacity: 0;
    animation: meteor-fall linear infinite;
  }
  .meteor::before{
    content:'';
    position: absolute;
    top: 50%; left: 50%;
    width: 220px; height: 2px;
    background: linear-gradient(90deg, rgba(200,255,215,0.95), rgba(120,255,150,0.35) 40%, transparent 90%);
    transform-origin: left center;
    transform: translate(-100%, -50%) rotate(180deg);
  }
  .meteor.thin::before{ height: 1px; width: 150px; }
  .meteor.big{ width: 4px; height: 4px; box-shadow: 0 0 16px 3px rgba(180,255,200,1); }
  .meteor.big::before{ width: 300px; height: 3px; }
  @keyframes meteor-fall{
    0%{ transform: translate(0,-10vh) rotate(35deg); opacity: 0; }
    3%{ opacity: 1; }
    35%{ opacity: 1; }
    45%{ opacity: 0; }
    100%{ transform: translate(60vw, 60vh) rotate(35deg); opacity: 0; }
  }
  .ufo{
    position: absolute;
    top: 0; left: 0;
    width: 40px;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(57,255,106,0.55));
    animation: ufo-fly-1 linear infinite;
  }
  .ufo.path-2{ animation-name: ufo-fly-2; }
  .ufo.path-3{ animation-name: ufo-fly-3; }
  .ufo.small{ width: 26px; }
  .ufo.big{ width: 52px; }
  .ufo-inner{ animation: ufo-bob ease-in-out infinite; }
  .ufo-inner svg{ display:block; width:100%; height:auto; }
  @keyframes ufo-bob{
    0%, 100%{ transform: translateY(0) rotate(-3deg); }
    50%{ transform: translateY(-6px) rotate(3deg); }
  }
  @keyframes ufo-fly-1{
    0%{ transform: translate(-15vw, 65vh) rotate(0deg); opacity: 0; }
    6%{ opacity: 1; }
    22%{ transform: translate(15vw, 20vh) rotate(-6deg); }
    38%{ transform: translate(35vw, 55vh) rotate(8deg); }
    55%{ transform: translate(55vw, 15vh) rotate(-7deg); }
    72%{ transform: translate(78vw, 48vh) rotate(6deg); }
    92%{ transform: translate(105vw, 22vh) rotate(0deg); opacity: 1; }
    100%{ transform: translate(120vw, 20vh) rotate(0deg); opacity: 0; }
  }
  @keyframes ufo-fly-2{
    0%{ transform: translate(110vw, 10vh) rotate(0deg); opacity: 0; }
    6%{ opacity: 1; }
    20%{ transform: translate(85vw, 45vh) rotate(6deg); }
    40%{ transform: translate(60vw, 8vh) rotate(-8deg); }
    58%{ transform: translate(38vw, 40vh) rotate(7deg); }
    76%{ transform: translate(12vw, 12vh) rotate(-5deg); }
    94%{ transform: translate(-12vw, 35vh) rotate(0deg); opacity: 1; }
    100%{ transform: translate(-20vw, 38vh) rotate(0deg); opacity: 0; }
  }
  @keyframes ufo-fly-3{
    0%{ transform: translate(20vw, -12vh) rotate(0deg); opacity: 0; }
    6%{ opacity: 1; }
    25%{ transform: translate(45vw, 18vh) rotate(-7deg); }
    45%{ transform: translate(10vw, 42vh) rotate(8deg); }
    65%{ transform: translate(50vw, 65vh) rotate(-6deg); }
    85%{ transform: translate(25vw, 88vh) rotate(5deg); opacity: 1; }
    100%{ transform: translate(35vw, 105vh) rotate(0deg); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .meteor{ animation: none; display:none; }
    .star{ animation: none; opacity: 0.6; }
    .ufo{ animation: none; display:none; }
    .ufo-inner{ animation: none; }
    html{ scroll-behavior: auto; }
  }

  /* ---------- Layout shell ---------- */
  .wrap{
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
  }
  section{ position: relative; z-index: 1; }
  @media (max-width: 900px){ .wrap{ padding: 0 32px; } }
  @media (max-width: 600px){ .wrap{ padding: 0 22px; } }

  /* ---------- Header ---------- */
  header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(4,6,10,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 14px 40px;
    max-width: 1040px;
    margin: 0 auto;
    gap: 16px;
  }
  .brand-mark{ display:flex; align-items:center; gap: 10px; min-width: 0; }
  .logo-slot{
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
  }
  .logo-slot img{ width:100%; height:100%; object-fit: cover; }
  .cta-grid{
    display:flex; flex-direction: column; align-items:center; text-align:center; gap: 12px;
  }
  .cta-mascot-wrap{
    width: 300px; height: 300px;
    position: relative;
    display:flex; align-items:center; justify-content:center;
    flex-shrink: 0;
  }
  .cta-mascot-wrap::before{
    content:'';
    position:absolute; inset: 8%;
    background: radial-gradient(circle, rgba(57,255,106,0.35), transparent 70%);
    filter: blur(30px);
    z-index: -1;
  }
  .cta-mascot-img{
    width:100%; height:100%; object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(57, 255, 106, 0.4));
  }
  .cta-text{ max-width: 480px; margin-bottom: 0; }
  @media (min-width: 860px){
    .cta-grid{
      display:grid; grid-template-columns: 1fr 1.1fr;
      align-items:center; gap: 56px; text-align:left;
      max-width: 900px; margin: 0 auto;
    }
    .cta-mascot-wrap{ width: 460px; height: 460px; margin: 0; }
    .cta-text{ max-width: none; }
    .cta-text .hero-actions{ justify-content:flex-start; }
  }
  .brand{
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .brand span{ color: var(--green); }
  .brand small{
    display:block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 9.5px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-actions{ display:flex; align-items:center; gap: 12px; flex-shrink: 0; }
  @media (max-width: 900px){ .header-inner{ padding: 14px 32px; } }
  @media (max-width: 600px){ .header-inner{ padding: 14px 22px; } }
  @media (max-width: 480px){
    .header-inner{ padding: 12px 16px; gap: 8px; }
    .logo-slot{ width: 38px; height: 38px; }
    .brand{ font-size: 14px; }
    .brand small{ display: none; }
    .header-actions{ gap: 8px; }
    .header-actions .btn-pill{ padding: 9px 14px; font-size: 12.5px; }
    .header-actions .header-services-btn{ display: none; }
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .btn:active{ transform: scale(0.98); }
  .btn-pill{
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13.5px;
  }
  .btn-primary{ background: var(--green); color: #04140a; }
  .btn-primary:hover{ box-shadow: 0 0 20px rgba(57,255,106,0.4); }
  .btn-ghost{ border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,0.02); }
  .btn-ghost:hover{ border-color: var(--green); color: var(--green); }
  .btn-lg{ padding: 15px 28px; border-radius: 999px; font-size: 15.5px; }

  .menu-btn{
    display:flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 4px; width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--card) !important;
    border: 1px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
  }
  .menu-btn span{ display:block; width: 16px; height: 2px; background: var(--green); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .menu-btn.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .menu-btn.open span:nth-child(2){ opacity: 0; }
  .menu-btn.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .nav-panel{
    position: fixed; top: 0; right: 0; height: 100vh;
    width: min(260px, 78vw);
    background: rgba(6,10,8,0.98);
    border-left: 1px solid var(--border);
    backdrop-filter: blur(14px);
    z-index: 60;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display:flex; flex-direction: column;
    padding: 74px 24px 20px;
    gap: 2px;
    overflow-y: auto;
  }
  .nav-panel.open{ transform: translateX(0); }
  .nav-panel a{
    display: flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--text);
    padding: 10px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
  }
  .nav-panel a:hover{ color: var(--green); }
  .navIcon{ width: 15px; height: 15px; flex-shrink: 0; }
  .nav-panel .panel-call{ margin-top: 12px; justify-content: center; color: var(--green); font-weight: 700; font-size: 14px; border-bottom: none; }
  .nav-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .nav-overlay.open{ opacity: 1; pointer-events: auto; }

  /* ---------- Hero ---------- */
  .hero{ padding: 60px 0 56px; text-align: center; }
  .hero-top{
    display:flex; flex-direction: column; align-items:center; gap: 20px;
  }
  .hero-visual{ display:flex; justify-content:center; width:100%; }
  .hero-headline{ display:flex; flex-direction:column; align-items:center; width:100%; }
  .hero-logo-img{ width:100%; max-width: 460px; height:auto; }
  .hero-headline h1{ font-size: clamp(22px, 5.5vw, 32px); }
  .hero-bottom{ margin-top: 32px; display:flex; flex-direction:column; align-items:center; }
  @media (min-width: 860px){
    .hero-top{
      flex-direction: row; align-items:center; justify-content:center;
      gap: 36px; text-align: left;
    }
    .hero-visual{ flex: 1.6; justify-content:flex-end; }
    .hero-headline{ flex: 1; align-items:flex-start; }
    .hero-headline h1{ margin-left:0; margin-right:0; }
    .hero-headline h1{ font-size: clamp(20px, 3.2vw, 30px); }
    .hero-logo-img{ max-width: 620px; }
    .hero-bottom{ align-items:flex-start; }
    .hero-bottom .lede{ margin-left:0; margin-right:0; }
    .hero-bottom .hero-actions{ justify-content:flex-start; }
    .hero-bottom .hero-badges{ justify-content:flex-start; }
  }
  @media (min-width: 1200px){
    .hero-logo-img{ max-width: 720px; }
  }
  .hero-tag{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mint);
    margin-bottom: 26px;
  }
  .hero-tag .pulse{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    flex-shrink: 0;
  }
  .hero h1{
    font-size: clamp(30px, 5.4vw, 52px);
    line-height: 1.12;
    font-weight: 700;
    max-width: 720px;
    margin: 0 auto 20px;
  }
  .hero h1 .accent{ color: var(--green); }
  .hero p.lede{ max-width: 540px; margin: 0 auto 32px; color: var(--text-dim); font-size: 16.5px; }
  .hero-actions{ display:flex; gap: 14px; justify-content:center; flex-wrap: wrap; margin-bottom: 36px; }
  .hero-badges{
    display:flex; justify-content:center; gap: 10px; flex-wrap: wrap;
  }
  .hero-badge{
    display:flex; align-items:center; gap: 7px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12.5px;
    color: var(--text-dim);
  }
  .hero-badge b{ color: var(--mint); font-weight: 700; }

  .hero-features{
    display:flex; flex-direction:column; gap:14px;
    width:100%; margin-top: 4px;
  }
  .hero-feature{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
  }
  .hero-feature-icon{
    width:42px; height:42px; border-radius:50%;
    background: rgba(57,255,106,0.09);
    border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .hero-feature-icon svg{ width:21px; height:21px; }
  .hero-feature-text{ display:flex; flex-direction:column; line-height:1.3; }
  .hero-feature-text b{ color: var(--mint); font-size:15.5px; }
  .hero-feature-text span{ color: var(--text-dim); font-size:13px; }
  @media (min-width: 640px){
    .hero-features{ flex-direction:row; gap:16px; }
    .hero-feature{ flex:1; }
  }

  /* ---------- Section headers ---------- */
  .section-head{ max-width: 560px; margin-bottom: 38px; }
  .section-head .tag{ color: var(--green); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
  .section-head h2{ font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; margin-bottom: 12px; }
  .section-head p{ color: var(--text-dim); font-size: 15.5px; }

  section.pad{ padding: 76px 0; }
  section.pad.alt{
    background: linear-gradient(180deg, transparent, rgba(57,255,106,0.025), transparent);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* ---------- Icon boxes (shared) ---------- */
  .icon-box{
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(57,255,106,0.09);
    border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    flex-shrink: 0;
  }
  .icon-box svg{ width: 22px; height: 22px; }

  /* ---------- Services ---------- */
  .service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 860px){ .service-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; } }
  @media (max-width: 560px){ .service-grid{ grid-template-columns: 1fr; } }
  .service-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 24px; }
  .service-card .icon-box{ margin-bottom: 16px; }
  .service-card h3{ font-size: 16.5px; font-weight: 700; margin-bottom: 7px; letter-spacing: 0.2px; }
  .service-card p{ color: var(--text-dim); font-size: 13.5px; }
  .service-card p.price{ color: var(--mint); font-weight: 700; font-size: 13px; margin-top: 10px; }

  /* ---------- Pricing ---------- */
  .pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 860px){ .pricing-grid{ grid-template-columns: 1fr; } }
  .price-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 24px; display:flex; flex-direction: column; }
  .price-card.featured{ border-color: var(--green); box-shadow: 0 0 30px rgba(57,255,106,0.08); position: relative; }
  .price-card .badge{
    position: absolute; top: -12px; left: 24px;
    background: var(--green); color: #04140a;
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  }
  .price-card h3{ font-size: 14px; font-weight: 700; color: var(--text-dim); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Inter', sans-serif; }
  .price-card .amount{ font-family: 'Baloo 2', sans-serif; font-size: 32px; font-weight: 700; color: var(--green); margin-bottom: 6px; }
  .price-card .amount small{ font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-dim); font-weight: 500; }
  .price-card .note{ color: var(--text-dim); font-size: 13.5px; margin-bottom: 20px; }
  .price-card ul{ list-style:none; margin-bottom: 22px; flex-grow: 1; }
  .price-card li{ font-size: 13.5px; color: var(--text); padding: 7px 0; padding-left: 22px; position: relative; border-top: 1px solid rgba(255,255,255,0.05); }
  .price-card li:first-child{ border-top: none; }
  .price-card li::before{ content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }

  .warranty-strip{
    margin-top: 32px; display:flex; align-items:center; gap: 18px;
    background: rgba(57,255,106,0.05); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 22px 26px;
  }
  .warranty-strip .icon-box{ width: 50px; height: 50px; }
  .warranty-strip .icon-box svg{ width: 26px; height: 26px; }
  .warranty-strip h4{ font-family: 'Baloo 2', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 3px; }
  .warranty-strip p{ font-size: 13.5px; color: var(--text-dim); }

  /* ---------- Service area (reworked, no orbit graphic) ---------- */
  .area-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
  @media (max-width: 780px){ .area-list{ grid-template-columns: 1fr; } }
  .area-item{
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 20px;
  }
  .area-item.hq{ border-color: var(--green); box-shadow: 0 0 24px rgba(57,255,106,0.08); }
  .area-item .dot-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 8px; }
  .area-item .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0; }
  .area-item strong{ font-size: 15px; font-family: 'Baloo 2', sans-serif; }
  .area-item span{ display:block; font-size: 13px; color: var(--text-dim); margin-top: 4px; }
  .area-note{
    display:flex; align-items:center; gap: 12px;
    color: var(--text-dim); font-size: 14px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px 20px;
  }

  /* ---------- How it works ---------- */
  .steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  @media (max-width: 860px){ .steps{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .steps{ grid-template-columns: 1fr; } }
  .step .num{
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--green); color: #04140a;
    font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 14px;
  }
  .step h3{ font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
  .step p{ font-size: 13.5px; color: var(--text-dim); }

  /* ---------- Reviews ---------- */
  .review-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 860px){ .review-grid{ grid-template-columns: 1fr; } }
  .review-card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
  .stars{ color: var(--green); font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
  .review-card p.quote{ font-size: 14px; color: var(--text); margin-bottom: 16px; }
  .review-author{ display:flex; align-items:center; gap: 10px; }
  .review-avatar{
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(57,255,106,0.12); border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px; color: var(--green);
    flex-shrink: 0;
  }
  .review-author-text b{ display:block; font-size: 13px; }
  .review-author-text span{ display:block; font-size: 11.5px; color: var(--text-dim); }

  /* ---------- Booking ---------- */
  .booking-wrap{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; }
  @media (max-width: 860px){ .booking-wrap{ grid-template-columns: 1fr; } }
  .booking-info h3{ font-size: 19px; font-weight: 700; margin-bottom: 14px; }
  .booking-info p{ color: var(--text-dim); font-size: 14.5px; margin-bottom: 20px; }
  .contact-line{ display:flex; align-items:center; gap: 12px; margin-bottom: 14px; font-size: 14.5px; }
  .contact-line .icon-box{ width: 36px; height: 36px; }
  .contact-line .icon-box svg{ width: 18px; height: 18px; }

  form{
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px; display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  form .full{ grid-column: 1 / -1; }
  label{ display:block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; }
  input, select, textarea{
    width: 100%; background: #05100a; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px 13px; color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 14px;
  }
  input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(57,255,106,0.12); }
  textarea{ resize: vertical; min-height: 90px; }
  form .submit-btn{ grid-column: 1 / -1; border: none; cursor: pointer; margin-top: 6px; justify-content: center; background: var(--green); color: #04140a; }
  form small{ grid-column: 1 / -1; color: var(--text-dim); font-size: 12px; }
  #formStatus{ font-size: 13.5px; font-weight: 600; min-height: 1px; }
  #formStatus:empty{ display: none; }
  @media (max-width: 560px){ form{ grid-template-columns: 1fr; padding: 22px; } }

  /* ---------- Footer ---------- */
  footer{ border-top: 1px solid var(--border); padding: 36px 0; }
  .footer-inner{ display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 20px; }
  .footer-links{ display:flex; gap: 22px; font-size: 13.5px; color: var(--text-dim); flex-wrap: wrap; }
  .footer-links a:hover{ color: var(--green); }
  .footer-copy{
    text-align:center; color: var(--text-dim); font-size: 12.5px;
    margin-top: 26px; border-top: 1px solid var(--border); padding-top: 20px;
  }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline: 2px solid var(--green); outline-offset: 2px;
  }