:root{
  --bg:#ffffff;
  --ink:#0A1B33;
  --muted:rgba(10,27,51,.64);
  --muted2:rgba(10,27,51,.52);
  --line:rgba(10,27,51,.10);

  --blue:#2F8CFF;
  --blue2:#A7DDFF;
  --blue3:#EAF7FF;
  --cyan:#00C2FF;

  --r:24px;
  --r2:18px;

  --shadow:0 18px 56px rgba(16,58,120,.12);
  --shadow2:0 12px 30px rgba(16,58,120,.10);
  --shadow3:0 10px 22px rgba(16,58,120,.08);

  --container:1180px;

  --headerH:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--container),calc(100% - 44px));margin-inline:auto}
section{scroll-margin-top: calc(var(--headerH) + 16px);}
.section{padding:86px 0; position:relative;}

.soft{
  background:
    radial-gradient(900px 450px at 14% -10%, rgba(47,140,255,.20), transparent 60%),
    radial-gradient(900px 450px at 90% 8%, rgba(167,221,255,.34), transparent 60%),
    linear-gradient(180deg, rgba(234,247,255,.92), #fff);
}

.header{
  height: var(--headerH);
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.78);
  border-bottom:1px solid var(--line);
}
.nav{
  height: var(--headerH);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width:220px;
}
.logo{
  width:42px; height:42px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: var(--shadow3);
  position:relative; overflow:hidden;
}
.logo::after{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 56%);
  transform: rotate(18deg);
}
.brand b{display:block; font-size:14px; letter-spacing:-.2px}
.brand span{display:block; font-size:12px; color:var(--muted)}

.links{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
.links a{
  font-size:13px;
  color: var(--muted);
  padding:10px 12px;
  border-radius:999px;
  transition:.2s ease;
}
.links a:hover{
  background: rgba(47,140,255,.08);
  color: var(--ink);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  position:relative;
  overflow:hidden;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--blue), #67B8FF);
  box-shadow: 0 16px 38px rgba(47,140,255,.22);
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:-60% -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: translateX(-40%) rotate(18deg);
  opacity:.0;
  transition: opacity .18s ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 58px rgba(47,140,255,.26);
}
.btn-primary:hover::after{
  opacity:1;
  animation: shimmer 1.15s ease forwards;
}
@keyframes shimmer{
  from{ transform: translateX(-40%) rotate(18deg); }
  to  { transform: translateX(60%) rotate(18deg); }
}

.btn-soft{
  background: rgba(255,255,255,.78);
  border-color: rgba(47,140,255,.20);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(16,58,120,.06);
}
.btn-soft:hover{
  background: rgba(47,140,255,.06);
  border-color: rgba(47,140,255,.28);
  transform: translateY(-1px);
}

.card{
  border:1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
}
.card-lite{
  border:1px solid rgba(10,27,51,.10);
  border-radius: var(--r2);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.hover-up{
  transition: transform .18s ease, box-shadow .18s ease;
}
.hover-up:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 68px rgba(16,58,120,.14);
}

.hero{
  position:relative;
  padding:38px 0 0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-140px -140px auto -140px;
  height:560px;
  background:
    radial-gradient(700px 340px at 14% 45%, rgba(47,140,255,.22), transparent 62%),
    radial-gradient(700px 340px at 86% 10%, rgba(167,221,255,.42), transparent 58%),
    linear-gradient(180deg, rgba(234,247,255,.96), rgba(255,255,255,0));
  pointer-events:none;
}
.blob{
  position:absolute;
  width: 520px; height: 520px;
  right: -220px; top: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(0,194,255,.28), transparent 58%),
              radial-gradient(circle at 70% 70%, rgba(47,140,255,.24), transparent 58%);
  filter: blur(10px);
  opacity: .9;
  animation: floatBlob 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floatBlob{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-18px, 18px, 0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap:18px;
  padding:56px 0 78px;
  align-items:stretch;
}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(47,140,255,.18);
  background: rgba(255,255,255,.72);
  font-size:13px;
  font-weight:900;
  color: rgba(10,27,51,.86);
}
.dot{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 0 0 6px rgba(0,194,255,.10);
}

h1{
  margin:16px 0 10px;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height:1.05;
  letter-spacing:-.9px;
}
.lead{
  margin:0;
  font-size: 15.5px;
  color: var(--muted);
  max-width: 64ch;
}
.bullets{
  margin:18px 0 22px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  color: rgba(10,27,51,.84);
  font-weight:800;
  font-size:14px;
}
.bullets li{display:flex;gap:10px;align-items:flex-start}
.check{
  width:22px;height:22px;border-radius:9px;
  background: rgba(47,140,255,.10);
  border:1px solid rgba(47,140,255,.18);
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;margin-top:1px;
}
.check svg{width:14px;height:14px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
.mini{
  margin-top:10px;
  font-size:12px;
  color: var(--muted2);
}

.hero-card{
  padding:18px;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute; inset:-40% -20% auto -20%;
  height:240px;
  background:
    radial-gradient(circle at 30% 30%, rgba(47,140,255,.18), transparent 55%),
    radial-gradient(circle at 70% 10%, rgba(167,221,255,.34), transparent 60%);
  pointer-events:none;
}
.hero-card > *{position:relative}

.kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.kpi{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(47,140,255,.14);
  background: rgba(234,247,255,.62);
}
.kpi b{display:block;font-size:16px;letter-spacing:-.2px}
.kpi span{display:block;font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--line);margin:14px 0}

