:root{--navy:#061a36;--blue:#0b3d78;--electric:#0b6bcb;--gold:#d3a735;--ink:#10243c;--muted:#64748b;--light:#f5f8fc;--line:#dce6f0;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}.top{height:82px;display:flex;align-items:center;padding:0 max(5vw,24px);gap:34px;border-bottom:1px solid #e8eef5;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;text-decoration:none;color:var(--navy);font-weight:900;letter-spacing:.08em;font-size:18px;line-height:.9}.brand img{width:48px;height:48px;object-fit:cover;border-radius:50%;margin-right:10px}.brand small{display:block;font-size:7px;letter-spacing:.45em;color:var(--gold);margin-top:7px}.top nav{display:flex;gap:27px;margin-left:auto}.top nav a{color:#40546b;text-decoration:none;font-size:14px;font-weight:650}.head-actions{display:flex;gap:9px}.ghost,.login{border:1px solid #ccd9e6;border-radius:10px;padding:11px 16px;background:#fff;color:var(--navy);text-decoration:none;font-weight:750}.login{background:var(--navy);color:white;border-color:var(--navy)}.menu{display:none;border:0;background:none;font-size:25px}.hero{min-height:690px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:45px;padding:70px max(6vw,28px);position:relative;background:radial-gradient(circle at 75% 30%,#e6f3ff 0,transparent 28%),linear-gradient(135deg,#fff 55%,#f4f8fc)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#0b3d7808 1px,transparent 1px),linear-gradient(90deg,#0b3d7808 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to right,transparent,black)}.hero-copy,.hero-tech{position:relative;z-index:1}.eyebrow,.section small,.ecf small,.imagine>small,.about small{font-size:11px;font-weight:900;letter-spacing:.17em;color:var(--electric)}h1{font-size:clamp(48px,5.6vw,84px);line-height:.98;letter-spacing:-.055em;margin:20px 0 25px;color:var(--navy)}h1 em,h2 em{font-style:normal;color:var(--electric)}h1 strong{color:var(--gold);font-weight:850}.hero-copy>p{font-size:18px;line-height:1.7;color:#53667b;max-width:670px}.actions{display:flex;gap:12px;margin:32px 0}.primary,.secondary{border:0;border-radius:11px;padding:15px 20px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary{background:linear-gradient(135deg,var(--blue),var(--electric));color:#fff;box-shadow:0 12px 28px #0b6bcb2e}.secondary{border:1px solid #cdd9e6;color:var(--navy);background:white}.trust{display:flex;gap:22px;font-size:12px;color:#61738a}.hero-tech{height:510px;display:grid;place-items:center}.code-card{width:min(520px,90%);background:#071a34eF;color:white;border:1px solid #ffffff20;border-radius:22px;padding:28px;box-shadow:0 35px 80px #061a3655;backdrop-filter:blur(18px)}.dots{color:#d3a735;font-size:9px;letter-spacing:4px}.code-card small{display:block;color:#6fb8ff;font-size:10px;letter-spacing:.15em;margin:22px 0 7px}.code-card h3{font-size:27px;margin:0 0 25px}.code{display:grid;grid-template-columns:34px 1fr;gap:13px;padding:18px;background:#ffffff08;border-radius:14px}.code i{font-style:normal;color:var(--gold);font-family:monospace}.code span{color:#c5d3e3}.status{margin-top:18px;background:#0c294b;border-radius:10px;padding:12px;color:#c8d7e6;font-size:12px}.status b{color:#42d89b}.status strong{float:right;color:#fff}.float{position:absolute;background:white;padding:13px 17px;border-radius:13px;box-shadow:0 18px 40px #0b31572b;font-size:12px;color:var(--navy)}.float small{display:block;color:#75869a;margin-top:3px}.f1{left:0;top:80px}.f2{right:0;bottom:70px}.orbit{position:absolute;border:1px solid #0b6bcb26;border-radius:50%;width:480px;height:480px}.o2{width:380px;height:380px;border-color:#d3a7353d}.ticker{background:var(--navy);color:#d9e6f4;padding:17px;display:flex;justify-content:center;gap:24px;font-size:11px;font-weight:800;letter-spacing:.1em;white-space:nowrap;overflow:hidden}.ticker b{color:var(--gold)}.section{padding:100px max(6vw,28px)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:45px}.section-head h2,.ecf h2,.imagine h2,.about h2{font-size:clamp(34px,4vw,58px);line-height:1.05;letter-spacing:-.04em;margin:10px 0}.section-head>p{max-width:500px;color:var(--muted);line-height:1.7}.grid.six{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.grid article{border:1px solid var(--line);border-radius:17px;padding:25px;min-height:230px;transition:.25s;background:#fff}.grid article:hover{transform:translateY(-5px);box-shadow:0 20px 45px #123b4a12;border-color:#a9c8e7}.grid article>b{float:right;color:#a5b4c4;font-size:11px}.ico{font-size:27px;color:var(--gold);margin:10px 0 28px}.grid h3{font-size:19px}.grid p{color:var(--muted);line-height:1.65;font-size:14px}.ecf{margin:0 max(3vw,15px);padding:90px max(4vw,25px);border-radius:30px;background:linear-gradient(135deg,#061a36,#0a3768);color:white;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;overflow:hidden;position:relative}.ecf:after{content:"";position:absolute;width:500px;height:500px;background:#0b6bcb44;filter:blur(100px);border-radius:50%;right:-200px;top:-200px}.ecf-copy,.ecf-panel{position:relative;z-index:1}.ecf small{color:#65b6ff}.ecf h2 em{color:#e1b74b}.ecf-copy>p{color:#b9c9da;line-height:1.75}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:27px 0}.steps span{background:#ffffff0b;border:1px solid #ffffff15;border-radius:9px;padding:11px;font-size:11px}.steps b{color:#e1b74b;margin-right:5px}.ecf-panel{background:#ffffff0d;border:1px solid #ffffff1c;border-radius:20px;padding:24px;backdrop-filter:blur(15px)}.panel-top{display:flex;justify-content:space-between;color:#b9c9da;font-size:11px}.panel-top b{color:#55d7a0}.invoice{margin:25px 0;background:#fff;color:var(--navy);padding:18px;border-radius:12px;display:grid;grid-template-columns:1fr auto;gap:5px}.invoice span{font-size:10px;color:#789}.invoice strong{grid-row:2}.invoice i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;color:#16845a;background:#e4f7ee;padding:7px 9px;border-radius:7px;font-size:10px;font-weight:800}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metrics div{padding:13px;background:#ffffff09;border-radius:10px}.metrics small,.metrics b{display:block}.metrics small{color:#91a8be}.metrics b{font-size:13px;margin-top:4px}.line{height:2px;background:linear-gradient(90deg,#d3a735,#0b6bcb,#4dd7a0);margin:24px 0}.ecf-panel p{color:#9eb2c7;font-size:11px}.crm{background:#f6f9fc}.crm-demo{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}.pipeline{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pipeline span{background:white;border:1px solid var(--line);padding:15px;border-radius:10px;font-size:10px;font-weight:800;color:#6a7c90}.pipeline b{float:right;color:var(--electric)}.lead-card,.crm-copy{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}.lead-card small{color:var(--gold)}.lead-card h3{font-size:24px;max-width:650px}.ai-result{background:#f1f7fd;border-left:3px solid var(--electric);padding:18px;border-radius:8px}.ai-result b{color:var(--electric)}.ai-result p{margin:8px 0;font-size:13px}.crm-copy p{color:var(--muted);line-height:1.7}.dark{margin-top:15px;background:var(--navy);color:#fff;border:0}.imagine{text-align:center;padding:110px 20px;background:white}.imagine p{max-width:700px;margin:0 auto 30px;color:var(--muted);line-height:1.7}.gold{background:linear-gradient(135deg,#a57a16,#d3a735)}.about{padding:80px max(6vw,28px);display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line)}.about p{color:var(--muted);line-height:1.8;align-self:center}footer{padding:35px max(5vw,24px);background:#041327;color:#9fb0c3;display:flex;align-items:center;gap:30px}.foot{color:white}.foot img{width:42px;height:42px}footer p{margin:auto;font-size:12px}footer div:last-child{display:flex;gap:15px}footer button,footer a{border:0;background:none;color:#d8e4f0;text-decoration:none;font-size:12px}.ai-fab{position:fixed;right:22px;bottom:22px;z-index:70;background:var(--navy);color:#fff;border:1px solid #ffffff20;border-radius:16px;padding:12px 17px;display:flex;gap:10px;align-items:center;box-shadow:0 15px 40px #061a3655}.ai-fab>b{color:var(--gold);font-size:20px}.ai-fab span{font-weight:800;text-align:left}.ai-fab small{display:block;font-weight:400;color:#9fb2c7}.ai-overlay{position:fixed;inset:0;background:#031225aa;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(7px)}.ai-overlay.open{display:flex}.ai-panel{width:min(470px,100%);height:min(690px,90dvh);background:#fff;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 35px 100px #0007}.ai-panel header{background:var(--navy);color:white;padding:18px;display:flex;justify-content:space-between}.ai-panel header b,.ai-panel header small{display:block}.ai-panel header b{color:#fff}.ai-panel header small{color:#a9bbcd;margin-top:4px;font-size:10px}.ai-panel header i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#49d99d}.ai-panel header button{border:0;background:none;color:white;font-size:26px}.ai-chat{padding:20px;overflow:auto;flex:1;background:#f6f9fc}.bot,.user{max-width:90%;padding:14px;border-radius:14px;margin-bottom:12px;font-size:13px;line-height:1.55}.bot{background:white;border:1px solid var(--line)}.bot b{color:var(--electric)}.user{margin-left:auto;background:var(--navy);color:white}.quick{display:flex;flex-wrap:wrap;gap:7px}.quick button{background:white;border:1px solid #cbd9e7;border-radius:20px;padding:8px 10px;font-size:11px;color:#345}.ai-panel form{display:flex;padding:12px;border-top:1px solid var(--line);gap:7px}.ai-panel input{flex:1;border:1px solid #ccd9e5;border-radius:10px;padding:13px;font-size:16px;min-width:0}.ai-panel form button{width:45px;border:0;border-radius:10px;background:var(--electric);color:white}.ai-note{text-align:center;padding:0 10px 10px;color:#91a0b0;font-size:9px}@media(max-width:900px){.top nav{display:none}.menu{display:block}.head-actions{margin-left:auto}.hero{grid-template-columns:1fr;padding-top:45px}.hero-tech{height:430px}.grid.six{grid-template-columns:repeat(2,1fr)}.ecf{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column;gap:10px}.about{grid-template-columns:1fr;gap:10px}}@media(max-width:620px){.top{height:68px;padding:0 14px}.brand{font-size:13px}.brand img{width:39px;height:39px}.brand small{font-size:5px}.head-actions .ghost{display:none}.login{padding:9px 11px;font-size:11px}.hero{padding:38px 16px 50px;gap:15px;min-height:auto}.eyebrow{font-size:9px;line-height:1.5}h1{font-size:43px}.hero-copy>p{font-size:15px}.actions{flex-direction:column}.trust{overflow:auto;white-space:nowrap;padding-bottom:5px}.hero-tech{height:360px}.code-card{width:100%;padding:20px}.code-card h3{font-size:21px}.orbit{width:330px;height:330px}.o2{width:270px;height:270px}.f1{top:5px}.f2{bottom:3px}.ticker{justify-content:flex-start}.section{padding:70px 16px}.section-head h2,.ecf h2,.imagine h2,.about h2{font-size:36px}.grid.six{grid-template-columns:1fr 1fr;gap:9px}.grid article{padding:17px;min-height:215px}.grid p{font-size:12px}.ecf{margin:0 8px;padding:60px 18px;border-radius:22px}.steps{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr}.crm-demo{grid-template-columns:1fr}.pipeline{grid-template-columns:1fr 1fr}.crm-copy{grid-column:1}.about{padding:60px 18px}footer{flex-direction:column;align-items:flex-start}footer p{margin:0}footer div:last-child{flex-wrap:wrap}.ai-fab{right:12px;bottom:12px}.ai-overlay{padding:0}.ai-panel{width:100%;height:100dvh;max-height:none;border-radius:0}.float{font-size:10px}}

/* KS AI V1.1 · API + VOZ */
#aiForm{display:flex;align-items:center;gap:8px}
#aiForm .mic{width:44px;min-width:44px;height:44px;border:1px solid #d7e1ee;border-radius:12px;background:#f4f7fb;color:#0b2a55;font-size:19px;cursor:pointer;transition:.2s}
#aiForm .mic:hover{transform:translateY(-1px);background:#eaf1fa}
#aiForm .mic.recording{background:#fff1f0;border-color:#f0a3a0;animation:ksPulse 1.1s infinite}
.voice-status{padding:0 18px 12px;color:#6b7b90;font-size:12px;text-align:center}
.bot.typing p{display:flex;gap:5px;align-items:center}.bot.typing span{width:7px;height:7px;border-radius:50%;background:#8ba0ba;animation:ksDots 1s infinite}.bot.typing span:nth-child(2){animation-delay:.15s}.bot.typing span:nth-child(3){animation-delay:.3s}
@keyframes ksDots{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-4px);opacity:1}}
@keyframes ksPulse{50%{box-shadow:0 0 0 7px rgba(210,58,51,.12)}}
@media(max-width:768px){#aiInput,input,select,textarea{font-size:16px!important}.ai-panel{height:100dvh;max-height:100dvh}.ai-chat{min-height:0;overflow-y:auto}}


/* =========================================================
   KHADASOFT WEB V1.2 · PROFESSIONAL / FUTURISTIC / DYNAMIC
   ========================================================= */

:root{
  --ks-cyan:#27a8ff;
  --ks-electric:#086ee8;
  --ks-gold2:#f0c75e;
  --ks-deep:#031126;
}

body{
  background:
    radial-gradient(circle at 72% 8%,rgba(20,118,230,.055),transparent 25%),
    linear-gradient(#fff,#fff);
}

.top{
  transition:height .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.top.ks-scrolled{
  box-shadow:0 15px 45px rgba(4,27,56,.08);
  border-bottom-color:rgba(11,61,120,.08);
}
.top:after{
  content:"";
  position:absolute;
  left:0;bottom:-1px;height:2px;width:var(--scroll-progress,0%);
  background:linear-gradient(90deg,var(--electric),var(--gold));
  box-shadow:0 0 16px rgba(11,107,203,.4);
}

/* HERO */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 45%,rgba(9,107,203,.08),transparent 31%),
    linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.hero>*:not(.hero-ambient){position:relative;z-index:2}
.hero-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid-glow{
  position:absolute;inset:0;
  opacity:.42;
  background-image:
    linear-gradient(rgba(11,61,120,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,61,120,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%);
}
.beam{
  position:absolute;width:520px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,107,203,.45),transparent);
  filter:drop-shadow(0 0 8px rgba(11,107,203,.35));
  transform-origin:center;
  animation:ksBeam 10s linear infinite;
}
.beam-a{top:22%;left:-8%;transform:rotate(18deg)}
.beam-b{right:-10%;bottom:20%;transform:rotate(-22deg);animation-delay:-5s}
.hero-ambient .node{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--electric);box-shadow:0 0 0 7px rgba(11,107,203,.08),0 0 22px rgba(11,107,203,.55);
  animation:ksNode 3.4s ease-in-out infinite;
}
.n1{left:8%;top:25%}.n2{left:44%;top:12%;animation-delay:-1.2s}.n3{right:11%;top:20%;animation-delay:-2s}.n4{right:39%;bottom:12%;animation-delay:-.7s}

.hero-copy h1{
  letter-spacing:-.055em;
  text-wrap:balance;
}
.hero-copy h1 strong{
  position:relative;
  background:linear-gradient(100deg,#0b3d78 10%,#0878dc 62%,#0b3d78);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;
  animation:ksTextFlow 7s linear infinite;
}
.hero-copy h1 strong:after{
  content:"";position:absolute;left:1%;right:8%;bottom:-7px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--gold),rgba(211,167,53,0));
  transform:scaleX(.55);transform-origin:left;
  animation:ksUnderline 4s ease-in-out infinite;
}
.primary{
  position:relative;overflow:hidden;
  box-shadow:0 12px 30px rgba(11,107,203,.18);
}
.primary:after{
  content:"";position:absolute;top:-80%;left:-45%;width:34%;height:260%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(18deg);animation:ksShimmer 5.5s ease-in-out infinite;
}

