:root{
      --navy:#05142c;
      --navy2:#08275a;
      --blue:#0b63df;
      --sky:#16c8f3;
      --cyan:#36e7ff;
      --gold:#d6b75e;
      --white:#ffffff;
      --soft:#f3f8fd;
      --text:#122033;
      --muted:#64748b;
      --line:rgba(15,35,70,.12);
      --shadow:0 28px 90px rgba(5,20,44,.18);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
body{
    font-family:'Manrope',sans-serif;
    color:var(--text);
    line-height:1.65;
    background:
        radial-gradient(circle at 10% 10%, rgba(54,231,255,.16), transparent 26%),
        radial-gradient(circle at 90% 15%, rgba(11,99,223,.14), transparent 30%),
        linear-gradient(180deg,#f7fbff 0%,#eef7fb 100%);
    overflow-x:hidden;
}
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background:
        url("data:image/svg+xml,%3Csvg width='1600' height='1000' viewBox='0 0 1600 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='g'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3ClinearGradient id='a' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop stop-color='%230b63df' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%2336e7ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%230b63df' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-80 190 C280 70 450 330 820 210 S1260 20 1700 150' fill='none' stroke='url(%23a)' stroke-width='4' filter='url(%23g)'/%3E%3Cpath d='M-80 420 C310 240 530 570 900 380 S1250 210 1700 320' fill='none' stroke='url(%23a)' stroke-width='3' filter='url(%23g)'/%3E%3Cpath d='M-80 750 C270 560 510 830 870 650 S1260 500 1700 610' fill='none' stroke='url(%23a)' stroke-width='4' filter='url(%23g)'/%3E%3Ccircle cx='330' cy='260' r='5' fill='%2336e7ff' opacity='.75'/%3E%3Ccircle cx='850' cy='380' r='5' fill='%2336e7ff' opacity='.7'/%3E%3Ccircle cx='1220' cy='540' r='5' fill='%2336e7ff' opacity='.7'/%3E%3C/svg%3E") center top/cover no-repeat;
      opacity:.65;
    }

    a{text-decoration:none;color:inherit}
    .container{width:min(1180px,92%);margin:auto}

    header{
      position:sticky;
      top:0;
      z-index:99;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(15,35,70,.1);
    }

    .nav{
      height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brand img{
      height:52px;
      width:auto;
      display:block;
    }

    .brand-title{
      color:#ffffff;
      font-size:15px;
      font-weight:900;
      line-height:1.15;
    }

    .brand-title span{
      display:block;
      color:rgba(255,255,255,.65);
      font-size:11px;
      font-weight:800;
      letter-spacing:.9px;
      text-transform:uppercase;
      margin-top:3px;
    }

    nav{
      display:flex;
      gap:26px;
      font-size:14px;
      color:var(--navy);
      font-weight:900;
    }

    nav a:hover{color:var(--blue)}

    .hero{
      position:relative;
      overflow:hidden;
      color:white;
      background:
        radial-gradient(circle at 82% 10%, rgba(54,231,255,.35), transparent 31%),
        radial-gradient(circle at 12% 0%, rgba(214,183,94,.18), transparent 32%),
        linear-gradient(135deg,var(--navy) 0%,var(--navy2) 45%,#06418f 100%);
      padding:58px 0 70px;
    }

    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.055) 1px, transparent 1px);
      background-size:46px 46px;
      mask-image:linear-gradient(to bottom,#000,transparent 92%);
    }

    .hero:after{
      content:"";
      position:absolute;
      inset:auto -220px -260px auto;
      width:610px;
      height:610px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.16);
      box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 150px rgba(255,255,255,.025);
    }

    .hero-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:56px;
      align-items:center;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.22);
      font-size:13px;
      font-weight:900;
      margin-bottom:22px;
    }

    .eyebrow i{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 22px var(--cyan);
    }

    h1{
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.15;
      letter-spacing: -0.8px;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 18px;
	}

    .hero p{
      font-size:18px;
      color:rgba(255,255,255,.82);
      max-width:690px;
      margin-bottom:32px;
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-bottom:34px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:50px;
      padding:14px 22px;
      border-radius:14px;
      font-size:14px;
      font-weight:900;
      transition:.2s ease;
    }

    .btn-primary{
      color:var(--navy);
      background:white;
      box-shadow:0 20px 38px rgba(0,0,0,.18);
    }

    .btn-primary:hover{transform:translateY(-2px)}

    .btn-secondary{
      color:white;
      border:1px solid rgba(255,255,255,.3);
      background:rgba(255,255,255,.08);
    }

    .btn-secondary:hover{background:rgba(255,255,255,.14)}

    .trust-row{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      max-width:700px;
    }

    .trust{
      padding:15px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
    }

    .trust strong{
      display:block;
      color:white;
      font-size:15px;
    }

    .trust span{
      color:rgba(255,255,255,.7);
      font-size:12px;
    }

    .showcase{
      position:relative;
      padding:28px;
      border-radius:34px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.22);
      backdrop-filter:blur(18px);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .showcase:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 48%);
    }

    .showcase img{
      position:relative;
      display:block;
      width:100%;
      max-width:450px;
      margin:0 auto 22px;
      filter:drop-shadow(0 18px 24px rgba(0,0,0,.28));
    }

    .glass-card{
      position:relative;
      background:white;
      color:var(--text);
      border-radius:24px;
      padding:24px;
    }

    .glass-card small{
      display:block;
      color:var(--blue);
      font-size:12px;
      font-weight:900;
      letter-spacing:1.5px;
      text-transform:uppercase;
      margin-bottom:8px;
    }

    .glass-card h3{
      font-size:23px;
      color:var(--navy);
      line-height:1.25;
      margin-bottom:10px;
    }

    .glass-card p{
      color:var(--muted);
      font-size:14px;
      margin:0;
    }

    section{padding:84px 0}

    .section-head{
      max-width:780px;
      margin-bottom:38px;
    }

    .label{
      color:var(--blue);
      text-transform:uppercase;
      letter-spacing:1.6px;
      font-weight:900;
      font-size:13px;
      margin-bottom:10px;
    }

    h2{
      color:var(--navy);
      font-size:clamp(30px,4vw,46px);
      line-height:1.12;
      letter-spacing:-.8px;
      margin-bottom:14px;
    }

    .section-head p{
      color:var(--muted);
      font-size:16px;
    }

    .about-wrap{
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:26px;
      align-items:stretch;
    }

    .panel{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(5,20,44,.96),
      rgba(8,39,90,.94),
      rgba(6,65,143,.90)
    );

  border:
    1px solid rgba(54,231,255,.18);

  border-radius:30px;

  padding:34px;

  box-shadow:
    0 24px 70px rgba(5,20,44,.22);
}

    .panel h3{
  color:#ffffff;
      font-size:24px;
      margin-bottom:13px;
    }

    .panel p{
  color:rgba(255,255,255,.75);
      margin-bottom:14px;
    }

    .panel p:last-child{margin-bottom:0}

    .info-list{
      display:grid;
      gap:14px;
    }

    .info-item{
  display:flex;
  gap:14px;

  padding:16px;

  border-radius:20px;

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

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

  backdrop-filter:blur(12px);
}
    .mark{
      width:38px;
      height:38px;
      border-radius:13px;
      background:linear-gradient(135deg,var(--blue),var(--sky));
      color:white;
      display:grid;
      place-items:center;
      font-weight:900;
      flex:0 0 auto;
    }

    .info-item strong{
      display:block;
      color:#ffffff;
      margin-bottom:2px;
    }

    .info-item span{
      color:rgba(255,255,255,.70);
      font-size:14px;
    }

    .business{
      background:rgba(255,255,255,.84);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }

    .business-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
    }

    .business-card{
  position:relative;
  overflow:hidden;

  min-height:245px;

  border-radius:30px;

  padding:30px;

  background:
    linear-gradient(
      145deg,
      rgba(230,245,255,.96),
      rgba(215,235,250,.90)
    );

  border:
    1px solid rgba(11,99,223,.12);

  box-shadow:
    0 22px 55px rgba(5,20,44,.12);

  transition:.25s ease;
}
.business-card:hover{
  transform:translateY(-5px);

  box-shadow:
    0 28px 70px rgba(5,20,44,.18);
}

    .business-card:after{
  content:"";

  position:absolute;

  width:130px;
  height:130px;

  right:-45px;
  bottom:-45px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(22,200,243,.28),
      rgba(11,99,223,.08)
    );
}
@media (min-width: 961px) {
  .nav-wrapper {
    height: 72px;
  }

  .brand img {
    height: 46px;
  }

  .brand-title {
    font-size: 13px;
  }

  .brand-title span {
    font-size: 10px;
    letter-spacing: .7px;
  }

  .main-nav {
    gap: 4px;
  }

  .main-nav a {
    padding: 8px 9px;
    font-size: 12.5px;
    gap: 6px;
    white-space: nowrap;
  }

  .main-nav a i {
    font-size: 13px;
  }

  .main-nav .nav-cta {
    padding: 10px 15px;
    border-radius: 15px;
  }

  .nav-divider {
    margin: 0 2px;
  }
}
    .num{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:white;
      font-weight:900;
      background:linear-gradient(135deg,var(--navy2),var(--blue));
      margin-bottom:20px;
    }

    .business-card h3{
      color:var(--navy);
      font-size:20px;
      margin-bottom:10px;
    }

    .business-card p{
      color:var(--muted);
      font-size:15px;
    }

    .contact-section{
      background:
        radial-gradient(circle at 85% 12%, rgba(54,231,255,.22), transparent 30%),
        linear-gradient(135deg,#06172f,#092e61);
      color:white;
    }

    .contact-section .label,
    .contact-section h2{
      color:white;
    }

    .contact-section .section-head p{
      color:rgba(255,255,255,.76);
    }

    .contact-layout{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      gap:28px;
      align-items:center;
    }

    .contact-image{
      border-radius:34px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.2);
      box-shadow:var(--shadow);
      background:rgba(255,255,255,.08);
    }

    .contact-image img{
      width:100%;
      display:block;
    }

    .contact-card{
      border-radius:34px;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.2);
      backdrop-filter:blur(16px);
      padding:34px;
    }

    .contact-card h3{
      font-size:26px;
      margin-bottom:18px;
    }

    .contact-list{
      display:grid;
      gap:16px;
    }

    .contact-item{
      display:flex;
      gap:14px;
      align-items:flex-start;
      color:rgba(255,255,255,.82);
    }

    .contact-item b{
      display:block;
      color:white;
      margin-bottom:2px;
    }

    .contact-item a{
      color:#a7f3ff;
      font-weight:900;
    }

    .social-box{
      margin-top:22px;
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,.16);
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .social-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:11px 16px;
      border-radius:13px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      color:white;
      font-weight:900;
      font-size:14px;
    }

    .social-link:hover{
      background:rgba(255,255,255,.18);
    }

    footer{
      background:#041125;
      color:rgba(255,255,255,.7);
      text-align:center;
      padding:28px 0;
      font-size:14px;
    }

    @media(max-width:960px){
      nav{display:none}
      .hero-grid,
      .about-wrap,
      .contact-layout{
        grid-template-columns:1fr;
      }
      .business-grid{
        grid-template-columns:1fr;
      }
      .trust-row{
        grid-template-columns:1fr;
      }
      .hero{padding:70px 0}
    }

    @media(max-width:560px){
      .nav{height:76px}
      .brand img{height:44px}
      .brand-title{font-size:13px}
      .brand-title span{font-size:10px}
      .hero p{font-size:16px}
      .actions{flex-direction:column}
      .btn{width:100%}
      .panel,.showcase,.business-card,.contact-card{padding:24px}
      section{padding:64px 0}
    }
	.site-header {
  position: sticky;
  top: 0;
  z-index: 999;

  background:
    linear-gradient(
      135deg,
      rgba(5,20,44,.96),
      rgba(8,39,90,.94),
      rgba(6,65,143,.92)
    );

  backdrop-filter: blur(20px);

  border-bottom:
    1px solid rgba(54,231,255,.18);

  box-shadow:
    0 18px 45px rgba(5,20,44,.25);
}

