:root{
  --bg:#06172d;
  --bg2:#0b2647;
  --text:#eef5ff;
  --muted:#a8bbd0;
  --gold:#f3bd58;
  --line:rgba(255,255,255,.18);
  --glass-bg:rgba(255,255,255,.10);
  --glass-bg-strong:rgba(255,255,255,.16);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);

  background:
    radial-gradient(circle at 10% 14%,
      rgba(0,145,255,.38),
      transparent 30%),

    radial-gradient(circle at 88% 18%,
      rgba(255,180,55,.28),
      transparent 28%),

    radial-gradient(circle at 48% 75%,
      rgba(20,95,190,.28),
      transparent 36%),

    linear-gradient(
      145deg,
      #020a14 0%,
      #06172d 45%,
      #071b32 70%,
      #020b16 100%
    );

  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:42px 42px;
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.8),
    transparent
  );
}

a{
  text-decoration:none;
  color:inherit;
}

button,
input{
  font:inherit;
}

/* =========================
   TRUE LIQUID GLASS
========================= */

.glass{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.19),
      rgba(255,255,255,.07) 38%,
      rgba(255,255,255,.04) 100%
    );

  border:1px solid rgba(255,255,255,.28);

  backdrop-filter:
    blur(28px)
    saturate(180%)
    contrast(105%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(180%)
    contrast(105%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 20px 50px rgba(0,0,0,.28);
}

.glass::before{
  content:"";
  position:absolute;
  top:-95%;
  left:-40%;

  width:75%;
  height:250%;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255,255,255,.04) 35%,
      rgba(255,255,255,.26) 48%,
      rgba(255,255,255,.10) 58%,
      transparent 75%
    );

  transform:rotate(18deg);
  pointer-events:none;
  opacity:.8;
}

.glass::after{
  content:"";
  position:absolute;
  inset:1px;

  border-radius:inherit;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(255,255,255,.16),
      transparent 34%
    );

  pointer-events:none;
}

/* Keep content above glass reflections */

.glass > *{
  position:relative;
  z-index:1;
}

/* =========================
   HEADER
========================= */

.header{
  position:sticky;
  top:12px;
  z-index:20;

  width:min(1180px,calc(100% - 24px));

  margin:12px auto 0;

  border-radius:24px;

  padding:12px 14px;

  display:flex;
  align-items:center;
  gap:22px;

  background:
    linear-gradient(
      135deg,
      rgba(7,25,48,.72),
      rgba(255,255,255,.08)
    );

  backdrop-filter:
    blur(32px)
    saturate(190%);

  -webkit-backdrop-filter:
    blur(32px)
    saturate(190%);

  border:1px solid rgba(255,255,255,.26);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 16px 45px rgba(0,0,0,.30);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  width:46px;
  height:46px;

  object-fit:contain;

  background:rgba(255,255,255,.94);

  border-radius:13px;

  padding:4px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 22px rgba(0,0,0,.20);
}

.brand b{
  display:block;
}

.brand small{
  display:block;

  color:var(--muted);

  margin-top:2px;
}

.header nav{
  margin-left:auto;

  display:flex;

  gap:22px;
}

.header nav a{
  font-size:.9rem;

  color:#e5eff9;

  position:relative;
}

.header nav a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-7px;

  width:0;
  height:2px;

  background:var(--gold);

  transition:.25s ease;
}

.header nav a:hover::after{
  width:100%;
}

.header > button{
  border:1px solid rgba(255,255,255,.22);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.06)
    );

  color:white;

  border-radius:13px;

  padding:9px 12px;

  cursor:pointer;

  backdrop-filter:blur(16px);
}

/* =========================
   LAYOUT
========================= */

.wrap{
  width:min(1180px,calc(100% - 28px));

  margin:auto;

  padding:82px 0;
}

/* =========================
   HERO
========================= */

.hero{
  min-height:720px;

  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:58px;

  align-items:center;
}

.eyebrow{
  font-size:.74rem;

  letter-spacing:.18em;

  color:var(--gold);

  font-weight:800;
}

.hero h1{
  font-size:clamp(3.2rem,7vw,6.4rem);

  line-height:.95;

  letter-spacing:-.055em;

  margin:16px 0;
}

.hero h1 span,
.hero h1 em{
  display:block;
}

.hero h1 em{
  font-style:normal;

  color:var(--gold);
}

.lead{
  max-width:690px;

  line-height:1.8;

  color:#bac9d9;
}

.cta{
  display:flex;

  gap:10px;

  margin-top:26px;

  flex-wrap:wrap;
}

