:root{
  --blue:#1474b9;
  --blue2:#0a4f8d;
  --navy:#071b2d;
  --navy2:#0b263e;
  --ink:#102234;
  --muted:#607386;
  --line:#dfe8ef;
  --soft:#f4f8fb;
  --white:#ffffff;
  --cyan:#26c8e7;
  --green:#4fe0a1;
  --shadow:0 24px 70px rgba(2,22,40,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(10,79,141,.1)}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:245px;max-height:62px;object-fit:contain}
nav{display:flex;gap:25px;align-items:center;font-size:14px;font-weight:700}
nav a{color:#2f4558}
nav a:hover{color:var(--blue)}
.nav-cta{background:var(--navy)!important;color:white!important;padding:12px 18px;border-radius:10px}
.menu-btn{display:none;border:0;background:transparent;font-size:28px}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 30%,#123f63 0,#071b2d 34%,#04111e 100%);color:white;min-height:720px;display:flex;align-items:center}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 92%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center;padding:85px 0}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.19em;font-weight:800;color:var(--cyan);margin-bottom:16px}
.hero h1{font-size:clamp(48px,6.4vw,82px);line-height:.98;letter-spacing:-.055em;margin:0 0 25px;max-width:760px}
.hero h1 span{color:#7ddcf1}
.hero-lead{font-size:20px;color:#c9d8e3;max-width:720px;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:14px 22px;font-weight:800;cursor:pointer;transition:.2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--blue),#16a4cf);color:#fff;box-shadow:0 14px 34px rgba(21,137,193,.24)}
.btn-secondary{border:1px solid rgba(111,170,204,.35);background:rgba(255,255,255,.06);color:inherit}
.btn-light{background:white;color:var(--navy)}
.full{width:100%}
.hero-proof{margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.13);display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hero-proof div{display:flex;flex-direction:column}
.hero-proof strong{font-size:24px}
.hero-proof span{font-size:12px;color:#9fb2c1}
.command-card{background:linear-gradient(180deg,rgba(20,61,92,.86),rgba(6,27,44,.92));border:1px solid rgba(120,204,229,.2);border-radius:24px;padding:24px;box-shadow:0 35px 90px rgba(0,0,0,.3)}
.cmd-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:#9eb6c8;margin-bottom:18px}
.live-dot{color:var(--green);font-weight:900}
.live-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 14px var(--green)}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;min-height:145px}
.metric small{color:#7bbfd7;font-size:10px;letter-spacing:.11em}
.metric strong{display:block;font-size:22px;margin:14px 0 4px}
.metric span{font-size:12px;color:#9fb2c1}
.signal{display:flex;gap:12px;align-items:center;margin-top:18px;background:#071e31;border-radius:12px;padding:14px}
.signal span{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 15px var(--cyan);flex:0 0 auto}
.signal p{margin:0;color:#b7c9d5;font-size:12px}
.section{padding:100px 0}
.intro-strip{padding:80px 0;background:white}
.section-heading{max-width:760px;margin-bottom:44px}
.section-heading.narrow{margin:0 auto;text-align:center;max-width:820px}
.section-heading h2{font-size:clamp(34px,4.3vw,56px);letter-spacing:-.04em;line-height:1.05;margin:0 0 18px;color:var(--navy)}
.section-heading p{font-size:18px;color:var(--muted);margin:0}
.dark-section{background:var(--navy);color:white}
.dark-section .section-heading h2{color:white}
.dark-section .section-heading p{color:#a9bdcc}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-card{background:linear-gradient(145deg,#0b2942,#091f34);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:25px;min-height:310px;display:flex;flex-direction:column}
.service-card .icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#0e73b4,#23c3e4);display:grid;place-items:center;font-weight:900;font-size:14px;margin-bottom:34px}
.service-card h3{font-size:20px;margin:0 0 12px}
.service-card p{font-size:14px;color:#a9bdcc;flex:1}
.service-card a{font-size:13px;font-weight:800;color:#79d8ed;margin-top:18px}
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.industry-card{padding:30px;border:1px solid var(--line);border-radius:18px;background:white;transition:.2s;min-height:230px}
.industry-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c5d9e7}
.industry-card>span{font-size:12px;font-weight:900;color:var(--blue)}
.industry-card h3{font-size:21px;margin:22px 0 10px}
.industry-card p{color:var(--muted);font-size:14px}
.product-section{background:var(--soft)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-tile{border-radius:16px;background:white;border:1px solid #e2ebf1;padding:24px;display:flex;flex-direction:column;gap:8px}
.product-tile b{font-size:17px}
.product-tile span{font-size:13px;color:var(--muted)}
.product-cta{margin-top:22px;background:var(--navy);color:white;border-radius:18px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.product-cta h3{margin:0 0 6px;font-size:22px}
.product-cta p{margin:0;color:#afc2cf}
.training-section{background:#071b2d;color:white}
.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.training-section .section-heading h2{color:white}
.training-section .section-heading p{color:#a9bdcc;margin-bottom:24px}
.learning-stack{display:grid;gap:12px}
.learning-stack>div{display:grid;grid-template-columns:50px 1fr;gap:4px 14px;border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:20px;background:rgba(255,255,255,.04)}
.learning-stack span{grid-row:1 / 3;color:#5fd1e9;font-weight:900}
.learning-stack b{font-size:18px}
.learning-stack small{color:#9cb1c0}
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.journey-step{padding:26px;border-top:3px solid var(--blue);background:#fff;box-shadow:0 10px 35px rgba(9,40,63,.07)}
.journey-step>span{display:inline-grid;place-items:center;width:34px;height:34px;background:#e8f5fa;color:var(--blue);border-radius:10px;font-weight:900}
.journey-step h3{margin:28px 0 8px;font-size:21px}
.journey-step p{color:var(--muted);font-size:14px}
.final-cta{background:linear-gradient(120deg,#0a5e9a,#0ab0d4);color:white;padding:70px 0}
.final-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.final-cta .eyebrow{color:#d3f6ff}
.final-cta h2{margin:0;font-size:clamp(34px,4.2vw,56px);line-height:1.05;letter-spacing:-.04em}
.contact-section{background:#f5f8fa}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.contact-copy h2{font-size:50px;line-height:1.05;margin:0 0 18px;letter-spacing:-.04em}
.contact-copy>p{font-size:17px;color:var(--muted)}
.contact-details{display:grid;gap:18px;margin-top:38px}
.contact-details div{padding-bottom:18px;border-bottom:1px solid #d8e2ea;display:flex;flex-direction:column;gap:3px}
.contact-details small{color:#7990a1;font-size:10px;letter-spacing:.14em;font-weight:800}
.contact-details strong{font-size:16px}
.contact-details span{font-size:13px;color:var(--muted)}
.lead-form{background:white;border-radius:20px;padding:30px;box-shadow:var(--shadow);display:grid;gap:16px}
.lead-form label{font-size:12px;font-weight:800;color:#3d5264}
input,select,textarea{width:100%;margin-top:6px;border:1px solid #cad8e2;border-radius:10px;padding:13px 14px;font:inherit;background:#fff;color:#173047;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,116,185,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:flex-start;gap:10px;font-weight:500!important}
.check input{width:auto;margin-top:3px}
.success-msg{background:#e9fff5;color:#0d7752;padding:12px 14px;border-radius:10px;font-size:13px;font-weight:700}
.error-msg{background:#fff0f0;color:#a12323;padding:10px 12px;border-radius:8px;margin-bottom:14px}
.form-note{font-size:11px;color:#8194a3;text-align:center;margin:0}
footer{background:#04111e;color:#9fb1bf;padding:58px 0 25px}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:36px}
.footer-brand img{background:white;border-radius:10px;width:240px;padding:4px}
.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:9px}
.footer-grid small{font-size:10px;letter-spacing:.14em;color:#658297;font-weight:900;margin-bottom:6px}
.footer-grid a{font-size:13px}
.footer-grid a:hover{color:white}
.copyright{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}
.admin-bg{background:#eef4f7;min-height:100vh}
.admin-login{width:min(430px,calc(100% - 36px));margin:9vh auto;background:white;border-radius:20px;padding:32px;box-shadow:var(--shadow)}
.admin-login img{width:260px;margin-bottom:20px}
.admin-login h1{margin:0 0 20px}
.admin-login form{display:grid;gap:14px}
.admin-login small{display:block;margin-top:16px;color:#718494}
.admin-shell{width:min(1420px,calc(100% - 36px));margin:40px auto}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.admin-top h1{margin:0}
.admin-actions{display:flex;gap:10px}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.admin-stats div{background:white;padding:22px;border-radius:14px;box-shadow:0 6px 24px rgba(10,45,68,.06);display:flex;flex-direction:column}
.admin-stats strong{font-size:30px}
.admin-stats span{color:#73899a;font-size:12px}
.table-card{background:white;border-radius:16px;overflow:auto;box-shadow:0 6px 24px rgba(10,45,68,.06)}
table{border-collapse:collapse;width:100%;min-width:1000px}
th,td{padding:15px;border-bottom:1px solid #e5edf2;text-align:left;vertical-align:top;font-size:12px}
th{background:#f7fafc;color:#5e7485;font-size:10px;letter-spacing:.08em}
td a{color:var(--blue)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .menu-btn{display:block}
  nav{display:none;position:absolute;top:82px;left:0;right:0;background:white;padding:18px 20px;box-shadow:0 20px 40px rgba(0,0,0,.08);flex-direction:column;align-items:stretch}
  nav.open{display:flex}
  .hero-grid,.training-grid,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-grid{padding:70px 0}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .industry-grid,.product-grid{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .container{width:min(100% - 28px,1180px)}
  .brand img{width:205px}
  .nav-wrap{height:72px}
  nav{top:72px}
  .hero h1{font-size:50px}
  .hero-proof{grid-template-columns:1fr}
  .cmd-grid,.cards-4,.industry-grid,.product-grid,.journey,.form-row,.footer-grid,.admin-stats{grid-template-columns:1fr}
  .section{padding:72px 0}
  .product-cta,.final-cta-inner,.admin-top{align-items:flex-start;flex-direction:column}
  .contact-copy h2{font-size:42px}
  .admin-actions{width:100%;flex-wrap:wrap}
}


/* --- V2: Sci-fi animated hero visual --- */
.hero-visual{position:relative;display:flex;flex-direction:column;gap:22px}
.space-scene{
  position:relative;
  min-height:310px;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 20%, rgba(38,200,231,.28), transparent 24%),
    radial-gradient(circle at 22% 24%, rgba(82,130,255,.20), transparent 22%),
    radial-gradient(circle at 50% 70%, rgba(24,116,185,.16), transparent 30%),
    linear-gradient(180deg, rgba(8,24,39,.74), rgba(4,17,30,.94));
  border:1px solid rgba(120,204,229,.18);
  box-shadow:0 28px 90px rgba(0,0,0,.28);
}
.space-scene:before,
.space-scene:after{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 80%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 30%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 55%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 16%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 86%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 60%, rgba(255,255,255,.7) 0 1px, transparent 2px);
  animation: twinkle 8s linear infinite;
  opacity:.75;
}
.space-scene:after{animation-duration:12s; transform:scale(1.08); opacity:.42}

.star{
  position:absolute;
  display:block;
  width:4px;
  height:4px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 12px rgba(255,255,255,.9);
  animation: pulse 3.4s ease-in-out infinite;
}
.star-1{top:20%;left:14%}
.star-2{top:28%;left:76%}
.star-3{top:72%;left:18%}
.star-4{top:18%;left:60%}
.star-5{top:62%;left:85%}
.star-6{top:45%;left:42%}

.planet{
  position:absolute;
  border-radius:50%;
  display:block;
}
.planet-main{
  width:126px;
  height:126px;
  right:48px;
  top:26px;
  background:radial-gradient(circle at 35% 35%, #6fe9ff 0, #1ba9d0 28%, #116aa9 58%, #0b3153 100%);
  box-shadow:0 0 40px rgba(43,187,230,.34);
}
.planet-main:after{
  content:"";
  position:absolute;
  inset:auto -22px 48px -18px;
  height:20px;
  border:2px solid rgba(164,228,245,.75);
  border-radius:50%;
  transform:rotate(-12deg);
}
.planet-small{
  width:38px;
  height:38px;
  left:68px;
  top:46px;
  background:radial-gradient(circle at 35% 35%, #a6b6ff 0, #5e7bd8 45%, #2c3f84 100%);
  box-shadow:0 0 24px rgba(122,144,255,.22);
}
.orbit{
  position:absolute;
  border:1px solid rgba(137,218,238,.22);
  border-radius:50%;
}
.orbit-1{
  width:220px;
  height:220px;
  left:40px;
  bottom:26px;
  animation: spin 18s linear infinite;
}
.orbit-2{
  width:300px;
  height:120px;
  right:12px;
  bottom:44px;
  transform:rotate(-12deg);
  animation: spinReverse 22s linear infinite;
}
.ship{
  position:absolute;
  width:64px;
  height:18px;
  left:134px;
  bottom:88px;
  background:linear-gradient(90deg,#d2edff,#76ddf5 40%,#1b8fb9 100%);
  clip-path:polygon(0 50%, 20% 0, 88% 0, 100% 50%, 88% 100%, 20% 100%);
  box-shadow:0 0 18px rgba(111,220,247,.38);
  animation: floatShip 7s ease-in-out infinite;
}
.ship:before{
  content:"";
  position:absolute;
  left:14px;
  top:4px;
  width:14px;
  height:10px;
  background:rgba(4,17,30,.6);
  border-radius:8px;
}
.ship:after{
  content:"";
  position:absolute;
  right:-16px;
  top:5px;
  width:18px;
  height:8px;
  background:linear-gradient(90deg, rgba(87,223,255,0), rgba(87,223,255,.95));
  border-radius:40px;
  filter:blur(2px);
}
.signal-beam{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  width:280px;
  height:220px;
  background:linear-gradient(180deg, rgba(38,200,231,0), rgba(38,200,231,.10));
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  filter:blur(1px);
  opacity:.75;
}

@keyframes twinkle{
  0%,100%{transform:translateY(0);opacity:.7}
  50%{transform:translateY(-6px);opacity:1}
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.8);opacity:1}
}
@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes spinReverse{
  from{transform:rotate(-12deg)}
  to{transform:rotate(348deg)}
}
@keyframes floatShip{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(16px,-10px)}
}

/* --- V2: WhatsApp chatbot --- */
.wa-chatbot{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
}
.wa-trigger{
  width:64px;
  height:64px;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  font-size:28px;
  display:grid;
  place-items:center;
  box-shadow:0 16px 34px rgba(18,140,126,.34);
  cursor:pointer;
}
.wa-panel{
  position:absolute;
  right:0;
  bottom:78px;
  width:min(360px,calc(100vw - 30px));
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
  border:1px solid #dbe8ef;
  display:none;
}
.wa-panel.open{display:block}
.wa-header{
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  padding:16px 18px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.wa-header strong{display:block;font-size:15px}
.wa-header small{display:block;opacity:.9;margin-top:2px}
.wa-close{
  background:transparent;
  color:#fff;
  border:0;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.wa-body{padding:18px}
.wa-body p{margin:0 0 14px;color:#425769;font-size:14px}
.wa-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.wa-option{
  border:1px solid #d3e2e9;
  background:#f7fbfd;
  border-radius:10px;
  padding:10px 12px;
  text-align:left;
  font:inherit;
  font-size:12px;
  font-weight:700;
  color:#173047;
  cursor:pointer;
}
.wa-option:hover{border-color:#25D366;transform:translateY(-1px)}
.wa-start{
  display:block;
  text-align:center;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  padding:13px 16px;
  border-radius:12px;
  font-weight:800;
}
@media(max-width:640px){
  .space-scene{min-height:240px}
  .planet-main{width:92px;height:92px;right:28px}
  .wa-options{grid-template-columns:1fr}
}