:root{
  --bg:#060A14;
  --panel:#0B1222;
  --panel2:rgba(16,26,49,.60);
  --border:rgba(71,111,206,.28);
  --border-strong:rgba(110,128,255,.55);
  --text:#F4F8FF;
  --muted:#AFC2E8;
  --blue:#4068FF;
  --blue2:#6E80FF;
  --soft:#111D35;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

body{
  min-width:320px;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

.page{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:40px 56px 96px;
  display:flex;
  flex-direction:column;
  gap:40px;
}

.section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
}

h1,h2{
  margin:0 0 16px;
  font-weight:800;
  line-height:1.03;
  letter-spacing:-0.02em;
}

h1{
  font-size:60px;
  max-width:980px;
}

h2{
  font-size:42px;
}

.lead,
.sub,
.section-note,
.benefit-desc-fixed,
.demo-pass{
  color:var(--muted);
}

.lead{
  font-size:24px;
  line-height:1.25;
  max-width:820px;
}

.sub{
  font-size:18px;
  line-height:1.28;
}

.section-note{
  font-size:15px;
  line-height:1.35;
  margin-top:12px;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 356px;
  gap:40px;
  align-items:start;
}

.hero-copy{
  min-width:0;
}

.hero-visual{
  display:flex;
  justify-content:flex-end;
}

.lang-switch{
  display:none !important;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:24px;
  flex-wrap:wrap;
}

.demo-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:stretch;
}

.demo-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  min-width:280px;
  background:rgba(16,26,49,.72);
  border:1px solid rgba(71,111,206,.38);
  border-radius:16px;
}

.demo-label{
  font-size:15px;
  font-weight:700;
  color:#DCE7FF;
}

.demo-card .cta{
  width:280px;
  height:64px;
  font-size:22px;
}

.pill{
  display:inline-flex;
  align-items:center;
  min-height:56px;
  padding:0 22px;
  border:1px solid rgba(76,111,255,.42);
  background:#111D35;
  border-radius:999px;
  color:#BDD1FF;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  margin:0;
  width:320px;
  max-width:100%;
  height:78px;
  background:var(--blue);
  border:0;
  border-radius:14px;
  color:#fff;
  font-size:26px;
  font-weight:700;
  cursor:pointer;
  flex:0 0 auto;
  transition:transform .15s ease, opacity .15s ease;
}

.cta:hover{
  transform:translateY(-1px);
  opacity:.96;
}

.demo-pass{
  margin-top:18px;
  font-size:14px;
  font-weight:600;
  color:#91A6D4;
}

.hero-poster{
  width:356px;
  max-width:100%;
  height:640px;
  border:2px solid var(--border-strong);
  border-radius:26px;
  background:center center / cover no-repeat #0A1020;
  overflow:hidden;
}

.steps{
  display:grid;
  grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;
  gap:12px;
  align-items:stretch;
}

.step{
  min-height:220px;
  background:#111C34;
  border:1px solid rgba(71,111,206,.38);
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.step strong{
  display:block;
  font-size:16px;
}

.dot{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--blue);
  display:block;
  flex:0 0 auto;
}

.arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#5E78B8;
  font-size:24px;
  font-weight:700;
}

.apps-grid-fixed{
  display:grid;
  grid-template-columns:430px 430px minmax(0,1fr);
  gap:28px;
  align-items:stretch;
}

.phone-card-fixed{
  position:relative;
  min-height:640px;
  padding:18px 18px 20px;
  border:2px solid rgba(110,128,255,.72);
  border-radius:28px;
  background:#0A1020;
  overflow:hidden;
}