.hero-tech{
  perspective:1100px;
  transform-style:preserve-3d;
}
.tech-label{
  position:absolute;right:5%;top:3%;z-index:8;
  display:flex;align-items:center;gap:7px;
  padding:8px 10px;border:1px solid rgba(11,61,120,.11);border-radius:30px;
  background:rgba(255,255,255,.76);backdrop-filter:blur(12px);
  font-size:9px;font-weight:800;letter-spacing:.11em;color:#58708a;
  box-shadow:0 9px 30px rgba(5,35,70,.07);
}
.tech-label i{width:7px;height:7px;border-radius:50%;background:#31ce86;box-shadow:0 0 0 5px rgba(49,206,134,.1)}
.tech-label span{color:#1b9a67}
.orbit-core{
  position:absolute;left:50%;top:50%;z-index:0;
  width:74px;height:74px;border-radius:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#082852,#0d65b9);
  color:white;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 16px rgba(11,107,203,.045),0 0 55px rgba(11,107,203,.23);
  animation:ksCore 3s ease-in-out infinite;
}
.orbit-core span{font-size:20px;font-weight:900;letter-spacing:-.04em}
.orbit-core small{font-size:7px;letter-spacing:.17em;color:#b9d9f7}
.code-card{
  box-shadow:
    0 30px 70px rgba(5,32,69,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
  border-color:rgba(11,61,120,.12);
}
.code-card:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.45),transparent 30%,transparent 72%,rgba(11,107,203,.035));
}
.tech-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px;
}
.tech-metrics>div{
  padding:8px 7px;border-radius:9px;background:rgba(7,29,59,.04);border:1px solid rgba(11,61,120,.06)
}
.tech-metrics small,.tech-metrics strong{display:block}
.tech-metrics small{font-size:6px;color:#8798aa;letter-spacing:.11em}
.tech-metrics strong{font-size:8px;color:#174c7e;margin-top:3px}

.float{
  border:1px solid rgba(11,61,120,.10)!important;
  backdrop-filter:blur(15px);
  box-shadow:0 18px 45px rgba(6,37,73,.12)!important;
}
.f1{animation:ksFloat 4.5s ease-in-out infinite}
.f2{animation:ksFloat 5.2s ease-in-out infinite reverse}

/* TICKER */
.ticker{
  position:relative;overflow:hidden;
  box-shadow:0 16px 40px rgba(6,26,54,.08);
}
.ticker:before,.ticker:after{
  content:"";position:absolute;top:0;bottom:0;width:60px;z-index:3;pointer-events:none
}
.ticker:before{left:0;background:linear-gradient(90deg,var(--navy),transparent)}
.ticker:after{right:0;background:linear-gradient(-90deg,var(--navy),transparent)}
.ticker span,.ticker b{animation:ksTickerPulse 5s ease-in-out infinite}
.ticker span:nth-of-type(even){animation-delay:-2.5s}

/* CARDS */
.grid article{
  position:relative;overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  transform-style:preserve-3d;
}
.grid article:before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(11,107,203,.12),transparent 42%);
  transition:opacity .25s;
}
.grid article:hover{
  transform:translateY(-7px);
  border-color:rgba(11,107,203,.24);
  box-shadow:0 26px 55px rgba(4,39,78,.1)
}
.grid article:hover:before{opacity:1}
.grid article .ico{
  transition:transform .28s ease,box-shadow .28s ease;
}
.grid article:hover .ico{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 12px 25px rgba(11,107,203,.12)
}