.nav-wrapper {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 13px;
  color:rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 900;
  transition: .2s ease;
}

.main-nav a i {
  color:#36e7ff;
}

.main-nav a:hover {
  background:rgba(255,255,255,.12);
  color:#ffffff;
  transform:translateY(-1px);
}

.nav-divider {
  width: 1px;
  height: 28px;
  background:rgba(255,255,255,.25);
  margin: 0 4px;
}

.main-nav .nav-cta {
  color: #fff;
  padding: 11px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg,var(--blue),var(--sky));
  box-shadow: 0 10px 24px rgba(11,99,223,.24);
}

.main-nav .nav-cta i {
  color: #ffffff;
}

.main-nav .nav-cta:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--navy2), var(--blue));
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--sky));
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}
@media (max-width: 960px) {
  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .main-nav {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);

  width: 88%;
  max-width: 390px;

  display: none;
  flex-direction: column;

  gap: 9px;
  padding: 16px;

  border-radius: 26px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.97),
      rgba(245,250,255,.94)
    );

  border:1px solid rgba(15,35,70,.12);

  box-shadow:
    0 25px 70px rgba(5,20,44,.22);

  backdrop-filter: blur(20px);
}

  .main-nav.active {
    display: flex;
  }

  .main-nav a {
  width:100%;
  min-height:48px;

  justify-content:flex-start;

  padding:12px 15px;

  border-radius:15px;

  background:#f6fbff;

  font-size:13px;
}

  .nav-divider {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }
}
@media (max-width: 960px) {
  .main-nav {
    top: 82px;
    background: linear-gradient(180deg, #ffffff, #eef7ff);
    border: 1px solid rgba(54, 231, 255, .25);
  }

  .main-nav a {
    color: var(--navy);
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 35, 70, .08);
    box-shadow: 0 8px 20px rgba(5, 20, 44, .06);
  }

  .main-nav a i {
    color: var(--blue);
  }

  .main-nav a:hover {
    color: var(--blue);
    background: #ffffff;
  }

  .main-nav .nav-cta {
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    border: none;
  }

  .main-nav .nav-cta i {
    color: #ffffff;
  }

  .nav-divider {
    background: rgba(15, 35, 70, .12);
  }
}
@media (max-width: 960px) {
  .main-nav {
    background:
      linear-gradient(
        135deg,
        rgba(5,20,44,.98),
        rgba(8,39,90,.96),
        rgba(6,65,143,.95)
      ) !important;

    border: 1px solid rgba(54,231,255,.25) !important;
    box-shadow: 0 25px 70px rgba(5,20,44,.35) !important;
  }

  .main-nav a {
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: none !important;
  }

  .main-nav a i {
    color: #36e7ff !important;
  }

  .main-nav a:hover {
    background: rgba(54,231,255,.14) !important;
    color: #ffffff !important;
  }

  .main-nav .nav-cta {
    background: linear-gradient(135deg, var(--blue), var(--sky)) !important;
    border: none !important;
  }

  .nav-divider {
    background: rgba(255,255,255,.18) !important;
  }
}
.story-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(54,231,255,.18), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(11,99,223,.12), transparent 32%),
    linear-gradient(180deg, #f7fbff 0%, #eef7fb 100%);
}

