:root{
  --w:1180px;--pad:20px;--text:#121418;--muted:#60636b;--acc:#0f7bff;
  --glass-bg: rgba(255,255,255,.55);--glass-bd: rgba(255,255,255,.9);--glass-sh: 0 20px 40px rgba(15, 25, 40, .08);
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--text);line-height:1.65;background:#f7f8fb;overflow-x:hidden}
a{color:var(--acc);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

/* WOW animated background */
.bg-anim,.bg-orb{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;filter:saturate(120%)}
.bg-anim{
  background:
    radial-gradient(60vmax 45vmax at 15% 10%, rgba(15,123,255,.12), transparent 60%),
    radial-gradient(60vmax 45vmax at 85% 0%, rgba(255,182,72,.14), transparent 60%),
    radial-gradient(60vmax 45vmax at 55% 95%, rgba(70,220,150,.12), transparent 60%),
    linear-gradient(120deg, #f7f8fb, #f9fbff 60%, #f7f8fb);
  animation:bgShift 16s ease-in-out infinite alternate;
}
@keyframes bgShift{0%{transform:translateY(-1%) scale(1.02)}100%{transform:translateY(1%) scale(1.05)}}
.bg-orb:before,.bg-orb:after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,.1));
  filter:blur(18px);border:1px solid rgba(255,255,255,.6)}
.bg-orb:before{left:-15vmax;top:-10vmax;animation:orb1 22s ease-in-out infinite}
.bg-orb:after{right:-10vmax;bottom:-15vmax;animation:orb2 26s ease-in-out infinite}
@keyframes orb1{0%{transform:translate(0,0)}50%{transform:translate(6vmax,3vmax)}100%{transform:translate(0,0)}}
@keyframes orb2{0%{transform:translate(0,0)}50%{transform:translate(-5vmax,-4vmax)}100%{transform:translate(0,0)}}

/* Header glass */
header{position:sticky;top:0;z-index:10;padding:14px 0;background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.36));
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.6)}
header .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo{font-weight:800}
nav{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  box-shadow:0 6px 20px rgba(15,25,40,.08);color:#0a2540;transform:translateZ(0);transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,25,40,.12)}
.btn.solid{background:linear-gradient(180deg,#0f7bff,#0d6ae0);color:#fff;border-color:#0d6ae0;box-shadow:0 10px 22px rgba(15,123,255,.25)}

.hero{padding:64px 0 48px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;will-change:transform}
.hero h1{font-size:42px;margin:0 0 12px}
.hero p{margin:0 0 18px;color:var(--muted)}
.hero .hero-photo{width:100%;border-radius:24px;border:1px solid rgba(255,255,255,.8);box-shadow:var(--glass-sh);transform:translateZ(0);transition:transform .2s ease}

.card{background:var(--glass-bg);border:1px solid var(--glass-bd);border-radius:22px;padding:22px;box-shadow:var(--glass-sh);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px)}
section{padding:28px 0}
h2{margin:0 0 12px}
.grid{display:grid;gap:14px}.grid.cols2{grid-template-columns:1fr 1fr}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.8);box-shadow:var(--glass-sh);transform:translateZ(0);transition:transform .2s ease}
.gallery img:hover{transform:scale(1.02)}

/* Testimonials slider */
.testi-track{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.testi{scroll-snap-align:start;min-width:320px;max-width:360px}
.testi .who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.testi .who img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.9)}
.testi .name{font-weight:600}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.post{display:block}.post .title{font-weight:700;margin:6px 0}.post .meta{font-size:13px;color:var(--muted)}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(15,25,40,.12);background:rgba(255,255,255,.85);color:#0a2540}
.lang{font-size:13px;color:var(--muted)}
footer{padding:34px 0 64px;color:var(--muted)}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .grid.cols2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr}
}