:root{
    --ocean:#0B3D62;
    --ocean-deep:#082B47;
    --brand-blue:#2E9FD1;
    --brand-blue-deep:#1C7FAE;
    --sun:#FF7A33;
    --sand:#F4F8FA;
    --sand-2:#E8F1F6;
    --teal:#1F9E96;
    --ink:#16232C;
    --ink-soft:#4B5A63;
    --line:#DCE6EC;
    --paper:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    position:relative;
    background-color:var(--sand);
    background-image:
      radial-gradient(1.3px 1.3px at 4px 4px, rgba(11,61,98,.16) 0, transparent 1.4px),
      radial-gradient(1.3px 1.3px at 34px 18px, rgba(11,61,98,.12) 0, transparent 1.4px),
      radial-gradient(1.3px 1.3px at 18px 40px, rgba(11,61,98,.10) 0, transparent 1.4px),
      radial-gradient(1.3px 1.3px at 52px 52px, rgba(11,61,98,.14) 0, transparent 1.4px),
      radial-gradient(1.3px 1.3px at 68px 12px, rgba(11,61,98,.08) 0, transparent 1.4px);
    background-size:76px 76px;
    color:var(--ink);
    font-family:'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    margin:0;
    color:var(--ocean-deep);
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

  header, .sky, section, footer{position:relative; z-index:1;}

  .sky{
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse 120% 90% at 50% -10%, #EAF3F7 0%, var(--sand) 55%);
  }
  .sky-map{
    position:absolute; inset:0;
    pointer-events:none;
    opacity:.4;
  }
  .sky-map svg{width:100%; height:100%; display:block;}

  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,249,242,.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .header-row{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
  .logo-mark{font-family:'Fraunces', serif; font-weight:700; font-size:20px; color:var(--ocean-deep); text-decoration:none;}
  .logo-mark span{color:var(--sun);}
  .badge{font-size:11px; padding:4px 9px; border-radius:100px; background:var(--ocean); color:#fff; font-family:'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;}
  .badge a{text-decoration:none; color:#fff; opacity:.85;}
  .badge a:hover{opacity:1;}

  /* hero */
  .hero{padding:44px 0 36px;}
  .hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;}
  .hero-card{
    position:relative; z-index:1;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:20px;
    padding:28px 32px;
    box-shadow:0 20px 44px -24px rgba(11,61,98,.28);
  }
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--brand-blue-deep); font-family:'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px;}
  .eyebrow::before{content:""; width:20px; height:1px; background:var(--brand-blue-deep);}
  h1.headline{font-size:clamp(32px,4.6vw,50px); line-height:1.08; font-weight:600;}
  h1.headline em{font-style:italic; color:var(--sun); font-weight:500;}
  .lede{margin-top:14px; font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:46ch;}

  .hero-ctas{margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:100px;
    font-weight:700; font-size:15px; text-decoration:none;
    font-family:'Plus Jakarta Sans', sans-serif;
    border:none; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .btn-primary{background:var(--brand-blue); color:#fff; box-shadow:0 14px 30px -10px rgba(28,127,174,.5);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{background:transparent; color:var(--ocean-deep); border:1.5px solid var(--line);}
  .btn-ghost:hover{border-color:var(--ocean-deep);}

  .hero-note{margin-top:18px; display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); max-width:52ch;}
  .hero-note b{color:var(--ocean-deep);}

  .board{background:var(--ocean-deep); border-radius:18px; padding:26px 24px; color:#EAF2F6; box-shadow:0 24px 60px -20px rgba(8,43,71,.55); position:relative;}
  .board::after{content:""; position:absolute; inset:0; border-radius:18px; background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 34px); pointer-events:none;}
  .board-head{display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8FB2C8; padding-bottom:14px; border-bottom:1px dashed rgba(234,242,246,.25);}
  .board-rows{margin-top:12px;}
  .board-row{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(234,242,246,.1); font-family:'IBM Plex Mono',monospace; font-size:13px;}
  .board-row:last-child{border-bottom:none;}
  .board-dest{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px; color:#fff;}
  .board-code{color:#8FB2C8;}
  .board-status{
    font-size:10.5px; padding:3px 8px; border-radius:6px;
    background:rgba(31,158,150,.18); color:#5FD9CE; letter-spacing:.05em;
    display:inline-block; transform-origin:center 55%;
    animation:flipStatus 6s cubic-bezier(.45,0,.2,1) infinite;
  }
  .board-row:nth-child(1) .board-status{animation-delay:.0s;}
  .board-row:nth-child(2) .board-status{animation-delay:.6s;}
  .board-row:nth-child(3) .board-status{animation-delay:1.2s;}
  .board-row:nth-child(4) .board-status{animation-delay:1.8s;}
  .board-row:nth-child(5) .board-status{animation-delay:2.4s;}
  .board-row:nth-child(6) .board-status{animation-delay:3.0s;}
  @keyframes flipStatus{
    0%, 82%{ transform:rotateX(0deg); opacity:1; }
    86%{ transform:rotateX(90deg); opacity:.35; }
    90%{ transform:rotateX(0deg); opacity:1; }
    100%{ transform:rotateX(0deg); opacity:1; }
  }

  /* generic section */
  .section{padding:40px 0;}
  .section-head{max-width:60ch; margin-bottom:26px;}
  .section-head .eyebrow{margin-bottom:8px;}
  h2.section-title{font-size:clamp(24px,3.2vw,32px); line-height:1.15; font-weight:600;}
  .section-sub{margin-top:10px; color:var(--ink-soft); font-size:15.5px; line-height:1.6;}

  /* destinations */
  .destinations{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .dest-card{
    position:relative; border-radius:16px; overflow:hidden;
    padding:26px 20px 22px; min-height:168px;
    display:flex; flex-direction:column; justify-content:flex-end;
    color:#fff; text-decoration:none;
    box-shadow:0 14px 34px -18px rgba(11,61,98,.4);
    transition:transform .18s ease;
  }
  .dest-card:hover{transform:translateY(-3px);}
  .dest-card::before{content:""; position:absolute; inset:0; opacity:.94;}
  .dest-tr::before{background:linear-gradient(150deg,#0B3D62,#1F6B8F 60%,#2FA8A0);}
  .dest-eg::before{background:linear-gradient(150deg,#8A4B15,#C97A2A 55%,#E8A94A);}
  .dest-bg::before{background:linear-gradient(150deg,#1D5B3E,#2E8A5B 60%,#5FB07E);}
  .dest-gr::before{background:linear-gradient(150deg,#0E4C6B,#1C7FA6 55%,#5AC0D6);}
  .dest-es::before{background:linear-gradient(150deg,#7A1F3D,#B23A5B 55%,#E36E86);}
  .dest-me::before{background:linear-gradient(150deg,#2C3E50,#4C6478 55%,#7D95A3);}
  .dest-flag{position:relative; font-size:26px; margin-bottom:10px;}
  .dest-name{position:relative; font-family:'Fraunces',serif; font-size:20px; font-weight:600;}
  .dest-price{position:relative; margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; opacity:.92;}

  /* steps */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .step{padding:20px 18px; background:var(--paper); border:1px solid var(--line); border-radius:16px;}
  .step-num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brand-blue-deep); letter-spacing:.05em;}
  .step h3{font-size:17px; margin-top:10px; color:var(--ocean-deep);}
  .step p{margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-soft);}

  /* why (dark band) */
  .why{background:var(--ocean-deep); color:#EAF2F6; border-radius:24px; padding:34px 32px; display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center;}
  .why h2{color:#fff;}
  .why-list{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
  .why-list li{display:flex; gap:14px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:#C9DCE7;}
  .why-num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#5FD9CE; border:1px solid rgba(95,217,206,.4); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

  /* channels — boarding pass tickets */
  .passes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .pass{
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    overflow:hidden; display:flex;
    box-shadow:0 10px 30px -18px rgba(11,61,98,.25);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .pass:hover{transform:translateY(-3px); box-shadow:0 18px 34px -16px rgba(11,61,98,.32);}
  .pass-main{flex:1; padding:18px 16px 16px; display:flex; flex-direction:column; gap:10px;}
  .pass-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .pass-gate{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); letter-spacing:.06em;}
  .pass-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
  .pass-icon svg{width:19px; height:19px;}
  .pass-title{font-family:'Fraunces', serif; font-size:20px; font-weight:600; color:var(--ocean-deep);}
  .pass-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.55; flex:1;}
  .pass-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 14px; border-radius:10px; font-weight:700; font-size:14px;
    text-decoration:none; color:#fff; transition:opacity .15s ease;
  }
  .pass-cta:hover{opacity:.9;}
  .pass-stub{width:56px; flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; background:var(--sand-2);}
  .pass-stub::before{content:""; position:absolute; left:0; top:0; bottom:0; border-left:2px dashed var(--line);}
  .pass-stub-text{writing-mode:vertical-rl; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);}
  .pass-stub-dot{position:absolute; width:10px; height:10px; border-radius:50%; background:var(--sand); left:-6px;}
  .pass-stub-dot.top{top:-5px;}
  .pass-stub-dot.bottom{bottom:-5px;}
  .viber .pass-icon{background:#7360F2;}
  .viber .pass-cta{background:#7360F2;}
  .telegram .pass-icon{background:#26A5E4;}
  .telegram .pass-cta{background:#26A5E4;}
  .instagram .pass-icon{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);}
  .instagram .pass-cta{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);}

  footer{border-top:1px solid var(--line); padding:26px 0 30px;}
  .footer-row{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink-soft);}
  .footer-links{display:flex; flex-direction:column; gap:8px; align-items:flex-end;}
  .footer-links a{text-decoration:none; color:var(--ink-soft); font-size:13.5px;}
  .footer-links a:hover{color:var(--ocean-deep);}

  @media (max-width:860px){
    .hero-inner{grid-template-columns:1fr;}
    .hero-card{padding:26px 24px;}
    .passes{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .why{grid-template-columns:1fr; padding:32px 24px;}
  }
  @media (max-width:560px){
    .header-row{flex-wrap:wrap; gap:10px;}
    .footer-row{flex-direction:column; align-items:flex-start;}
    .footer-links{align-items:flex-start;}
  }

  /* request-form modal */
  .modal-overlay{
    position:fixed; inset:0; z-index:200;
    background:rgba(8,20,30,.55);
    display:none; align-items:center; justify-content:center;
    padding:20px;
    backdrop-filter:blur(2px);
  }
  .modal-overlay.open{display:flex;}
  .modal-card{
    background:var(--paper); border-radius:18px; max-width:420px; width:100%;
    padding:28px 26px; position:relative;
    box-shadow:0 30px 70px -20px rgba(8,43,71,.5);
  }
  .modal-close{
    position:absolute; top:14px; right:14px;
    width:30px; height:30px; border-radius:50%;
    border:none; background:var(--sand-2); color:var(--ink-soft);
    font-size:16px; line-height:1; cursor:pointer;
  }
  .modal-close:hover{background:var(--line);}
  .modal-card h3{font-size:20px; color:var(--ocean-deep); margin-bottom:6px;}
  .modal-sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:20px;}
  .form-field{margin-bottom:14px;}
  .form-field label{display:block; font-size:12.5px; font-weight:600; color:var(--ocean-deep); margin-bottom:6px;}
  .form-field input, .form-field textarea{
    width:100%; padding:11px 13px; border-radius:10px;
    border:1.5px solid var(--line); background:var(--sand); color:var(--ink);
    font-family:'Plus Jakarta Sans', sans-serif; font-size:14.5px;
  }
  .form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--brand-blue);}
  .form-field textarea{resize:vertical; min-height:64px;}
  .form-field input.field-invalid{border-color:#D14343; background:#FCEEEE;}
  .form-error{margin-top:5px; font-size:12px; color:#D14343; display:none;}
  .form-error.show{display:block;}
  .form-honeypot{position:absolute; left:-9999px; opacity:0; pointer-events:none;}
  .form-submit{width:100%; justify-content:center; border:none; cursor:pointer; margin-top:4px;}
  .form-note{margin-top:12px; font-size:11.5px; color:var(--ink-soft); text-align:center;}
  .form-status{margin-top:12px; font-size:13.5px; text-align:center; display:none;}
  .form-status.ok{color:#1F9E96; display:block;}
  .form-status.err{color:#D14343; display:block;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .pass,.btn{transition:none;}
    .board-status{animation:none;}
    .sky-map{display:none;}
  }
  /* Стилі лише для сторінки 404 — решта береться зі style.css */
  body.page-404{ min-height:100vh; display:flex; flex-direction:column; }
  .wrap-narrow{ max-width:640px; margin:0 auto; padding:0 24px; width:100%; }
  main{ flex:1; display:flex; align-items:center; padding:20px 0 40px; }

  .notfound-card{
    position:relative;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px;
    padding:44px 36px;
    box-shadow:0 24px 60px -24px rgba(11,61,98,.3);
    text-align:center;
    overflow:hidden;
  }
  .notfound-card::before{
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(180deg, rgba(11,61,98,.02) 0 2px, transparent 2px 34px);
    pointer-events:none;
  }

  .notfound-gate{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace; font-size:12px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--brand-blue-deep);
    background:var(--sand-2); border:1px solid var(--line);
    padding:6px 14px; border-radius:100px;
    margin-bottom:22px;
  }
  .notfound-gate .dot{width:6px; height:6px; border-radius:50%; background:#D14343;}

  .notfound-code{
    position:relative;
    font-family:'Fraunces', serif; font-weight:700;
    font-size:clamp(64px, 14vw, 96px);
    line-height:1; color:var(--ocean-deep);
    letter-spacing:-0.02em;
  }
  .notfound-code em{font-style:italic; color:var(--sun);}

  h1.notfound-title{
    position:relative;
    font-size:clamp(22px, 3.4vw, 28px);
    margin:14px 0 10px;
  }
  p.notfound-lede{
    position:relative;
    font-size:15.5px; line-height:1.6; color:var(--ink-soft);
    max-width:42ch; margin:0 auto 28px;
  }

  .btn-row{position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

  @media (max-width:480px){
    .notfound-card{padding:34px 22px;}
    .btn-row{flex-direction:column;}
    .btn-row .btn{justify-content:center;}
  }