.phone-title-fixed{
  position:relative;
  z-index:2;
  margin-bottom:12px;
  color:#E0EAFF;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}

.phone-shell{
  position:relative;
  height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.phone-screen{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.phone-screen img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.callout-fixed{
  display:none !important;
  position:absolute;
  max-width:130px;
  color:#DCE7FF;
  font-size:14px;
  line-height:1.25;
}

.callout-fixed.left{
  left:28px;
}

.callout-fixed.right{
  right:28px;
  text-align:right;
}

.callout-fixed.top{
  top:150px;
}

.callout-fixed.mid{
  top:315px;
}

.callout-fixed.bot{
  top:500px;
}

.benefits-grid-fixed{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  min-height:640px;
  padding:16px;
  background:var(--panel2);
  border:1px solid rgba(71,111,206,.38);
  border-radius:18px;
}

.benefit-card-fixed{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  background:rgba(22,39,68,.82);
  border:1px solid rgba(78,115,202,.55);
  border-radius:14px;
  min-width:0;
}

.icon-fixed{
  width:26px;
  height:26px;
  color:#8FB5FF;
  flex:0 0 auto;
}

.icon-fixed svg{
  width:100%;
  height:100%;
  display:block;
}

.benefit-title-fixed{
  color:#DDE8FF;
  font-size:18px;
  font-weight:700;
  line-height:1.15;
}

.benefit-desc-fixed{
  color:#AFC2E8;
  font-size:14px;
  line-height:1.35;
}

.control-art{
  height:508px;
  border:1px solid rgba(71,111,206,.38);
  border-radius:16px;
  background:center/cover no-repeat;
  position:relative;
  overflow:hidden;
}

.overlay-img{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
}

.control-labels{
  display:flex;
  justify-content:space-between;
  padding:0 8px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  margin-top:12px;
  gap:12px;
}

.instant-box{
  min-height:250px;
  background:linear-gradient(180deg,#121E3C 0%,#1A1740 100%);
  border:1px solid rgba(71,111,206,.45);
  border-radius:16px;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.big{
  font-size:120px;
  font-weight:800;
  line-height:.92;
  color:#E4EEFF;
  text-align:center;
}

.avg{
  font-size:22px;
  font-weight:600;
  color:#9CB7F1;
  text-align:center;
}

.flow{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 14px;
  background:#101C36;
  border:1px solid rgba(71,111,206,.5);
  border-radius:10px;
  color:#CFE0FF;
  font-size:16px;
  font-weight:600;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
}

.methods{
  margin-top:14px;
  min-height:84px;
  border:1px solid rgba(71,111,206,.45);
  border-radius:14px;
  background:rgba(16,26,49,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:800;
  color:#DCE9FF;
  text-align:center;
  padding:12px 18px;
}

.safety-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.s-card{
  min-height:170px;
  background:rgba(22,33,58,.6);
  border:1px solid rgba(71,111,206,.45);
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.cta-final{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:36px 30px;
}

.demo-links-bottom{
  justify-content:center;
  margin-top:10px;
}

.cta-final .demo-pass{
  text-align:center;
}

.cta-final h2{
  max-width:980px;
}

@media (max-width: 1280px){
  .page{
    padding:24px;
    gap:28px;
  }

  .hero{
    grid-template-columns:1fr;
  }

  .hero-visual{
    justify-content:flex-start;
  }

  .apps-grid-fixed{
    grid-template-columns:1fr;
  }

  .phone-card-fixed{
    min-height:560px;
  }

  .benefits-grid-fixed{
    min-height:auto;
  }
}

@media (max-width: 900px){
  body{
    min-width:0;
  }

  .page{
    padding:14px;
    gap:18px;
  }

  .section{
    padding:16px;
    border-radius:16px;
  }

  h1{
    font-size:34px;
    line-height:1.05;
    margin-bottom:14px;
  }

  h2{
    font-size:24px;
    line-height:1.08;
    margin-bottom:12px;
  }

  .lead{
    font-size:16px;
    line-height:1.35;
    max-width:none;
  }

  .sub{
    font-size:14px;
    line-height:1.4;
  }

  .section-note{
    font-size:13px;
    line-height:1.35;
  }

  .hero{
    gap:18px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:18px;
  }

  .demo-links{
    width:100%;
    flex-direction:column;
    gap:12px;
  }

  .demo-card{
    min-width:0;
    width:100%;
    padding:12px;
    border-radius:14px;
  }

  .demo-label{
    font-size:14px;
  }

  .demo-card .cta{
    width:100%;
    max-width:none;
    height:56px;
    font-size:19px;
  }

  .pill{
    width:100%;
    min-height:46px;
    white-space:normal;
    text-align:center;
    justify-content:center;
    padding:10px 14px;
    line-height:1.25;
    border-radius:14px;
  }

  .cta{
    width:100%;
    max-width:none;
    height:56px;
    font-size:20px;
    border-radius:12px;
  }

  .demo-pass{
    margin-top:12px;
    font-size:13px;
  }

  .hero-poster{
    width:100%;
    height:auto;
    aspect-ratio:356 / 640;
    border-radius:18px;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
  }

  .steps{
    grid-template-columns:1fr;
    gap:10px;
  }

  .step{
    min-height:auto;
    padding:14px;
    gap:8px;
  }

  .step strong{
    font-size:15px;
  }

  .dot{
    width:30px;
    height:30px;
  }

  .arrow{
    transform:rotate(90deg);
    min-height:14px;
    font-size:18px;
  }

  .apps-grid-fixed{
    gap:14px;
  }

  .phone-card-fixed{
    min-height:auto;
    padding:14px;
    border-radius:20px;
  }

  .phone-title-fixed{
    font-size:16px;
    margin-bottom:10px;
  }

  .phone-shell{
    height:360px;
  }

  .callout-fixed{
    display:none;
  }

  .benefits-grid-fixed{
    grid-template-columns:1fr;
    gap:10px;
    padding:10px;
    border-radius:14px;
  }

  .benefit-card-fixed{
    padding:14px;
    gap:10px;
    border-radius:12px;
  }

  .benefit-title-fixed{
    font-size:15px;
  }

  .benefit-desc-fixed{
    font-size:13px;
    line-height:1.4;
  }

  .control-art{
    height:220px;
    border-radius:12px;
  }

  .control-labels{
    font-size:11px;
    padding:0;
    margin-top:8px;
  }

  .instant-box{
    min-height:auto;
    padding:18px 12px;
    gap:10px;
    border-radius:14px;
  }

  .big{
    font-size:58px;
    line-height:.95;
  }

  .avg{
    font-size:14px;
    line-height:1.25;
  }

  .flow{
    width:100%;
    gap:6px;
    padding:8px 10px;
    font-size:13px;
    line-height:1.35;
    border-radius:10px;
  }

  .methods{
    min-height:56px;
    font-size:20px;
    line-height:1.1;
    border-radius:12px;
    margin-top:10px;
  }

  .safety-grid{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:8px;
  }

  .s-card{
    min-height:auto;
    padding:14px;
    border-radius:12px;
  }

  .cta-final{
    padding:20px 16px;
  }
}

@media (max-width: 420px){
  .page{
    padding:10px;
  }

  .section{
    padding:14px;
  }

  h1{
    font-size:26px;
    line-height:1.08;
  }

  h2{
    font-size:21px;
  }

  .lead{
    font-size:14px;
  }

  .hero-poster{
    width:100%;
    height:auto;
    aspect-ratio:356 / 640;
    background-size:contain;
    background-position:center center;
  }

  .phone-shell{
    height:310px;
  }

  .big{
    font-size:46px;
  }

  .methods{
    font-size:16px;
    min-height:48px;
  }

  .flow{
    font-size:12px;
  }
}