:root{
  --ink:#0b0d12;
  --muted:#6a7280;
  --dark:#0a0f18;
  --dark2:#070b12;
  --line:rgba(12,16,32,.18);
  --pill:#0b0f18;
  --glow1:rgba(120,240,210,.85);
  --glow2:rgba(140,170,255,.85);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:#fff;
}
img{max-width:100%; height:auto; display:block}

.skip-link{
  position:absolute;
  left:-9999px;
  top:10px;
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  color:var(--ink);
  z-index:9999;
}
.skip-link:focus{left:16px}

/* HERO (white) */
.hero{
  padding:84px 0 54px;
  background:#fff;
  background-image:url("../img/hero.png");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 100%;
  height:100vh;
  min-height:100vh;
  display:flex;
  align-items:center;
}
.hero__container{max-width:1180px}
.hero__copy{
  padding-top:26px;
}
.hero__title{
  margin:0 0 16px;
  line-height:1.02;
  letter-spacing:-.03em;
}
.hero__line{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.hero__strong{
  font-weight:900;
  font-size:clamp(40px, 4.6vw, 64px);
  color: #05070c;
}

.menu .menu-item a {
  color: #05070c;
}

.menu-box__sublist li a, .menu-box__link-text, .menu-details__contact a, .menu-box__link {
  color: #fff;
}

.hero__italic{
  font-style:italic;
  font-weight:400;
  font-size:clamp(40px, 4.6vw, 64px);
  color: #05070c;
}
.hero__lead{
  margin:0 0 24px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
  max-width:42ch;
}

.hero__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:54px;
}

.hero__actions .btn-pill{
  width:280px;
  justify-content:center;
}
.btn-pill{
  border-radius:999px !important;
  padding:12px 18px !important;
  font-weight:900 !important;
  font-size:12px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1.5px solid rgba(12,16,32,.22) !important;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-pill:hover{transform:translateY(-1px)}
.btn-pill--primary{
  background:var(--pill) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.btn-pill--primary:hover{box-shadow:0 16px 34px rgba(0,0,0,.22)}
.btn-pill--outline{
  background:#fff !important;
  color:var(--pill) !important;
  box-shadow:none;
}
.btn-pill--outline:hover{box-shadow:0 10px 18px rgba(0,0,0,.10)}
.btn-pill--light{
  background:#fff !important;
  color:var(--pill) !important;
  border-color:rgba(12,16,32,.16) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.06);
}

.hero__img{
  display:none;
}

/* SECTION 2 (dark) */
.tri{padding:100px 0 100px}
.tri--dark{
  background:radial-gradient(900px 520px at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--dark), var(--dark2));
  color:#fff;
}
.tri__head{margin-bottom:34px}
.tri__kicker{
  font-size:16px;
  font-weight:500;
  letter-spacing:.02em;
  color:rgba(255,255,255,.86);
}
.tri__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:0 6px;
}
.tri__num{
  width:min(260px, 78%);
  height:150px;
  object-fit:contain;
  object-position:center;
  opacity:.98;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));
}
.tri__copy{max-width:28ch}
.tri__title{
  font-weight:800;
  font-size:22px;
  letter-spacing:-.01em;
}
.tri__text{
  margin-top:10px;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.55;
}

