:root{
  --bg:#020b16;
  --bg-2:#031321;
  --panel:#081b2f;
  --panel-2:#0a223b;
  --line:#143d62;
  --text:#f5f8ff;
  --muted:#9cb0c6;
  --blue:#087cff;
  --cyan:#00d4ff;
  --green:#22d07d;
  --orange:#ff9d1b;
  --red:#ff4a5c;
  --purple:#7c62ff;
  --edge:clamp(18px,3.3vw,52px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}

/* ---------- TOP BAR ---------- */
.topbar{
  height:52px;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid rgba(23,58,91,.75);
  background:rgba(2,11,22,.95);
  backdrop-filter:blur(12px);
}
.topbar-inner{
  height:100%;
  padding:0 var(--edge);
  display:grid;
  grid-template-columns:135px 1fr 85px;
  align-items:center;
  gap:18px;
}
.brand img{width:84px;display:block}
.main-nav{
  justify-self:center;
  display:flex;
  gap:clamp(18px,2.2vw,33px);
  color:#d8e3ef;
  font-size:8.5px;
  font-weight:600;
}
.main-nav a{
  padding:17px 0 12px;
  position:relative;
  white-space:nowrap;
}
.main-nav a:after{
  content:"";
  position:absolute;
  height:2px;
  bottom:4px;
  left:50%;
  right:50%;
  background:var(--cyan);
  transition:.2s ease;
}
.main-nav a:hover:after,.main-nav a.active:after{left:0;right:0}
.login-btn{
  justify-self:end;
  padding:9px 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:7px;
  background:linear-gradient(135deg,#0c88ff,#0756d4);
  font-size:8px;
  font-weight:700;
}
.menu-btn{display:none}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 18%,rgba(0,122,255,.09),transparent 32%),
    linear-gradient(180deg,#020b16,#03101d);
}
.hero-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:radial-gradient(rgba(39,158,255,.4) 1px,transparent 1px);
  background-size:75px 75px;
  mask-image:linear-gradient(#000,transparent 75%);
}
.hero-upper{
  position:relative;
  z-index:2;
  padding:48px var(--edge) 0;
  display:grid;
  grid-template-columns:40% 60%;
  align-items:center;
  gap:26px;
}
.hero-copy{max-width:485px}
.eyebrow,.section-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border:1px solid #0c5d92;
  border-radius:999px;
  color:#64caff;
  background:rgba(0,117,255,.08);
  font-size:6.7px;
  font-weight:800;
  letter-spacing:.22px;
}
.hero-copy h1{
  margin:18px 0 7px;
  font-size:clamp(31px,3vw,45px);
  line-height:.96;
  letter-spacing:-1.9px;
}
.hero-copy h2{
  margin:0 0 19px;
  font-size:clamp(18px,1.65vw,24px);
  line-height:1;
  background:linear-gradient(90deg,#0bd4ff,#7c61ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy>p{
  margin:0;
  max-width:470px;
  color:#c5d3e4;
  font-size:clamp(8px,.7vw,10.5px);
  line-height:1.72;
}
.hero-actions{
  display:flex;
  gap:10px;
  margin-top:23px;
}
.btn{
  min-height:37px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:7.5px;
  font-weight:700;
}
.btn-primary{
  color:white;
  background:linear-gradient(135deg,#078aff,#0751cf);
  box-shadow:0 9px 22px rgba(0,119,255,.20);
}
.btn-outline{
  border-color:#28527b;
  background:rgba(4,20,36,.58);
}
.btn-small{min-height:31px;padding:0 12px;font-size:6.8px}
.play{
  width:20px;height:20px;
  border:1px solid #416d95;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:6px;
}
.hero-highlights{
  margin-top:27px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid #123b62;
  border-radius:9px;
  overflow:hidden;
  background:rgba(4,18,34,.63);
}
.hero-highlights div{
  min-height:43px;
  padding:8px 9px;
  display:flex;
  align-items:center;
  gap:6px;
  border-right:1px solid #123b62;
}
.hero-highlights div:last-child{border-right:0}
.hero-highlights i{
  color:#16e2d5;
  font-size:11px;
  font-style:normal;
}
.hero-highlights span{
  color:#c1d0e1;
  font-size:6.1px;
  line-height:1.15;
}
.hero-highlights b{color:white}

.dashboard-shell{
  position:relative;
  padding-right:0;
}
.dashboard-shell:before{
  content:"";
  position:absolute;
  inset:12% -2%;
  background:radial-gradient(circle,rgba(0,124,255,.24),transparent 68%);
  filter:blur(25px);
}
.dashboard-shell img{
  position:relative;
  width:100%;
  display:block;
  padding:5px;
  border:1px solid #1d4c78;
  border-radius:13px;
  background:#071b30;
  box-shadow:0 24px 60px rgba(0,52,112,.22);
}

/* Exact compact train + KPI band from the approved concept */
.hero-lower{
  position:relative;
  min-height:175px;
  margin-top:9px;
  display:grid;
  grid-template-columns:42% 58%;
  align-items:end;
  border-bottom:1px solid #0d2d4b;
}
.train-scene{
  height:175px;
  overflow:hidden;
  position:relative;
}
.train-scene img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  display:block;
  mix-blend-mode:screen;
  filter:saturate(1.08) contrast(1.03);
}
.train-scene:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 72%,#03101d 100%),
    linear-gradient(180deg,#03101d 0%,transparent 21%,transparent 80%,#03101d 100%);
}
.stats-band{
  height:175px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  padding:0 var(--edge) 20px 6px;
  position:relative;
}
.stats-band:before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:37px;height:1px;
  background:linear-gradient(90deg,#0b72c9,rgba(11,114,201,.22),transparent);
  opacity:.5;
}
.stat{
  position:relative;
  z-index:2;
  text-align:center;
}
.stat>span{
  width:40px;height:40px;
  margin:0 auto 7px;
  border:1px solid #0d7fba;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#29d2ff;
  font-size:13px;
  background:rgba(4,24,43,.62);
}
.stat strong{
  display:block;
  margin-bottom:2px;
  font-size:clamp(15px,1.35vw,20px);
}
.stat small{
  color:#b8c7d9;
  font-size:6.1px;
}

/* ---------- HOW ---------- */
.how-section{
  width:100%;
  padding:20px var(--edge);
  display:grid;
  grid-template-columns:28% 72%;
  gap:26px;
  align-items:center;
  border-bottom:1px solid #0e365b;
  background:linear-gradient(112deg,#06182d,#082a4d 58%,#06182d);
}
.how-copy h3,.section-heading h3,.ai-copy h3{
  margin:11px 0 10px;
  font-size:clamp(20px,1.85vw,28px);
  line-height:1.11;
  letter-spacing:-.9px;
}
.how-copy p,.section-heading p,.ai-copy p{
  color:var(--muted);
  font-size:7.2px;
  line-height:1.62;
}
.process-flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.process-flow article{
  position:relative;
  text-align:center;
}
.process-flow article:not(:last-child):after{
  content:"→";
  position:absolute;
  right:-11px;
  top:21px;
  color:#45a4e8;
  font-size:13px;
}
.flow-icon{
  width:47px;height:47px;
  margin:0 auto 8px;
  border:1px solid #0d6098;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#5bd4ff;
  font-size:16px;
  background:radial-gradient(circle,rgba(13,126,213,.21),rgba(5,25,45,.72));
}
.process-flow article>span{color:#5ed1ff;font-size:8.5px}
.process-flow h4{margin:5px 0 4px;font-size:7.2px}
.process-flow p{margin:0;color:#9db0c5;font-size:5.7px;line-height:1.45}

/* ---------- MODULES ---------- */
.site-section{
  width:100%;
  padding:48px var(--edge);
}
.modules-section{
  background:#03111f;
  border-bottom:1px solid #0b2d4e;
}
.section-heading{max-width:490px;margin-bottom:22px}
.module-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
}
.module-grid article,.benefit-grid article{
  min-height:116px;
  padding:16px;
  border:1px solid #15395b;
  border-radius:9px;
  background:linear-gradient(145deg,#0a1c31,#081829);
}
.module-icon{
  width:32px;height:32px;
  margin-bottom:12px;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:13px;
}
.module-icon.blue{color:#4ebcff;background:rgba(13,123,255,.13)}
.module-icon.red{color:#ff6c7e;background:rgba(255,77,95,.13)}
.module-icon.amber{color:#ffc34d;background:rgba(255,159,26,.13)}
.module-icon.purple{color:#b8a1ff;background:rgba(118,88,255,.13)}
.module-icon.green{color:#57e5a3;background:rgba(32,214,123,.13)}
.module-icon.cyan{color:#4ce5ff;background:rgba(0,200,255,.13)}
.module-grid h4,.benefit-grid h4{margin:0 0 6px;font-size:8px}
.module-grid p,.benefit-grid p{margin:0;color:#96a9bf;font-size:6.2px;line-height:1.5}

/* ---------- AI ---------- */
.ai-section{
  display:grid;
  grid-template-columns:40% 60%;
  gap:35px;
  align-items:center;
  background:#020b16;
}
.ai-copy ul{
  list-style:none;
  padding:0;
  margin:15px 0;
  display:grid;
  gap:7px;
  color:#bdd0e2;
  font-size:7px;
}
.ai-visual{
  min-height:260px;
  position:relative;
}
.ai-brain{
  width:132px;height:132px;
  margin:0 auto;
  border:1px solid rgba(32,154,255,.3);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#6ecbff;
  font-size:35px;
  font-weight:800;
  background:radial-gradient(circle,#0b4c87 0%,#06233f 54%,transparent 72%);
  box-shadow:0 0 48px rgba(0,146,255,.20);
}
.trend-card{
  position:absolute;
  left:9%;right:4%;bottom:0;
  height:105px;
  padding:10px;
  border:1px solid #174166;
  border-radius:9px;
  background:rgba(4,18,34,.9);
}
.trend-title{display:flex;justify-content:space-between;font-size:6.4px}
.trend-title small{color:#8297ae}
.trend-chart{
  height:68px;
  margin-top:8px;
  position:relative;
  background:repeating-linear-gradient(0deg,rgba(53,80,106,.2) 0 1px,transparent 1px 17px);
}
.trend-chart .line{
  position:absolute;
  left:4%;right:4%;
  height:2px;
  border-radius:2px;
  transform-origin:left;
}
.blue-line{top:12px;background:#2f80ff;transform:skewY(-7deg)}
.green-line{top:31px;background:#22d07d;transform:skewY(-5deg)}
.orange-line{top:47px;background:#ff9d1b;transform:skewY(-3deg)}
.red-line{top:60px;background:#ff4a5c;transform:skewY(-1deg)}

/* ---------- BENEFITS ---------- */
.benefits-section{
  background:#03111f;
  border-top:1px solid #0b2d4e;
}
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.benefit-grid article>span{
  display:block;
  margin-bottom:9px;
  color:#5acfff;
  font-size:15px;
}

/* ---------- CTA / FOOTER ---------- */
.cta-section{
  margin:0;
  padding:27px var(--edge);
  border-top:1px solid #0c3152;
  border-bottom:1px solid #0c3152;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:linear-gradient(105deg,#07182d,#0b2d59 58%,#071a33);
}
.cta-section h3{margin:9px 0 4px;font-size:16px}
.cta-section p{margin:0;color:#a9bdd2;font-size:7px}
.cta-actions{display:flex;gap:9px}

.footer{
  width:100%;
  padding:23px var(--edge) 18px;
  background:#020b16;
}
.footer-main{
  display:grid;
  grid-template-columns:32% 68%;
  gap:34px;
}
.footer-brand img{width:100px}
.footer-brand p{
  max-width:280px;
  color:#90a4bb;
  font-size:6.5px;
  line-height:1.55;
}
.footer-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.footer-links div{display:grid;gap:4px}
.footer-links b{font-size:7px}
.footer-links a{color:#8fa3ba;font-size:6.3px}
.copyright{padding-top:14px;color:#6f859d;font-size:6px}

/* ---------- LOGIN ---------- */
.login-page{min-height:100vh}
.login-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-showcase{
  padding:34px 5vw;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 72% 70%,rgba(0,126,255,.16),transparent 35%),
    linear-gradient(145deg,#020b16,#082248);
}
.login-logo{width:105px}
.login-copy{max-width:500px;margin:auto 0}
.login-copy h1{
  margin:17px 0;
  font-size:34px;
  line-height:1.04;
  letter-spacing:-1.5px;
}
.login-copy>p{color:#adc0d4;font-size:9px;line-height:1.65}
.login-kpis{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.login-kpis div{
  padding:11px;
  border:1px solid #1a4169;
  border-radius:8px;
  background:rgba(6,28,51,.72);
}
.login-kpis b{display:block;font-size:11px}
.login-kpis span{color:#8ea6c1;font-size:6px}
.login-panel{
  padding:30px;
  display:grid;
  place-items:center;
  background:#061426;
}
.login-card{
  width:min(370px,100%);
  padding:27px;
  text-align:center;
  border:1px solid #1a3c60;
  border-radius:14px;
  background:linear-gradient(145deg,#0a1c32,#08192c);
  box-shadow:0 25px 70px rgba(0,0,0,.3);
}
.login-mark{
  width:42px;height:42px;
  margin:auto;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0c84ff,#0d56d5);
}
.login-card h2{margin:12px 0 4px;font-size:19px}
.login-card>p{color:#91a7c0;font-size:7px}
.login-card form{
  margin-top:20px;
  display:grid;
  gap:13px;
  text-align:left;
}
.login-card form>label{display:grid;gap:5px;font-size:7px;font-weight:700}
.field{
  height:40px;
  padding:0 10px;
  border:1px solid #1c446b;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#07182b;
}
.field i{font-size:9px;font-style:normal}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:white;font-size:8px}
.field button{border:0;background:none;color:#58b9ff;font-size:6px}
.login-options{display:flex;justify-content:space-between;align-items:center;color:#91a7c0;font-size:6px}
.login-options label{display:flex;gap:5px;align-items:center}
.login-options a{color:#58b9ff}
.submit-btn{
  height:40px;
  border:0;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:white;
  background:linear-gradient(135deg,#0c84ff,#0d56d5);
  font-size:8px;
  font-weight:700;
}
.secure-note{margin-top:14px;color:#7890aa;font-size:6px}
.back-link{display:block;margin-top:16px;color:#6fbfff;font-size:6px}

/* ---------- 13-INCH / SMALL LAPTOP ---------- */
@media(max-width:1366px){
  :root{--edge:clamp(16px,2.6vw,34px)}
  .topbar-inner{grid-template-columns:120px 1fr 80px}
  .brand img{width:76px}
  .hero-upper{padding-top:40px;grid-template-columns:39% 61%;gap:22px}
  .hero-copy h1{font-size:36px}
  .hero-copy h2{font-size:20px}
  .hero-copy>p{font-size:8.8px}
  .hero-lower,.train-scene,.stats-band{height:154px;min-height:154px}
  .stats-band{padding-bottom:16px}
  .how-section{grid-template-columns:27% 73%;padding-top:18px;padding-bottom:18px}
  .site-section{padding-top:42px;padding-bottom:42px}
}

/* ---------- TABLET ---------- */
@media(max-width:900px){
  .topbar-inner{grid-template-columns:1fr auto auto}
  .main-nav{
    display:none;
    position:absolute;
    left:0;right:0;top:52px;
    padding:8px var(--edge) 14px;
    flex-direction:column;
    gap:0;
    background:#03101f;
    border-bottom:1px solid #123a61;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:9px 0}
  .menu-btn{
    width:34px;height:34px;
    display:block;
    border:1px solid #21496f;
    border-radius:7px;
    color:white;
    background:#06172a;
  }
  .hero-upper{grid-template-columns:1fr}
  .hero-copy{max-width:620px}
  .dashboard-shell{max-width:760px}
  .hero-lower{grid-template-columns:44% 56%}
  .how-section{grid-template-columns:1fr}
  .module-grid{grid-template-columns:repeat(2,1fr)}
  .ai-section{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- MOBILE ---------- */
@media(max-width:620px){
  :root{--edge:15px}
  .topbar{height:46px}
  .main-nav{top:46px}
  .brand img{width:72px}
  .login-btn{padding:7px 10px;font-size:6.8px}
  .menu-btn{width:31px;height:31px}

  .hero-upper{padding-top:27px;gap:20px}
  .hero-copy h1{font-size:30px}
  .hero-copy h2{font-size:18px}
  .hero-copy>p{font-size:8px}
  .hero-actions{margin-top:19px}
  .btn{min-height:33px;padding:0 12px;font-size:6.8px}
  .hero-highlights{margin-top:21px;grid-template-columns:repeat(4,1fr)}
  .hero-highlights div{min-height:38px;padding:6px 5px;gap:4px}
  .hero-highlights i{font-size:9px}
  .hero-highlights span{font-size:5.1px}

  .hero-lower{
    height:auto;
    min-height:0;
    grid-template-columns:42% 58%;
  }
  .train-scene,.stats-band{height:126px;min-height:126px}
  .stats-band{padding:0 8px 12px 0}
  .stat>span{width:31px;height:31px;font-size:10px}
  .stat strong{font-size:13px}
  .stat small{font-size:4.6px}

  .how-section{padding-top:16px;padding-bottom:17px}
  .how-copy h3{font-size:20px}
  .how-copy p{font-size:6.6px}
  .process-flow{gap:7px}
  .flow-icon{width:36px;height:36px;font-size:12px}
  .process-flow article:not(:last-child):after{right:-5px;top:16px;font-size:9px}
  .process-flow article>span{font-size:6.5px}
  .process-flow h4{font-size:5.5px}
  .process-flow p{font-size:4.5px}

  .site-section{padding-top:36px;padding-bottom:36px}
  .module-grid{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr 1fr}

  .cta-section{flex-direction:column;align-items:flex-start}
  .cta-actions{width:100%;flex-direction:column}
  .cta-actions .btn{width:100%}

  .footer-main{grid-template-columns:1fr}
  .footer-links{grid-template-columns:repeat(2,1fr)}

  .login-layout{grid-template-columns:1fr}
  .login-showcase{min-height:350px;padding:25px 16px}
  .login-copy h1{font-size:28px}
  .login-panel{padding:32px 13px}
}

@media(max-width:420px){
  .hero-highlights{grid-template-columns:repeat(2,1fr)}
  .hero-highlights div:nth-child(2){border-right:0}
  .hero-lower{grid-template-columns:1fr}
  .train-scene{height:135px}
  .stats-band{height:auto;min-height:0;padding:12px 8px 15px;grid-template-columns:repeat(4,1fr)}
  .how-section{grid-template-columns:1fr}
  .process-flow{grid-template-columns:1fr}
  .process-flow article{
    display:grid;
    grid-template-columns:38px 22px 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    gap:3px 5px;
    text-align:left;
  }
  .process-flow article:not(:last-child):after{display:none}
  .flow-icon{grid-row:1/3;margin:0}
  .process-flow h4{margin:0}
  .process-flow p{grid-column:3}
  .benefit-grid{grid-template-columns:1fr}
}


/* =========================================================
   v5.0 FONT / COMPONENT SCALE CORRECTION
   Requested: typography and visible UI approx. 2x larger
   while retaining the same responsive composition.
   ========================================================= */

@media (min-width: 901px) {
  .topbar { height: 64px; }
  .topbar-inner {
    grid-template-columns: 170px 1fr 110px;
    gap: 24px;
  }
  .brand img { width: 118px; }

  .main-nav {
    gap: clamp(24px, 2.5vw, 42px);
    font-size: 13px;
  }
  .main-nav a { padding: 21px 0 17px; }
  .login-btn {
    padding: 12px 18px;
    font-size: 12px;
    border-radius: 9px;
  }

  .hero-upper {
    padding-top: 56px;
    grid-template-columns: 40% 60%;
    gap: 34px;
  }
  .hero-copy { max-width: 650px; }

  .eyebrow, .section-tag {
    padding: 7px 12px;
    font-size: 11px;
    letter-spacing: .35px;
  }

  .hero-copy h1 {
    font-size: clamp(50px, 4.2vw, 72px);
    letter-spacing: -2.8px;
    margin: 22px 0 12px;
  }
  .hero-copy h2 {
    font-size: clamp(28px, 2.5vw, 39px);
    margin-bottom: 26px;
  }
  .hero-copy > p {
    max-width: 640px;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.7;
  }

  .hero-actions { margin-top: 28px; gap: 14px; }
  .btn {
    min-height: 48px;
    padding: 0 22px;
    font-size: 12px;
    border-radius: 9px;
  }
  .btn-small {
    min-height: 40px;
    padding: 0 16px;
    font-size: 10px;
  }
  .play {
    width: 26px;
    height: 26px;
    font-size: 8px;
  }

  .hero-highlights { margin-top: 30px; }
  .hero-highlights div {
    min-height: 60px;
    padding: 10px 12px;
    gap: 9px;
  }
  .hero-highlights i { font-size: 18px; }
  .hero-highlights span {
    font-size: 10px;
    line-height: 1.2;
  }

  .dashboard-shell img {
    padding: 7px;
    border-radius: 16px;
  }

  .hero-lower {
    min-height: 190px;
    grid-template-columns: 42% 58%;
  }
  .train-scene,
  .stats-band {
    height: 190px;
    min-height: 190px;
  }
  .train-scene img {
    object-fit: cover;
    object-position: left center;
  }
  .stats-band { padding-bottom: 20px; }
  .stat > span {
    width: 52px;
    height: 52px;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .stat strong {
    font-size: clamp(22px, 1.8vw, 30px);
  }
  .stat small {
    font-size: 10px;
  }

  .how-section {
    padding-top: 28px;
    padding-bottom: 28px;
    grid-template-columns: 29% 71%;
    gap: 34px;
  }
  .how-copy h3,
  .section-heading h3,
  .ai-copy h3 {
    font-size: clamp(31px, 2.7vw, 42px);
    line-height: 1.08;
    letter-spacing: -1.3px;
    margin: 15px 0 13px;
  }
  .how-copy p,
  .section-heading p,
  .ai-copy p {
    font-size: 12px;
    line-height: 1.65;
  }

  .process-flow { gap: 20px; }
  .flow-icon {
    width: 62px;
    height: 62px;
    font-size: 21px;
    margin-bottom: 10px;
  }
  .process-flow article:not(:last-child):after {
    top: 29px;
    right: -14px;
    font-size: 18px;
  }
  .process-flow article > span { font-size: 12px; }
  .process-flow h4 {
    font-size: 11px;
    margin: 7px 0 5px;
  }
  .process-flow p {
    font-size: 8.5px;
    line-height: 1.48;
  }

  .site-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .section-heading {
    max-width: 670px;
    margin-bottom: 30px;
  }

  .module-grid { gap: 15px; }
  .module-grid article,
  .benefit-grid article {
    min-height: 168px;
    padding: 22px;
    border-radius: 12px;
  }
  .module-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    margin-bottom: 16px;
  }
  .module-grid h4,
  .benefit-grid h4 {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .module-grid p,
  .benefit-grid p {
    font-size: 10px;
    line-height: 1.55;
  }

  .ai-section {
    grid-template-columns: 40% 60%;
    gap: 48px;
  }
  .ai-copy ul {
    margin: 20px 0;
    gap: 10px;
    font-size: 11px;
  }
  .ai-visual { min-height: 330px; }
  .ai-brain {
    width: 175px;
    height: 175px;
    font-size: 46px;
  }
  .trend-card {
    height: 138px;
    padding: 14px;
  }
  .trend-title { font-size: 10px; }
  .trend-chart {
    height: 92px;
    margin-top: 10px;
  }
  .blue-line { top: 16px; }
  .green-line { top: 41px; }
  .orange-line { top: 63px; }
  .red-line { top: 82px; }

  .benefit-grid { gap: 14px; }
  .benefit-grid article > span {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .cta-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .cta-section h3 {
    font-size: 24px;
    margin: 12px 0 6px;
  }
  .cta-section p { font-size: 10px; }

  .footer {
    padding-top: 30px;
    padding-bottom: 24px;
  }
  .footer-brand img { width: 128px; }
  .footer-brand p {
    max-width: 360px;
    font-size: 9px;
  }
  .footer-links b { font-size: 10px; }
  .footer-links a { font-size: 9px; }
  .copyright { font-size: 8px; }
}

/* Small laptop / 13-inch tuning: keep the larger typography but reduce only enough to avoid overflow */
@media (min-width: 901px) and (max-width: 1366px) {
  .topbar { height: 60px; }
  .topbar-inner { grid-template-columns: 145px 1fr 100px; }
  .brand img { width: 100px; }
  .main-nav { font-size: 11px; gap: 24px; }
  .login-btn { font-size: 10px; }

  .hero-upper {
    padding-top: 42px;
    grid-template-columns: 40% 60%;
    gap: 24px;
  }
  .hero-copy h1 { font-size: 48px; }
  .hero-copy h2 { font-size: 28px; }
  .hero-copy > p { font-size: 13px; }

  .eyebrow, .section-tag { font-size: 9px; }
  .btn { min-height: 42px; font-size: 10px; }
  .hero-highlights div { min-height: 52px; }
  .hero-highlights span { font-size: 8.5px; }

  .hero-lower,
  .train-scene,
  .stats-band {
    height: 165px;
    min-height: 165px;
  }
  .stat > span { width: 44px; height: 44px; font-size: 15px; }
  .stat strong { font-size: 23px; }
  .stat small { font-size: 8px; }

  .how-copy h3,
  .section-heading h3,
  .ai-copy h3 { font-size: 32px; }

  .how-copy p,
  .section-heading p,
  .ai-copy p { font-size: 10px; }

  .flow-icon { width: 52px; height: 52px; font-size: 18px; }
  .process-flow h4 { font-size: 9px; }
  .process-flow p { font-size: 7px; }

  .module-grid article,
  .benefit-grid article {
    min-height: 145px;
    padding: 19px;
  }
  .module-grid h4,
  .benefit-grid h4 { font-size: 11px; }
  .module-grid p,
  .benefit-grid p { font-size: 8.5px; }
}

/* Tablet / mobile typography remains intentionally readable rather than doubling blindly */
@media (max-width: 900px) {
  .eyebrow, .section-tag { font-size: 9px; }
  .hero-copy > p { font-size: 12px; }
  .how-copy p,
  .section-heading p,
  .ai-copy p { font-size: 10px; }
  .module-grid h4,
  .benefit-grid h4 { font-size: 12px; }
  .module-grid p,
  .benefit-grid p { font-size: 9px; }
}


/* ============================================================
   v6.0 APPROVED REFERENCE MATCH
   Rest of the page rebuilt to follow the supplied reference:
   compact sections, tighter vertical rhythm, brighter streaks,
   smaller cards, and more precise proportions.
   ============================================================ */

/* Overall desktop rhythm */
@media (min-width: 901px) {
  body { background:#020b16; }

  /* train sharpening / display */
  .train-scene img {
    image-rendering:auto;
    filter:contrast(1.08) saturate(1.06) brightness(1.02);
  }

  /* HOW IT WORKS - compact full width like reference */
  .how-section {
    min-height: 255px;
    padding: 30px 3.3vw 28px;
    grid-template-columns: 24% 76%;
    gap: 38px;
    background:
      radial-gradient(circle at 84% 18%, rgba(0,114,255,.12), transparent 31%),
      linear-gradient(110deg,#06172b 0%,#082746 48%,#06172c 100%);
    border-top:1px solid #153c62;
    border-bottom:1px solid #163d64;
  }

  .how-copy h3 {
    font-size: 34px;
    line-height: 1.08;
    max-width: 310px;
  }
  .how-copy p {
    font-size: 10px;
    line-height: 1.6;
    max-width: 295px;
  }
  .how-copy .btn-small {
    margin-top: 8px;
    min-height: 38px;
    padding:0 16px;
  }

  .process-flow {
    gap: 18px;
    align-items:start;
  }
  .flow-icon {
    width: 56px;
    height: 56px;
    font-size: 20px;
    box-shadow: inset 0 0 22px rgba(0,150,255,.13), 0 0 24px rgba(0,143,255,.08);
  }
  .process-flow article > span { font-size: 10px; }
  .process-flow h4 { font-size: 9px; }
  .process-flow p {
    max-width: 130px;
    margin-inline:auto;
    font-size: 6.8px;
    line-height:1.45;
  }

  /* MODULES */
  .modules-section {
    position:relative;
    min-height: 470px;
    padding: 58px 3.3vw 52px;
    overflow:hidden;
    background:
      linear-gradient(118deg,transparent 52%,rgba(0,120,255,.08) 52.2%,transparent 52.8%),
      linear-gradient(127deg,transparent 60%,rgba(0,163,255,.16) 60.2%,transparent 60.6%),
      linear-gradient(138deg,transparent 69%,rgba(34,109,255,.1) 69.2%,transparent 69.7%),
      radial-gradient(circle at 86% 12%,rgba(0,136,255,.16),transparent 30%),
      #03111f;
  }

  .modules-section::after {
    content:"";
    position:absolute;
    right:-8%;
    top:0;
    width:47%;
    height:100%;
    background:
      repeating-linear-gradient(140deg,
        transparent 0 33px,
        rgba(0,119,255,.0) 34px 44px,
        rgba(0,153,255,.22) 45px 47px,
        transparent 48px 68px);
    transform:skewX(-7deg);
    opacity:.7;
    pointer-events:none;
  }

  .modules-section .section-heading {
    position:relative;
    z-index:2;
    width: 35%;
    margin-bottom: 26px;
  }
  .modules-section .section-heading h3 {
    font-size: 31px;
  }
  .modules-section .section-heading p {
    max-width: 320px;
    font-size: 8.5px;
  }

  .module-grid {
    position:relative;
    z-index:2;
    width: 68%;
    grid-template-columns:repeat(3,1fr);
    gap: 10px;
  }
  .module-grid article {
    min-height: 120px;
    padding: 15px 15px 13px;
    border-radius: 8px;
    background:linear-gradient(145deg,#0b1f36,#0a1a2d);
    border-color:#153a5d;
  }
  .module-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 11px;
  }
  .module-grid h4 {
    font-size: 9px;
    margin-bottom: 5px;
  }
  .module-grid p {
    font-size: 6.8px;
    line-height: 1.5;
  }

  /* AI section exact split */
  .ai-section {
    min-height: 405px;
    padding: 48px 3.3vw 50px;
    grid-template-columns: 34% 66%;
    gap: 34px;
    background:
      radial-gradient(circle at 67% 34%,rgba(0,139,255,.08),transparent 24%),
      #020b16;
  }
  .ai-copy {
    align-self:center;
  }
  .ai-copy h3 {
    font-size: 30px;
    margin-top: 12px;
  }
  .ai-copy p {
    max-width: 315px;
    font-size: 8.5px;
  }
  .ai-copy ul {
    margin: 16px 0;
    gap: 8px;
    font-size: 8px;
  }
  .ai-copy .btn-small { min-height: 34px; }

  .ai-visual { min-height: 315px; }
  .ai-brain {
    width: 142px;
    height: 142px;
    font-size: 41px;
    margin-top: 0;
    background:
      radial-gradient(circle at 50% 50%,#0d65a8 0,#0a345b 42%,#061c32 61%,transparent 72%);
    box-shadow:0 0 52px rgba(0,165,255,.22);
  }
  .trend-card {
    left: 12%;
    right: 3%;
    bottom: 3px;
    height: 142px;
    padding: 13px 16px;
    border-radius: 9px;
  }
  .trend-title { font-size: 8px; }
  .trend-chart {
    height: 94px;
    margin-top: 11px;
  }
  .trend-chart .line { height: 2px; }
  .blue-line { top:14px; transform:skewY(-6deg); }
  .green-line { top:38px; transform:skewY(-5deg); }
  .orange-line { top:61px; transform:skewY(-3deg); }
  .red-line { top:81px; transform:skewY(-1deg); }

  /* BENEFITS */
  .benefits-section {
    min-height: 315px;
    padding: 46px 3.3vw 42px;
    background:
      radial-gradient(circle at 72% 15%,rgba(0,115,255,.06),transparent 28%),
      #03111f;
  }
  .benefits-section .section-heading {
    margin-bottom: 21px;
  }
  .benefits-section .section-heading h3 {
    font-size: 29px;
  }
  .benefits-section .section-heading p {
    font-size: 8px;
  }

  .benefit-grid {
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
  }
  .benefit-grid article {
    min-height: 126px;
    padding: 16px;
    border-radius: 8px;
  }
  .benefit-grid article > span {
    font-size: 17px;
    margin-bottom: 9px;
  }
  .benefit-grid h4 {
    font-size: 9px;
    margin-bottom: 5px;
  }
  .benefit-grid p {
    font-size: 6.7px;
    line-height:1.48;
  }

  /* CTA - smaller and centered */
  .cta-section {
    margin: 0 3.3vw;
    padding: 22px 26px;
    min-height: 100px;
    border:1px solid #164c7c;
    border-radius: 9px;
    background:
      linear-gradient(125deg,rgba(0,130,255,.24),transparent 30%),
      linear-gradient(240deg,rgba(0,95,255,.18),transparent 33%),
      #071d38;
  }
  .cta-section h3 {
    font-size: 18px;
    margin: 8px 0 4px;
  }
  .cta-section p { font-size: 7px; }
  .cta-section .section-tag { font-size: 6.5px; }
  .cta-actions .btn {
    min-height: 34px;
    font-size: 7px;
    padding:0 14px;
  }

  /* Footer matches reference density */
  .footer {
    padding: 19px 3.3vw 13px;
  }
  .footer-main {
    grid-template-columns: 28% 72%;
    gap: 30px;
  }
  .footer-brand img { width: 104px; }
  .footer-brand p {
    max-width: 220px;
    font-size: 6.3px;
    line-height:1.55;
  }
  .footer-links {
    grid-template-columns:repeat(4,1fr);
    gap:12px;
  }
  .footer-links b { font-size: 7px; }
  .footer-links a { font-size: 6px; }
  .copyright {
    padding-top: 11px;
    font-size: 5.8px;
  }
}

/* 1366px / 13-inch exact density */
@media (min-width: 901px) and (max-width: 1366px) {
  .how-section { min-height: 230px; padding-top:24px; padding-bottom:24px; }
  .how-copy h3 { font-size: 29px; }
  .process-flow p { font-size: 6.2px; }

  .modules-section {
    min-height: 430px;
    padding-top: 48px;
    padding-bottom: 45px;
  }
  .modules-section .section-heading h3 { font-size: 27px; }
  .module-grid article { min-height: 112px; }

  .ai-section {
    min-height: 370px;
    padding-top: 42px;
    padding-bottom: 44px;
  }
  .ai-copy h3 { font-size: 27px; }
  .ai-brain { width: 126px; height:126px; font-size:36px; }
  .trend-card { height:126px; }

  .benefits-section {
    min-height: 290px;
    padding-top: 40px;
    padding-bottom: 38px;
  }
  .benefit-grid article { min-height: 115px; }
}

/* Tablet/mobile: stack without losing the visual language */
@media (max-width: 900px) {
  .modules-section .section-heading,
  .module-grid {
    width: 100%;
  }
  .modules-section::after { opacity:.28; }
}

@media (max-width: 620px) {
  .modules-section,
  .ai-section,
  .benefits-section {
    padding-left:15px;
    padding-right:15px;
  }
  .modules-section {
    min-height:auto;
  }
  .module-grid {
    width:100%;
    grid-template-columns:1fr;
  }
  .ai-section {
    grid-template-columns:1fr;
  }
  .benefit-grid {
    grid-template-columns:1fr 1fr;
  }
  .cta-section {
    margin:0 15px;
  }
}


/* ============================================================
   v7.0 — LOWER SECTION REBUILD TO MATCH THE APPROVED IMAGES
   ============================================================ */

/* ---------- MODULES: desired Image 1 ---------- */
@media (min-width: 901px) {
  .modules-section{
    position:relative;
    min-height:410px;
    padding:38px 3.3vw 42px;
    overflow:hidden;
    background:
      radial-gradient(circle at 85% 8%,rgba(0,128,255,.18),transparent 26%),
      linear-gradient(133deg,transparent 56%,rgba(0,128,255,.10) 56.4%,transparent 57%),
      linear-gradient(140deg,transparent 64%,rgba(0,184,255,.13) 64.4%,transparent 65%),
      linear-gradient(148deg,transparent 73%,rgba(31,93,255,.12) 73.4%,transparent 74%),
      #03111f;
  }
  .modules-section::after{
    content:"";
    position:absolute;
    top:-18%;
    right:-7%;
    width:58%;
    height:130%;
    pointer-events:none;
    opacity:.76;
    transform:skewX(-7deg);
    background:
      repeating-linear-gradient(
        141deg,
        transparent 0 23px,
        rgba(0,125,255,0) 24px 35px,
        rgba(0,135,255,.16) 36px 38px,
        transparent 39px 58px
      );
  }
  .modules-section .section-heading{
    position:relative;
    z-index:2;
    width:38%;
    max-width:420px;
    margin-bottom:18px;
  }
  .modules-section .section-heading h3{
    font-size:27px;
    line-height:1.05;
    margin:10px 0 9px;
  }
  .modules-section .section-heading p{
    max-width:335px;
    font-size:8px;
    line-height:1.55;
  }
  .module-grid{
    position:relative;
    z-index:2;
    width:84%;
    max-width:none;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .module-grid article{
    min-height:102px;
    padding:13px 14px 12px;
    border-radius:7px;
    border:1px solid #153a5d;
    background:linear-gradient(145deg,#0b1f36,#0a1a2d);
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }
  .module-icon{
    width:31px;
    height:31px;
    margin-bottom:9px;
    border-radius:7px;
    font-size:13px;
  }
  .module-grid h4{
    margin:0 0 4px;
    font-size:8px;
  }
  .module-grid p{
    font-size:6.2px;
    line-height:1.45;
  }

  /* ---------- AI: desired Image 3 ---------- */
  .ai-section{
    position:relative;
    min-height:340px;
    padding:38px 3.3vw 40px;
    grid-template-columns:33% 67%;
    gap:24px;
    overflow:hidden;
    background:
      radial-gradient(circle at 73% 22%,rgba(0,137,255,.12),transparent 22%),
      #020b16;
  }
  .ai-copy{
    align-self:center;
    max-width:340px;
  }
  .ai-copy h3{
    font-size:27px;
    line-height:1.05;
    margin:10px 0 9px;
  }
  .ai-copy p{
    max-width:310px;
    font-size:8px;
    line-height:1.55;
  }
  .ai-copy ul{
    margin:14px 0 15px;
    gap:7px;
    font-size:7.5px;
  }
  .ai-copy .btn-small{
    min-height:32px;
    padding:0 13px;
    font-size:6.7px;
  }
  .ai-visual{
    min-height:260px;
    position:relative;
  }
  .ai-brain{
    position:absolute;
    top:1px;
    right:22%;
    width:125px;
    height:125px;
    margin:0;
    font-size:36px;
    border-color:rgba(32,154,255,.30);
    background:
      radial-gradient(circle at 50% 48%,#0d65a8 0,#0a345b 42%,#061c32 61%,transparent 72%);
    box-shadow:0 0 45px rgba(0,165,255,.23);
  }
  .trend-card{
    left:auto;
    right:3%;
    bottom:4px;
    width:61%;
    height:126px;
    padding:11px 13px;
    border-radius:8px;
  }
  .trend-title{
    font-size:7px;
  }
  .trend-chart{
    height:83px;
    margin-top:9px;
  }
  .blue-line{top:13px}
  .green-line{top:34px}
  .orange-line{top:54px}
  .red-line{top:72px}

  /* ---------- BENEFITS + CTA + FOOTER: desired Image 5 ---------- */
  .benefits-section{
    min-height:245px;
    padding:34px 3.3vw 28px;
    background:
      radial-gradient(circle at 77% 15%,rgba(0,117,255,.06),transparent 25%),
      #03111f;
  }
  .benefits-section .section-heading{
    margin-bottom:16px;
  }
  .benefits-section .section-heading h3{
    font-size:25px;
    margin:9px 0 7px;
  }
  .benefits-section .section-heading p{
    font-size:7.5px;
  }
  .benefit-grid{
    gap:8px;
  }
  .benefit-grid article{
    min-height:91px;
    padding:12px 13px;
    border-radius:7px;
  }
  .benefit-grid article>span{
    font-size:14px;
    margin-bottom:7px;
  }
  .benefit-grid h4{
    margin:0 0 4px;
    font-size:7.8px;
  }
  .benefit-grid p{
    font-size:6px;
    line-height:1.42;
  }

  .cta-section{
    min-height:88px;
    margin:0 3.3vw;
    padding:18px 24px;
    border:1px solid #164c7c;
    border-radius:8px;
    background:
      linear-gradient(126deg,rgba(0,130,255,.22),transparent 32%),
      linear-gradient(238deg,rgba(0,90,255,.18),transparent 32%),
      #071d38;
  }
  .cta-section h3{
    margin:7px 0 3px;
    font-size:15px;
  }
  .cta-section p{
    font-size:6.5px;
  }
  .cta-section .section-tag{
    font-size:5.8px;
    padding:4px 7px;
  }
  .cta-actions .btn{
    min-height:30px;
    padding:0 12px;
    font-size:6.2px;
  }

  .footer{
    padding:14px 3.3vw 11px;
  }
  .footer-main{
    grid-template-columns:25% 75%;
    gap:24px;
  }
  .footer-brand img{
    width:88px;
  }
  .footer-brand p{
    max-width:205px;
    font-size:5.8px;
    line-height:1.5;
  }
  .footer-links{
    gap:10px;
  }
  .footer-links b{
    font-size:6.4px;
  }
  .footer-links a{
    font-size:5.4px;
  }
  .copyright{
    padding-top:9px;
    font-size:5.2px;
  }
}

/* 13-inch / 1366px proportional correction */
@media (min-width: 901px) and (max-width:1366px){
  .modules-section{
    min-height:370px;
    padding-top:34px;
    padding-bottom:36px;
  }
  .modules-section .section-heading h3{font-size:24px}
  .module-grid{width:86%}
  .module-grid article{min-height:96px}

  .ai-section{
    min-height:315px;
    padding-top:34px;
    padding-bottom:35px;
  }
  .ai-copy h3{font-size:24px}
  .ai-brain{width:112px;height:112px;font-size:32px}
  .trend-card{height:113px}
  .trend-chart{height:73px}

  .benefits-section{
    min-height:225px;
    padding-top:30px;
    padding-bottom:25px;
  }
  .benefits-section .section-heading h3{font-size:22px}
  .benefit-grid article{min-height:85px}
}

/* Tablet */
@media (max-width:900px){
  .modules-section .section-heading,
  .module-grid{width:100%}
  .modules-section::after{opacity:.28}
  .ai-section{grid-template-columns:1fr}
  .ai-visual{min-height:260px}
  .trend-card{width:auto;left:6%;right:6%}
  .ai-brain{right:50%;transform:translateX(50%)}
}

/* Mobile */
@media (max-width:620px){
  .modules-section,
  .ai-section,
  .benefits-section{
    padding-left:15px;
    padding-right:15px;
  }
  .module-grid{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .cta-section{margin:0 15px}
}

/* ============================================================
   v8.0 — DIRECT MATCH TO USER'S THREE DESIRED LOWER-SECTION IMAGES
   ============================================================ */
@media (min-width: 901px) {
  /* MODULES */
  .modules-section{
    position:relative;
    min-height:430px;
    padding:34px 4.8vw 36px;
    overflow:hidden;
    background:
      radial-gradient(circle at 88% 10%,rgba(0,118,255,.16),transparent 28%),
      #03111f;
  }
  .modules-section::before{
    content:"";
    position:absolute;
    top:-20%; right:-4%;
    width:58%; height:140%;
    opacity:.78;
    transform:skewX(-7deg);
    background:
      repeating-linear-gradient(141deg, transparent 0 25px, rgba(0,139,255,.0) 26px 38px, rgba(0,139,255,.18) 39px 41px, transparent 42px 64px),
      linear-gradient(143deg, transparent 32%, rgba(0,170,255,.16) 32.5%, transparent 33.2%),
      linear-gradient(138deg, transparent 51%, rgba(37,106,255,.14) 51.5%, transparent 52.2%);
    pointer-events:none;
  }
  .modules-section::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0;
    width:50%;
    background:linear-gradient(90deg,transparent,rgba(0,28,55,.18));
    pointer-events:none;
  }
  .modules-section .section-heading{
    position:relative; z-index:2;
    width:32%;
    max-width:350px;
    margin-bottom:16px;
  }
  .modules-section .section-heading h3{
    font-size:24px;
    line-height:1.05;
    margin:9px 0 8px;
  }
  .modules-section .section-heading p{
    max-width:290px;
    font-size:7.2px;
    line-height:1.5;
  }
  .module-grid{
    position:relative; z-index:2;
    width:74%;
    max-width:980px;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }
  .module-grid article{
    min-height:94px;
    padding:12px 12px 11px;
    border-radius:7px;
    border:1px solid #163a5a;
    background:linear-gradient(145deg,#0b1f35,#0a1a2c);
  }
  .module-icon{
    width:29px;height:29px;
    margin-bottom:8px;
    border-radius:7px;
    font-size:12px;
  }
  .module-grid h4{font-size:7.5px;margin:0 0 4px}
  .module-grid p{font-size:5.8px;line-height:1.42}
  .module-more{
    position:relative;z-index:2;
    width:74%;max-width:980px;
    text-align:center;
    margin-top:12px;
  }
  .module-more .btn{min-height:28px;font-size:5.8px;padding:0 11px}

  /* AI SECTION */
  .ai-section{
    min-height:330px;
    padding:34px 4.8vw 36px;
    grid-template-columns:34% 66%;
    gap:22px;
    background:
      radial-gradient(circle at 74% 25%,rgba(0,140,255,.08),transparent 25%),
      #020b16;
  }
  .ai-copy{max-width:310px;align-self:center}
  .ai-copy h3{font-size:23px;line-height:1.05;margin:9px 0 8px}
  .ai-copy p{font-size:7.3px;line-height:1.5;max-width:280px}
  .ai-copy ul{margin:12px 0 13px;gap:6px;font-size:7px}
  .ai-copy .btn-small{min-height:29px;font-size:5.9px;padding:0 11px}
  .ai-visual{min-height:255px;position:relative}
  .brain-graphic{
    position:absolute;
    top:-4px; right:21%;
    width:170px; height:120px;
    color:#24b8ff;
    filter:drop-shadow(0 0 12px rgba(0,173,255,.48));
  }
  .brain-graphic svg{width:100%;height:100%;overflow:visible}
  .brain-graphic svg text{
    fill:#71d2ff;
    font-family:Inter,Arial,sans-serif;
    font-size:42px;
    font-weight:800;
    filter:drop-shadow(0 0 5px rgba(0,168,255,.6));
  }
  .trend-card{
    left:auto;
    right:4%;
    bottom:2px;
    width:62%;
    height:125px;
    padding:10px 12px 9px;
    border-radius:8px;
    background:#07182a;
    border:1px solid #164365;
  }
  .trend-title{font-size:6.7px}
  .trend-legend{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:4.9px;color:#8da4ba}
  .lg{width:5px;height:5px;border-radius:50%;display:inline-block;margin-left:4px}
  .lg.blue{background:#2f80ff}.lg.green{background:#22d07d}.lg.orange{background:#ff9d1b}.lg.red{background:#ff4a5c}
  .trend-svg{display:block;width:100%;height:82px;margin-top:1px;overflow:visible}
  .trend-svg .grid line{stroke:#17344f;stroke-width:1}
  .trend-svg .series{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .trend-svg .s-blue{stroke:#2f80ff}.trend-svg .s-green{stroke:#22d07d}.trend-svg .s-orange{stroke:#ff9d1b}.trend-svg .s-red{stroke:#ff4a5c}
  .blue-dots{fill:#2f80ff}

  /* BENEFITS */
  .benefits-section{
    min-height:225px;
    padding:30px 4.8vw 22px;
    background:#03111f;
  }
  .benefits-section .section-heading{margin-bottom:14px}
  .benefits-section .section-heading h3{font-size:22px;margin:8px 0 6px}
  .benefits-section .section-heading p{font-size:6.8px}
  .benefit-grid{
    width:78%;
    max-width:1030px;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
  }
  .benefit-grid article{
    min-height:82px;
    padding:11px 12px;
    border-radius:7px;
  }
  .benefit-grid article>span{font-size:13px;margin-bottom:6px}
  .benefit-grid h4{font-size:7.2px;margin-bottom:3px}
  .benefit-grid p{font-size:5.6px;line-height:1.4}

  /* CTA */
  .cta-section{
    width:auto;
    min-height:78px;
    margin:0 4.8vw;
    padding:16px 21px;
    border-radius:8px;
    border:1px solid #164b79;
    background:
      linear-gradient(130deg,rgba(0,129,255,.24),transparent 32%),
      linear-gradient(238deg,rgba(0,92,255,.18),transparent 31%),
      #071d38;
  }
  .cta-section h3{font-size:13.5px;margin:6px 0 3px}
  .cta-section p{font-size:5.9px}
  .cta-section .section-tag{font-size:5.2px;padding:3px 6px}
  .cta-actions .btn{min-height:27px;font-size:5.5px;padding:0 10px}

  /* FOOTER */
  .footer{padding:12px 4.8vw 10px}
  .footer-main{grid-template-columns:24% 76%;gap:20px}
  .footer-brand img{width:82px}
  .footer-brand p{max-width:180px;font-size:5.2px;line-height:1.45}
  .footer-links{gap:8px}
  .footer-links b{font-size:5.9px}
  .footer-links a{font-size:5px}
  .copyright{padding-top:8px;font-size:4.8px}
}

@media (min-width:901px) and (max-width:1366px){
  .modules-section{min-height:390px;padding-top:31px;padding-bottom:33px}
  .module-grid{width:77%}
  .module-more{width:77%}
  .ai-section{min-height:305px;padding-top:31px;padding-bottom:32px}
  .brain-graphic{width:150px;height:105px;right:20%}
  .trend-card{width:63%;height:116px}
  .trend-svg{height:74px}
  .benefits-section{min-height:210px;padding-top:27px;padding-bottom:20px}
}

@media (max-width:900px){
  .module-grid,.module-more,.benefit-grid{width:100%;max-width:none}
  .brain-graphic{right:50%;transform:translateX(50%)}
  .trend-card{left:5%;right:5%;width:auto}
}


/* ============================================================
   v9.0 — USER REQUESTED FONT, ICON, CENTERING & GRAPH UPDATE
   ============================================================ */

@media (min-width: 901px) {
  /* 1. HOW IT WORKS — font size ~2x */
  .how-section{
    padding:42px 4vw 44px;
    grid-template-columns:28% 72%;
    gap:46px;
    min-height:315px;
  }
  .how-copy .section-tag{
    font-size:13px;
    padding:8px 14px;
  }
  .how-copy h3{
    font-size:56px;
    line-height:1.04;
    letter-spacing:-2px;
    margin:18px 0 18px;
  }
  .how-copy p{
    font-size:16px;
    line-height:1.65;
    max-width:420px;
  }
  .how-copy .btn-small{
    min-height:48px;
    padding:0 22px;
    font-size:12px;
    margin-top:8px;
  }

  .process-flow{
    gap:24px;
  }
  .flow-icon{
    width:76px;
    height:76px;
    font-size:27px;
    margin-bottom:13px;
  }
  .process-flow article:not(:last-child):after{
    top:35px;
    right:-16px;
    font-size:22px;
  }
  .process-flow article>span{
    font-size:15px;
  }
  .process-flow h4{
    font-size:14px;
    margin:9px 0 7px;
  }
  .process-flow p{
    max-width:170px;
    font-size:11px;
    line-height:1.48;
  }

  /* 2. MODULES — font 2x, boxes centered, icons larger and relevant */
  .modules-section{
    padding:52px 4vw 54px;
    min-height:560px;
  }
  .modules-section .section-heading{
    width:auto;
    max-width:640px;
    margin:0 0 30px 0;
  }
  .modules-section .section-heading .section-tag{
    font-size:12px;
    padding:8px 14px;
  }
  .modules-section .section-heading h3{
    font-size:48px;
    line-height:1.04;
    margin:16px 0 13px;
  }
  .modules-section .section-heading p{
    max-width:600px;
    font-size:15px;
    line-height:1.6;
  }

  .module-grid{
    width:min(1180px,92%);
    margin:0 auto;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  .module-grid article{
    min-height:170px;
    padding:22px 24px;
    border-radius:12px;
  }
  .module-icon{
    width:58px;
    height:58px;
    margin-bottom:18px;
    border-radius:14px;
    font-size:28px;
  }
  .module-grid h4{
    font-size:16px;
    margin-bottom:9px;
  }
  .module-grid p{
    font-size:12px;
    line-height:1.5;
  }
  .module-more{
    margin-top:22px;
    text-align:center;
  }
  .module-more .btn-small{
    min-height:44px;
    padding:0 20px;
    font-size:11px;
  }

  /* 3. AI section — font ~3x and reference-style graph image */
  .ai-section{
    padding:58px 4vw 60px;
    min-height:500px;
    grid-template-columns:34% 66%;
    gap:40px;
  }
  .ai-copy{
    max-width:520px;
  }
  .ai-copy .section-tag{
    font-size:13px;
    padding:8px 14px;
  }
  .ai-copy h3{
    font-size:58px;
    line-height:1.02;
    letter-spacing:-2px;
    margin:17px 0 16px;
  }
  .ai-copy p{
    max-width:500px;
    font-size:16px;
    line-height:1.62;
  }
  .ai-copy ul{
    margin:22px 0 22px;
    gap:12px;
    font-size:14px;
  }
  .ai-copy .btn-small{
    min-height:46px;
    padding:0 20px;
    font-size:11px;
  }

  .ai-visual{
    min-height:380px;
  }
  .brain-graphic{
    top:2px !important;
    right:15% !important;
    width:205px !important;
    height:150px !important;
  }
  .brain-graphic svg text{
    font-size:50px !important;
  }
  .trend-card.graph-image-card{
    left:auto;
    right:3%;
    bottom:5px;
    width:70%;
    height:auto;
    padding:0;
    overflow:hidden;
    border-radius:12px;
    border:1px solid #16446c;
    background:#071625;
  }
  .trend-card.graph-image-card img{
    display:block;
    width:100%;
    height:auto;
  }

  /* 4. BENEFITS — font ~4x and centered card row */
  .benefits-section{
    min-height:430px;
    padding:58px 4vw 54px;
  }
  .benefits-section .section-heading{
    max-width:720px;
    margin:0 auto 34px;
    text-align:center;
  }
  .benefits-section .section-heading .section-tag{
    font-size:15px;
    padding:9px 16px;
  }
  .benefits-section .section-heading h3{
    font-size:58px;
    line-height:1.04;
    margin:18px 0 14px;
  }
  .benefits-section .section-heading p{
    font-size:17px;
    line-height:1.6;
  }
  .benefit-grid{
    width:min(1260px,92%);
    margin:0 auto;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
  .benefit-grid article{
    min-height:185px;
    padding:25px 24px;
    border-radius:12px;
    text-align:center;
  }
  .benefit-grid article>span{
    font-size:36px;
    margin-bottom:18px;
  }
  .benefit-grid h4{
    font-size:19px;
    margin-bottom:10px;
  }
  .benefit-grid p{
    font-size:13px;
    line-height:1.55;
  }

  /* CTA/footer kept proportional to enlarged benefits */
  .cta-section{
    margin:0 4vw;
    min-height:120px;
    padding:24px 30px;
  }
  .cta-section h3{
    font-size:24px;
  }
  .cta-section p{
    font-size:10px;
  }
  .cta-actions .btn{
    min-height:42px;
    font-size:10px;
  }
  .footer{
    padding:24px 4vw 18px;
  }
  .footer-brand img{
    width:120px;
  }
  .footer-brand p{
    font-size:9px;
    max-width:300px;
  }
  .footer-links b{
    font-size:10px;
  }
  .footer-links a{
    font-size:9px;
  }
}

/* 13-inch laptop balancing: preserve the larger type without overflow */
@media (min-width: 901px) and (max-width: 1366px) {
  .how-copy h3{font-size:44px}
  .how-copy p{font-size:13px}
  .flow-icon{width:62px;height:62px;font-size:22px}
  .process-flow h4{font-size:11px}
  .process-flow p{font-size:8.5px}

  .modules-section .section-heading h3{font-size:38px}
  .modules-section .section-heading p{font-size:12px}
  .module-grid{width:94%}
  .module-grid article{min-height:145px;padding:18px}
  .module-icon{width:48px;height:48px;font-size:22px}
  .module-grid h4{font-size:13px}
  .module-grid p{font-size:10px}

  .ai-copy h3{font-size:45px}
  .ai-copy p{font-size:13px}
  .ai-copy ul{font-size:11px}
  .trend-card.graph-image-card{width:73%}

  .benefits-section .section-heading h3{font-size:46px}
  .benefits-section .section-heading p{font-size:14px}
  .benefit-grid article{min-height:155px;padding:20px}
  .benefit-grid article>span{font-size:30px}
  .benefit-grid h4{font-size:15px}
  .benefit-grid p{font-size:11px}
}

/* Tablet */
@media (max-width:900px){
  .module-grid{width:100%}
  .benefit-grid{width:100%}
  .trend-card.graph-image-card{
    position:relative;
    left:auto;right:auto;bottom:auto;
    width:100%;
    margin-top:140px;
  }
}

/* Mobile */
@media (max-width:620px){
  .how-copy h3{font-size:34px}
  .how-copy p{font-size:12px}

  .modules-section .section-heading h3{font-size:34px}
  .modules-section .section-heading p{font-size:12px}
  .module-grid{grid-template-columns:1fr}

  .ai-copy h3{font-size:38px}
  .ai-copy p{font-size:12px}
  .ai-copy ul{font-size:11px}
  .brain-graphic{
    right:50% !important;
    transform:translateX(50%) !important;
  }

  .benefits-section .section-heading h3{font-size:38px}
  .benefits-section .section-heading p{font-size:13px}
  .benefit-grid{grid-template-columns:1fr}
}


/* ============================================================
   v10.0 — AI VISUAL REBUILD + ABOUT US + CTA/FOOTER SCALE
   ============================================================ */

.ai-visual-image{
  min-height:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ai-visual-image img{
  width:min(100%,980px);
  height:auto;
  display:block;
  border-radius:14px;
  filter:drop-shadow(0 22px 45px rgba(0,70,150,.16));
}

/* About Us */
.about-section{
  background:
    radial-gradient(circle at 80% 20%,rgba(0,122,255,.10),transparent 26%),
    linear-gradient(180deg,#020b16,#03111f);
  border-top:1px solid #0c3152;
  border-bottom:1px solid #0c3152;
}
.about-layout{
  width:min(1320px,94%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
.about-copy{
  max-width:670px;
}
.about-copy h3{
  margin:16px 0 16px;
  font-size:clamp(34px,3vw,52px);
  line-height:1.06;
  letter-spacing:-1.6px;
}
.about-copy p{
  margin:0 0 14px;
  color:#a9bdd2;
  font-size:14px;
  line-height:1.72;
}
.about-btn{
  margin-top:8px;
}
.about-panel{
  min-height:280px;
  padding:34px;
  border:1px solid #17466f;
  border-radius:16px;
  background:linear-gradient(145deg,#081d34,#071524);
  box-shadow:0 24px 55px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-panel>img{
  width:190px;
  max-width:55%;
  margin-bottom:30px;
}
.about-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.about-metrics div{
  padding:15px 13px;
  border:1px solid #153b5e;
  border-radius:10px;
  background:#091a2d;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.about-metrics strong{
  color:#58c9ff;
  font-size:15px;
}
.about-metrics span{
  color:#91a6bc;
  font-size:9px;
  line-height:1.4;
}

/* Image 2 request: CTA and footer fonts 2x larger */
@media (min-width:901px){
  .cta-section{
    min-height:150px;
    padding:30px 34px;
  }
  .cta-section .section-tag{
    font-size:11px;
    padding:7px 12px;
  }
  .cta-section h3{
    font-size:34px;
    line-height:1.15;
    margin:12px 0 7px;
  }
  .cta-section p{
    font-size:15px;
    line-height:1.5;
  }
  .cta-actions .btn{
    min-height:48px;
    padding:0 20px;
    font-size:12px;
  }

  .footer{
    padding:34px 4vw 26px;
  }
  .footer-main{
    grid-template-columns:30% 70%;
    gap:38px;
  }
  .footer-brand img{
    width:160px;
  }
  .footer-brand p{
    max-width:360px;
    font-size:14px;
    line-height:1.65;
  }
  .footer-links{
    gap:24px;
  }
  .footer-links b{
    font-size:14px;
    margin-bottom:8px;
  }
  .footer-links a{
    font-size:13px;
    line-height:1.5;
  }
  .copyright{
    padding-top:20px;
    font-size:11px;
  }
}

@media (min-width:901px) and (max-width:1366px){
  .ai-visual-image img{
    width:min(100%,760px);
  }
  .about-copy h3{font-size:42px}
  .about-copy p{font-size:12px}
  .cta-section h3{font-size:28px}
  .cta-section p{font-size:12px}
  .footer-brand img{width:135px}
  .footer-brand p{font-size:11px}
  .footer-links b{font-size:12px}
  .footer-links a{font-size:11px}
}

@media(max-width:900px){
  .about-layout{
    grid-template-columns:1fr;
    width:100%;
  }
  .about-panel{
    min-height:auto;
  }
  .about-metrics{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media(max-width:620px){
  .about-copy h3{font-size:34px}
  .about-copy p{font-size:12px}
  .about-metrics{grid-template-columns:1fr}
  .cta-section h3{font-size:22px}
  .cta-section p{font-size:11px}
  .footer-main{grid-template-columns:1fr}
  .footer-brand p{font-size:11px}
  .footer-links b{font-size:11px}
  .footer-links a{font-size:10px}
}


/* ============================================================
   v11.0 — ABOUT VISUAL BACKGROUND + FUTURISTIC LOGIN REBUILD
   ============================================================ */

/* About right panel: add futuristic railway/technology background only */
.about-panel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(4,18,34,.32),rgba(4,18,34,.82)),
    url("../img/about-tech-bg.jpg") center/cover no-repeat !important;
}
.about-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 22%,rgba(0,167,255,.22),transparent 26%),
    linear-gradient(135deg,rgba(0,96,255,.04),transparent 42%);
}
.about-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,transparent 0%,rgba(3,14,27,.22) 42%,rgba(3,14,27,.86) 100%);
}
.about-panel>img,
.about-panel .about-metrics{
  position:relative;
  z-index:2;
}
.about-panel>img{
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.about-metrics div{
  backdrop-filter:blur(8px);
  background:rgba(5,25,45,.82) !important;
  border-color:rgba(49,143,214,.42) !important;
}

/* Futuristic Login v11 */
.login-page-v11{
  min-height:100vh;
  background:#020b16;
  color:#f5f8ff;
}
.login-v11-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns:58% 42%;
  background:#020b16;
}
.login-v11-visual{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:clamp(34px,4vw,66px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(90deg,rgba(2,11,22,.93) 0%,rgba(2,11,22,.55) 32%,rgba(2,11,22,.10) 72%),
    url("../img/login-train-bg.jpg") center/cover no-repeat;
}
.login-v11-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 62% 60%,rgba(0,132,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(2,11,22,.08),rgba(2,11,22,.26));
}
.login-v11-logo,
.login-v11-copy,
.login-v11-stats{
  position:relative;
  z-index:2;
}
.login-v11-logo img{
  width:clamp(140px,11vw,220px);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.34));
}
.login-v11-copy{
  max-width:650px;
  margin-top:auto;
  margin-bottom:auto;
}
.login-v11-kicker{
  display:inline-block;
  color:#18c9ff;
  font-size:clamp(18px,1.5vw,27px);
  font-weight:700;
  letter-spacing:.7px;
  margin-bottom:18px;
}
.login-v11-copy h1{
  margin:0 0 22px;
  font-size:clamp(58px,5vw,92px);
  line-height:.98;
  letter-spacing:-3px;
  text-shadow:0 12px 38px rgba(0,0,0,.38);
}
.login-v11-copy p{
  max-width:560px;
  margin:0;
  color:#c8d8ea;
  font-size:clamp(20px,1.55vw,30px);
  line-height:1.55;
}
.login-v11-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:750px;
}
.login-v11-stats div{
  min-width:0;
  padding:18px 10px;
  border-top:1px solid rgba(49,155,226,.32);
  display:grid;
  justify-items:start;
  gap:6px;
}
.login-v11-stats div>span{
  width:52px;
  height:52px;
  border:1px solid #1684c7;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:24px;
  color:#58cfff;
  background:rgba(4,24,43,.72);
  box-shadow:inset 0 0 20px rgba(0,155,255,.10);
}
.login-v11-stats strong{
  font-size:clamp(28px,2vw,40px);
}
.login-v11-stats small{
  color:#b6c8db;
  font-size:clamp(12px,.9vw,17px);
}

.login-v11-panel{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:clamp(28px,4vw,70px);
  background:
    radial-gradient(circle at 52% 40%,rgba(0,110,255,.12),transparent 34%),
    linear-gradient(160deg,#06172c,#020b16 68%);
}
.login-v11-card{
  width:min(680px,100%);
  padding:clamp(32px,3vw,58px);
  border:1px solid #1687c7;
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(8,31,55,.95),rgba(4,17,32,.97));
  box-shadow:
    0 35px 80px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.login-v11-head{
  margin-bottom:34px;
}
.login-v11-badge{
  display:inline-flex;
  margin-bottom:14px;
  padding:8px 13px;
  border:1px solid #145a8a;
  border-radius:999px;
  color:#59caff;
  background:rgba(0,126,255,.08);
  font-size:clamp(13px,1vw,18px);
  font-weight:800;
}
.login-v11-head h2{
  margin:0 0 10px;
  font-size:clamp(42px,3.2vw,62px);
  line-height:1.06;
  letter-spacing:-2px;
}
.login-v11-head p{
  margin:0;
  color:#b4c6d9;
  font-size:clamp(18px,1.25vw,24px);
  line-height:1.5;
}
.login-v11-form{
  display:grid;
  gap:24px;
}
.login-v11-message{
  margin-bottom:24px;
  padding:15px 18px;
  border-radius:12px;
  font-size:clamp(15px,1vw,18px);
  line-height:1.5;
}
.login-v11-message-error{
  border:1px solid rgba(255,109,109,.4);
  background:rgba(133,22,22,.18);
  color:#ffd3d3;
}
.login-v11-form>label{
  display:grid;
  gap:10px;
}
.login-v11-form>label>span{
  font-size:clamp(17px,1.15vw,22px);
  font-weight:600;
  color:#e8f2ff;
}
.login-v11-field{
  min-height:66px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid #19649a;
  border-radius:12px;
  background:rgba(3,15,28,.88);
  transition:.2s ease;
}
.login-v11-field:focus-within{
  border-color:#28b8ff;
  box-shadow:0 0 0 4px rgba(0,168,255,.08),0 0 26px rgba(0,140,255,.10);
}
.login-v11-field i{
  font-style:normal;
  font-size:22px;
}
.login-v11-field input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:white;
  font-size:clamp(18px,1.15vw,23px);
}
.login-v11-field input::placeholder{
  color:#748da6;
}
.login-v11-field button{
  border:0;
  background:transparent;
  color:#4fc8ff;
  font-size:clamp(14px,.9vw,18px);
  font-weight:700;
  cursor:pointer;
}
.login-v11-options{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  font-size:clamp(16px,1vw,20px);
}
.login-v11-remember{
  display:flex;
  align-items:center;
  gap:8px;
  color:#d7e6f5;
}
.login-v11-remember input{
  width:20px;
  height:20px;
  accent-color:#0b8cff;
}
.login-v11-options a{
  color:#18bfff;
  font-weight:600;
}
.login-v11-submit{
  min-height:68px;
  border:0;
  border-radius:12px;
  color:white;
  background:linear-gradient(135deg,#078dff,#0763e1);
  box-shadow:0 14px 34px rgba(0,120,255,.25);
  font-size:clamp(20px,1.4vw,27px);
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.login-v11-submit:hover{
  filter:brightness(1.08);
}
.login-v11-contact{
  margin-top:26px;
  text-align:center;
  color:#a7bad0;
  font-size:clamp(15px,1vw,20px);
}
.login-v11-contact a{
  color:#23c4ff;
  font-weight:600;
}
.login-v11-back{
  display:block;
  margin-top:22px;
  text-align:center;
  color:#7ea8c8;
  font-size:clamp(14px,.9vw,18px);
}

/* 13-inch laptop */
@media(max-width:1366px) and (min-width:901px){
  .login-v11-layout{grid-template-columns:55% 45%}
  .login-v11-copy h1{font-size:60px}
  .login-v11-copy p{font-size:19px}
  .login-v11-head h2{font-size:42px}
  .login-v11-head p{font-size:16px}
  .login-v11-card{padding:34px}
  .login-v11-field{min-height:56px}
  .login-v11-submit{min-height:58px}
}

/* Tablet */
@media(max-width:900px){
  .login-v11-layout{
    grid-template-columns:1fr;
  }
  .login-v11-visual{
    min-height:620px;
  }
  .login-v11-panel{
    min-height:auto;
    padding:44px 20px;
  }
  .login-v11-card{
    width:min(720px,100%);
  }
}

/* Mobile */
@media(max-width:620px){
  .about-panel{
    min-height:360px;
  }
  .about-panel>img{
    max-width:65%;
  }

  .login-v11-visual{
    min-height:560px;
    padding:24px 18px;
  }
  .login-v11-logo img{
    width:120px;
  }
  .login-v11-copy h1{
    font-size:44px;
    letter-spacing:-2px;
  }
  .login-v11-copy p{
    font-size:16px;
  }
  .login-v11-kicker{
    font-size:14px;
  }
  .login-v11-stats{
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }
  .login-v11-stats div{
    padding:12px 4px;
  }
  .login-v11-stats div>span{
    width:38px;height:38px;font-size:17px;
  }
  .login-v11-stats strong{
    font-size:20px;
  }
  .login-v11-stats small{
    font-size:8px;
  }
  .login-v11-panel{
    padding:30px 14px;
  }
  .login-v11-card{
    padding:25px 18px;
    border-radius:18px;
  }
  .login-v11-head h2{
    font-size:34px;
  }
  .login-v11-head p{
    font-size:14px;
  }
  .login-v11-form>label>span{
    font-size:14px;
  }
  .login-v11-field{
    min-height:52px;
  }
  .login-v11-field input{
    font-size:15px;
  }
  .login-v11-options{
    font-size:13px;
  }
  .login-v11-submit{
    min-height:54px;
    font-size:17px;
  }
}

/* =========================================================
   Footer visual refinement
   Layout/content/links remain unchanged; presentation only.
   ========================================================= */
.footer-main{
  grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
  align-items:start;
  column-gap:clamp(32px,5vw,80px);
}
.footer-brand{
  min-width:0;
}
.footer-brand img{
  width:112px;
  max-width:100%;
  height:auto;
  display:block;
}
.footer-brand p{
  max-width:360px;
  margin:12px 0 0;
  font-size:8px;
  line-height:1.65;
}
.footer-links{
  min-width:0;
  align-items:start;
  column-gap:clamp(22px,3vw,54px);
}
.footer-links div{
  align-content:start;
  gap:8px;
}
.footer-links b{
  font-size:9px;
  line-height:1.35;
}
.footer-links a{
  font-size:8px;
  line-height:1.45;
}
.copyright{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(143,163,186,.12);
  font-size:7.5px;
  line-height:1.5;
}

@media (min-width:901px){
  .footer-brand img{width:145px;}
  .footer-brand p{font-size:11px;}
  .footer-links b{font-size:12px;}
  .footer-links a{font-size:11px;}
  .copyright{font-size:10px;}
}

@media (min-width:901px) and (max-width:1366px){
  .footer-main{
    grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);
    column-gap:38px;
  }
  .footer-brand img{width:132px;}
  .footer-brand p{font-size:10px;}
  .footer-links b{font-size:11px;}
  .footer-links a{font-size:10px;}
  .copyright{font-size:9px;}
}

@media (max-width:900px){
  .footer-main{
    grid-template-columns:1fr;
    row-gap:28px;
  }
  .footer-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:24px;
  }
  .footer-brand img{width:124px;}
  .footer-brand p{font-size:9px;}
  .footer-links b{font-size:10px;}
  .footer-links a{font-size:9px;}
  .copyright{font-size:8px;}
}