:root{
  --navy:#07152f;
  --navy2:#0e234d;
  --blue:#2563eb;
  --blue2:#0ea5e9;
  --cyan:#22d3ee;
  --purple:#7c3aed;
  --pink:#ec4899;
  --rose:#f43f5e;
  --amber:#f59e0b;
  --green:#10b981;
  --white:#fff;
  --ink:#111936;
  --muted:#68738d;
  --line:#e2e8f3;
  --soft:#f5f8ff;
  --card:#ffffff;
  --shadow:0 18px 55px rgba(34,58,110,.10);
  --shadow2:0 25px 80px rgba(12,26,68,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 0%,rgba(37,99,235,.08),transparent 24%),
    radial-gradient(circle at 92% 0%,rgba(236,72,153,.08),transparent 24%),
    var(--soft);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select{font:inherit}
.wrap{width:min(1420px,calc(100% - 28px));margin:auto}

/* ---------------------------------------------------------
   NAV
--------------------------------------------------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,21,47,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.navin{
  min-height:74px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-weight:700;
  font-size:27px;
  letter-spacing:-1px;
  white-space:nowrap;
}
.brandmark{
  width:18px;
  height:18px;
  border-radius:50%;
  background:conic-gradient(from 10deg,#28e6ff,#6366f1,#d946ef,#ff7a59,#28e6ff);
  box-shadow:0 0 24px rgba(40,230,255,.55);
  animation:spin 8s linear infinite;
}
.navlinks{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-left:auto;
}
.navlinks a{
  color:#dce5ff;
  font-size:12px;
  font-weight:800;
  padding:9px 10px;
  border-radius:999px;
  transition:.2s ease;
}
.navlinks a:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
  transform:translateY(-1px);
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
  background:
    radial-gradient(circle at 12% 16%,rgba(34,211,238,.25),transparent 23%),
    radial-gradient(circle at 84% 14%,rgba(236,72,153,.23),transparent 27%),
    radial-gradient(circle at 72% 86%,rgba(99,102,241,.28),transparent 31%),
    linear-gradient(135deg,#06142f 0%,#12367b 40%,#54248a 72%,#0e647e 100%);
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:44px 44px;
}
.hero:after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-160px;
  top:-150px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  z-index:-1;
  animation:float 8s ease-in-out infinite;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:46px;
  align-items:center;
  min-height:690px;
  padding:78px 0 98px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
}
.live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 18px #4ade80;
  animation:pulse 2s ease-in-out infinite;
}
.hero h1{
  margin:20px 0 18px;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(48px,6.8vw,94px);
  line-height:.94;
  letter-spacing:-4px;
}
.hero h1 span{
  background:linear-gradient(90deg,#5ce8ff,#c5b0ff,#ff91d5,#ffd46a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  max-width:760px;
  margin:0;
  color:rgba(255,255,255,.84);
  font-size:18px;
  line-height:1.75;
}
.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  padding:0 20px;
  border-radius:14px;
  font-weight:900;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.01)}
.btn-primary{
  color:#08142b;
  background:linear-gradient(110deg,#4de4ff,#7c65ff,#ef52c8);
  box-shadow:0 15px 35px rgba(59,95,255,.26);
}
.btn-ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-width:700px;
  margin-top:30px;
}
.stat{
  padding:15px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px);
}
.stat strong{
  display:block;
  font-size:24px;
  line-height:1;
}
.stat span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.4;
}

/* ---------------------------------------------------------
   HERO VISUAL / DRAWING / DIAGRAM
--------------------------------------------------------- */
.visual{
  position:relative;
  min-height:500px;
  display:grid;
  place-items:center;
}
.orbit{
  position:absolute;
  width:470px;
  height:470px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  animation:spin 26s linear infinite;
}
.orbit:before,
.orbit:after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 26px rgba(255,255,255,.85);
}
.orbit:before{width:12px;height:12px;left:50%;top:-6px}
.orbit:after{width:8px;height:8px;left:8%;bottom:17%}