.cta a,
.cta button,
.links a{
  border-radius:14px;

  padding:11px 15px;

  border:1px solid rgba(255,255,255,.20);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.05)
    );

  color:white;

  backdrop-filter:blur(14px);

  transition:.25s ease;
}

.cta a:hover,
.cta button:hover,
.links a:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.08)
    );
}

.cta .primary{
  background:
    linear-gradient(
      135deg,
      #ffd47d,
      #f3bd58
    );

  color:#1a2430;

  font-weight:700;

  border-color:transparent;

  box-shadow:
    0 10px 26px rgba(243,189,88,.18);
}

.cta button{
  cursor:pointer;
}

/* =========================
   SOCIAL BUTTONS
========================= */

.socials{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;

  margin-top:34px;
}

.socials a,
.socials button{
  min-height:68px;

  border:1px solid rgba(255,255,255,.20);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.04)
    );

  color:white;

  border-radius:17px;

  padding:12px;

  text-align:left;

  cursor:pointer;

  backdrop-filter:blur(18px);

  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 10px 25px rgba(0,0,0,.14);

  transition:.25s ease;
}

.socials a:hover,
.socials button:hover{
  transform:translateY(-3px);

  border-color:rgba(243,189,88,.45);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.07)
    );
}

.socials b,
.socials small{
  display:block;
}

.socials small{
  color:var(--muted);

  margin-top:4px;

  font-size:.72rem;
}

/* =========================
   HERO LOGO GLASS
========================= */

.hero-art{
  aspect-ratio:1/1;

  border-radius:38px;

  display:grid;

  place-items:center;

  position:relative;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.16),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.04)
    );
}

.hero-art::after{
  content:"";

  position:absolute;

  width:70%;
  height:70%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(243,189,88,.16),
      transparent 68%
    );

  filter:blur(15px);
}

.hero-art img{
  width:72%;

  position:relative;

  z-index:2;

  filter:
    drop-shadow(
      0 24px 34px
      rgba(0,0,0,.32)
    );
}

.hero-art span{
  position:absolute;

  bottom:18px;
  left:18px;

  font-size:.72rem;

  letter-spacing:.18em;

  z-index:3;

  padding:8px 10px;

  border-radius:11px;

  background:rgba(5,18,34,.45);

  border:1px solid rgba(255,255,255,.12);
}

/* =========================
   HEADINGS
========================= */

h2{
  font-size:clamp(2rem,4vw,3.6rem);

  letter-spacing:-.04em;

  margin:10px 0 28px;
}

/* =========================
   GRIDS
========================= */

.grid{
  display:grid;

  gap:12px;
}

/* =========================
   SERVICES
========================= */

.services{
  grid-template-columns:repeat(5,1fr);
}

.services article{
  min-height:185px;

  border-radius:22px;

  padding:19px;

  box-shadow:none;

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
}

.services article:hover{
  transform:translateY(-7px);

  border-color:rgba(243,189,88,.50);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.08)
    );
}

.services article > span{
  color:var(--gold);

  font-size:.72rem;
}

.services h3{
  margin-top:30px;

  font-size:1rem;
}

.services p{
  color:var(--muted);

  font-size:.82rem;

  line-height:1.6;
}

/* =========================
   PRICING
========================= */

.section-row{
  display:flex;

  justify-content:space-between;

  gap:20px;

  align-items:end;
}

.section-row input{
  width:300px;

  max-width:100%;

  border:1px solid rgba(255,255,255,.20);

  background:
    rgba(255,255,255,.08);

  color:white;

  border-radius:14px;

  padding:11px 13px;

  backdrop-filter:blur(14px);

  outline:none;
}

.section-row input:focus{
  border-color:rgba(243,189,88,.65);

  box-shadow:
    0 0 0 3px rgba(243,189,88,.08);
}

.tabs{
  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin:14px 0;
}

.tabs button{
  border:1px solid rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.04);

  color:white;

  padding:9px 13px;

  border-radius:999px;

  cursor:pointer;

  backdrop-filter:blur(12px);

  transition:.2s ease;
}

.tabs button:hover{
  background:rgba(255,255,255,.10);
}

.tabs button.active{
  background:
    linear-gradient(
      135deg,
      #ffd47d,
      #f3bd58
    );

  color:#1a2430;

  font-weight:700;

  border-color:var(--gold);
}

.pricebox{
  overflow:hidden;

  border-radius:24px;

  box-shadow:none;
}

table{
  width:100%;

  border-collapse:collapse;
}

th,
td{
  padding:13px 16px;

  border-bottom:
    1px solid rgba(255,255,255,.08);

  text-align:left;
}

th{
  font-size:.77rem;

  color:var(--gold);

  background:
    rgba(255,255,255,.035);
}

