:root {
  --bg:#f4f7fb;
  --card:#ffffff;
  --line:#e4ebf3;
  --text:#152033;
  --mute:#667587;
  --accent:#2f6fed;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.pub {
  margin:0; font:16px/1.55 Inter,system-ui,sans-serif;
  background:var(--bg); color:var(--text);
}
.pub a { color:inherit; }
.pub-wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.pub-nav {
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(16px);
  background:rgba(244,247,251,.9);
  border-bottom:1px solid var(--line);
}
.pub-nav-in { display:flex; align-items:center; gap:16px; min-height:64px; }
.pub-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; }
.pub-mark {
  width:32px; height:32px; border-radius:10px;
  background:linear-gradient(135deg,#2f6fed,#7dd3b0);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800;
}
.pub-nav-links { margin-left:auto; display:flex; gap:18px; align-items:center; }
.pub-nav-links a { text-decoration:none; color:var(--mute); font-size:14px; }
.pub-nav-links a:hover { color:var(--text); }
.btn-p {
  display:inline-flex; align-items:center; justify-content:center;
  background:#2f6fed; color:#fff !important; text-decoration:none; border:0;
  border-radius:12px; padding:11px 16px; font-weight:700; cursor:pointer;
}
.btn-g {
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--text); text-decoration:none;
  border:1px solid var(--line); border-radius:12px; padding:11px 16px; font-weight:700;
}
.hero { padding:64px 0 28px; display:grid; gap:32px; }
.eyebrow { color:#2f6fed; font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.hero h1 { font-size:clamp(32px,6vw,58px); line-height:1.06; margin:10px 0 16px; letter-spacing:-.03em; }
.lead { color:var(--mute); font-size:18px; max-width:560px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.orbs { position:relative; min-height:260px; }
.orb { position:absolute; filter:blur(8px); opacity:.55; animation:float 8s ease-in-out infinite; }
.orb-a { width:220px; height:220px; border-radius:46% 54% 50% 50%; background:#cfe0ff; left:6%; top:8%; }
.orb-b { width:150px; height:150px; border-radius:50%; background:#d8f3e7; right:4%; top:28%; animation-delay:-3s; }
@keyframes float { 50% { transform:translateY(-14px); } }
.mock {
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:16px; box-shadow:0 18px 50px rgba(21,32,51,.08);
}
.mock-top { display:flex; gap:6px; margin-bottom:12px; }
.mock-top i { width:8px; height:8px; border-radius:50%; background:#d7e1ec; }
.mock-row { display:flex; gap:8px; margin:8px 0; }
.mock-pill { flex:1; height:36px; border-radius:10px; background:#eef3f9; }
.mock-pill.on { background:#2f6fed; }
.sec { padding:64px 0; }
.sec h2 { font-size:clamp(26px,4vw,38px); letter-spacing:-.03em; margin:0 0 10px; }
.sec .sub { color:var(--mute); max-width:640px; margin-bottom:28px; }
.feats { display:grid; gap:14px; grid-template-columns:1fr; }
.feat {
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px;
  box-shadow:0 8px 24px rgba(21,32,51,.04);
  transform:translateY(16px); opacity:0; animation:up .7s ease forwards;
}
.feat:nth-child(2){animation-delay:.08s} .feat:nth-child(3){animation-delay:.16s}
.feat:nth-child(4){animation-delay:.24s} .feat:nth-child(5){animation-delay:.32s} .feat:nth-child(6){animation-delay:.4s}
@keyframes up { to { transform:none; opacity:1; } }
.feat h3 { margin:0 0 8px; font-size:18px; }
.feat p { margin:0; color:var(--mute); }
.steps { display:grid; gap:12px; }
.step { display:grid; grid-template-columns:48px 1fr; gap:14px; }
.num {
  width:48px; height:48px; border-radius:14px; background:#eaf1ff; color:#2f6fed;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.plans { display:grid; gap:14px; }
.plan { background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; }
.plan.hot { border-color:#2f6fed; box-shadow:0 10px 30px rgba(47,111,237,.12); }
.plan .price { font-size:32px; font-weight:800; margin:8px 0; }
.plan ul { padding-left:18px; color:var(--mute); }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:8px 0; }
.faq summary { cursor:pointer; font-weight:700; }
.cta {
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:36px 24px; text-align:center;
  box-shadow:0 12px 36px rgba(21,32,51,.05);
}
.pub-foot { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--mute); font-size:13px; }
.pub-foot a { color:#3a4b61; }
.legal { max-width:800px; padding:40px 0 80px; }
.legal h1 { font-size:32px; }
.legal h2 { margin-top:28px; font-size:20px; }
.legal p, .legal li { color:#4b5b6e; }
.m-nav { display:none; background:none; border:0; color:var(--text); font-size:22px; }
@media (min-width:800px) {
  .hero { grid-template-columns:1.1fr .9fr; align-items:center; padding-top:88px; }
  .feats { grid-template-columns:1fr 1fr 1fr; }
  .plans { grid-template-columns:1fr 1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:799px) {
  .pub-nav-links { display:none; }
  .pub-nav-links.open {
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; left:0; right:0; top:64px; background:#fff; padding:16px 20px 20px;
    border-bottom:1px solid var(--line);
  }
  .m-nav { display:block; margin-left:auto; }
}
.hero-art { position:relative; min-height:340px; }
.hero-bg { width:100%; height:340px; object-fit:cover; border-radius:24px; filter:saturate(.9); }
.shot {
  position:absolute; border-radius:14px; box-shadow:0 22px 50px rgba(21,32,51,.22);
  border:4px solid #fff; background:#fff; object-fit:cover;
}
.shot-a { width:78%; left:4%; top:18%; height:auto; max-height:230px; object-fit:cover; transform:rotate(-3deg); }
.shot-b { width:52%; right:2%; bottom:-8%; max-height:170px; object-fit:cover; transform:rotate(4deg); }
@media (min-width:800px){
  .hero-art { min-height:420px; }
  .hero-bg { height:420px; }
  .shot-a { max-height:280px; }
  .shot-b { max-height:210px; }
}

@media (max-width:799px){
  .hero { padding-top:28px; }
  .hero-art { min-height:240px; margin-top:8px; }
  .hero-bg { height:240px; }
  .shot-a { width:92%; left:4%; top:12%; transform:rotate(-2deg); max-height:200px; }
  .shot-b { display:none; }
}

/* pad-fix */
.pub-wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (max-width:799px){
  .pub-wrap { padding-left:22px; padding-right:22px; }
  .hero { padding: 24px 0 12px; }
  .hero h1 { margin-right:8px; }
  .lead { margin-right:4px; }
  .sec { padding: 40px 0; }
  .pub-nav-in { padding: 0; }
  .legal { padding-left:0; padding-right:0; }
}

/* air */
@media (max-width:799px){
  .pub-wrap { padding-left:32px !important; padding-right:32px !important; }
  .pub-nav .pub-wrap { padding-left:20px !important; padding-right:20px !important; }
  .hero { padding-top:20px; padding-bottom:8px; }
  .hero h1 { font-size:34px; line-height:1.12; }
  .lead { font-size:16px; }
  .hero-actions { margin-top:18px; margin-bottom:12px; }
  .hero-art { margin: 8px 0 20px; }
  .hero-bg { height:200px; border-radius:20px; }
  .shot-a { width:88%; left:6%; top:10%; max-height:180px; }
}

.hero { position:relative; }
@media (min-width:800px){
  .hero { display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center; max-width:1120px; margin:0 auto; padding:72px 20px 40px; }
  .hero-copy { padding:0; }
}
@media (max-width:799px){
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:0;
    margin:0;
  }
  .hero-art { position:absolute; inset:0; min-height:100%; z-index:0; }
  .hero-bg { width:100%; height:100%; border-radius:0; object-fit:cover; filter:saturate(.85) brightness(.92); }
  .shot-a { width:86%; left:7%; top:18%; transform:rotate(-2deg); max-height:34vh; box-shadow:0 18px 40px rgba(0,0,0,.28); }
  .shot-b { display:none; }
  .hero-copy {
    position:relative; z-index:1;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(244,247,251,0) 0%, rgba(244,247,251,.92) 28%, #f4f7fb 70%);
  }
  .hero-copy .lead { color:#4b5b6e; }
}

/* nav-glass */
@media (max-width:799px){
  .pub-nav {
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    position: absolute;
    left:0; right:0; top:0;
  }
  .pub-brand { color:#152033; text-shadow: 0 1px 8px rgba(255,255,255,.9); }
  .pub-mark { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  .m-nav { color:#152033; text-shadow: 0 1px 8px rgba(255,255,255,.9); }
  .pub-nav-links.open { background:rgba(255,255,255,.96); }
  body.pub { padding-top:0; }
}

/* pad-under-nav */
@media (max-width:799px){
  .sec { padding-top: 88px; }
  .legal { padding-top: 88px; }
  .card.form { margin-top: 88px; }
}

.feat { overflow:hidden; padding:0 0 18px; }
.feat img { width:100%; height:160px; object-fit:cover; object-position:top left; display:block; background:#e8eef6; }
.feat h3, .feat p { padding:0 16px; }
.feat h3 { margin-top:12px; }
@media (min-width:800px){
  .feat img { height:180px; }
}

/* hero-read */
@media (max-width:799px){
  .hero-copy .eyebrow { color:#1e4fd7; font-size:12px; font-weight:800; letter-spacing:.1em; }
  .hero-copy .lead { color:#1b2430; font-size:17px; line-height:1.45; font-weight:500; }
  .hero-copy h1 { color:#101826; }
  .hero-copy { background: linear-gradient(180deg, rgba(244,247,251,0) 0%, rgba(244,247,251,.96) 22%, #f4f7fb 62%); }
}