/* DEVELOPMENT SIGNAL */
.signal-band{
  width:min(1180px,calc(100% - 48px));margin:10px auto 85px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;
  padding:22px 20px;border:1px solid rgba(11,61,120,.09);border-radius:18px;
  background:rgba(249,252,255,.9);box-shadow:0 18px 50px rgba(6,34,68,.055);
  overflow:hidden;
}
.signal-band:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 15%,rgba(11,107,203,.035) 45%,transparent 75%);
  transform:translateX(-100%);animation:ksScan 6s linear infinite;
}
.signal-line{position:absolute;left:7%;right:7%;top:50%;height:1px;background:linear-gradient(90deg,var(--gold),rgba(11,107,203,.35),var(--gold))}
.signal-item{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:9px;font-weight:900;letter-spacing:.1em;color:#49657e
}
.signal-item i{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;
  color:white;background:var(--navy);border:3px solid white;box-shadow:0 0 0 1px rgba(11,61,120,.12)
}
.signal-item b{color:#aebccc;font-size:13px}
.signal-item em{
  font-style:normal;color:#1d9c67;font-size:7px;padding:4px 6px;border-radius:20px;background:#eaf9f2
}

/* ECF / CRM premium surface */
.ecf-panel,.crm-demo{
  position:relative;
}
.ecf-panel:after,.crm-demo:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)
}
.ecf-panel .panel-top b{
  animation:ksConnected 2.8s ease-in-out infinite;
}
.invoice i{
  box-shadow:0 0 0 0 rgba(41,195,128,.18);
  animation:ksAccept 3s ease-out infinite;
}