.story-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 46px;
  align-items: center;
}

.story-content p {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 24px;
}

.story-points {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.story-points div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 800;
}

.story-points i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 12px;
  background: linear-gradient(135deg, var(--blue), var(--sky));
}

.story-btn {
  background: linear-gradient(135deg, var(--blue), var(--sky));
  color: #ffffff;
}

.story-gallery {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-template-rows: 240px 240px;
  gap: 18px;
}

.story-photo {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(15,35,70,.12);
  box-shadow: 0 24px 70px rgba(5,20,44,.16);
  background: #ffffff;
}

.story-photo-large {
  grid-row: span 2;
}

.story-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: .35s ease;
}

.story-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(5,20,44,.38)
  );
  opacity: .75;
  pointer-events: none;
}

.story-photo:hover img {
  transform: scale(1.045);
}

@media (max-width: 960px) {
  .story-layout {
    grid-template-columns: 1fr;
  }

  .story-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px 220px 220px;
  }

  .story-photo-large {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .story-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
  }

  .story-photo,
  .story-photo-large {
    min-height: 220px;
    grid-column: auto;
    grid-row: auto;
    border-radius: 22px;
  }

  .story-photo-large {
    min-height: 270px;
  }
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:9px 16px;
  margin-bottom:22px;

  border-radius:999px;

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

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

  color:#ffffff;

  font-size:13px;
  font-weight:900;

  backdrop-filter:blur(12px);
}


