:root{
  --bg:#07152c;
  --bg-2:#0b2243;
  --surface:rgba(255,255,255,.08);
  --surface-strong:rgba(255,255,255,.13);
  --surface-line:rgba(255,255,255,.12);
  --text:#edf5ff;
  --muted:#b8c8db;
  --soft:#8ea6c3;
  --primary:#3bbdf8;
  --primary-2:#24e0d4;
  --accent:#65f0a3;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius:28px;
  --radius-lg:36px;
  --container:min(1180px, calc(100% - 32px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#07152c 0%,#081a35 48%,#07162e 100%);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.site-bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(circle at 12% 14%, rgba(37,204,255,.16), transparent 22%),
    radial-gradient(circle at 88% 12%, rgba(53,136,255,.14), transparent 20%),
    radial-gradient(circle at 76% 70%, rgba(63,236,168,.12), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.site-bg::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.18));
}
.container{width:var(--container);margin-inline:auto}
.top-strip{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(2,10,26,.26);
  backdrop-filter: blur(12px);
}
.top-strip-inner{
  min-height:46px;
  display:flex; gap:20px; justify-content:space-between; align-items:center;
  flex-wrap:wrap; color:var(--muted); font-size:.88rem;
  padding:10px 0;
}
.top-strip-inner span, .top-strip-inner a{display:inline-flex; align-items:center; gap:8px}
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(7,21,44,.86), rgba(7,21,44,.66));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-shell{
  min-height:88px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand img{height:auto}
.main-nav{display:flex; align-items:center; gap:12px}
.nav-link{
  padding:12px 14px; border-radius:999px; color:#dbe8f7;
  font-weight:700; font-size:.96rem;
}
.nav-link:hover,.nav-link.is-active{
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.nav-cta{
  padding:14px 20px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#041a2e; font-weight:900; box-shadow:0 14px 28px rgba(51,196,255,.28);
}
.menu-toggle{
  display:none; width:52px;height:52px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); border-radius:18px; color:#fff;
}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;border-radius:999px}
.hero-section{padding:72px 0 34px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:999px;
  background:rgba(5,31,67,.82);
  border:1px solid rgba(100,210,255,.18);
  color:#a7ecff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800;
}
.eyebrow::before{
  content:""; width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary-2),#8afef3);
  box-shadow:0 0 20px rgba(102,245,236,.5);
}
.hero-copy h1,.page-hero-shell h1{
  margin:20px 0 18px;
  font-family:"Plus Jakarta Sans","Manrope",sans-serif;
  font-size:clamp(2.6rem, 7vw, 5.15rem);
  line-height:.98; letter-spacing:-.05em; max-width:12ch;
}
.hero-copy p,.page-hero-shell p{
  color:var(--muted); font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.85; max-width:62ch; margin:0 0 28px;
}
.hero-actions,.cta-actions{
  display:flex; flex-wrap:wrap; gap:14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 22px; border-radius:18px; border:1px solid transparent;
  font-weight:900; letter-spacing:-.02em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg, #34b8ff, #28e1cf);
  color:#051523; box-shadow:0 16px 34px rgba(43,189,249,.3);
}
.btn-secondary{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); color:#eef6ff;
}
.btn-tertiary{
  background:transparent; border-color:rgba(99,196,255,.25); color:#8aefff;
}
.hero-visual{position:relative}
.visual-stage{
  position:relative; min-height:620px; padding:30px;
}
.glass-panel{
  position:absolute;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px);
  overflow:hidden;
}
.panel-main{
  inset:32px 118px 160px 0;
  border-radius:42px;
}
.panel-main img,.panel-side img,.image-card img,.stack-card img,.gallery-item img,.blog-card img,.article-cover{width:100%;height:100%;object-fit:cover}
.panel-side{
  width:240px;height:280px; right:0; top:118px; border-radius:32px;
}
.panel-floating{
  width:260px; min-height:150px; padding:22px 22px 20px;
  border-radius:28px;
}
.panel-a{left:24px; bottom:36px}
.panel-b{right:28px; bottom:18px}
.mini-kicker{display:block;color:#90efff; text-transform:uppercase; font-size:.76rem; letter-spacing:.16em; margin-bottom:8px}
.panel-floating strong{display:block; font-size:1.08rem; line-height:1.3; margin-bottom:8px}
.panel-floating p{margin:0; color:var(--muted); line-height:1.7; font-size:.92rem}
.stat-strip{padding:8px 0 28px}
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.stat-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px; padding:26px 24px; box-shadow:var(--shadow);
}
.stat-item strong{
  display:block; font-size:clamp(2rem,4vw,3rem); line-height:1; letter-spacing:-.05em;
}
.stat-item span{display:block; color:var(--muted); margin-top:8px; line-height:1.6}
.section{padding:74px 0}
.section-accent{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section-head{max-width:760px; margin:0 auto 28px; text-align:center}
.section-head h2{margin:18px 0 12px; font-size:clamp(1.9rem,4vw,3.45rem); line-height:1.04; letter-spacing:-.04em}
.section-head p{color:var(--muted); line-height:1.85; margin:0}
.card-grid{display:grid; gap:18px}
.services-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
.values-grid,.pricing-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
.premium-card{
  padding:28px; border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow);
}
.premium-card h3{margin:18px 0 10px; font-size:1.22rem}
.premium-card p{margin:0; color:var(--muted); line-height:1.8}
.icon-shell{
  width:88px;height:88px;border-radius:24px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(91,205,255,.18), rgba(41,132,255,.1));
  border:1px solid rgba(100,210,255,.2)
}
.two-col{display:grid;grid-template-columns:1fr 1fr; gap:28px; align-items:center}
.content-block h2{font-size:clamp(1.9rem,4vw,3.3rem);line-height:1.04;letter-spacing:-.04em; margin:18px 0 14px}
.content-block p{color:var(--muted); line-height:1.9; margin:0 0 14px}
.feature-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.feature-list li{display:flex; gap:12px; align-items:flex-start; color:#e9f2fd; line-height:1.65}
.feature-list i{color:#87efff; margin-top:4px}
.feature-list.compact li{line-height:1.5}
.image-stack{display:grid; grid-template-columns:1.1fr .9fr; gap:18px}
.stack-card{
  min-height:230px; overflow:hidden;
  border-radius:32px; border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow);
}
.stack-card:nth-child(1){grid-row:span 2; min-height:490px}
.timeline-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.timeline-card{
  padding:28px; border-radius:28px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)
}
.timeline-card span{
  display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;
  background:linear-gradient(135deg, rgba(52,184,255,.28), rgba(40,225,207,.18)); font-weight:900
}
.timeline-card h3{margin:18px 0 10px}
.timeline-card p{margin:0;color:var(--muted);line-height:1.8}
.faq-grid{display:grid; gap:16px}
.faq-item{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:24px; box-shadow:var(--shadow);
  padding:20px 22px;
}
.faq-item summary{cursor:pointer; font-weight:800; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{color:var(--muted); line-height:1.8; margin:14px 0 0}
.cta-banner{
  padding:34px; border-radius:34px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:linear-gradient(135deg, rgba(53,184,255,.16), rgba(35,224,211,.11));
  border:1px solid rgba(94,214,255,.18); box-shadow:var(--shadow)
}
.cta-banner h2{margin:16px 0 10px; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.08}
.cta-banner p{margin:0; color:var(--muted); line-height:1.8}
.page-hero{padding:68px 0 10px}
.page-hero-shell{padding:32px 0 0}
.contact-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:24px;
}
.form-shell,.contact-card,.article-card,.map-frame{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow); border-radius:30px;
}
.form-shell{padding:30px}
.form-shell h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.08;margin:16px 0 18px}
.contact-form{margin-top:20px}
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field-full{grid-column:1/-1}
label span{display:block; margin-bottom:9px; color:#dbe9fb; font-weight:700; font-size:.94rem}
input,textarea{
  width:100%; border:none; outline:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; color:#eef6ff; padding:16px 18px;
}
textarea{resize:vertical}
.form-status{min-height:22px; margin:12px 0 0; color:#9ef7bb}
.contact-side{display:grid; gap:18px}
.contact-card{padding:24px}
.contact-card h3{margin:0 0 10px}
.contact-card p{margin:8px 0; color:var(--muted); line-height:1.7}
.image-card{padding:0; min-height:260px; overflow:hidden}
.map-frame{overflow:hidden}
.map-frame iframe{width:100%; height:420px; border:0}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.gallery-item{
  min-height:290px; overflow:hidden; border-radius:28px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.09)
}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.blog-card{
  overflow:hidden; border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow)
}
.blog-card img{height:240px}
.blog-card div{padding:24px}
.blog-chip,.pricing-badge{
  display:inline-flex; padding:8px 14px; border-radius:999px;
  background:rgba(54,197,250,.14); color:#99efff; border:1px solid rgba(94,214,255,.2); font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em
}
.blog-card h3{margin:16px 0 10px; font-size:1.35rem; line-height:1.25}
.blog-card p{margin:0; color:var(--muted); line-height:1.8}
.article-shell{max-width:980px}
.article-card{overflow:hidden}
.article-cover{height:420px}
.article-copy{padding:34px}
.article-copy h2{margin:20px 0 10px; font-size:2rem; line-height:1.15}
.article-copy p{color:var(--muted); line-height:1.9; margin:0 0 14px}
.site-footer{padding:32px 0 0}
.footer-grid{
  display:grid; grid-template-columns:1.2fr .8fr .9fr; gap:20px;
}
.footer-card{
  padding:28px; border-radius:28px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)
}
.footer-card h3{margin:0 0 14px}
.footer-card p,.footer-card a{display:block;color:var(--muted);line-height:1.8;margin:8px 0}
.footer-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.footer-badges span{
  padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); color:#e9f5ff; font-size:.88rem
}
.footer-bottom{padding:22px 0 36px}
.footer-bottom p{margin:0; color:var(--soft); text-align:center}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in-view{opacity:1; transform:translateY(0)}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}
.tilt-card{transform-style:preserve-3d; transition:transform .25s ease}
@media (max-width: 1100px){
  .hero-grid,.two-col,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .visual-stage{min-height:560px}
  .services-grid,.values-grid,.pricing-grid,.timeline-grid,.blog-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 860px){
  .menu-toggle{display:block}
  .main-nav{
    position:absolute; left:16px; right:16px; top:92px; z-index:40;
    display:none; flex-direction:column; align-items:stretch; gap:8px;
    padding:16px; background:rgba(8,24,47,.96); border:1px solid rgba(255,255,255,.08); border-radius:24px; box-shadow:var(--shadow)
  }
  .main-nav.is-open{display:flex}
  .top-strip-inner{justify-content:flex-start}
  .hero-section{padding-top:40px}
  .hero-grid{gap:24px}
  .hero-copy h1,.page-hero-shell h1{max-width:none}
  .visual-stage{min-height:480px;padding:12px}
  .panel-main{inset:18px 72px 140px 0}
  .panel-side{width:190px;height:210px; top:84px}
  .panel-floating{width:210px;padding:18px}
  .panel-a{left:12px;bottom:20px}
  .panel-b{right:12px;bottom:8px}
}
@media (max-width: 640px){
  :root{--container:min(100% - 22px, 100%)}
  .header-shell{min-height:78px}
  .top-strip{display:none}
  .hero-copy h1,.page-hero-shell h1{font-size:clamp(2.2rem, 12vw, 3.4rem); letter-spacing:-.06em}
  .hero-copy p,.page-hero-shell p{font-size:1rem; line-height:1.75}
  .hero-actions,.cta-actions{flex-direction:column; align-items:stretch}
  .btn{width:100%}
  .visual-stage{
    min-height:auto; display:grid; gap:14px; padding:0;
  }
  .glass-panel,.panel-main,.panel-side,.panel-floating{
    position:relative; inset:auto; width:auto; height:auto;
  }
  .panel-main{border-radius:28px}
  .panel-main img{aspect-ratio:4/4}
  .panel-side img{aspect-ratio:4/3}
  .services-grid,.values-grid,.pricing-grid,.timeline-grid,.blog-grid,.gallery-grid,.stat-grid,.field-grid{grid-template-columns:1fr}
  .stack-card:nth-child(1){grid-row:auto; min-height:280px}
  .stack-card{min-height:220px}
  .gallery-item,.blog-card img,.article-cover,.map-frame iframe{height:auto; min-height:220px}
  .section{padding:54px 0}
  .premium-card,.timeline-card,.footer-card,.contact-card,.form-shell{padding:22px}
  .cta-banner{padding:24px}
}


