:root{
  --bg:#f6efe7;
  --ink:#17131f;
  --muted:#5e5568;
  --panel:#fffaf6;
  --line:#e3d8cd;
  --accent:#ff8a4c;
  --accent2:#ffcf5b;
  --mint:#26d5c0;
  --berry:#d64cff;
  --navy:#231c35;
  --shadow:0 18px 50px rgba(30,18,45,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at -10% -10%, rgba(255,138,76,.16), transparent 50%),
    radial-gradient(700px 520px at 110% 0%, rgba(214,76,255,.12), transparent 42%),
    linear-gradient(180deg,#fbf5ef 0%,#f3ece4 100%);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:24px 20px 90px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.6rem;letter-spacing:-.04em}
.mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2),var(--berry));box-shadow:0 12px 30px rgba(255,138,76,.25)}
.navlinks{display:flex;gap:10px;flex-wrap:wrap}
.navlinks a{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);color:var(--muted);font-weight:650}
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:20px;align-items:stretch}
.panel{background:rgba(255,250,246,.86);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#168f8d;margin-bottom:14px}
.hero h1{font-size:clamp(42px,7vw,84px);line-height:.92;letter-spacing:-.06em;margin:0 0 16px;max-width:10ch}
.lead{font-size:clamp(19px,2vw,24px);line-height:1.4;color:var(--muted);margin:0 0 18px;max-width:38ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:18px;font-weight:900;border:1px solid var(--line);background:white;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none}
.btn.ghost{background:rgba(255,255,255,.7)}
.steps{display:grid;gap:12px}
.step{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.75)}
.bubble{min-width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--mint),#87ecff);display:grid;place-items:center;font-weight:900}
.section{margin-top:56px}
.section h2{font-size:clamp(30px,4.5vw,58px);letter-spacing:-.05em;line-height:.98;margin:0 0 12px}
.sub{font-size:20px;line-height:1.45;color:var(--muted);max-width:52ch;margin:0 0 18px}
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:18px}
.strip .item{padding:14px;border-radius:18px;background:rgba(255,255,255,.78);border:1px solid var(--line);font-size:14px}
.strip b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.grid2,.grid3{display:grid;gap:18px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;overflow:hidden;padding:24px;border-radius:26px;background:rgba(255,250,246,.88);border:1px solid var(--line);box-shadow:var(--shadow)}
.card::after{content:'';position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at center, rgba(255,138,76,.13), transparent 62%);pointer-events:none}
.tag{display:inline-block;padding:8px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.card h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;margin:0 0 10px;line-height:1.02}
.card p{color:var(--muted);font-size:18px;line-height:1.5;margin:0 0 16px}
.example{padding:14px 16px;border-radius:18px;border:1px dashed #c9bdb0;background:rgba(255,255,255,.7);font-size:15px;line-height:1.45}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mock{padding:18px;border-radius:20px;border:1px solid var(--line);background:white}
.mock.bad{background:#f7f0eb}
.mock.good{background:#fbfff3}
.mock h4{margin:0 0 8px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.list{display:grid;gap:10px}
.list div{padding:12px 14px;border-radius:16px;background:white;border:1px solid var(--line)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:8px 10px;border-bottom:1px solid #ece3da;text-align:left}
.cta{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.price{padding:22px;border-radius:24px;background:linear-gradient(180deg,#231c35,#151022);color:#fff5ef;box-shadow:var(--shadow)}
.price h3{font-size:38px;letter-spacing:-.04em;margin:0 0 10px}
.price p{color:#e4d5ec;line-height:1.5}
.footer{margin-top:50px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
@media (max-width:1000px){.hero,.grid2,.compare,.cta{grid-template-columns:1fr}.grid3,.strip{grid-template-columns:1fr 1fr}.hero h1{max-width:12ch}}
@media (max-width:680px){.grid3,.strip{grid-template-columns:1fr}.wrap{padding:18px 14px 70px}.panel,.card,.price{padding:20px}.hero h1{font-size:46px}}


.flowboard{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
.flowmap{position:relative;padding:22px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,250,246,.92));min-height:420px;overflow:hidden}
.flowmap::before{content:'';position:absolute;inset:0;background:radial-gradient(560px 240px at 15% 10%, rgba(255,138,76,.10), transparent 55%),radial-gradient(480px 240px at 85% 10%, rgba(38,213,192,.10), transparent 48%);pointer-events:none}
.flow-stage{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:start}
.node-col{display:grid;gap:16px}
.node-title{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#168f8d;padding-left:4px}
.node{position:relative;padding:16px 16px 18px;border-radius:22px;background:white;border:1px solid var(--line);box-shadow:var(--shadow)}
.node::after{content:'';position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:36px;height:2px;background:linear-gradient(90deg,var(--line),transparent)}
.node-col:last-child .node::after{display:none}
.node h4{margin:0 0 8px;font-size:20px;letter-spacing:-.03em}
.node p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}
.flowrail{position:relative;z-index:1;margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rail-step{padding:14px;border-radius:18px;background:rgba(255,255,255,.88);border:1px solid var(--line)}
.rail-step b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.timeline{display:grid;gap:14px}
.tline{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px;border-radius:20px;background:white;border:1px solid var(--line)}
.tnum{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.notegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.notebox{padding:18px;border-radius:22px;background:rgba(255,255,255,.75);border:1px solid var(--line)}
.notebox h4{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}
.notebox p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
@media (max-width:1000px){.flowboard,.notegrid,.flow-stage,.flowrail{grid-template-columns:1fr}.node::after{display:none}}