.hero-badge i {
  color:#36e7ff;

  filter:
  drop-shadow(0 0 8px #36e7ff);
}


.hero .btn {
  gap:9px;
}


.hero .btn i {
  font-size:15px;
}


@media(max-width:560px){

  .hero-badge {
    font-size:12px;
    padding:8px 13px;
  }

}
.hero-badge {
  margin-bottom: 18px;
}

h1 {
  margin-bottom: 14px;
}

.hero p {
  margin-bottom: 26px;
}

.actions {
  margin-bottom: 26px;
}
/* ===== MOBILE HERO SPACING ===== */
@media (max-width: 560px) {

  .hero {
    padding-top: 28px;
    padding-bottom: 50px;
  }


  .hero-grid {
    gap: 32px;
  }


  .hero-badge {
    margin-bottom: 14px;
  }


  .hero h1 {
    margin-bottom: 14px;
  }


  .hero p {
    margin-bottom: 22px;
  }


  .actions {
    margin-bottom: 22px;
  }

}

.quick-section {
  padding: 0 0 35px;
  margin-top: -38px;
  position: relative;
  z-index: 5;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.quick-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;

  padding: 22px;
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(230,245,255,.96),
      rgba(215,235,250,.90)
    );

  border: 1px solid rgba(11,99,223,.12);

  box-shadow:
    0 22px 55px rgba(5,20,44,.12);

  transition: .25s ease;
}