.mini-list{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:var(--muted);font-size:13px}
.mini-list li{display:flex;gap:10px;align-items:flex-start}
.ico{
  width:28px;height:28px;border-radius:12px;
  background: rgba(47,140,255,.12);
  border:1px solid rgba(47,140,255,.18);
  display:grid;place-items:center;
  flex:0 0 auto;
}

.title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.title h2{
  margin:0;
  font-size: clamp(22px, 2.5vw, 36px);
  letter-spacing:-.35px;
  line-height:1.15;
}
.title p{
  margin:6px 0 0;
  color: var(--muted);
  font-size:14px;
  max-width: 64ch;
}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}

.branch .media{
  aspect-ratio:16/10;
  background: linear-gradient(135deg, rgba(47,140,255,.10), rgba(167,221,255,.30));
  border-bottom:1px solid var(--line);
}
.branch .body{padding:16px;display:grid;gap:10px}
.branch h3{margin:0;font-size:16px;letter-spacing:-.2px}
.meta{display:grid;gap:8px;color:var(--muted);font-size:13px}
.meta .row{display:flex;gap:10px;align-items:flex-start}
.meta svg{width:16px;height:16px;opacity:.82;flex:0 0 auto;margin-top:1px}

.video .frame{
  aspect-ratio:16/9;
  background: linear-gradient(135deg, rgba(47,140,255,.10), rgba(167,221,255,.30));
  border-bottom:1px solid var(--line);
}
.video iframe{width:100%;height:100%;border:0;display:block}
.video .body{padding:16px;display:grid;gap:10px}
.video h3{margin:0;font-size:16px}
.video p{margin:0;color:var(--muted);font-size:13px}

.scroller{
  display:flex;gap:14px;
  overflow:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.scroller::-webkit-scrollbar{height:10px}
.scroller::-webkit-scrollbar-thumb{background:rgba(47,140,255,.18);border-radius:99px}
.testi{
  flex:0 0 auto;
  width:min(420px,86vw);
  scroll-snap-align:start;
  padding:16px;
  display:grid;
  gap:10px;
}
.stars{display:flex;gap:4px}
.stars svg{width:16px;height:16px}
.quote{font-weight:900;font-size:14px}
.who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.avatar{
  width:34px;height:34px;border-radius:14px;
  background: linear-gradient(135deg, rgba(47,140,255,.20), rgba(167,221,255,.45));
  border:1px solid rgba(47,140,255,.14);
}

.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color: rgba(10,27,51,.78);
  border:1px solid rgba(47,140,255,.18);
  background: rgba(47,140,255,.06);
}

