
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
  --black:#03040a;--dark:#080b14;--panel:rgba(255,255,255,.055);--line:rgba(255,255,255,.12);
  --text:#f7fbff;--muted:#aebbd3;--cyan:#23e7ff;--blue:#236bff;--violet:#7b4dff;--green:#41ffb2;
  --shadow:0 34px 130px rgba(0,0,0,.52)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}p{color:var(--muted);line-height:1.7}.headline,h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif}.nav{position:fixed;inset:0 0 auto;z-index:100;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(3,4,10,.72);backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.07)}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.16em}.logoOrb{width:38px;height:38px;border-radius:14px;background:conic-gradient(from 50deg,var(--cyan),var(--blue),var(--violet),var(--cyan));box-shadow:0 0 35px rgba(35,231,255,.35);display:grid;place-items:center}.logoOrb:after{content:"";width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 20px #fff}.nav nav{display:flex;align-items:center;gap:18px;font-size:14px;color:#dbe7ff}.nav a:hover{color:var(--cyan)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);padding:14px 22px;border-radius:16px;font-weight:800;background:rgba(255,255,255,.045);transition:.25s}.btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(35,231,255,.14)}.btn.primary{border:0;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 24px 70px rgba(35,107,255,.28)}.mobileBtn{display:none}.section{position:relative;padding:110px 7vw}.hero{min-height:100svh;display:grid;align-items:center;padding-top:110px;overflow:hidden}.cinematicBg{position:absolute;inset:0;background:url('hologram-world.svg') center/cover no-repeat;opacity:.96;animation:zoom 22s infinite alternate}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,rgba(35,231,255,.12),transparent 30%),linear-gradient(90deg,rgba(3,4,10,.95),rgba(3,4,10,.52),rgba(3,4,10,.92))}.heroGrid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--cyan);background:rgba(255,255,255,.045);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase}.hero h1{font-size:clamp(54px,8vw,130px);line-height:.86;letter-spacing:-.07em;margin:18px 0 22px}.gradient{background:linear-gradient(135deg,#fff,var(--cyan),var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.lead{font-size:clamp(18px,2vw,25px);max-width:800px;color:#e4edff}.typing{height:58px;font-family:"Space Grotesk";font-size:clamp(28px,4vw,54px);color:var(--cyan);font-weight:700}.typing:after{content:"Websites";animation:words 16s infinite}.heroPanel{position:relative;border:1px solid var(--line);border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:var(--shadow);padding:24px;overflow:hidden}.heroPanel:before{content:"";position:absolute;inset:-50%;background:conic-gradient(transparent,var(--cyan),transparent,var(--violet),transparent);opacity:.13;animation:spin 14s linear infinite}.dashboard{position:relative;z-index:1}.dashTop{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px}.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}.metricGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.metric{padding:18px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}.metric b{font-size:30px}.chart{height:170px;margin-top:18px;border-radius:24px;background:linear-gradient(180deg,rgba(35,231,255,.10),rgba(123,77,255,.07));position:relative;overflow:hidden}.chart svg{position:absolute;inset:0;width:100%;height:100%}.marquee{position:relative;z-index:5;overflow:hidden;border-block:1px solid var(--line);background:#050711}.marqueeTrack{display:flex;gap:18px;white-space:nowrap;animation:marquee 24s linear infinite;padding:18px 0}.marquee span{padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:#dce8ff;font-weight:800}.center{text-align:center}.section h2{font-size:clamp(34px,5.5vw,82px);line-height:.95;letter-spacing:-.055em;margin:18px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.card,.glass,.stat,.formBox{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}.card:before,.stat:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(35,231,255,.45),transparent,rgba(123,77,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35}.card:hover,.stat:hover{transform:translateY(-8px);border-color:rgba(35,231,255,.35)}.card{transition:.28s;min-height:230px}.card h3{font-size:25px;margin:0 0 12px}.badge{display:inline-block;padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:#dbe8ff;margin:5px 5px 0 0;font-size:13px}.icon{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,var(--cyan),var(--blue));display:grid;place-items:center;font-weight:900;margin-bottom:18px}.processLine{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:46px}.step{padding:22px;border-radius:26px;background:rgba(255,255,255,.055);border:1px solid var(--line);position:relative}.step strong{display:block;color:var(--cyan);font-size:30px;margin-bottom:10px}.compare{overflow:hidden;border-radius:30px;border:1px solid var(--line);background:rgba(255,255,255,.045);margin-top:40px}.row{display:grid;grid-template-columns:1fr 1fr}.row>div{padding:22px;border-bottom:1px solid var(--line)}.row>div:first-child{border-right:1px solid var(--line);color:#ffb4b4}.row>div:last-child{color:#b8ffdf}.coreBox input,.formBox input,.formBox textarea,.formBox select{width:100%;padding:16px;border-radius:16px;background:#101522;border:1px solid rgba(255,255,255,.12);color:white;margin-bottom:12px}.auditGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.audit{padding:16px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid var(--line);text-align:center}.audit b{font-size:28px;color:var(--cyan)}.world{height:420px;background:url('hologram-world.svg') center/contain no-repeat}.countryGrid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.footer{padding:70px 7vw 30px;background:#010208;border-top:1px solid var(--line)}.footerGrid{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:26px}.footer a,.footer p{display:block;color:var(--muted);margin:9px 0;font-size:14px}.footer h3{font-size:18px}.copy{border-top:1px solid var(--line);margin-top:34px;padding-top:24px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.pageHero{min-height:45svh;display:grid;align-items:end;padding-top:150px;background:radial-gradient(circle at 70% 20%,rgba(35,107,255,.22),transparent 34%)}.whatsapp{position:fixed;right:18px;bottom:18px;z-index:120;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--cyan));color:#001;font-weight:900;box-shadow:0 20px 55px rgba(65,255,178,.25)}.notice{padding:14px;border-radius:18px;border:1px solid rgba(255,213,79,.35);background:rgba(255,213,79,.08);color:#ffe7a0;margin-top:16px}.twoCol{columns:2;column-gap:28px}.legal{max-width:1000px;margin:auto}.legal p{font-size:16px}.statusDot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green);margin-right:8px}
@keyframes zoom{to{transform:scale(1.13)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes words{0%,11%{content:"Websites"}12%,24%{content:"Marketing"}25%,37%{content:"CRM"}38%,50%{content:"Automation"}51%,63%{content:"Brand Systems"}64%,78%{content:"Business Intelligence"}79%,100%{content:"Growth Systems"}}
@media(max-width:980px){.nav nav,.nav .desktopCta{display:none}.mobileBtn{display:block}.heroGrid,.split,.grid,.grid4,.footerGrid,.processLine,.auditGrid{grid-template-columns:1fr}.section{padding:78px 5vw}.hero h1{font-size:56px}.typing{height:46px;font-size:30px}.heroPanel{border-radius:26px}.row{grid-template-columns:1fr}.row>div:first-child{border-right:0}.footerGrid{gap:8px}.footerGrid>div:first-child{margin-bottom:20px}.twoCol{columns:1}.metricGrid{grid-template-columns:1fr}.world{height:250px}}


/* V5.1 Premium Scroll + Cinematic Upgrades */
.reveal-up,.reveal-left,.reveal-right,.reveal-scale{
  opacity:0;
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease;
  filter:blur(8px);
}
.reveal-up{transform:translateY(70px)}
.reveal-left{transform:translateX(-80px)}
.reveal-right{transform:translateX(80px)}
.reveal-scale{transform:scale(.92)}
.reveal-up.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.section:nth-of-type(odd){perspective:1200px}
.card:hover{
  transform:translateY(-10px) rotateX(1.5deg) rotateY(-1.5deg);
  box-shadow:0 38px 120px rgba(35,107,255,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.primary{
  position:relative;
  overflow:hidden;
}
.btn.primary:after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-70%) rotate(20deg);
  transition:.55s;
}
.btn.primary:hover:after{
  transform:translateX(70%) rotate(20deg);
}
.footerMega{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.footerMega .mini{
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.04);
}
.footerMega h4{margin:0 0 8px;font-family:"Space Grotesk"}
.caseSoft{
  border:1px dashed rgba(35,231,255,.32);
  background:rgba(35,231,255,.055);
}
.claimNote{
  color:#ffe7a0;
  background:rgba(255,213,79,.08);
  border:1px solid rgba(255,213,79,.25);
  border-radius:18px;
  padding:14px 16px;
  margin-top:20px;
}
.scrollScene{
  min-height:72vh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  border-block:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%,rgba(35,231,255,.13),transparent 30%),#040610;
}
.sceneRail{
  display:grid;
  grid-template-columns:repeat(3,minmax(280px,360px));
  gap:22px;
  transform-style:preserve-3d;
}
.sceneCard{
  min-height:280px;
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  padding:26px;
  box-shadow:var(--shadow);
}
.sceneCard:nth-child(1){transform:translateY(40px) rotate(-2deg)}
.sceneCard:nth-child(2){transform:translateY(-20px)}
.sceneCard:nth-child(3){transform:translateY(40px) rotate(2deg)}
@media(max-width:980px){
  .footerMega{grid-template-columns:1fr 1fr}
  .sceneRail{grid-template-columns:1fr;padding:0 5vw}
  .sceneCard,.sceneCard:nth-child(1),.sceneCard:nth-child(2),.sceneCard:nth-child(3){transform:none}
}


/* COGNETRA V6 PREMIUM LIGHT THEME + 3D MOTION */
:root{
  --black:#f7f9ff;
  --dark:#eef3ff;
  --panel:rgba(255,255,255,.72);
  --line:rgba(20,35,75,.12);
  --text:#071126;
  --muted:#53627d;
  --cyan:#00a7d8;
  --blue:#235cff;
  --violet:#7b4dff;
  --green:#06b981;
  --gold:#c99a2e;
  --rose:#ff4d8d;
  --shadow:0 32px 120px rgba(35,92,255,.14);
}
body{
  background:
    radial-gradient(circle at 15% 10%,rgba(35,92,255,.12),transparent 28%),
    radial-gradient(circle at 85% 20%,rgba(0,167,216,.12),transparent 28%),
    linear-gradient(180deg,#fbfcff,#eef4ff 45%,#ffffff);
  color:var(--text);
}
p{color:var(--muted)}
.nav{
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(20,35,75,.10);
  box-shadow:0 16px 55px rgba(20,35,75,.08);
}
.nav nav{color:#24304b}
.logoOrb{
  background:conic-gradient(from 40deg,#fff,var(--cyan),var(--blue),var(--violet),#fff);
  box-shadow:0 0 38px rgba(35,92,255,.25);
}
.logoOrb:after{background:#071126;box-shadow:0 0 16px rgba(7,17,38,.25)}
.hero{
  background:
    radial-gradient(circle at 75% 35%,rgba(123,77,255,.14),transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#eef5ff 48%,#f9fbff 100%);
}
.cinematicBg{
  opacity:.58;
  mix-blend-mode:multiply;
  filter:saturate(1.25) contrast(1.02);
}
.hero:after{
  background:
    radial-gradient(circle at 70% 40%,rgba(0,167,216,.10),transparent 32%),
    linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.62),rgba(255,255,255,.95));
}
.lead{color:#34415d}
.gradient{
  background:linear-gradient(135deg,#071126 0%,#235cff 38%,#00a7d8 70%,#06b981 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.eyebrow{
  color:var(--blue);
  background:rgba(255,255,255,.65);
  border:1px solid rgba(35,92,255,.18);
  box-shadow:0 12px 36px rgba(35,92,255,.08);
}
.btn{
  color:#071126;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(20,35,75,.12);
  box-shadow:0 14px 34px rgba(20,35,75,.08);
}
.btn.primary{
  color:white;
  background:linear-gradient(135deg,#235cff,#00a7d8);
  box-shadow:0 22px 70px rgba(35,92,255,.28);
}
.heroPanel,.card,.glass,.stat,.formBox,.sceneCard{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.58));
  border:1px solid rgba(20,35,75,.10);
  box-shadow:0 26px 90px rgba(35,92,255,.12);
  backdrop-filter:blur(22px);
}
.card:before,.stat:before{
  background:linear-gradient(135deg,rgba(35,92,255,.36),transparent,rgba(0,167,216,.34));
}
.card h3,.sceneCard h3,.glass h3{color:#071126}
.badge{
  color:#27324a;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(20,35,75,.12);
}
.icon{
  color:white;
  background:linear-gradient(135deg,#235cff,#00a7d8);
}
.marquee{
  background:rgba(255,255,255,.72);
  border-block:1px solid rgba(20,35,75,.10);
}
.marquee span{
  background:rgba(255,255,255,.82);
  color:#27324a;
  border:1px solid rgba(35,92,255,.15);
}
.section:nth-of-type(even){
  background:linear-gradient(180deg,rgba(238,244,255,.55),rgba(255,255,255,.2));
}
.scrollScene{
  background:
    radial-gradient(circle at 50% 40%,rgba(35,92,255,.12),transparent 30%),
    linear-gradient(135deg,#f7fbff,#eef4ff);
}
.compare{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(20,35,75,.10);
}
.row>div{border-bottom:1px solid rgba(20,35,75,.10)}
.row>div:first-child{color:#9b3445;border-right:1px solid rgba(20,35,75,.10)}
.row>div:last-child{color:#057a5b}
.coreBox input,.formBox input,.formBox textarea,.formBox select{
  background:rgba(255,255,255,.82);
  color:#071126;
  border:1px solid rgba(20,35,75,.12);
}
.audit{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(20,35,75,.10);
}
.notice,.claimNote{
  color:#7a5512;
  background:rgba(255,214,102,.18);
  border:1px solid rgba(201,154,46,.22);
}
.footer{
  background:linear-gradient(180deg,#f7faff,#eef4ff);
  border-top:1px solid rgba(20,35,75,.10);
}
.footer a,.footer p,.copy{color:#53627d}
.footerMega .mini{
  background:rgba(255,255,255,.66);
  border:1px solid rgba(20,35,75,.10);
}
.whatsapp{
  background:linear-gradient(135deg,#06b981,#00a7d8);
  color:white;
}

/* 3D premium motion system */
.float3d{
  animation:float3d 7s ease-in-out infinite;
  transform-style:preserve-3d;
}
.orbit3d{
  position:absolute;
  inset:auto 6% 10% auto;
  width:min(420px,70vw);
  aspect-ratio:1;
  pointer-events:none;
  transform-style:preserve-3d;
}
.orbitRing{
  position:absolute;
  inset:12%;
  border:1px solid rgba(35,92,255,.22);
  border-radius:50%;
  animation:orbitSpin 16s linear infinite;
  box-shadow:0 0 35px rgba(35,92,255,.08);
}
.orbitRing:nth-child(2){
  inset:23%;
  border-color:rgba(0,167,216,.24);
  animation-duration:22s;
  transform:rotateX(65deg);
}
.orbitRing:nth-child(3){
  inset:34%;
  border-color:rgba(123,77,255,.22);
  animation-duration:12s;
  transform:rotateY(65deg);
}
.orbitCore{
  position:absolute;
  inset:39%;
  border-radius:50%;
  background:radial-gradient(circle,#fff,#dce9ff 50%,#235cff);
  box-shadow:0 18px 80px rgba(35,92,255,.24);
  animation:pulseCore 3.8s ease-in-out infinite;
}
.tilt3d{
  transform-style:preserve-3d;
  transition:transform .35s ease, box-shadow .35s ease;
}
.tilt3d:hover{
  transform:perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-9px);
  box-shadow:0 38px 110px rgba(35,92,255,.18);
}
.pageHero{
  background:
    radial-gradient(circle at 75% 20%,rgba(35,92,255,.14),transparent 35%),
    linear-gradient(135deg,#fff,#eef5ff);
}
@keyframes float3d{
  0%,100%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg)}
  50%{transform:translate3d(0,-18px,34px) rotateX(5deg) rotateY(-7deg)}
}
@keyframes orbitSpin{to{transform:rotateZ(360deg) rotateX(65deg)}}
@keyframes pulseCore{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.08);filter:brightness(1.12)}
}
@media(max-width:980px){
  .orbit3d{opacity:.35;right:-18%;bottom:6%}
  .hero h1{font-size:50px}
  .footerGrid{grid-template-columns:1fr 1fr}
  .footerGrid>div:first-child{grid-column:1/-1}
}