.quick-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 28px 70px rgba(5,20,44,.18);
}

.quick-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;

  border-radius: 16px;

  display: grid;
  place-items: center;

  color: #ffffff;

  background:
    linear-gradient(135deg, var(--blue), var(--sky));

  box-shadow:
    0 14px 26px rgba(11,99,223,.24);
}

.quick-card h3 {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 5px;
}

.quick-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .quick-section {
    padding: 0 0 60px;
    margin-top: -24px;
  }

  .quick-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .quick-card {
    padding: 18px;
    border-radius: 20px;
  }

  .quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}
/* ===== FIX JARAK AKSES CEPAT KE PROFIL ===== */
.quick-section {
  padding-bottom: 22px !important;
}

#profil {
  padding-top: 32px !important;
}

@media (max-width: 560px) {
  .quick-section {
    padding-bottom: 18px !important;
  }

  #profil {
    padding-top: 26px !important;
  }
}
/* ===== FIX JARAK KEGIATAN USAHA KE DOKUMENTASI ===== */

.business {
  padding-bottom: 38px !important;
}

.story-section {
  padding-top: 38px !important;
}

@media (max-width: 560px) {
  .business {
    padding-bottom: 28px !important;
  }

  .story-section {
    padding-top: 30px !important;
  }
}
/* ===== FIX JARAK PROFIL KE KEGIATAN USAHA ===== */

#profil {
  padding-bottom: 38px !important;
}

.business {
  padding-top: 38px !important;
}


@media (max-width:560px){

  #profil {
    padding-bottom: 28px !important;
  }

  .business {
    padding-top: 30px !important;
  }

}
/* ===== NETWORK STATUS / TRUST BAR ===== */

.trustbar-section {
  padding: 0 0 34px;
  position: relative;
  z-index: 4;
}

.trustbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;

  padding: 16px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(5,20,44,.96),
      rgba(8,39,90,.94),
      rgba(6,65,143,.90)
    );

  border: 1px solid rgba(54,231,255,.18);

  box-shadow:
    0 24px 70px rgba(5,20,44,.22);
}

.trustbar-item {
  display: flex;
  align-items: center;
  gap: 13px;

  padding: 14px;

  border-radius: 20px;

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

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

.trustbar-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  border-radius: 14px;

  display: grid;
  place-items: center;

  color: #36e7ff;

  background: rgba(54,231,255,.11);

  border: 1px solid rgba(54,231,255,.18);
}

.trustbar-icon i {
  font-size: 17px;
}

.trustbar-item strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.25;
}

.trustbar-item span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

/* Titik status aktif */
.live-dot {
  position: relative;
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
}