/* ===== Content-focused visual upgrades ===== */
.section-link-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px}
.section-link-card{
  position:relative;overflow:hidden;min-height:320px;border-radius:28px;padding:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(15,41,79,.85), rgba(7,20,40,.95));
  box-shadow:0 28px 60px rgba(2,8,23,.35), inset 0 1px 0 rgba(255,255,255,.12);
  display:flex;align-items:flex-end;isolation:isolate;
}
.section-link-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(4,10,22,.08), rgba(4,10,22,.82));z-index:1}
.section-link-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(1.05) contrast(1.04)}
.section-link-card .content{position:relative;z-index:2}
.section-link-card h3{margin:0 0 8px;font-size:1.5rem}
.section-link-card p{margin:0 0 14px;color:rgba(231,238,248,.88);line-height:1.7;max-width:28ch}
.section-link-card .mini-kicker{display:inline-flex;margin-bottom:10px}
.section-link-card .inline-link{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:#9ee8ff}
.card-thumb{width:100%;height:190px;object-fit:cover;border-radius:22px;margin-bottom:18px;border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 40px rgba(2,8,23,.28)}
.premium-card.has-media{padding:18px}
.premium-card.has-media h3{margin-top:2px}
.contact-hero-cta{margin-top:14px;display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border-radius:999px;background:linear-gradient(135deg,#1ed760,#13b851);color:#06131d;font-weight:800;box-shadow:0 22px 44px rgba(17,185,81,.38);text-decoration:none}
.contact-hero-cta i{font-size:1.3rem}
.whatsapp-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;margin-top:18px;border-radius:24px;border:1px solid rgba(38,211,94,.25);background:linear-gradient(135deg, rgba(20,70,41,.86), rgba(8,34,22,.92));box-shadow:0 22px 50px rgba(9,30,21,.35)}
.whatsapp-panel strong{display:block;font-size:1.1rem;margin-bottom:4px}
.whatsapp-panel p{margin:0;color:rgba(233,246,238,.84)}
.whatsapp-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:999px;background:linear-gradient(135deg,#25D366,#10a44b);color:#04110a;font-weight:800;text-decoration:none;box-shadow:0 18px 38px rgba(37,211,102,.35)}
.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:99;display:inline-flex;align-items:center;gap:12px;padding:14px 18px;border-radius:999px;background:linear-gradient(135deg,#25D366,#10a44b);color:#06130b;font-weight:800;text-decoration:none;box-shadow:0 22px 40px rgba(37,211,102,.35)}
.whatsapp-float i{font-size:1.4rem}
.whatsapp-float span{white-space:nowrap}
.contact-visual{border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 28px 60px rgba(2,8,23,.35);margin-bottom:18px}
.contact-visual img{width:100%;height:280px;object-fit:cover;display:block}
@media (max-width: 1024px){.section-link-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 640px){.section-link-grid{grid-template-columns:1fr}.whatsapp-float{right:14px;bottom:14px;padding:12px 14px}.whatsapp-float span{display:none}}