:root{
      --navy:#071A2B;
      --blue:#0F3D66;
      --sky:#00D4FF;
      --orange:#FF7A18;
      --yellow:#FFC400;

      --bg:#060D14;
      --ink:#0F172A;

      --text:#FFFFFF;
      --muted:rgba(255,255,255,.78);

      --surface:rgba(255,255,255,.08);
      --surface2:rgba(255,255,255,.12);
      --line:rgba(255,255,255,.18);

      --light:#F4F7FB;
      --lightText:#0F172A;
      --lightMuted:#475569;
      --lightLine:#E1E6ED;

      --max:1180px;
      --r:18px;
      --shadow: 0 18px 40px rgba(0,0,0,.28);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
html, body{overflow-x:hidden;}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1000px 600px at 10% 0%, rgba(0,212,255,.22) 0%, rgba(0,212,255,0) 55%),
        radial-gradient(900px 650px at 90% 10%, rgba(255,196,0,.18) 0%, rgba(255,196,0,0) 60%),
        radial-gradient(1200px 800px at 40% -10%, rgba(255,122,24,.22) 0%, rgba(255,122,24,0) 60%),
        linear-gradient(180deg, #071A2B 0%, #060D14 70%, #050A10 100%);
      line-height:1.5;
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}

/* Layout alignment helpers */
body{overflow-x:hidden;}
header, main, section, footer{width:100%;}
.wrap{width:100%;}


    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      background: linear-gradient(90deg, rgba(7,26,43,.92), rgba(15,61,102,.92));
      border-bottom: 4px solid rgba(255,122,24,.85);
      backdrop-filter: blur(10px);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      text-decoration:none;
      min-width: 240px;
    }
    .brand img{
      height:82px; /* bigger logo */
      width:auto;
      display:block;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.35));
    }
    .brand .name{font-weight:900; font-size:15px; letter-spacing:.2px; line-height:1.1}
    .brand .sub{font-size:12px; opacity:.85; margin-top:4px}

    nav ul{
      list-style:none; margin:0; padding:0;
      display:flex; gap:14px; align-items:center;
    }
    nav a{
      text-decoration:none;
      font-size:14px;
      padding:10px 12px;
      border-radius:999px;
      color:rgba(255,255,255,.9);
      font-weight:700;
    }
    nav a:hover{background:rgba(255,255,255,.12)}
    .mobile-toggle{display:none}

    .cta{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:11px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.08);
      text-decoration:none;
      font-weight:900;
      font-size:14px;
      cursor:pointer;
      white-space:nowrap;
      transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
    }
    .btn:hover{transform: translateY(-1px)}
    .btn.primary{
      border:none;
      color:#111;
      background: linear-gradient(90deg, var(--orange), var(--yellow));
      box-shadow: 0 14px 30px rgba(255,122,24,.25);
    }
    .btn.primary:hover{filter:brightness(1.03)}
    .btn.outline{
      background:transparent;
      border:2px solid rgba(255,255,255,.85);
      color:#fff;
    }
    .btn.outline:hover{background:#fff; color:#111; border-color:#fff}

    /* Hero */
    .hero{padding:46px 0 18px;}
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .kicker{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(0,212,255,.14);
      border:1px solid rgba(0,212,255,.25);
      color:#D8F7FF;
      font-weight:800;
      font-size:13px;
      width:fit-content;
    }
    h1{
      font-size:48px;
      line-height:1.06;
      margin:14px 0 10px;
      letter-spacing:-.5px;
    }
    .tag{
      font-size:19px;
      color:rgba(255,255,255,.86);
      margin:0 0 18px;
      max-width: 52ch;
    }
    .trust-strip{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-top:14px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
      font-weight:800;
      font-size:13px;
    }
    .pill strong{color:var(--yellow)}
    .panel{
      border-radius:var(--r);
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
      border:1px solid rgba(255,255,255,.14);
      padding:18px;
      box-shadow: var(--shadow);
    }
    .panel h3{margin:0 0 10px; font-size:16px}
    .panel ul{margin:0; padding-left:18px; color:rgba(255,255,255,.86)}
    .panel li{margin:7px 0}

    /* General sections */
    section{width:100%; padding:34px 0}
    .section-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:12px; margin-bottom:16px;
    }
    .section-title h2{margin:0; font-size:28px}
    .section-title p{margin:0; color:rgba(255,255,255,.78)}
    .cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    .card{
      border-radius:var(--r);
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
      padding:18px;
      box-shadow: 0 16px 32px rgba(0,0,0,.22);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .card:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 46px rgba(0,0,0,.30);
      background:rgba(255,255,255,.10);
    }
    .card h3{margin:0 0 8px; font-size:16px}
    .card p{margin:0; color:rgba(255,255,255,.78)}

    .mini{
      display:inline-flex;
      font-weight:900;
      color:#111;
      background: linear-gradient(90deg, var(--sky), var(--yellow));
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      margin-bottom:10px;
      width:fit-content;
    }

    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
    }

    .three-col{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:14px;
    }

    /* Light bands */
    .band{
      background: var(--light);
      color: var(--lightText);
    }
    .band .section-title p{color: var(--lightMuted)}
    .band .card{
      background:#fff;
      border:1px solid var(--lightLine);
      box-shadow: 0 16px 30px rgba(15,23,42,.08);
    }
    .band .card p{color: var(--lightMuted)}
    .band a{color: inherit}
    .band .btn.outline{
      border-color: rgba(15,23,42,.25);
      color: var(--lightText);
    }
    .band .btn.outline:hover{
      background: var(--lightText);
      color:#fff;
      border-color: var(--lightText);
    }

    /* Split cards */
    .split-card{
      position:relative;
      overflow:hidden;
    }
    .split-card::before{
      content:"";
      position:absolute;
      inset:-2px -2px auto -2px;
      height:5px;
      background: linear-gradient(90deg, var(--orange), var(--yellow));
    }
    .split-list{
      margin:10px 0 0;
      padding-left:18px;
      color:rgba(255,255,255,.82);
    }
    .band .split-list{color: var(--lightMuted)}

    /* CTA banner */
    .cta-band{
      background: linear-gradient(90deg, var(--orange), var(--yellow));
      color:#111;
    }
    .cta-band h2{margin:0 0 8px; font-size:30px}
    .cta-band p{margin:0 0 16px; font-size:18px}
    .cta-band .btn{
      border:2px solid rgba(17,17,17,.25);
      background: rgba(255,255,255,.20);
      color:#111;
    }
    .cta-band .btn.primary{
      background:#111;
      color:#fff;
      border:none;
      box-shadow:none;
    }
    .cta-band .btn.primary:hover{filter:brightness(1.05)}

    /* Form */
    form{display:grid; gap:12px;}
    label{font-weight:900; font-size:13px}
    input, select, textarea{
      width:100%;
      padding:11px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.18);
      font-size:14px;
      outline:none;
      background: rgba(5,12,18,.55);
      color: var(--text);
    }
    .band input, .band select, .band textarea{
      background:#fff;
      color: var(--lightText);
      border:1px solid var(--lightLine);
    }
    input::placeholder, textarea::placeholder{color:rgba(255,255,255,.55)}
    .band input::placeholder, .band textarea::placeholder{color:#94a3b8}
    input:focus, select:focus, textarea:focus{border-color:rgba(0,212,255,.55)}
    .band input:focus, .band select:focus, .band textarea:focus{border-color:rgba(255,122,24,.55)}
    textarea{min-height:120px; resize:vertical}
    .form-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
    .hint{color:rgba(255,255,255,.72); font-size:13px; margin-top:-6px;}
    .band .hint{color: var(--lightMuted)}
    .success, .error{
      display:none;
      padding:12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
    }
    .band .success, .band .error{
      background:#fff;
      border:1px solid var(--lightLine);
    }

    /* Gallery placeholders */
    .gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}