.live-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 18px rgba(34,197,94,.9);
}

.live-dot::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(34,197,94,.65);
  animation: livePulse 1.6s infinite;
}

@keyframes livePulse {
  0% {
    transform: scale(.65);
    opacity: .9;
  }

  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (max-width: 960px) {
  .trustbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .trustbar-section {
    padding: 0 0 28px;
  }

  .trustbar {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 24px;
  }

  .trustbar-item {
    padding: 13px;
    border-radius: 18px;
  }
}
/* ===== PREMIUM CONTACT ===== */

.contact-icon {
  width:42px;
  height:42px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:14px;

  color:#36e7ff;

  background:
  rgba(54,231,255,.12);

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


.contact-icon i {
  font-size:18px;
}


.social-link {
  gap:9px;
}


.social-link i {
  color:#36e7ff;
}


.social-link:hover {
  transform:translateY(-2px);
}
/* ===== PREMIUM CONTACT ===== */

.contact-icon {
  width:42px;
  height:42px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:14px;

  color:#36e7ff;

  background:
  rgba(54,231,255,.12);

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


.contact-icon i {
  font-size:18px;
}


.social-link {
  gap:9px;
}


.social-link i {
  color:#36e7ff;
}


.social-link:hover {
  transform:translateY(-2px);
}
/* ===== PREMIUM FOOTER ===== */

.footer {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(54,231,255,.18),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #041125,
      #08275a
    );

  padding: 55px 0 28px;

  color: #ffffff;
}


.footer-wrap {
  text-align: center;
}


.footer-brand img {
  width: 48px;
  margin-bottom: 14px;

  filter:
    drop-shadow(
      0 12px 22px rgba(0,0,0,.28)
    );
}


.footer-brand h3 {
  font-size: 22px;
  font-weight: 900;

  margin-bottom: 8px;
}


.footer-brand p {
  max-width: 560px;

  margin:
  0 auto 26px;

  color:
  rgba(255,255,255,.72);

  font-size: 14px;
}


.footer-menu {
  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:12px;

  margin-bottom:28px;
}


.footer-menu a {

  padding:
  10px 16px;

  border-radius:
  999px;

  color:#ffffff;

  font-size:
  13px;

  font-weight:
  800;

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

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

  transition:.2s ease;
}


.footer-menu a:hover {

  background:
  rgba(54,231,255,.15);

  color:
  #36e7ff;

}


.footer-copy {

  padding-top:
  22px;

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

  color:
  rgba(255,255,255,.55);

  font-size:
  13px;
}


@media(max-width:560px){

.footer {

  padding:
  45px 0 24px;

}


.footer-brand img {

  width:
  48px;

}


.footer-menu {

  gap:
  9px;

}

}
/* ===== PREMIUM SCROLL ANIMATION ===== */

.reveal {
  opacity:0;
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1);
}


/* muncul dari bawah */
.reveal-up {
  transform:translateY(45px);
}


/* muncul dari kiri */
.reveal-left {
  transform:translateX(-55px);
}


/* muncul dari kanan */
.reveal-right {
  transform:translateX(55px);
}


.reveal.active {
  opacity:1;
  transform:
  translateX(0)
  translateY(0);
}



/* ===== PREMIUM CARD EFFECT ===== */

.quick-card,
.business-card,
.panel,
.story-photo,
.contact-card {

  transition:
  transform .35s ease,
  box-shadow .35s ease,
  border .35s ease;

}


.quick-card:hover,
.business-card:hover,
.panel:hover,
.contact-card:hover {

  transform:
  translateY(-8px)
  scale(1.015);

  box-shadow:
  0 35px 85px rgba(5,20,44,.25);

}


/* efek sentuh HP */
.quick-card:active,
.business-card:active,
.panel:active,
.contact-card:active {

  transform:
  scale(.97);

}



/* ===== FOTO HIDUP ===== */

.story-photo {

  transition:.35s ease;

}


.story-photo:hover {

  transform:
  translateY(-6px);

}


.story-photo img {

 transition:
 transform .6s ease;

}


.story-photo:hover img {

 transform:
 scale(1.08);

}



/* ===== EFEK CAHAYA CARD ===== */

.quick-card::before,
.business-card::before,
.panel::before {

content:"";

position:absolute;

top:-80%;
left:-80%;

width:80%;
height:220%;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);

transform:
rotate(25deg);

transition:.7s;

}