/* SECTION 3 (dark lens) */
.lens{
  background:linear-gradient(180deg, #05070c, #080d16 60%, #070b12);
  color:#fff;
  padding:44px 0 56px;
  overflow:hidden;
}
.lens__head{
  margin-bottom:22px;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
.lens__headGrid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.lens__headIcon{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  opacity:.92;
}
.lens__headIcon img{
  width:240px;
  height:240px;
}
.lens__headText{
  text-align:right;
}
.lens__title{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(26px, 3vw, 40px);
}
.lens__sub{
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:30px;
  line-height:1.6;
}
.lens__stage{
  position:relative;
  width:min(980px, 100%);
  margin:26px auto 16px;
}
.lens__img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 22px 60px rgba(0,0,0,.45));
}
.lens__call{z-index:2}
.lens__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.lens__path{
  fill:none;
  stroke:url(#lg);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:12 10;
  opacity:.95;
  animation:lensDash 5.5s linear infinite;
}
.lens__path--thin{
  stroke-width:1.6;
  opacity:.7;
  animation-duration:7.2s;
}
.lens__ticks{fill:none; stroke:rgba(255,255,255,.28); stroke-width:2; stroke-linecap:round}
@keyframes lensDash{from{stroke-dashoffset:0}to{stroke-dashoffset:-220}}

.lens__call{
  position:absolute;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
  backdrop-filter:none;
}
.lens__callTitle{
  font-size:28px;
  line-height:1.15;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

/* design-style callout lines */
.lens__call::after{
  content:"";
  position:absolute;
  top:calc(100% + 10px);
  height:2px;
  background:rgba(255,255,255,.55);
  border-radius:999px;
  opacity:.9;
}
.lens__call::before{
  content:"";
  position:absolute;
  width:2px;
  background:rgba(255,255,255,.55);
  border-radius:999px;
  opacity:.9;
  display:none;
}
.lens__call--leftTop{
  left:8%;
  top:21%;
  text-align:left;
}
.lens__call--leftTop::after{
  left:0;
  width:240px;
}
.lens__call--leftTop::before{
  display:block;
  left:240px;
  top:calc(100% + 10px);
  height:70px;
}
.lens__call--leftBottom{
  left:10%;
  top:72%;
  text-align:left;
}
.lens__call--leftBottom::after{
  left:0;
  width:360px;
}
.lens__call--rightMid{
  right:6%;
  top:34%;
  text-align:right;
}
.lens__call--rightMid::after{
  right:0;
  width:260px;
}

.lens__dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.0) 55%), linear-gradient(135deg, var(--glow1), var(--glow2));
  box-shadow:0 0 0 6px rgba(120,240,210,.10), 0 0 22px rgba(140,170,255,.32);
  opacity:.95;
}
.lens__dot--a{left:21%; top:56%; animation:dotFloat 3.2s ease-in-out infinite}
.lens__dot--b{left:52%; top:46%; animation:dotFloat 3.8s ease-in-out infinite .4s}
.lens__dot--c{left:73%; top:60%; animation:dotFloat 4.1s ease-in-out infinite .8s}
@keyframes dotFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(0,-10px) scale(1.05)}}

.lens__fine{
  margin-top:18px;
  color:#fff;
  font-size:35px;
  line-height:1.75;
  max-width:110ch;
  margin-left:auto;
  margin-right:auto;
  text-align: justify;
}

/* SECTION 4 (white) */
.why{
  background:#fff;
  background-image: url("../img/bgone.png");
  background-size: cover;
  background-position: 10% 60%;
  background-repeat: no-repeat;
  padding:56px 0 0
}

.why__kicker{
  text-align:left;
   font-weight:400;
    font-size:52px;
     letter-spacing:.18em;
      color:#0C0F1C;
      padding: 200px 0px;
    }