.gallery img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.gallery img:hover{
  transform: translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

/* Light sections */
.band .gallery img{
  border:1px solid #e2e8f0;
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}

/* Responsive */
@media (max-width: 980px){
  .gallery{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 865px){
  .band .section-title {
    display:block;
  } 
}

@media (max-width: 768px){
.band .three-col{
   grid-template-columns: 1fr;      
  }  
.section-title {
    display:block;
}  
.section-title h2{
    font-size:19px;
}
  
}   
@media (max-width: 366px){
   .band .section-title h2{
    font-size:16px;
  } 
}

    .band .ph{
      background:#fff;
      border:1px dashed #cbd5e1;
      color:#64748b;
    }

    footer{
      border-top:1px solid rgba(255,255,255,.12);
      padding:18px 0;
      color:rgba(255,255,255,.72);
      font-size:13px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:12px;
      align-items:start;
    }
    .fine a{color:rgba(255,255,255,.78)}
    .fine a:hover{color:#fff}

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr}
      .two-col{grid-template-columns:1fr}
      .gallery{grid-template-columns: repeat(2, 1fr)}
      .footer-grid{grid-template-columns:1fr}
      .form-row{grid-template-columns:1fr}

      nav ul{display:none}
      .mobile-toggle{display:inline-flex}
      nav.open ul{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        padding:10px 0 6px;
      }
      nav.open a{width:100%}

      h1{font-size:40px}
      .brand img{height:70px}


     
}

.gallery img{ cursor:pointer; }

/* LIGHTBOX (Gallery Viewer) */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(5,10,15,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.lightbox.active{ display:flex; }
.lb-image{
  max-width:90%;
  max-height:85vh;
  border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.lb-close{
  position:absolute;
  top:20px;
  right:24px;
  font-size:38px;
  color:#fff;
  background:none;
  border:none;
  cursor:pointer;
}
.lb-prev,
.lb-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:48px;
  color:#fff;
  background:rgba(255,255,255,.15);
  border:none;
  border-radius:999px;
  width:56px;
  height:56px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lb-prev{ left:20px; }
.lb-next{ right:20px; }
.lb-prev:hover,
.lb-next:hover{ background:rgba(255,255,255,.25); }

.social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.7);
  color:#fff;
  text-decoration:none;
}

.social svg{
  width:20px;
  height:20px;
  fill:currentColor;
}

.social:hover{
  background:#1877f2; /* Facebook blue */
  border-color:#1877f2;
}


@media (max-width: 768px){
  .lb-prev, .lb-next{
    width:44px;
    height:44px;
    font-size:36px;
  }
}
@media (max-width: 480px) {
  .hero .btn {
    margin-bottom: 10px;
  }
}


/* Mobile header wrap fixes */
@media (max-width: 720px){
  .nav{flex-wrap:wrap;}
  .brand{min-width:0;}
  /* Keep brand from forcing overflow */
  .brand img{height:64px;}
  /* Stack CTAs and let them shrink */
  .cta{width:100%; justify-content:flex-start; gap:10px;}
  .cta .btn{flex:1; min-width:0;}
  .btn{white-space:normal;}
  /* Optional: tighten long phone button */
  .btn.outline{padding:10px 12px;}
}
@media (max-width: 420px){
  .cta{flex-direction:column;}
  .cta .btn{width:100%;}
}