.quick-card:hover::before,
.business-card:hover::before,
.panel:hover::before {

left:130%;

}



/* mobile lebih lembut */
@media(max-width:560px){

.reveal-left,
.reveal-right {

transform:
translateY(40px);

}


.quick-card:hover,
.business-card:hover,
.panel:hover,
.contact-card:hover {

transform:
translateY(-4px);

}

}
/* ===== MATIKAN EFEK KILAU YANG MENGGANGGU ===== */

.quick-card::before,
.business-card::before,
.panel::before {
  display: none !important;
}
/* ===== TOUCH EFFECT HP ===== */

@media (max-width: 960px) {
  .quick-card:active,
  .business-card:active,
  .panel:active,
  .story-photo:active,
  .contact-card:active,
  .social-link:active,
  .btn:active {
    transform: scale(.96) translateY(2px) !important;
    box-shadow: 0 12px 30px rgba(5,20,44,.22) !important;
    opacity: .92;
  }

  .quick-card,
  .business-card,
  .panel,
  .story-photo,
  .contact-card,
  .social-link,
  .btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}
/* ===== PREMIUM MOBILE TOUCH INTERACTION ===== */

@media (max-width: 960px) {

  .trust,
  .quick-card,
  .business-card,
  .panel,
  .story-photo,
  .contact-card,
  .btn,
  .nav-cta,
  .social-link,
  .footer-menu a {

    transition:
      transform .22s ease,
      box-shadow .22s ease,
      opacity .22s ease;

    -webkit-tap-highlight-color: transparent;

    cursor: pointer;
  }


  .trust:active,
  .quick-card:active,
  .business-card:active,
  .panel:active,
  .story-photo:active,
  .contact-card:active,
  .btn:active,
  .nav-cta:active,
  .social-link:active,
  .footer-menu a:active {

    transform:
      scale(.95)
      translateY(3px)
      !important;

    box-shadow:
      0 12px 35px rgba(5,20,44,.28)
      !important;

    opacity:.88;
  }

}
/* ===== NEW HERO VISUAL ===== */

.showcase {
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}


.hero-visual {

  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;

}


.hero-tech-img {

  width:100%;

  max-width:560px;

  position:relative;

  z-index:2;

  filter:
  drop-shadow(
    0 35px 60px rgba(0,0,0,.35)
  );

  animation:
  floatingHero 5s ease-in-out infinite;

}


.showcase-card {

  width:85%;

  margin-top:-70px;

  position:relative;

  z-index:3;

}


/* animasi melayang */

@keyframes floatingHero {

0%,100% {

transform:
translateY(0);

}

50% {

transform:
translateY(-14px);

}

}



/* MOBILE */

@media(max-width:560px){


.hero-tech-img {

max-width:360px;

}


.showcase-card {

width:95%;

margin-top:-45px;

}


}
/* ===== FIX HERO VISUAL RAPI DESKTOP & HP ===== */

.hero-visual {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.hero-tech-img {
  width: 100%;
  max-width: 560px;
  border-radius: 30px;
  object-fit: cover;
}

.showcase-card,
.glass-card {
  width: 88%;
  margin: 10px auto 0;
  border-radius: 26px;
}

@media (max-width: 960px) {
  .hero-visual {
    max-width: 520px;
  }

  .hero-tech-img {
    max-width: 520px;
  }

  .showcase-card,
  .glass-card {
    width: 92%;
    margin-top: -26px;
  }
}

@media (max-width: 560px) {
  .hero-visual {
    max-width: 100%;
  }

  .hero-tech-img {
    max-width: 100%;
    border-radius: 24px;
  }

  .showcase-card,
  .glass-card {
    width: 94%;
    margin-top: -18px;
    border-radius: 22px;
  }
}
/* ===== FIX HERO VISUAL MOBILE GAP ===== */

@media (max-width: 560px) {
  .hero-tech-img {
    margin-bottom: 10px !important;
  }

  .showcase-card,
  .glass-card {
    margin-top: 0 !important;
  }

  .showcase {
    padding-bottom: 8px !important;
  }
}