.dashboard{
  position:relative;
  width:min(520px,96%);
  padding:18px;
  border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.19),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 32px 90px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
  animation:float 6s ease-in-out infinite;
}
.windowbar{display:flex;gap:7px;margin-bottom:15px}
.windowbar i{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.82)
}
.dash-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:12px;
}
.dash-card{
  border-radius:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  padding:14px;
}
.map{
  height:230px;
  position:relative;
  overflow:hidden;
}
.map svg{width:100%;height:100%}
.map-dot{
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#69efff;
  box-shadow:0 0 0 7px rgba(105,239,255,.13),0 0 24px #69efff;
  animation:pulse 2.1s ease-in-out infinite;
}
.map-dot.d1{left:22%;top:37%}
.map-dot.d2{left:48%;top:28%;animation-delay:.5s}
.map-dot.d3{left:70%;top:57%;animation-delay:1s}
.map-dot.d4{left:40%;top:69%;animation-delay:1.5s}
.chart{
  height:230px;
  display:flex;
  align-items:end;
  gap:8px;
  padding:8px 0;
}
.bar{
  flex:1;
  min-width:10px;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#5ce7ff,#745cff 58%,#dc45c9);
  animation:bars 4s ease-in-out infinite alternate;
}
.bar:nth-child(1){height:34%}
.bar:nth-child(2){height:56%;animation-delay:.3s}
.bar:nth-child(3){height:78%;animation-delay:.6s}
.bar:nth-child(4){height:49%;animation-delay:.9s}
.bar:nth-child(5){height:88%;animation-delay:1.2s}
.bar:nth-child(6){height:67%;animation-delay:1.5s}
.modes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:12px;
}
.mode{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.mode b{display:block;font-size:16px}
.mode small{color:rgba(255,255,255,.67)}

/* ---------------------------------------------------------
   GENERIC SECTION
--------------------------------------------------------- */
.section{padding:80px 0}
.section-head{
  max-width:820px;
  margin:0 auto 34px;
  text-align:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:#eaf1ff;
  color:#3455a4;
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
}
.section h2{
  margin:12px 0 10px;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(32px,4vw,54px);
  line-height:1.03;
  letter-spacing:-2px;
}
.section-head p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

/* ---------------------------------------------------------
   FEATURE CARDS
--------------------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.card{
  position:relative;
  overflow:hidden;
  min-height:235px;
  padding:22px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:.22s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(34,58,110,.14);
}
.card:before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-35px;
  top:-35px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(236,72,153,.10));
}
.icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:25px;
  background:linear-gradient(135deg,#edf4ff,#f8ecff);
  border:1px solid #e1e8f8;
}
.card h3{font-size:19px;margin:16px 0 8px}
.card p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.card a{
  display:inline-flex;
  margin-top:16px;
  color:#3655a4;
  font-size:12px;
  font-weight:900;
}

/* ---------------------------------------------------------
   PHOTO / IMAGE BAND
--------------------------------------------------------- */
.photo-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}
.photo{
  position:relative;
  min-height:360px;
  overflow:hidden;
  border-radius:28px;
  box-shadow:var(--shadow2);
  background:#0f1f46;
}
.photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.75;
}
.photo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 25%,rgba(5,15,40,.82));
}
.photo-content{
  position:absolute;
  left:24px;
  right:24px;
  bottom:22px;
  z-index:2;
  color:#fff;
}
.photo-content h3{
  margin:0 0 7px;
  font-size:28px;
  font-family:"Space Grotesk",Inter,sans-serif;
}
.photo-content p{
  margin:0;
  color:rgba(255,255,255,.78);
  line-height:1.55;
}
.photo-stack{
  display:grid;
  gap:18px;
}
.photo.small{min-height:171px}
.photo.small .photo-content h3{font-size:21px}

/* ---------------------------------------------------------
   PROCESS DIAGRAM
--------------------------------------------------------- */
.flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.step{
  position:relative;
  padding:22px 18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
  text-align:center;
  box-shadow:0 12px 35px rgba(40,60,110,.06);
}
.step:not(:last-child):after{
  content:"→";
  position:absolute;
  right:-14px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#6d5dfc;
  font-weight:900;
  z-index:3;
}
.num{
  width:44px;
  height:44px;
  margin:0 auto 12px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,#0ea5e9,#7c3aed);
}
.step b{display:block;margin-bottom:7px}
.step span{font-size:12px;color:var(--muted);line-height:1.5}

/* ---------------------------------------------------------
   COUNTRIES
--------------------------------------------------------- */
.country-box{
  padding:30px;
  border-radius:30px;
  color:#fff;
  background:
    radial-gradient(circle at 9% 0%,rgba(34,211,238,.15),transparent 22%),
    radial-gradient(circle at 91% 8%,rgba(236,72,153,.14),transparent 22%),
    #0b1734;
  box-shadow:var(--shadow2);
}
.country-head{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.country-head h3{
  margin:0 0 5px;
  font-size:30px;
  font-family:"Space Grotesk",Inter,sans-serif;
}
.country-head p{margin:0;color:rgba(255,255,255,.68)}
.cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.cloud span{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11);
  font-size:11px;
  font-weight:800;
  transition:.2s ease;
}
.cloud span:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.13);
}