details.pack{
  border:1px solid rgba(10,27,51,.10);
  border-radius:18px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
summary.pack-sum{
  cursor:pointer;
  list-style:none;
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:900;
}
summary.pack-sum::-webkit-details-marker{display:none}
.chev{width:18px;height:18px;opacity:.82;transition:transform .18s ease}
details[open] .chev{transform: rotate(180deg)}
.pack-body{padding:0 16px 16px;display:grid;gap:12px}
.imgph{
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(10,27,51,.10);
  background: linear-gradient(135deg, rgba(47,140,255,.10), rgba(167,221,255,.30));
}
.ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.ul li{margin:6px 0}
.roi{
  padding:12px 14px;
  border-radius:16px;
  background: rgba(234,247,255,.72);
  border:1px solid rgba(47,140,255,.14);
  font-size:13px;
  color: rgba(10,27,51,.75);
  font-weight:900;
}

.consult-card{padding:18px}
.consult-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.consult-hint{
  color: var(--muted);
  font-size:14px;
  font-weight:700;
  margin-top:6px;
}
.consult-hint b{color: rgba(10,27,51,.88)}
.hr{height:1px;background:var(--line);margin:14px 0}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field label{
  display:block;
  font-size:12px;
  color: rgba(10,27,51,.62);
  font-weight:900;
  margin:0 0 8px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(10,27,51,.14);
  background: rgba(255,255,255,.95);
  outline:none;
  font:inherit;
  font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(47,140,255,.55);
  box-shadow: 0 0 0 4px rgba(47,140,255,.12);
}
.btn-wide{
  width:100%;
  justify-content:center;
  padding:14px 16px;
  border-radius:16px;
  font-weight:900;
}
.note{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(10,27,51,.10);
  background: rgba(10,27,51,.03);
  color: rgba(10,27,51,.60);
  font-size:12px;
  font-weight:700;
}

.pulse{
  animation: pulseGlow .9s ease-out;
}
@keyframes pulseGlow{
  0%{ box-shadow: 0 0 0 0 rgba(47,140,255,.0), var(--shadow); transform: translateY(0); }
  45%{ box-shadow: 0 0 0 8px rgba(47,140,255,.10), 0 28px 70px rgba(16,58,120,.14); transform: translateY(-1px); }
  100%{ box-shadow: var(--shadow); transform: translateY(0); }
}

.faq-wrap{
  border-radius:28px;
  padding:22px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(47,140,255,.14), transparent 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(167,221,255,.26), transparent 60%),
    rgba(234,247,255,.55);
  border:1px solid rgba(47,140,255,.12);
  box-shadow: 0 16px 44px rgba(16,58,120,.08);
}
.faq-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.faq-head h2{margin:0}
.faq-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
.faq-list{display:grid;gap:12px;margin-top:12px}
details.faq-item{
  border:1px solid rgba(10,27,51,.10);
  background: rgba(255,255,255,.90);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(16,58,120,.06);
}
summary.faq-sum{
  cursor:pointer;
  list-style:none;
  padding:14px 14px;
  font-weight:900;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px;
}
summary.faq-sum::-webkit-details-marker{display:none}
.faq-body{
  padding:0 14px 14px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.faq-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

footer{
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, rgba(234,247,255,.60), #fff);
  padding:44px 0;
}
footer p{margin:8px 0 0;color:var(--muted);font-size:13px}
footer small{display:block;margin-top:12px;color:rgba(10,27,51,.55)}

.float-cta{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(47,140,255,.20);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 55px rgba(16,58,120,.16);
  transition: transform .15s ease;
}
.float-cta:hover{transform: translateY(-2px)}
.float-ico{
  width:44px !important;
  height:44px !important;
  border-radius:14px;
  background: linear-gradient(135deg, var(--blue), #67B8FF);
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow: 0 12px 28px rgba(47,140,255,.20);
  color:#fff;
  font-weight:900;
  flex-shrink:0;
}
.float-ico svg{
  width:24px !important;
  height:24px !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
.float-cta b{display:block;font-size:12px;line-height:1.1}
.float-cta span{display:block;font-size:12px;color:var(--muted)}

.reveal{opacity:0; transform: translateY(10px)}
.reveal.on{opacity:1; transform:none; transition:.55s ease}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .links{display:none}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .g2,.g3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .faq-wrap{padding:16px}
  .float-cta b{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .blob{animation:none}
  .btn-primary:hover::after{animation:none}
  .reveal,.reveal.on{transition:none;transform:none}
  .hover-up{transition:none}
  .pulse{animation:none}
}

/* Package Image Slider */
.package-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(47,140,255,0.03), rgba(124,198,255,0.05));
    margin-bottom: 16px;
}

.package-slider .slide {
    display: none;
}

.package-slider .slide.active {
    display: block;
}

.package-slider .slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(10,27,51,0.15);
    transition: all 0.2s ease;
    z-index: 2;
}

.slider-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev { left: 10px; }
.slider-nav.next { right: 10px; }

.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: 2px solid rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.slider-dots .dot.active,
.slider-dots .dot:hover {
    background: var(--accent);
    border-color: #fff;
}

/* Logo Image */
.logo-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Mobile Button Fix */
@media (max-width: 768px) {
    .title {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .title .btn {
        width: 100%;
        text-align: center;
        white-space: normal;
        padding: 12px 16px;
        font-size: 13px;
    }
    
    .header .btn {
        display: none;
    }
    
    .cta-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .cta-row .btn {
        width: 100%;
        text-align: center;
        white-space: normal;
    }
    
    .float-cta {
        right: 12px;
        bottom: 12px;
        padding: 10px 14px;
    }
    
    .float-cta b {
        font-size: 13px;
    }
    
    .float-cta span {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .btn {
        font-size: 13px;
        padding: 10px 14px;
        white-space: normal;
        line-height: 1.3;
    }
    
    .btn-primary {
        min-width: auto;
    }
    
    .btn-soft {
        min-width: auto;
    }
    
    .title .btn,
    .cta-row .btn {
        width: 100%;
        box-sizing: border-box;
    }
    
    .pack-body .btn {
        width: 100%;
    }
    
    .faq-cta .btn {
        width: 100%;
    }
}

/* Portfolio Section */
.portfolio-item {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.portfolio-img {
    width: 300px;
    min-width: 300px;
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, #e8f4ff, #f0f8ff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
}

.portfolio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-img .placeholder {
    color: #94a3b8;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    padding: 8px;
}

.portfolio-item .body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
}

@media (max-width: 768px) {
    .portfolio-img {
        width: 220px;
        min-width: 220px;
    }
    .portfolio-item .body {
        padding: 12px 14px;
    }
}