td{
  font-size:.88rem;
}

td:last-child{
  white-space:nowrap;

  font-weight:700;
}

tbody tr{
  transition:.18s ease;
}

tbody tr:hover{
  background:
    rgba(255,255,255,.045);
}

/* =========================
   GALLERY
========================= */

.gallery{
  grid-template-columns:1fr 1fr;
}

.galleryCard{
  min-height:220px;

  border-radius:26px;

  padding:24px;

  box-shadow:none;

  transition:.25s ease;
}

.galleryCard:hover{
  transform:translateY(-5px);

  border-color:
    rgba(243,189,88,.48);
}

.mark{
  width:56px;

  height:56px;

  border-radius:18px;

  border:
    1px solid rgba(255,255,255,.20);

  display:grid;

  place-items:center;

  color:var(--gold);

  font-size:1.3rem;

  background:
    rgba(255,255,255,.06);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.16);
}

.galleryCard p{
  color:var(--muted);
}

/* =========================
   BRANCHES
========================= */

.branches{
  grid-template-columns:1fr 1fr;
}

.branch{
  border-radius:26px;

  padding:24px;

  box-shadow:none;

  transition:.25s ease;
}

.branch:hover{
  transform:translateY(-4px);

  border-color:
    rgba(243,189,88,.40);
}

.branch p{
  color:#bdcddd;

  line-height:1.7;
}

.links{
  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin-top:18px;
}

/* =========================
   ABOUT
========================= */

.about{
  border-radius:30px;

  padding:34px;

  box-shadow:none;
}

.about p:last-child{
  color:#bdcddd;

  line-height:1.85;

  max-width:900px;
}

/* =========================
   FOOTER
========================= */

footer{
  width:min(1180px,calc(100% - 28px));

  margin:auto;

  padding:28px 0 40px;

  border-top:
    1px solid rgba(255,255,255,.10);

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:var(--muted);
}

/* =========================
   MODAL
========================= */

.modal{
  position:fixed;

  inset:0;

  display:none;

  z-index:50;
}

.modal.open{
  display:block;
}

.shade{
  position:absolute;

  inset:0;

  background:
    rgba(0,0,0,.58);

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);
}

.panel{
  position:relative;

  width:min(500px,calc(100% - 28px));

  margin:20vh auto 0;

  border-radius:28px;

  padding:26px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.07)
    );
}

.close{
  position:absolute;

  right:15px;
  top:10px;

  border:0;

  background:transparent;

  color:white;

  font-size:1.7rem;

  cursor:pointer;
}

.branchChoice{
  display:block;

  width:100%;

  margin:10px 0;

  border:
    1px solid rgba(255,255,255,.20);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.05)
    );

  color:white;

  border-radius:17px;

  padding:16px;

  text-align:left;

  cursor:pointer;

  transition:.2s ease;
}

.branchChoice:hover{
  background:
    rgba(255,255,255,.15);

  transform:
    translateX(3px);
}

/* =========================
   TABLET
========================= */

@media(max-width:1000px){

  .header nav{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;

    min-height:auto;
  }

  .hero-art{
    max-width:500px;

    margin:auto;
  }

  .socials{
    grid-template-columns:1fr 1fr;
  }

  .services{
    grid-template-columns:
      repeat(3,1fr);
  }
}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  body{
    background-attachment:scroll;
  }

  .header{
    top:8px;

    border-radius:19px;
  }

  .brand b{
    font-size:.86rem;
  }

  .brand small{
    font-size:.68rem;
  }

  .wrap{
    padding:62px 0;
  }

  .hero{
    gap:42px;
  }

  .hero h1{
    font-size:
      clamp(3rem,15vw,4.2rem);
  }

  .hero-art{
    border-radius:30px;
  }

  .socials,
  .services,
  .gallery,
  .branches{
    grid-template-columns:1fr;
  }

  .section-row{
    display:block;
  }

  .section-row input{
    width:100%;

    margin-bottom:10px;
  }

  th,
  td{
    padding:11px 10px;

    font-size:.78rem;
  }

  footer{
    display:block;
  }

  footer p{
    margin-top:16px;
  }
}

/* =========================
   SMALL PHONE
========================= */

@media(max-width:430px){

  .wrap{
    width:
      min(100% - 20px,1180px);
  }

  .header{
    width:
      calc(100% - 16px);
  }

  .hero h1{
    font-size:3rem;
  }

  .hero-art{
    border-radius:26px;
  }

  .glass{
    backdrop-filter:
      blur(20px)
      saturate(165%);

    -webkit-backdrop-filter:
      blur(20px)
      saturate(165%);
  }

}