/* ---------------------------------------------------------
   WORK MODE ILLUSTRATION
--------------------------------------------------------- */
.mode-illustration{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.mode-card{
  padding:24px;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.mode-drawing{
  height:170px;
  border-radius:20px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  overflow:hidden;
  position:relative;
}
.mode-drawing.remote{background:linear-gradient(135deg,#e8f8ff,#edf0ff)}
.mode-drawing.hybrid{background:linear-gradient(135deg,#f3ecff,#fff0f8)}
.mode-drawing.onsite{background:linear-gradient(135deg,#fff6e8,#effcf6)}
.mode-card h3{margin:0 0 7px;font-size:22px}
.mode-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */
.cta{
  margin:0 auto 82px;
  padding:48px;
  border-radius:32px;
  color:#fff;
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,#0b54e5,#7340ed,#d342b9);
  box-shadow:0 28px 80px rgba(77,57,170,.26);
}
.cta:before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  right:-90px;
  top:-120px;
  background:rgba(255,255,255,.12);
}
.cta h2{
  margin:0 0 10px;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(30px,4vw,52px);
}
.cta p{
  max-width:780px;
  margin:0;
  color:rgba(255,255,255,.82);
  line-height:1.7;
}
.cta .actions{position:relative;z-index:2}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.footer{
  background:#07142f;
  color:#aeb9d5;
  padding:34px 0;
}
.footer-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.footer-links a{
  font-size:12px;
  color:#cbd5f1;
}

/* ---------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------- */
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{
  0%,100%{transform:scale(.82);opacity:.72}
  50%{transform:scale(1.18);opacity:1}
}
@keyframes bars{
  from{transform:scaleY(.94);filter:saturate(.85)}
  to{transform:scaleY(1.06);filter:saturate(1.25)}
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media(max-width:1100px){
  .navlinks{display:none}
  .hero-grid{grid-template-columns:1fr}
  .visual{min-height:430px}
  .cards{grid-template-columns:1fr 1fr}
  .photo-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .step:not(:last-child):after{display:none}
  .mode-illustration{grid-template-columns:1fr}
}
@media(max-width:680px){
  .wrap{width:min(100% - 20px,1420px)}
  .hero-grid{padding:50px 0 68px;min-height:auto}
  .hero h1{letter-spacing:-2px}
  .hero-stats{grid-template-columns:1fr}
  .visual{min-height:360px}
  .orbit{width:330px;height:330px}
  .dash-grid{grid-template-columns:1fr}
  .chart{height:160px}
  .map{height:180px}
  .modes{grid-template-columns:1fr}
  .cards,.flow{grid-template-columns:1fr}
  .section{padding:60px 0}
  .photo{min-height:300px}
  .cta{padding:30px 22px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* KYIROV homepage authentication controls: always visible */
.topbar .navin {min-height:0; padding-top:13px; padding-bottom:12px; justify-content:space-between}
.ky-home-account {display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-left:auto}
.ky-home-account .ky-account-link {display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;padding:11px 18px;min-height:42px;color:#fff;font-size:14px;font-weight:800;white-space:nowrap;border:1px solid #ffffff55;box-shadow:0 5px 20px #0003;transition:transform .2s,box-shadow .2s}
.ky-home-account .ky-account-link:hover{transform:translateY(-2px);box-shadow:0 9px 25px #0005;color:#fff}
.ky-home-account .ky-login{background:linear-gradient(115deg,#06b6d4,#2563eb)}
.ky-home-account .ky-register{background:linear-gradient(115deg,#f43f5e,#9333ea)}
.ky-home-account .ky-logout{background:linear-gradient(115deg,#f59e0b,#ea580c)}
.ky-home-account .ky-admin{background:linear-gradient(115deg,#8b5cf6,#2563eb)}
.ky-home-account .ky-username{font-size:14px;color:#fef08a;font-weight:800;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ky-home-navline {background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.10)}
.ky-home-navline .navlinks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:0;padding:6px 0 9px;gap:4px}
.ky-home-menu{display:none;border:1px solid #ffffff66;background:#ffffff20;color:#fff;border-radius:11px;font-size:23px;padding:5px 13px;cursor:pointer}
@media(max-width:1100px){
 .ky-home-navline .navlinks{display:none}
 .ky-home-navline .navlinks.ky-open{display:flex;flex-direction:column;align-items:stretch;padding:12px 0}
 .ky-home-navline .navlinks a{font-size:14px;padding:12px 15px;background:#ffffff10}
 .ky-home-menu{display:inline-flex}
}
@media(max-width:650px){
 .topbar .navin{flex-wrap:wrap;gap:9px}
 .ky-home-account{width:100%;justify-content:center;order:3;margin-left:0}
 .ky-home-menu{margin-left:auto}
 .ky-home-account .ky-account-link{padding:9px 13px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.ky-home-account .ky-account-link{transition:none}}

/* Homepage uses a white background. Header styling lives in ky-central-header.css */
html,body{background:#fff!important}
.hero{background:#fff;color:#172554}
.hero:before{background-image:linear-gradient(rgba(37,99,235,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.045) 1px,transparent 1px)}
.hero:after{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(236,72,153,.07));border-color:rgba(37,99,235,.12)}
.hero p{color:#475569}
.kicker{background:#edf5ff;border-color:#c7d2fe;color:#1e40af}
.hero .btn-ghost{color:#1e3a8a;background:#eef2ff;border-color:#c7d2fe}
.hero-stats .stat{background:#f6f9ff;border:1px solid #dbeafe}
.hero-stats .stat span{color:#536482}
.hero h1 span{background:linear-gradient(90deg,#0369a1,#6d28d9,#be185d,#d97706);background-clip:text;-webkit-background-clip:text;color:transparent}
.visual .dashboard{background:linear-gradient(145deg,#0f4c9d,#4f46a5,#be185d);color:#fff}
.hero .orbit{border-color:rgba(99,102,241,.25)}