/* REVEAL */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{opacity:1;transform:none}

/* AI */
.ai-fab{
  overflow:hidden;
  box-shadow:0 20px 55px rgba(5,34,72,.22)!important;
}
.ai-fab:before{
  content:"";position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,transparent,rgba(240,199,94,.42),transparent 27%);
  animation:ksSpin 6s linear infinite;pointer-events:none;
}
.ai-fab>*{position:relative;z-index:1}
.ai-panel{
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 40px 110px rgba(1,18,43,.5)
}
.ai-panel header{
  position:relative;
  background:
    radial-gradient(circle at 20% -10%,rgba(11,107,203,.65),transparent 50%),
    linear-gradient(120deg,#04152e,#082e59);
}
.ai-panel header:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)
}

/* ANIMATIONS */
@keyframes ksBeam{0%{opacity:.1;translate:-12% -10px}50%{opacity:.75}100%{opacity:.1;translate:18% 20px}}
@keyframes ksNode{50%{transform:scale(1.45);opacity:.55}}
@keyframes ksTextFlow{to{background-position:220% center}}
@keyframes ksUnderline{0%,100%{transform:scaleX(.45);opacity:.5}50%{transform:scaleX(.95);opacity:1}}
@keyframes ksShimmer{0%,72%{left:-55%}100%{left:135%}}
@keyframes ksCore{50%{box-shadow:0 0 0 23px rgba(11,107,203,.025),0 0 72px rgba(11,107,203,.3)}}
@keyframes ksFloat{50%{transform:translateY(-8px)}}
@keyframes ksTickerPulse{50%{opacity:.62}}
@keyframes ksScan{to{transform:translateX(130%)}}
@keyframes ksConnected{50%{opacity:.58}}
@keyframes ksAccept{70%{box-shadow:0 0 0 0 rgba(41,195,128,0)}80%{box-shadow:0 0 0 8px rgba(41,195,128,.08)}100%{box-shadow:0 0 0 14px rgba(41,195,128,0)}}
@keyframes ksSpin{to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media(max-width:900px){
  .signal-band{grid-template-columns:repeat(5,max-content);justify-content:space-between;overflow-x:auto}
  .signal-line{min-width:760px}
  .signal-item{min-width:135px}
}
@media(max-width:620px){
  .hero{padding-top:30px}
  .grid-glow{background-size:28px 28px;opacity:.28}
  .beam{display:none}
  .hero-ambient .node{width:5px;height:5px}
  .tech-label{top:0;right:0;font-size:7px}
  .orbit-core{width:58px;height:58px}
  .orbit-core span{font-size:16px}
  .tech-metrics{gap:4px}
  .tech-metrics>div{padding:7px 4px}
  .tech-metrics strong{font-size:7px}
  .signal-band{width:calc(100% - 24px);margin-bottom:55px;padding:17px 13px}
  .grid article:hover{transform:none}
  .reveal{transform:translateY(18px)}
}
@media(prefers-reduced-motion:reduce){
  .beam,.hero-ambient .node,.hero-copy h1 strong,.hero-copy h1 strong:after,.primary:after,
  .orbit-core,.f1,.f2,.ticker span,.ticker b,.signal-band:before,.ecf-panel .panel-top b,
  .invoice i,.ai-fab:before{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}


/* =========================================================
   KHADASOFT WEB V1.3 · SPECIALTY: PLANIFICACIÓN / PRODUCCIÓN / SAP
   ========================================================= */

.sap-specialty{
  width:min(1180px,calc(100% - 48px));
  margin:30px auto 84px;
  padding:42px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
  border:1px solid rgba(11,61,120,.10);
  border-radius:28px;
  background:
    radial-gradient(circle at 85% 20%,rgba(11,107,203,.10),transparent 28%),
    linear-gradient(145deg,#ffffff 0%,#f7fbff 100%);
  box-shadow:0 28px 75px rgba(5,34,72,.08);
  position:relative;
  overflow:hidden;
}
.sap-specialty:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(11,61,120,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,61,120,.035) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.8));
}
.sap-copy,.sap-flow{position:relative;z-index:2}
.sap-copy .eyebrow{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(11,107,203,.14);
  background:#eef7ff;
  color:#0a67b8;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.sap-copy h2{
  margin:14px 0 12px;
  font-size:clamp(32px,4vw,54px);
  line-height:1.02;
  letter-spacing:-.05em;
  color:#08284f;
}
.sap-copy h2 strong{
  display:block;
  color:#0b6bcb;
}
.sap-copy p{
  margin:0;
  color:#5b7186;
  font-size:16px;
  line-height:1.7;
}
.sap-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:20px;
}
.sap-points span{
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(11,61,120,.08);
  color:#34546f;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 24px rgba(6,38,75,.045);
}
.sap-points span:before{
  content:"●";
  color:#20b879;
  margin-right:7px;
  font-size:8px;
}
.sap-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:24px;
  flex-wrap:wrap;
}
.sap-actions .secondary{
  text-decoration:none;
  font-weight:800;
  color:#0b4f91;
}

