:root{
  --blue:#1267e8;
  --blue2:#54b7ff;
  --deep:#092a62;
  --ink:#0b1628;
  --muted:#637086;
  --line:#dfe8f4;
  --soft:#f5f9ff;
  --purple:#7550e8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden;width:100%;max-width:100%;box-sizing:border-box}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
nav{position:fixed;z-index:50;top:16px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));height:72px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border:1px solid rgba(218,229,244,.9);border-radius:21px;box-shadow:0 15px 45px rgba(30,74,130,.09)}
.brand{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:950;letter-spacing:-1.4px}
.brand img{width:43px;height:43px;object-fit:contain}
.brand .web{color:#111827} .brand .v{color:var(--purple)} .brand .ox{color:#111827}
.links{display:flex;gap:28px;font-size:14px;color:#4b5970;font-weight:650}
.links a{position:relative}
.links a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--blue);transition:.25s}
.links a:hover:after{width:100%}
.navbtn,.primary{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:13px;padding:13px 20px;background:linear-gradient(135deg,var(--blue),#378ef0);color:#fff;font-weight:850;box-shadow:0 12px 25px rgba(18,103,232,.22);transition:.25s}
.navbtn:hover,.primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(18,103,232,.28)}
.hero{min-height:100vh;padding:145px 24px 80px;display:flex;align-items:center;position:relative;background:radial-gradient(circle at 88% 15%,rgba(84,183,255,.18),transparent 27%),radial-gradient(circle at 8% 82%,rgba(18,103,232,.09),transparent 28%),linear-gradient(180deg,#fff,#f7fbff)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(18,103,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,103,232,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 50% 40%,black,transparent 75%)}
.hero-grid{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;position:relative}
.kicker{display:inline-flex;padding:8px 12px;border:1px solid #d4e5ff;border-radius:999px;background:#f3f8ff;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
h1{font-size:clamp(50px,6vw,80px);line-height:.98;letter-spacing:-.065em;margin:19px 0;color:#0b1628}
h1 span{color:var(--blue)}
.hero p{max-width:620px;color:var(--muted);font-size:18px;line-height:1.72}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.secondary{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:13px;border:1px solid #d7e2f0;background:#fff;color:#24334a;font-weight:800;transition:.25s}
.secondary:hover{transform:translateY(-2px);border-color:#9cc7ff}
.mini-proof{display:flex;gap:24px;margin-top:38px;color:#65728a;font-size:13px}
.mini-proof b{display:block;color:#0d1b2f;font-size:21px}
.visual{position:relative;min-height:510px;perspective:1400px}
.glow{position:absolute;width:300px;height:300px;border-radius:50%;right:15%;top:8%;background:radial-gradient(circle,rgba(66,169,255,.26),rgba(66,169,255,0) 68%);filter:blur(8px)}
.laptop{position:absolute;inset:35px 0 35px 28px;transform:rotateY(-6deg) rotateX(2deg);filter:drop-shadow(0 32px 34px rgba(16,61,119,.2));transition:.6s}
.visual:hover .laptop{transform:rotateY(-1deg) rotateX(0deg) translateY(-6px)}
.screen{height:365px;background:#16253a;border:11px solid #25364d;border-bottom-width:14px;border-radius:24px 24px 13px 13px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.camera{position:absolute;top:4px;left:50%;width:7px;height:7px;background:#0b121d;border-radius:50%;transform:translateX(-50%)}
.webscreen{height:100%;border-radius:7px;background:#fff;overflow:hidden;position:relative}
.mocknav{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #edf1f6}
.mockbrand{font-size:14px;font-weight:950;letter-spacing:-.8px} .mockbrand .pv{color:var(--purple)} .mocklinks{display:flex;gap:12px} .mocklinks i{display:block;width:26px;height:5px;background:#dfe7f2;border-radius:20px}
.mockhero{height:calc(100% - 42px);padding:30px;background:linear-gradient(120deg,#fff 15%,#eef7ff)}
.mockhero h3{font-size:29px;line-height:1.05;letter-spacing:-1.7px;margin:0;max-width:310px}
.mockhero h3 span{color:var(--blue)} .mockhero p{width:70%;height:7px;border-radius:20px;background:#dce7f2;margin:13px 0} .mockhero p:nth-of-type(2){width:52%}
.mockbutton{width:94px;height:27px;border-radius:8px;background:var(--blue);margin-top:19px}
.mockshape{position:absolute;width:155px;height:155px;border-radius:34px;right:10%;bottom:8%;background:linear-gradient(135deg,#65c2ff,#1267e8);transform:rotate(12deg);box-shadow:20px 20px 0 rgba(117,80,232,.13)}
.base{position:absolute;left:-7%;right:-7%;bottom:-24px;height:32px;background:linear-gradient(#52657c,#27384d);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);border-radius:0 0 40px 40px}
.floating-search{position:absolute;right:-15px;top:6px;padding:14px 17px;border-radius:15px;background:rgba(255,255,255,.91);backdrop-filter:blur(14px);border:1px solid #dce8f5;box-shadow:0 16px 40px rgba(32,79,135,.13);font-size:12px;color:#56657b}
.floating-search b{display:block;color:#17253a;margin-bottom:6px} .searchline{display:flex;align-items:center;gap:7px;padding:8px 10px;background:#f4f8fc;border-radius:8px;color:#7b8797;min-width:185px}
.floating-tag{position:absolute;left:-8px;bottom:2px;background:#fff;padding:13px 16px;border-radius:15px;border:1px solid #dce8f5;box-shadow:0 16px 40px rgba(32,79,135,.12);font-size:12px}
.floating-tag b{display:block;color:var(--blue);font-size:16px}
section{padding:105px 24px;display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;overflow-x:hidden}
.label{font-size:11px;color:var(--blue);font-weight:950;letter-spacing:.14em;text-transform:uppercase;display:block;margin-left:auto;margin-right:auto;width:fit-content}
h2{font-size:clamp(36px,4.6vw,58px);letter-spacing:-.055em;line-height:1.02;margin:12px auto 15px;max-width:1180px;width:100%;box-sizing:border-box;padding:0 12px}
.lead{max-width:700px;color:var(--muted);line-height:1.7;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box;padding:0 12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px;max-width:1180px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box;padding:0 12px}
.card{padding:27px;border-radius:22px;border:1px solid #e0e9f4;background:#fff;box-shadow:0 14px 40px rgba(31,74,124,.06);transition:.3s}
.card:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(31,74,124,.11);border-color:#b8d7ff}
.icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#eef7ff;color:var(--blue);font-size:22px;font-weight:900}
.card h3{font-size:20px;margin:17px 0 8px} .card p{font-size:14px;line-height:1.7;color:var(--muted)}
.pricing{background:linear-gradient(180deg,#f6faff,#fff)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px;align-items:center;max-width:1180px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box;padding:0 12px}
.plan{position:relative;padding:31px;border-radius:25px;border:1px solid #dce7f2;background:#fff;min-height:470px;box-shadow:0 14px 45px rgba(27,75,125,.06);transition:.3s}
.plan:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(27,75,125,.12)}
.plan.popular{min-height:515px;border:2px solid var(--blue);box-shadow:0 25px 70px rgba(18,103,232,.14)}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 13px;border-radius:999px;background:var(--blue);color:#fff;font-size:10px;font-weight:950;letter-spacing:.08em}
.plan h3{font-size:25px;margin:0 0 10px} .price{font-size:40px;font-weight:950;letter-spacing:-2px;color:#0b1b31;margin-bottom:12px} .plan p{color:var(--muted);line-height:1.6} .plan ul{list-style:none;padding:0;margin:24px 0;color:#516078;font-size:14px;line-height:2.25} .plan li:before{content:"✓";color:var(--blue);font-weight:950;margin-right:10px}
.inbox-section{background:#f7fbff}
.inbox-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:42px;align-items:center;margin-top:40px;max-width:1180px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box;padding:0 12px}
.inbox-info{padding:30px;border-radius:25px;background:linear-gradient(145deg,#0c2f69,#1267e8);color:#fff;min-height:470px;box-shadow:0 24px 60px rgba(18,103,232,.23)}
.inbox-info h3{font-size:31px;letter-spacing:-1.4px;margin:0 0 15px} .inbox-info p{color:#dcecff;line-height:1.7}
.contact-chip{margin-top:30px;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:rgba(255,255,255,.09)} .contact-chip small{display:block;color:#b9d6ff;margin-bottom:4px} .contact-chip b{font-size:16px}
.inbox{background:#fff;border:1px solid #dce7f2;border-radius:25px;box-shadow:0 24px 65px rgba(31,75,123,.09);overflow:hidden}
.inbox-top{padding:18px 23px;border-bottom:1px solid #e7eef6;display:flex;justify-content:space-between;align-items:center}
.inbox-title{font-size:16px;font-weight:900} .status{font-size:11px;color:var(--blue);font-weight:800;background:#edf6ff;padding:7px 10px;border-radius:999px}
.form{padding:25px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} label{display:block;font-size:12px;font-weight:850;color:#405069;margin-bottom:7px} input,textarea{width:100%;border:1px solid #dbe5ef;border-radius:12px;padding:13px 14px;outline:none;color:#1b2940;background:#fbfdff;transition:.2s} input:focus,textarea:focus{border-color:#5da8ff;box-shadow:0 0 0 4px rgba(18,103,232,.08);background:#fff} textarea{min-height:145px;resize:vertical}
.whatsapp{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;padding:10px 15px 10px 11px;border-radius:17px;background:#fff;border:1px solid #dce7f2;box-shadow:0 16px 42px rgba(31,74,124,.16);transition:.25s;font-weight:850;color:#18263a}
.whatsapp:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(31,74,124,.2)} .waicon{width:38px;height:38px;border-radius:11px;background:#25d366;display:grid;place-items:center;color:#fff} .waicon svg{width:23px} .watxt small{display:block;color:#7b8798;font-weight:650;font-size:10px} .watxt span{font-size:12px}
footer{padding:28px 24px;display:flex;justify-content:space-between;border-top:1px solid #e4ebf3;color:#738096;font-size:13px;flex-wrap:wrap;gap:20px;max-width:1180px;margin:0 auto;width:100%;box-sizing:border-box}
.reveal{opacity:0;transform:translateY(22px);transition:.7s ease} .reveal.show{opacity:1;transform:none}
@media(max-width:900px){.links{display:none}.hero-grid,.inbox-layout{grid-template-columns:1fr}.visual{min-height:450px}.cards,.plans{grid-template-columns:1fr}.plan.popular{min-height:480px}section{padding:80px 16px}h2{padding:0 8px}nav{width:calc(100% - 16px)}}
@media(max-width:600px){nav{top:10px;height:64px;width:calc(100% - 16px)}.navbtn{padding:10px 12px;font-size:12px}.brand{font-size:22px}.hero{padding-top:120px;padding-left:16px;padding-right:16px}.visual{min-height:330px}.laptop{inset:25px 0 25px 0}.screen{height:250px;border-width:7px}.mockhero{padding:18px}.mockhero h3{font-size:21px}.mockshape{width:95px;height:95px}.floating-search{right:-5px;transform:scale(.85);transform-origin:top right}.floating-tag{transform:scale(.85);transform-origin:bottom left}.field-row{grid-template-columns:1fr}section{padding:60px 12px!important;margin:0;width:100%}footer{flex-direction:column;gap:8px;padding:20px 12px}.whatsapp{right:12px;bottom:12px;padding-right:12px}.watxt span{font-size:11px}.about-head{flex-direction:column}.about-slide{padding:40px 30px;grid-template-columns:1fr;gap:20px}.about-slider{margin-top:24px;min-height:350px}.slide-visual{min-height:180px}.cards{gap:12px;padding:0}.plans{gap:12px;padding:0}.plan{padding:20px}h2{font-size:clamp(28px,5vw,36px)!important;margin:12px 0 10px!important}}

/* Enhanced motion system */
.text-only-brand { gap:0 !important; }
.text-only-brand span { display:inline-block; }
.hero-grid > .reveal:first-child.show { animation: heroTextIn .95s cubic-bezier(.2,.8,.2,1) both; }
.hero-grid > .reveal:nth-child(2).show { animation: heroVisualIn 1.05s cubic-bezier(.2,.8,.2,1) both; }

@keyframes heroTextIn {
  0% { opacity:0; transform:translateX(-55px); filter:blur(7px); }
  70% { opacity:1; transform:translateX(6px); filter:blur(0); }
  100% { opacity:1; transform:translateX(0); }
}
@keyframes heroVisualIn {
  0% { opacity:0; transform:translateX(70px) scale(.92); }
  65% { opacity:1; transform:translateX(-7px) scale(1.02); }
  100% { opacity:1; transform:translateX(0) scale(1); }
}

.laptop { transform-origin:center center; }
  50% { transform:rotateY(-3deg) rotateX(-1deg) translateY(-20px); }
}
.visual:hover .laptop { transform:rotateY(-1deg) rotateX(0deg) translateY(-10px); }

.glow { animation:none; opacity:.72; }
@keyframes glowDrift {
  from { transform:translate(0,0) scale(.95); opacity:.55; }
  to { transform:translate(-35px,30px) scale(1.18); opacity:1; }
}
.floating-search { animation:sideFloat 4.8s ease-in-out infinite; }
.floating-tag { animation:tagFloat 5.6s ease-in-out infinite; }
@keyframes sideFloat {
  0%,100% { transform:translateX(0) translateY(0); }
  50% { transform:translateX(10px) translateY(-11px); }
}
@keyframes tagFloat {
  0%,100% { transform:translateX(0) translateY(0); }
  50% { transform:translateX(-9px) translateY(-13px); }
}

.kicker, .label, .badge, .status { animation:softPop .7s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes softPop {
  0% { opacity:0; transform:scale(.75); }
  70% { opacity:1; transform:scale(1.08); }
  100% { opacity:1; transform:scale(1); }
}

.card.show { animation:popUp .65s cubic-bezier(.2,1.35,.3,1) both; }
.cards .card:nth-child(2) { animation-delay:.12s; }
.cards .card:nth-child(3) { animation-delay:.22s; }
@keyframes popUp {
  0% { opacity:0; transform:translateY(45px) scale(.92); }
  75% { opacity:1; transform:translateY(-5px) scale(1.015); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

.plan.show { animation:planIn .75s cubic-bezier(.2,.9,.2,1) both; }
.plan:nth-child(2) { animation-delay:.12s; }
.plan:nth-child(3) { animation-delay:.24s; }
@keyframes planIn {
  from { opacity:0; transform:translateY(45px) rotateX(8deg); }
  to { opacity:1; transform:translateY(0) rotateX(0); }
}

.inbox-info.show { animation:slideFromLeft .8s cubic-bezier(.2,.9,.2,1) both; }
.inbox.show { animation:slideFromRight .85s cubic-bezier(.2,.9,.2,1) both; }
@keyframes slideFromLeft { from { opacity:0; transform:translateX(-65px); } to { opacity:1; transform:none; } }
@keyframes slideFromRight { from { opacity:0; transform:translateX(65px); } to { opacity:1; transform:none; } }

.primary, .secondary, .navbtn { position:relative; overflow:hidden; }
.primary:after, .navbtn:after {
  content:""; position:absolute; inset:0; transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .55s ease;
}
.primary:hover:after, .navbtn:hover:after { transform:translateX(120%) skewX(-20deg); }

.about {
  background:radial-gradient(circle at 8% 20%,rgba(18,103,232,.09),transparent 25%),
             radial-gradient(circle at 90% 80%,rgba(117,80,232,.08),transparent 24%),
             #fff;
  overflow:hidden;
}
.about-head { display:flex; justify-content:space-between; gap:35px; align-items:end; max-width:1180px; width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; padding:0 12px; }
.about-head .lead { margin-bottom:10px; }
.about-slider { will-change:transform; 
  margin-top:42px; position:relative; min-height:430px; border:1px solid #dce7f2;
  border-radius:30px; background:#fff; box-shadow:0 24px 70px rgba(25,71,119,.09); overflow:hidden; max-width:1180px; width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; padding:0 12px;
}
.slides { min-height:430px; will-change:transform; position:relative; width:100%; }
.about-slide {
  position:absolute; inset:0; padding:55px 75px; display:grid; grid-template-columns:100px 1fr .9fr;
  gap:35px; align-items:center; opacity:0; transform:translateX(80px); pointer-events:none;
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.85,.2,1); width:100%;
}
.about-slide.active { opacity:1; transform:translateX(0); pointer-events:auto; }
.slide-number { font-size:62px; font-weight:950; letter-spacing:-5px; color:#e4effd; }
.slide-tag { color:var(--blue); font-size:11px; font-weight:950; letter-spacing:.15em; }
.about-slide h3 { font-size:clamp(30px,4vw,48px); letter-spacing:-.055em; margin:12px 0; line-height:1; }
.about-slide p { color:var(--muted); line-height:1.75; max-width:530px; }
.slide-visual {
  min-height:250px; border-radius:25px; position:relative; overflow:hidden;
  background:linear-gradient(145deg,#eaf5ff,#f8fbff); border:1px solid #e0eaf5; width:100%;
}
.visual-one span { position:absolute; border-radius:18px; background:linear-gradient(135deg,var(--blue),var(--blue2)); animation:shapePop 3.8s ease-in-out infinite; }
.visual-one span:nth-child(1) { width:130px; height:130px; left:18%; top:20%; transform:rotate(15deg); }
.visual-one span:nth-child(2) { width:90px; height:90px; right:17%; bottom:18%; background:linear-gradient(135deg,var(--purple),#b2a0ff); animation-delay:.5s; }
.visual-one span:nth-child(3) { width:56px; height:56px; right:35%; top:18%; background:#fff; box-shadow:0 14px 35px rgba(18,103,232,.18); animation-delay:1s; }
@keyframes shapePop { 0%,100%{transform:translateY(0) rotate(12deg) scale(1)} 50%{transform:translateY(-18px) rotate(-7deg) scale(1.08)} }

.visual-two { display:flex; align-items:center; justify-content:center; gap:15px; }
.mini-window { width:42%; height:160px; background:#fff; border-radius:16px; box-shadow:0 20px 45px rgba(24,76,130,.14); position:relative; animation:windowFloat 4.5s ease-in-out infinite; }
.mini-window:before { content:""; position:absolute; left:13px; right:13px; top:14px; height:8px; border-radius:20px; background:#dcecff; box-shadow:0 26px 0 #edf5ff,0 52px 0 #edf5ff,0 78px 0 #edf5ff; }
.mini-window:nth-child(2) { animation-delay:.7s; transform:translateY(25px); }
@keyframes windowFloat { 50% { transform:translateY(-17px) rotate(2deg); } }

.visual-three { display:grid; place-items:center; width:100%; box-sizing:border-box; }
.visual-three b { position:relative; z-index:2; color:#14243a; font-size:30px; letter-spacing:-1.5px; animation:brandBreathe 3s ease-in-out infinite; }
.pulse-ring { position:absolute; width:110px; height:110px; border:1px solid rgba(18,103,232,.35); border-radius:50%; animation:ringPulse 3s ease-out infinite; }
.pulse-ring:nth-child(2) { animation-delay:1.2s; }
@keyframes ringPulse { 0%{transform:scale(.5);opacity:.8} 100%{transform:scale(2.3);opacity:0} }
@keyframes brandBreathe { 50% { transform:scale(1.07); color:var(--blue); } }

.slide-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:45px; height:45px;
  border-radius:50%; border:1px solid #d9e5f2; background:#fff; color:#16304e; font-size:20px;
  box-shadow:0 10px 30px rgba(25,71,119,.1); cursor:pointer; transition:.25s;
}
.slide-arrow:hover { background:var(--blue); color:#fff; transform:translateY(-50%) scale(1.08); }
.prev-slide { left:18px; } .next-slide { right:18px; }
.about-slider { transition:box-shadow .35s ease, transform .35s ease; } .about-slider:hover { transform:translateY(-3px); box-shadow:0 32px 80px rgba(25,71,119,.12); }\n.slider-dots { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; }
.dot-btn { width:8px; height:8px; border-radius:99px; border:0; background:#c8d7e8; padding:0; cursor:pointer; transition:.3s; }
.dot-btn.active { width:28px; background:var(--blue); }

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media(max-width:900px) {
  .about-head { display:block; }
  .about-slider,.slides { min-height:560px; }
  .about-slide { padding:55px 60px; grid-template-columns:1fr; gap:18px; }
  .slide-number { position:absolute; top:20px; right:55px; font-size:45px; }
  .slide-visual { min-height:180px; }
}
@media(max-width:600px) {
  .about-slider,.slides { min-height:600px; }
  .about-slide { padding:55px 40px 70px; }
  .slide-number { right:38px; }
  .slide-arrow { width:38px; height:38px; }
  .prev-slide { left:8px; } .next-slide { right:8px; }
}


/* Ultra-smooth premium motion additions */
body { scroll-behavior:smooth; }
.hero, section { isolation:isolate; }
.hero-grid, .about-head, .cards, .plans, .inbox-layout, .studio-content, .studio-stack { will-change:transform; }

.hero::after {
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  right:-160px; bottom:-180px; background:radial-gradient(circle,rgba(18,103,232,.11),transparent 70%);
  animation:none; pointer-events:none;
}
@keyframes ambientDrift { from { transform:translate3d(0,0,0) scale(.95); } to { transform:translate3d(-90px,-40px,0) scale(1.12); } }

.hero .kicker { animation-delay:.15s; }
.hero h1 { animation:textRise 1s .05s both cubic-bezier(.2,.85,.2,1); }
.hero p { animation:textRise 1s .17s both cubic-bezier(.2,.85,.2,1); }
.hero .actions { animation:textRise 1s .29s both cubic-bezier(.2,.85,.2,1); }
.mini-proof { animation:textRise 1s .41s both cubic-bezier(.2,.85,.2,1); }
@keyframes textRise { from { opacity:0; transform:translateY(28px); filter:blur(5px); } to { opacity:1; transform:none; filter:blur(0); } }

.hero .visual { animation:visualEnter 1.15s .08s both cubic-bezier(.16,.88,.24,1); }
@keyframes visualEnter { from { opacity:0; transform:translate3d(55px,18px,0) scale(.94); } 75% { opacity:1; transform:translate3d(-6px,-3px,0) scale(1.01); } to { opacity:1; transform:none; } }

.screen, .base { box-shadow:0 30px 70px rgba(11,42,98,.18); }
.mockshape { animation:mockShapeFloat 7s ease-in-out infinite; }
@keyframes mockShapeFloat { 0%,100% { transform:rotate(12deg) translate3d(0,0,0); } 50% { transform:rotate(4deg) translate3d(-8px,-13px,0); } }

.floating-search, .floating-tag {
  box-shadow:0 18px 50px rgba(27,76,128,.14);
}
.floating-search { animation:searchOrbit 5.5s ease-in-out infinite; }
@keyframes searchOrbit { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(8px,-13px,0) rotate(.6deg); } }
.floating-tag { animation:tagOrbit 6.4s ease-in-out infinite; }
@keyframes tagOrbit { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(-10px,-10px,0) rotate(-.5deg); } }

.navbtn { animation:buttonBreath 4s ease-in-out infinite; }
@keyframes buttonBreath { 50% { box-shadow:0 16px 36px rgba(18,103,232,.30); } }

.about-slider::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 88% 12%,rgba(18,103,232,.10),transparent 28%);
}
.about-slide .slide-number { animation:numberFloat 4s ease-in-out infinite; }
@keyframes numberFloat { 50% { transform:translateY(-8px); } }

.visual-four { background:linear-gradient(135deg,#f4f9ff,#edf5ff); }
.motion-line {
  position:absolute; left:7%; right:7%; height:2px; border-radius:99px;
  background:linear-gradient(90deg,transparent,#6bbdff,#1267e8,transparent);
  animation:sweepLine 2.8s linear infinite;
}
.motion-line:nth-child(1){top:28%;}
.motion-line:nth-child(2){top:50%;animation-delay:.55s;}
.motion-line:nth-child(3){top:72%;animation-delay:1.1s;}
@keyframes sweepLine { 0% { transform:translateX(-16%); opacity:.15; } 50% { opacity:1; } 100% { transform:translateX(16%); opacity:.15; } }
.motion-card {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  min-width:170px; padding:18px 20px; border-radius:17px; background:#fff;
  box-shadow:0 20px 45px rgba(18,103,232,.15); border:1px solid #dfeafb;
  animation:motionCardFloat 4.8s ease-in-out infinite;
}
.motion-card b { display:block; color:var(--blue); font-size:19px; }
.motion-card small { color:#718097; }
@keyframes motionCardFloat { 50% { transform:translate(-50%,-58%) scale(1.03); } }

.visual-five { background:linear-gradient(145deg,#07111e,#0e2748); border-color:#173b69; display:grid; place-items:center; }
.shine-panel {
  width:72%; height:58%; border-radius:22px; border:1px solid rgba(112,184,255,.30);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  display:grid; place-items:center; position:relative; overflow:hidden;
  box-shadow:0 25px 55px rgba(0,0,0,.24);
}
.shine-panel::after {
  content:""; position:absolute; top:-30%; left:-35%; width:25%; height:160%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:rotate(18deg); animation:shineSweep 4.4s ease-in-out infinite;
}
@keyframes shineSweep { 0%,40% { left:-35%; } 75%,100% { left:125%; } }
.shine-panel span { color:#fff; font-weight:950; font-size:28px; letter-spacing:-1px; position:relative; z-index:2; }
.shine-orb {
  position:absolute; width:110px; height:110px; right:10%; top:10%; border-radius:50%;
  background:radial-gradient(circle,#4db7ff,rgba(77,183,255,0) 68%);
  animation:orbPulse 3.5s ease-in-out infinite;
}
@keyframes orbPulse { 50% { transform:translate3d(-12px,18px,0) scale(1.15); opacity:.7; } }

/* Dark premium studio section */
.dark-studio {
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; gap:55px; align-items:center;
  padding:115px max(24px,calc((100vw - 1180px)/2));
  background:#06101d; color:#fff;
}
.dark-grid {
  position:absolute; inset:0; opacity:.20; pointer-events:none;
  background-image:linear-gradient(rgba(102,170,236,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(102,170,236,.10) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(circle at 70% 40%,black,transparent 68%);
}
.studio-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(6px); }
.studio-orb-a { width:400px; height:400px; right:-150px; top:-130px; background:radial-gradient(circle,rgba(18,103,232,.28),transparent 68%); animation:darkOrbA 10s ease-in-out infinite alternate; }
.studio-orb-b { width:320px; height:320px; left:-170px; bottom:-170px; background:radial-gradient(circle,rgba(117,80,232,.20),transparent 68%); animation:darkOrbB 12s ease-in-out infinite alternate; }
@keyframes darkOrbA { to { transform:translate3d(-70px,80px,0) scale(1.12); } }
@keyframes darkOrbB { to { transform:translate3d(90px,-50px,0) scale(1.1); } }
.light-label { color:#6ec4ff !important; }
.dark-studio h2 { max-width:720px; margin-top:12px; color:#fff; }
.dark-lead { color:#aabbd0; line-height:1.75; max-width:650px; }
.studio-pills { display:flex; gap:9px; flex-wrap:wrap; margin-top:26px; }
.studio-pills span {
  padding:9px 12px; border-radius:999px; border:1px solid rgba(125,190,255,.18);
  background:rgba(255,255,255,.04); color:#c7dcf4; font-size:11px; font-weight:800;
  animation:pillDrift 5s ease-in-out infinite;
}
.studio-pills span:nth-child(2){animation-delay:.35s}.studio-pills span:nth-child(3){animation-delay:.7s}.studio-pills span:nth-child(4){animation-delay:1.05s}
@keyframes pillDrift { 50% { transform:translateY(-4px); border-color:rgba(125,190,255,.38); } }
.studio-stack { min-height:430px; position:relative; }
.stack-card {
  position:absolute; width:83%; height:72%; right:2%; top:12%; border-radius:24px;
  border:1px solid rgba(150,206,255,.15); box-shadow:0 35px 70px rgba(0,0,0,.35);
}
.stack-back { transform:rotate(-7deg) translate(-34px,26px); background:linear-gradient(145deg,#0f2237,#0a1725); opacity:.72; }
.stack-mid { transform:rotate(4deg) translate(-12px,12px); background:linear-gradient(145deg,#102c4d,#0a1e34); opacity:.86; }
.stack-front {
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  backdrop-filter:blur(14px); overflow:hidden; animation:frontFloat 6s ease-in-out infinite;
}
@keyframes frontFloat { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-13px) rotate(.6deg); } }
.stack-top { height:44px; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.stack-top span { width:7px;height:7px;border-radius:50%;background:#54718e; }
.stack-top b { margin-left:auto; color:#bcd7f1; font-size:11px; letter-spacing:.08em; }
.stack-main { padding:34px; }
.stack-chip { display:inline-block; padding:7px 9px; border-radius:999px; background:rgba(61,168,255,.13); border:1px solid rgba(92,183,255,.24); color:#72c4ff; font-size:9px; font-weight:900; letter-spacing:.12em; }
.stack-main h3 { font-size:43px; line-height:.97; letter-spacing:-.06em; margin:18px 0 25px; }
.stack-main h3 em { color:#72c4ff; font-style:normal; }
.stack-bars { display:grid; gap:9px; }
.stack-bars i { height:7px; border-radius:99px; display:block; background:rgba(255,255,255,.10); }
.stack-bars i:nth-child(1){width:76%}.stack-bars i:nth-child(2){width:54%}.stack-bars i:nth-child(3){width:38%}

/* Keep animations efficient: transform/opacity only where possible */
@media(max-width:900px) {
  .dark-studio { grid-template-columns:1fr; }
  .studio-stack { min-height:360px; }
}
@media(max-width:600px) {
  .dark-studio { padding:78px 22px; gap:30px; }
  .studio-stack { min-height:300px; }
  .stack-card { width:92%; right:4%; }
  .stack-main { padding:24px; }
  .stack-main h3 { font-size:31px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero h1,.hero p,.hero .actions,.mini-proof,.hero .visual,.hero .kicker,
  .laptop,.glow,.floating-search,.floating-tag,.navbtn,.mockshape,
  .about-slide .slide-number,.motion-line,.motion-card,.shine-panel::after,.shine-orb,
  .studio-orb,.studio-pills span,.stack-front,.hero::after { animation:none !important; }
}


/* WebVox cinematic loading experience */
body.loading { overflow:hidden; }
.premium-loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(84,183,255,.10),transparent 28%),
    #07111e;
  color:#fff;
  opacity:1; visibility:visible;
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), visibility .8s;
}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.loader-brand{
  font-size:clamp(42px,7vw,78px);
  font-weight:950; letter-spacing:-.065em;
  animation:loaderBrand 1.15s cubic-bezier(.2,.85,.2,1) both;
}
.loader-ring{
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  border-top-color:#54b7ff;
  border-right-color:#1267e8;
  display:grid;place-items:center;
  animation:loaderSpin 1s linear infinite;
  box-shadow:0 0 34px rgba(84,183,255,.14);
}
.loader-ring span{
  width:7px;height:7px;border-radius:50%;
  background:#fff;box-shadow:0 0 16px rgba(84,183,255,.75);
}
.loader-caption{
  color:#9fb2c8;font-size:11px;font-weight:750;
  letter-spacing:.16em;text-transform:uppercase;
  animation:loaderCaption 1s .18s ease both;
}
.premium-loader.is-hidden{
  opacity:0; visibility:hidden; pointer-events:none; z-index:-1;
}
@keyframes loaderBrand{
  from{opacity:0;transform:translateY(18px) scale(.94);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes loaderCaption{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .premium-loader,.loader-brand,.loader-caption,.loader-ring{animation:none!important;transition:none!important}
}


/* Smooth first-page reveal after loading */
body.site-entering .hero-grid{
  opacity:0;
  transform:translateY(18px) scale(.985);
  filter:blur(4px);
}
body.site-entered .hero-grid{
  animation:pagePopIn .85s cubic-bezier(.16,.86,.22,1) both;
}
body.site-entered .hero .kicker,
body.site-entered .hero h1,
body.site-entered .hero p,
body.site-entered .hero .actions,
body.site-entered .hero .mini-proof{
  animation-play-state:running;
}
@keyframes pagePopIn{
  0%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}
  55%{opacity:1;transform:translateY(-3px) scale(1.006);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

/* Avoid costly blur/filter effects on the large hero visual while it animates. */
.hero .visual{will-change:transform,opacity}
.laptop,.floating-search,.floating-tag{will-change:transform}


/* Full-width slide presentation — layout only */
@media(max-width:600px){
  .about-slider{
    width:calc(100% + 44px);
    margin-left:-22px;
    margin-right:-22px;
    border-left:0;
    border-right:0;
    border-radius:24px;
  }
  .about-slide{
    inset:0;
    padding:55px 28px 70px;
    width:100%;
    grid-template-columns:1fr;
  }
  .about-slide > div:nth-child(2),
  .about-slide > .slide-visual{
    width:100%;
  }
  .slide-visual{
    min-width:0;
  }
}