:root{--fp-ink:#08192b;--fp-blue:#237fc3;--fp-lime:#cff22f;--fp-paper:#f3f5f9;--fp-border:#dce3ec;--fp-muted:#667286}
body{background:var(--fp-paper)}
.feature-hero{position:relative;overflow:hidden;padding:62px 0 82px}
.feature-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,245,249,.62),rgba(243,245,249,.80)),var(--feature-bg);background-size:cover;background-position:center}
.feature-hero>.wrap{position:relative;z-index:1}
.feature-heading{max-width:820px;margin-bottom:38px}
.feature-heading h1{font-size:clamp(42px,6.7vw,82px);line-height:.98;letter-spacing:-.055em;margin:15px 0 22px;color:var(--fp-ink)}
.feature-heading p{font-size:clamp(18px,2vw,23px);line-height:1.55;color:#344055;max-width:760px;margin:0}
.feature-visual{position:relative;max-width:1060px;margin:0 auto}
.feature-frame{overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 24px 65px rgba(8,25,43,.22)}
.feature-frame>img{display:block;width:100%;height:auto}
.feature-phone{position:absolute;right:-2%;bottom:-6%;z-index:3;width:27%;max-width:255px;padding:0;border:0;background:transparent;cursor:zoom-in;filter:drop-shadow(0 24px 30px rgba(8,25,43,.28))}
.feature-phone img{display:block;width:100%;height:auto;clip-path:inset(1% 2.1% round 11% / 5.2%)}
.feature-phone:hover,.feature-phone:focus-visible{transform:translateY(-4px);outline:none}
.feature-section{padding:78px 0}
.feature-section.white{background:#fff}
.section-intro{max-width:760px;margin-bottom:34px}
.section-intro h2{font-size:clamp(34px,4.6vw,54px);line-height:1.08;letter-spacing:-.04em;margin:10px 0 14px;color:var(--fp-ink)}
.section-intro p{font-size:18px;line-height:1.65;color:var(--fp-muted);margin:0}
.explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.explain-card{background:#fff;border:1px solid var(--fp-border);border-radius:22px;padding:28px;box-shadow:0 10px 28px rgba(8,25,43,.07)}
.white .explain-card{background:var(--fp-paper)}
.explain-card .num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--fp-lime);font-weight:700;color:var(--fp-ink);margin-bottom:18px}
.explain-card h3{font-size:22px;margin:0 0 8px;color:var(--fp-ink)}
.explain-card p{font-size:15px;line-height:1.65;color:var(--fp-muted);margin:0}
.workflow{background:var(--fp-ink);color:#fff;border-radius:28px;padding:42px}
.workflow h2{font-size:clamp(30px,4vw,46px);line-height:1.08;margin:0 0 28px}
.workflow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.workflow-step{padding:20px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(255,255,255,.06)}
.workflow-step strong{display:block;color:var(--fp-lime);font-size:13px;letter-spacing:.08em;margin-bottom:9px}
.workflow-step span{font-size:15px;line-height:1.5;color:#d5deea}
.secondary-visual{margin-top:46px}
.feature-cta{padding:72px 0}
.feature-cta .panel{display:flex;align-items:center;justify-content:space-between;gap:26px;background:var(--fp-ink);color:#fff;border-radius:28px;padding:44px}
.feature-cta h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:0 0 10px}
.feature-cta p{color:#d5deea;margin:0;font-size:17px}
.feature-cta .btn{background:var(--fp-lime);color:var(--fp-ink);white-space:nowrap}
.feature-cta .btn + .btn{margin-left:12px}
.mobile-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:10px;background:rgba(3,12,22,.94);backdrop-filter:blur(12px)}
.mobile-modal.is-open{display:flex}
.mobile-modal img{display:block;max-width:min(96vw,460px);max-height:96vh;width:auto;height:auto;clip-path:inset(1% 2.1% round 11% / 5.2%);filter:drop-shadow(0 26px 45px rgba(0,0,0,.5))}
.mobile-modal-close{position:fixed;top:10px;right:10px;z-index:2;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:var(--fp-ink);font:700 28px/1 Poppins,sans-serif;cursor:pointer}
body.mobile-modal-open{overflow:hidden}
@media(max-width:820px){
  .feature-hero{padding:38px 0 60px}
  .feature-heading{margin-bottom:28px}
  .feature-heading h1{font-size:46px}
  .feature-heading p{font-size:17px}
  .feature-frame{border-radius:18px}
  .feature-phone{right:-2%;bottom:-5%;width:27%;max-width:none}
  .feature-section{padding:54px 0}
  .explain-grid{grid-template-columns:1fr}
  .explain-card{padding:23px}
  .workflow{padding:28px 22px}
  .workflow-steps{grid-template-columns:1fr}
  .feature-cta{padding:54px 0}
  .feature-cta .panel{display:block;padding:30px 24px}
  .feature-cta .btn{display:inline-flex;margin-top:22px}
}