.sap-flow{
  min-height:410px;
  padding:26px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 40%,rgba(14,111,218,.22),transparent 36%),
    linear-gradient(155deg,#04152e,#082a55 62%,#061a35);
  box-shadow:0 30px 65px rgba(3,24,55,.24);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sap-flow:before{
  content:"PRODUCTION DATA ORCHESTRATION";
  position:absolute;
  top:14px;
  left:18px;
  color:#6f91b7;
  font-size:8px;
  letter-spacing:.18em;
  font-weight:900;
}
.sap-node{
  position:relative;
  padding:16px 52px 16px 16px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(14px);
  border-radius:14px;
  color:white;
}
.sap-node small{
  display:block;
  color:#7fadd8;
  font-size:8px;
  letter-spacing:.16em;
  font-weight:900;
  margin-bottom:4px;
}
.sap-node strong{
  font-size:13px;
  line-height:1.3;
}
.sap-node i{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:9px;
  font-weight:900;
  background:#0c6bc8;
  box-shadow:0 0 0 6px rgba(12,107,200,.10);
}
.sap-node.sap{
  border-color:rgba(240,199,94,.28);
}
.sap-node.sap i{
  background:#d6aa3b;
  color:#07182c;
  box-shadow:0 0 0 6px rgba(214,170,59,.10);
}
.sap-link{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.sap-link span{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:linear-gradient(#1e7ad0,#79b8ef);
  overflow:hidden;
}
.sap-link span:after{
  content:"";
  position:absolute;
  left:-2px;
  top:-8px;
  width:5px;
  height:12px;
  border-radius:5px;
  background:#5fb0ff;
  box-shadow:0 0 12px #5fb0ff;
  animation:sapPacket 1.8s linear infinite;
}
.sap-link b{
  position:relative;
  z-index:2;
  margin-left:44px;
  padding:3px 6px;
  border-radius:8px;
  background:#0a2445;
  color:#6ca8df;
  font-size:7px;
  letter-spacing:.12em;
}
.sap-status{
  margin-top:18px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(38,191,128,.08);
  border:1px solid rgba(38,191,128,.14);
  color:#9ce5c2;
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
}
.sap-status em{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2bd184;
  box-shadow:0 0 12px rgba(43,209,132,.8);
  margin-right:6px;
  animation:sapPulse 2s ease-in-out infinite;
}

.specialty-card{
  border-color:rgba(11,107,203,.18)!important;
  background:
    radial-gradient(circle at 85% 10%,rgba(11,107,203,.07),transparent 28%),
    #fff;
}
.specialty-card small{
  display:inline-block;
  margin:8px 0 2px;
  color:#0b6bcb;
  font-size:8px;
  letter-spacing:.16em;
  font-weight:900;
}
.mini-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:12px;
}
.mini-tags span{
  font-size:8px;
  font-weight:800;
  color:#41627e;
  background:#eef6fd;
  border:1px solid rgba(11,61,120,.06);
  padding:4px 6px;
  border-radius:999px;
}

@keyframes sapPacket{
  0%{top:-10px;opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{top:35px;opacity:0}
}
@keyframes sapPulse{
  50%{opacity:.45;transform:scale(.85)}
}

@media(max-width:900px){
  .sap-specialty{
    grid-template-columns:1fr;
    gap:28px;
  }
}
@media(max-width:620px){
  .sap-specialty{
    width:calc(100% - 24px);
    padding:24px 16px;
    margin-bottom:55px;
    border-radius:22px;
  }
  .sap-points{
    grid-template-columns:1fr;
  }
  .sap-flow{
    min-height:360px;
    padding:24px 14px 16px;
  }
  .sap-node{
    padding-right:44px;
  }
}
@media(prefers-reduced-motion:reduce){
  .sap-link span:after,.sap-status em{animation:none!important}
}


/* =========================================================
   KHADASOFT WEB V1.4 · NEXT LEVEL VISUAL SYSTEM
   ========================================================= */
.ks-command-bar{
  height:34px;
  padding:0 max(24px,calc((100vw - 1180px)/2));
  display:flex;
  align-items:center;
  gap:22px;
  overflow:hidden;
  white-space:nowrap;
  background:linear-gradient(90deg,#031126,#082e59 58%,#061c38);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#7698ba;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}
.ks-command-bar span{color:#c9d9e8;margin-right:auto}
.ks-command-bar span i{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#2dd487;box-shadow:0 0 10px #2dd487;margin-right:7px;
  animation:ksOnline 2s ease-in-out infinite;
}
.ks-command-bar b{font-size:7px;color:#7fa7cc}
.ks-command-bar em{
  font-style:normal;color:#e4bd52;font-size:7px;
  padding:4px 7px;border:1px solid rgba(228,189,82,.17);border-radius:20px;
}
.data-stream{
  position:absolute;height:1px;width:38%;
  background:linear-gradient(90deg,transparent,#1479d6,transparent);
  filter:drop-shadow(0 0 5px rgba(20,121,214,.5));
  opacity:.22;
}
.ds1{top:62%;left:-12%;animation:dataSweep 9s linear infinite}
.ds2{top:33%;right:-12%;animation:dataSweep2 11s linear infinite}
.hud-code{
  position:absolute;
  font:800 8px/1 monospace;
  letter-spacing:.14em;
  color:rgba(11,61,120,.18);
}
.hc1{left:4%;bottom:9%}.hc2{right:4%;top:12%}

.hero-copy{
  position:relative;
}
.hero-copy:before{
  content:"";
  position:absolute;
  left:-18px;top:3px;width:3px;height:72px;border-radius:4px;
  background:linear-gradient(var(--gold),var(--electric),transparent);
  box-shadow:0 0 18px rgba(11,107,203,.18);
}
.hero-copy .eyebrow{
  position:relative;
}
.hero-copy .eyebrow:after{
  content:"BUILD / INTEGRATE / EVOLVE";
  margin-left:12px;
  color:#8da0b3;
  font-size:7px;
  letter-spacing:.14em;
}
.hero-tech:after{
  content:"";
  position:absolute;inset:7% 3% 3% 7%;z-index:-2;border-radius:50%;
  background:radial-gradient(circle,rgba(11,107,203,.10),transparent 62%);
  filter:blur(8px);
  animation:ksHalo 5s ease-in-out infinite;
}
.code-card{
  transform:translateZ(20px);
}
.code-card .status{
  position:relative;
}
.code-card .status:after{
  content:"";
  position:absolute;left:0;bottom:-8px;width:36%;height:1px;
  background:linear-gradient(90deg,#26c881,transparent);
  animation:ksStatusLine 3.2s ease-in-out infinite;
}

/* stronger professional section hierarchy */
.section>header h2,.ecf h2,.crm h2,.imagine h2,.about h2{
  text-wrap:balance;
}
.section>header h2 strong,.ecf h2 strong,.crm h2 strong{
  position:relative;
}
.grid article{
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,252,255,.98));
}
.grid article b:first-child{
  color:rgba(11,61,120,.28);
  font-family:monospace;
  letter-spacing:.08em;
}
.grid article:after{
  content:"";
  position:absolute;left:0;bottom:0;width:0;height:2px;
  background:linear-gradient(90deg,var(--electric),var(--gold));
  transition:width .35s ease;
}
.grid article:hover:after{width:100%}

/* premium glass glow for SAP and CRM */
.sap-specialty,.crm-demo,.ecf-panel{
  isolation:isolate;
}
.sap-specialty:after{
  content:"";
  position:absolute;width:220px;height:220px;right:-90px;top:-90px;z-index:-1;
  border-radius:50%;border:1px solid rgba(11,107,203,.11);
  box-shadow:0 0 0 35px rgba(11,107,203,.025),0 0 0 70px rgba(11,107,203,.018);
}
.sap-flow{
  overflow:hidden;
}
.sap-flow:after{
  content:"";
  position:absolute;top:-60%;left:-25%;width:38%;height:220%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);
  animation:ksPanelScan 7s linear infinite;
}

/* more futuristic footer boundary */
footer{
  position:relative;
  overflow:hidden;
}
footer:before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--electric),transparent);
}

/* AI button: tech ring */
.ai-fab{
  isolation:isolate;
}
.ai-fab:after{
  content:"";
  position:absolute;inset:4px;border-radius:inherit;z-index:0;
  border:1px solid rgba(255,255,255,.16);
}
.ai-fab span,.ai-fab b,.ai-fab svg{position:relative;z-index:2}

@keyframes ksOnline{50%{opacity:.45;transform:scale(.8)}}
@keyframes dataSweep{to{transform:translateX(170vw)}}
@keyframes dataSweep2{to{transform:translateX(-170vw)}}
@keyframes ksHalo{50%{transform:scale(1.08);opacity:.65}}
@keyframes ksStatusLine{50%{width:100%;opacity:.35}}
@keyframes ksPanelScan{to{left:130%}}

@media(max-width:760px){
  .ks-command-bar{
    height:29px;padding:0 14px;gap:13px;
  }
  .ks-command-bar span{margin-right:8px}
  .ks-command-bar b:nth-of-type(n+2){display:none}
  .hero-copy:before{left:-7px;height:55px}
  .hero-copy .eyebrow:after{display:none}
  .hud-code{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ks-command-bar span i,.data-stream,.hero-tech:after,.code-card .status:after,.sap-flow:after{
    animation:none!important;
  }
}


/* =========================================================
   KHADASOFT WEB V1.5 · HERO STABILITY / STICKERS FIX
   ========================================================= */

/*
  El hero ya está visible al cargar la página.
  No depende del IntersectionObserver para evitar parpadeos
  o elementos que queden ocultos al refrescar.
*/
.hero-ready{
  opacity:1!important;
  visibility:visible!important;
}

/* Mantener todos los stickers siempre por encima del panel principal */
.hero-tech{
  isolation:isolate;
}
.hero-tech .code-card{
  position:relative;
  z-index:5;
}
.hero-tech .tech-label{
  z-index:30!important;
  transform:translateZ(90px);
  backface-visibility:hidden;
  will-change:transform,opacity;
}
.hero-tech .float{
  z-index:28!important;
  transform:translateZ(75px);
  backface-visibility:hidden;
  will-change:translate,opacity;
}

/*
  Antes la animación usaba transform: translateY(),
  lo cual competía con translateZ() y con el tilt 3D.
  Ahora usamos la propiedad translate para conservar
  permanentemente la profundidad 3D.
*/
.hero-tech .f1{
  animation:ksStickerFloat1 4.5s ease-in-out infinite!important;
}
.hero-tech .f2{
  animation:ksStickerFloat2 5.2s ease-in-out infinite!important;
}

/* Entrada propia y estable del hero, sin JS */
.hero-copy.hero-ready{
  animation:ksHeroCopyIn .72s cubic-bezier(.2,.8,.2,1) both;
}
.hero-tech.hero-ready{
  animation:ksHeroTechIn .82s .08s cubic-bezier(.2,.8,.2,1) both;
}
.hero-tech .tech-label{
  animation:ksStickerIn .55s .42s cubic-bezier(.2,.8,.2,1) both;
}
.hero-tech .f1{
  animation:
    ksStickerIn .55s .30s cubic-bezier(.2,.8,.2,1) both,
    ksStickerFloat1 4.5s .90s ease-in-out infinite!important;
}
.hero-tech .f2{
  animation:
    ksStickerIn .55s .52s cubic-bezier(.2,.8,.2,1) both,
    ksStickerFloat2 5.2s 1.05s ease-in-out infinite!important;
}

@keyframes ksHeroCopyIn{
  from{opacity:0;translate:0 18px}
  to{opacity:1;translate:0 0}
}
@keyframes ksHeroTechIn{
  from{opacity:0;translate:18px 12px}
  to{opacity:1;translate:0 0}
}
@keyframes ksStickerIn{
  from{opacity:0;scale:.94}
  to{opacity:1;scale:1}
}
@keyframes ksStickerFloat1{
  0%,100%{translate:0 0}
  50%{translate:0 -8px}
}
@keyframes ksStickerFloat2{
  0%,100%{translate:0 0}
  50%{translate:0 7px}
}

/* Evitar clipping visual en desktop */
@media(min-width:901px){
  .hero-tech{
    overflow:visible!important;
  }
}

/* En móvil reducimos el movimiento, pero nunca ocultamos los stickers */
@media(max-width:620px){
  .hero-tech .float,
  .hero-tech .tech-label{
    opacity:1!important;
  }
  .hero-tech .f1{
    animation:ksStickerFloat1 5s ease-in-out infinite!important;
  }
  .hero-tech .f2{
    animation:ksStickerFloat2 5.5s ease-in-out infinite!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-copy.hero-ready,
  .hero-tech.hero-ready,
  .hero-tech .tech-label,
  .hero-tech .f1,
  .hero-tech .f2{
    animation:none!important;
    opacity:1!important;
    translate:none!important;
    scale:1!important;
  }
}


/* =========================================================
   KHADASOFT · PRODUCTION 1.0
   ========================================================= */

/* CRM final: presented as capability, never as fictitious customer data */
.crm-demo{
  box-shadow:0 26px 70px rgba(5,34,72,.08);
}
.crm-demo [class*="prospect"],
.crm-demo [class*="lead-card"]{
  position:relative;
}
.crm-demo [class*="prospect"]:after,
.crm-demo [class*="lead-card"]:after{
  content:"CAPABILITY";
  position:absolute;
  right:16px;top:14px;
  font-size:7px;font-weight:900;letter-spacing:.16em;
  color:rgba(11,107,203,.38);
}

/* Production polish: stable first paint */
html{scroll-behavior:smooth}
body{min-height:100vh}
img{max-width:100%;height:auto}