.why__hexRow{
  margin:26px auto 22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  max-width:980px;
}
.hex{
  width:132px;
  height:114px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:11px;
  line-height:1.25;
  font-weight:600;
  color:rgba(12,16,32,.72);
  background:linear-gradient(180deg, rgba(12,16,32,.03), rgba(12,16,32,.01));
  border:1px solid rgba(12,16,32,.12);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
}
.why__center{padding:200px 0px 400px;}
.why__subKicker{font-size:20px; color:rgba(12,16,32,.46); max-width:92ch; margin:0 auto 10px}
.why__title{margin:0 0 16px; font-weight:600; font-size:65px; color:rgba(12,16,32,.78)}
.why__bg{
  width:100%;
  height:clamp(220px, 34vw, 420px);
  background-image:url("../img/why-bg.svg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* SECTION 5 (cta) */
.cta{padding:56px 0 56px; background:#fff}
.cta__card{
  border-radius:18px;
  padding:44px 18px;
  background-image:url("../img/cta-bg.svg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(12,16,32,.10);
}
.cta__title{margin:0 0 8px; font-weight:800; letter-spacing:-.02em; font-size:clamp(24px, 2.4vw, 34px)}
.cta__sub{margin:0 0 18px; color:rgba(12,16,32,.62); font-size:12px}

/* Footer */
.footer{padding:18px 0 26px;  border-top:0px solid rgba(12,16,32,.10)}
.footer__text{text-align:left; color:#fff; font-size:14px}

/* =========================
   MOBILE / RESPONSIVE FIXES
   ========================= */

@media (max-width: 991.98px){
  .tri{padding:72px 0 80px}
  .lens{padding:40px 0 52px}
  .why{padding-top:42px}
  .why__kicker{padding:120px 0; font-size:34px}
  .why__center{padding:120px 0 220px}
  .why__title{font-size:44px}
  .why__subKicker{font-size:14px}
}

@media (max-width: 767.98px){
  .hero{
    background-size:cover;
    background-position:72% center;
    padding:44px 0 18px;
  }
  .hero__actions{margin-top:26px}
  .hero__actions .btn-pill{width:100%; max-width:320px}

  .tri{padding:54px 0 60px}
  .tri__num{height:120px}
  .tri__title{font-size:18px}
  .tri__text{font-size:14px}

  .lens__headGrid{flex-direction:column; align-items:center; gap:14px}
  .lens__headIcon img{width:56px; height:56px}
  .lens__headText{text-align:center}
  .lens__title{font-size:28px}
  .lens__sub{font-size:12px; line-height:1.6}
  .lens__fine{font-size:12px; color:rgba(255,255,255,.72); text-align:center}

  /* mobile: screenshot-style pill labels */
  .lens__call{
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(8,12,20,.55);
    backdrop-filter: blur(10px);
  }
  .lens__call::after{display:none}
  .lens__call::before{display:none}
  .lens__callTitle{font-size:12px; font-weight:600}
  .lens__call--leftTop{left:4%; top:22%}
  .lens__call--leftBottom{left:6%; top:58%}
  .lens__call--rightMid{right:4%; top:38%}

  .why{
    background-position:center;
    padding-top:34px;
  }
  .why__kicker{
    padding:70px 0 18px;
    font-size:22px;
    letter-spacing:.12em;
    text-align:left;
  }
  .why__center{padding:34px 0 140px}
  .why__title{font-size:28px}
  .why__subKicker{font-size:12px}

  .footer__text{font-size:12px; line-height:1.6}
}

@media (max-width: 575.98px){
  .lens__call{max-width:160px}
  .lens__stage{margin-top:18px}
}

@media (max-width: 991.98px){
  .hero{padding:54px 0 24px}
  .hero__lead{max-width:52ch}
  .tri__copy{max-width:38ch; text-align:center}
  .lens__call{display:none}
  .hero{
    background-size: cover;
    background-position: 70% center;
    min-height:520px;
  }
  .hero__actions{margin-top:34px}
  .hero__actions .btn-pill{width:100%; max-width:320px}
}

@media (max-width: 575.98px){
  .hero{padding:44px 0 18px}
  .hero{
    background-size: cover;
    background-position: 72% center;
    min-height:480px;
  }
}

@media (max-width: 767.98px){
  .lens__headGrid{
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .lens__headText{ text-align:center; }
}

@media (max-width: 767.98px){
  .tri{padding:46px 0 56px}
  .tri__head{margin-bottom:26px}
  .tri__num{height:130px}
  .tri__title{font-size:20px}
  .tri__text{font-size:15px}

  /* mobile: screenshot-style pill labels */
  .lens__call{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(8,12,20,.55);
    backdrop-filter: blur(10px);
    z-index:3;
  }
  .lens__call::after{display:none}
  .lens__call::before{display:none}
  .lens__callTitle{font-size:12px; font-weight:600}
  .lens__call--leftTop{left:4%; top:22%}
  .lens__call--leftBottom{left:6%; top:58%}
  .lens__call--rightMid{right:4%; top:38%}
}