:root{
  --logo:url("./nolca-logo.png");
  --ink:#0f2a5c; --ink2:#3d4d6b; --muted:#66758f; --line:#e2e8f2; --line2:#eef2f8;
  --bg:#f6f8fc; --card:#fff;
  --blue:#1f6fff; --blue-d:#1454d4; --blue-s:#eaf1ff;
  --red:#f4514f; --red-d:#c22f2d; --red-s:#ffedec;
  --yel:#fdb81e; --yel-d:#8a5a00; --yel-s:#fff5d9;
  --grn:#0f9d74; --grn-s:#e4f7f0;
  --r:20px; --shadow:0 1px 2px rgba(15,42,92,.05),0 12px 32px -12px rgba(15,42,92,.16);
  --shadow-lg:0 2px 4px rgba(15,42,92,.05),0 32px 64px -24px rgba(15,42,92,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;font-size:16px;line-height:1.75;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
.nb{display:inline-block}
.wrap{width:min(1160px,100% - 48px);margin-inline:auto}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(15,42,92,.07)}
.hd .wrap{display:flex;align-items:center;gap:28px;height:60px}
.logo{display:block;width:106px;height:27px;background:var(--logo) left center/contain no-repeat;flex:none}
.nav{display:flex;gap:2px;margin-left:auto;font-size:14px;font-weight:600;color:var(--ink2)}
.nav a{padding:8px 12px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--bg);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:15px;line-height:1.2;transition:transform .15s,box-shadow .15s,background .15s}
.btn-p{background:var(--ink);color:#fff;box-shadow:0 8px 20px -8px rgba(15,42,92,.6)}
.btn-p:hover{background:#17397a;transform:translateY(-1px)}
.btn-g{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-g:hover{border-color:#c6d0e2}
.btn-s{min-height:40px;padding:0 18px;font-size:14px}

/* ---------- role tags (page-wide visual language) ---------- */
.tg{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
.tg::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.tg-ai{background:var(--blue-s);color:var(--blue-d)}
.tg-you{background:var(--red-s);color:var(--red-d)}
.tg-wip{background:var(--yel-s);color:var(--yel-d)}
.tg-ok{background:var(--grn-s);color:#0a7556}

/* ---------- hero ---------- */
.hero{position:relative;background:
  radial-gradient(50% 60% at 18% 0%,rgba(31,111,255,.10),transparent 62%),
  radial-gradient(36% 50% at 100% 30%,rgba(253,184,30,.12),transparent 65%),
  linear-gradient(#fff,var(--bg))}
.hero .wrap{padding:28px 0 36px}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:20px 56px;align-items:end}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--blue-d);background:#fff;border:1px solid #d5e2ff;border-radius:999px;padding:4px 14px 4px 5px}
.eyebrow i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:10px}
h1{font-size:clamp(30px,4vw,50px);line-height:1.16;letter-spacing:-.025em;font-weight:800;margin:14px 0 0}
h1 em{font-style:normal;color:var(--blue)}
.lead{font-size:15.5px;line-height:1.8;color:var(--ink2)}
.lead b{color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------- journey infographic ---------- */
.journey{display:grid;grid-template-columns:minmax(0,3.05fr) 92px minmax(0,1.6fr);align-items:stretch;margin-top:26px}
.zone{position:relative;border-radius:28px;min-width:0}
.zone-h{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.02em;line-height:1.3}
.zone-h small{font-size:12px;font-weight:600;letter-spacing:0}
/* Nolca zone: one continuous brand-blue field */
.z-n{padding:16px 18px 14px;color:#fff;background:
  radial-gradient(60% 120% at 0% 0%,rgba(255,255,255,.16),transparent 60%),
  radial-gradient(40% 80% at 100% 100%,rgba(253,184,30,.28),transparent 70%),
  linear-gradient(120deg,#2a78ff,#1454d4 70%,#123fa8);box-shadow:0 30px 60px -28px rgba(20,84,212,.7)}
.z-n .zone-h small{color:rgba(255,255,255,.78)}
.mark{flex:none;width:28px;height:28px;border-radius:9px;background:#fff var(--logo) 4px center/auto 20px no-repeat}
.z-n .zone-h .mark{box-shadow:0 4px 10px rgba(0,0,0,.18)}
.zsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:12px;counter-reset:st}
.st{position:relative;min-width:0}
.st+.st::before{content:"";position:absolute;left:-20px;top:50%;width:14px;height:14px;margin-top:-7px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9M7.5 3 11.5 7 7.5 11' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.card{display:flex;flex-direction:column;gap:8px;height:100%;padding:12px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 14px 28px -16px rgba(5,20,60,.55);transition:transform .2s}
a.card:hover{transform:translateY(-3px)}
.card-h{display:flex;align-items:center;gap:8px;min-height:22px}
.card-h b{font-size:14.5px;line-height:1.3;letter-spacing:-.01em}
.n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:800}
.card-d{font-size:12px;line-height:1.5;color:var(--muted)}
.wipb{position:absolute;top:-9px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;background:var(--yel);color:#3a2600;font-size:11px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.18);white-space:nowrap}
.wipb::before{content:"";width:6px;height:6px;border-radius:50%;background:#3a2600}

/* mini screens (synthetic) */
.scr{position:relative;height:112px;border-radius:11px;background:var(--bg);border:1px solid var(--line2);overflow:hidden}
.bar{display:flex;gap:3px;padding:6px 7px;border-bottom:1px solid var(--line2);background:#fff}
.bar i{width:5px;height:5px;border-radius:50%;background:#d6deea}
.lpm{display:grid;grid-template-columns:1.25fr 1fr;gap:8px;padding:8px 9px}
.ln{display:block;height:5px;border-radius:3px;background:#d7dfec;margin-top:5px}
.ln.h{height:8px;background:var(--ink);opacity:.85;margin-top:0}
.ln.s{width:60%}.ln.m{width:80%}
.pill{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;background:var(--red);color:#fff;font-size:9.5px;font-weight:800;line-height:1.3}
.form{display:grid;gap:4px;padding:6px;border-radius:7px;background:#fff;border:1px solid var(--line)}
.form i{display:block;height:9px;border-radius:3px;border:1px solid var(--line);background:var(--bg)}
.form i.go{background:var(--blue);border-color:var(--blue)}
.lpm .lbl2{font-size:8.5px;font-weight:700;color:var(--muted);line-height:1.2}
.adm{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;margin:8px 9px 7px;padding:8px;border-radius:9px;background:#fff;border:1px solid var(--line)}
.adm .im{height:44px;border-radius:7px;background:linear-gradient(135deg,#1f6fff,#0f2a5c);position:relative;overflow:hidden}
.adm .im::after{content:"";position:absolute;right:-10px;bottom:-12px;width:30px;height:30px;border-radius:50%;background:var(--yel)}
.adm small{display:inline-block;font-size:8.5px;font-weight:800;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:0 4px;line-height:1.5}
.adm b{display:block;font-size:10.5px;line-height:1.35;color:var(--blue-d);margin-top:2px}
.visits{display:flex;align-items:center;gap:6px;padding:0 10px;font-size:9.5px;font-weight:700;color:var(--muted)}
.visits span{display:flex;gap:3px}
.visits span i{width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.25}
.visits span i:nth-child(2){opacity:.45}.visits span i:nth-child(3){opacity:.7}.visits span i:nth-child(4){opacity:1}
.anm{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px}
.anm .k{border-radius:7px;background:#fff;border:1px solid var(--line);padding:5px 7px;font-size:8.5px;font-weight:700;color:var(--muted);line-height:1.3}
.anm .k b{display:block;font-size:13px;color:var(--ink);font-feature-settings:"tnum"}
.anm .hm{position:relative;border-radius:7px;background:#fff;border:1px solid var(--line);overflow:hidden}
.anm .hm::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 26% at 35% 26%,rgba(244,81,79,.7),rgba(253,184,30,.4) 55%,transparent 76%),radial-gradient(30% 22% at 65% 70%,rgba(31,111,255,.3),transparent 75%)}
.anm .mb{display:flex;align-items:flex-end;gap:3px;height:24px;margin-top:3px}
.anm .mb i{flex:1;border-radius:2px 2px 0 0;background:#cddcff}.anm .mb i:last-child{background:var(--blue)}
.idea{grid-column:1/-1;display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:7px;background:var(--blue-s);color:var(--blue-d);font-size:9.5px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden}
.idea::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* improvement loop: analysis -> back to LP */
.loop{position:relative;height:40px;margin:6px 0 0}
.loop::before{content:"";position:absolute;left:calc((100% - 52px)/6);right:calc((100% - 52px)/6);top:0;height:18px;border:2px dashed rgba(255,255,255,.7);border-top:0;border-radius:0 0 16px 16px}
.loop::after{content:"";position:absolute;left:calc((100% - 52px)/6 - 6px);top:-5px;width:0;height:0;border:7px solid transparent;border-bottom:9px solid #fff;border-top:0}
.loop span{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:#fff;color:var(--blue-d);font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.loop svg{width:14px;height:14px}

/* business flow connector */
.bridge{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:0 4px}
.bridge::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed #b9c6dc;z-index:0}
.bridge .bub-ic{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 10px 20px -10px rgba(20,84,212,.6)}
.bridge .bub-ic svg{width:22px;height:22px}
.bridge b{position:relative;z-index:1;display:block;font-size:11px;line-height:1.35;color:var(--blue-d);background:var(--bg);padding:0 2px}
.bridge .tip{position:absolute;right:-2px;top:50%;margin-top:-6px;width:0;height:0;border:6px solid transparent;border-left:8px solid #b9c6dc;border-right:0}

/* business zone */
.z-b{padding:16px 16px 14px;background:#fff;border:1.5px dashed #c8d2e3;display:flex;flex-direction:column}
.z-b .zone-h{color:var(--ink)}
.z-b .zone-h small{color:var(--muted)}
.youdot{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--red-s);color:var(--red-d)}
.youdot svg{width:16px;height:16px}
.bsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:12px;flex:1}
.bst{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px 4px;border-radius:16px;background:var(--bg);min-width:0}
.bst+.bst::before{content:"";position:absolute;left:-15px;top:50%;width:12px;height:12px;margin-top:-6px;background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9M7.5 3 11.5 7 7.5 11' fill='none' stroke='%2399a6bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink2)}
.bic svg{width:22px;height:22px}
.bst .nn{font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.06em}
.bst b{font-size:13px;line-height:1.3}
.bst small{font-size:11px;line-height:1.45;color:var(--muted)}
.z-b .owner{margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.jcap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:12px;font-size:12px;color:var(--muted)}
.jcap b{color:var(--yel-d)}

/* journey position strip on feature sections */
.pos{display:flex;align-items:center;gap:4px;margin-bottom:14px}
.pos i{width:22px;height:6px;border-radius:3px;background:#cfd9ea}
.pos i.n{background:#9ebfff}
.pos i.on{width:34px;background:var(--blue)}
.pos i.sep{width:10px;background:none}
.pos span{margin-left:8px;font-size:12px;font-weight:700;color:var(--muted)}

/* ---------- sections ---------- */
section{scroll-margin-top:68px}
.sec{padding:96px 0}
.kicker{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--blue-d)}
h2{font-size:clamp(26px,3.3vw,42px);line-height:1.28;letter-spacing:-.015em;font-weight:800;margin:10px 0 14px}
.sub{color:var(--ink2);max-width:40em}
.center{text-align:center}.center .sub{margin-inline:auto}

/* how it works (dark) */
.how{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.how::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 12% 0%,rgba(31,111,255,.45),transparent 60%),radial-gradient(40% 70% at 96% 100%,rgba(244,81,79,.28),transparent 62%)}
.how .wrap{position:relative}
.how .kicker{color:#8fb6ff}.how .sub{color:#c3d0ea}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:stretch;margin-top:44px}
.fstep{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:22px}
.fstep.you{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 24px 48px -20px rgba(0,0,0,.5)}
.fstep h3{font-size:19px;line-height:1.4;margin:12px 0 6px}
.fstep p{font-size:14px;color:#c3d0ea}
.fstep.you p{color:var(--ink2)}
.fstep .tg-ai{background:rgba(143,182,255,.2);color:#bcd4ff}
.fstep ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.fstep li{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.1)}
.fstep.you li{background:var(--red-s);color:var(--red-d)}
.arr{align-self:center;color:#8fb6ff;font-size:22px;font-weight:700}

/* feature panels */
.feat{padding:0 0 28px}
.feat:first-of-type{padding-top:96px}
.panel{border-radius:32px;padding:48px;background:var(--bg);border:1px solid var(--line2)}
.f1 .panel{background:linear-gradient(180deg,#eef4ff,#f7f9fd 46%)}
.f2 .panel{background:linear-gradient(180deg,#fff7e0,#faf9f6 46%)}
.f3 .panel{background:linear-gradient(180deg,#fff1f0,#f9f8fb 46%)}
.f3b .panel{background:linear-gradient(180deg,#f2f0ff,#f9f9fc 46%)}
.f4 .panel{background:linear-gradient(180deg,#e8f6f1,#f7faf9 46%)}
.fhead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:end;margin-bottom:32px}
.fno{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--ink2)}
.num{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;font-size:14px;font-weight:800;flex:none}
.num.b{background:var(--blue)}
.fhead h2{font-size:clamp(25px,2.9vw,38px)}
.fhead p{color:var(--ink2)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.role{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.role ul{margin-top:10px;display:grid;gap:5px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.role li{padding-left:16px;position:relative}
.role li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:#c3cde0}

/* app window mock */
.win{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.win-h{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line2);font-size:13px;font-weight:700;color:var(--ink2)}
.dots{display:flex;gap:5px;margin-right:4px}.dots i{width:9px;height:9px;border-radius:50%;background:#dbe2ee}
.win-h .smp{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg);border-radius:999px;padding:3px 10px;white-space:nowrap}
.win-b{padding:20px;display:grid;gap:16px}
.g3{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:16px}
.g3b{display:grid;grid-template-columns:.85fr 1.05fr 1.1fr;gap:16px}
.g2{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}
.g2r{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.box{border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0;background:#fff}
.box.ai{border-color:#cfe0ff;background:linear-gradient(180deg,#f6f9ff,#fff 70px)}
.box.you{border-color:#ffd3d1;background:linear-gradient(180deg,#fff6f5,#fff 70px)}
.box-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.box-h b{font-size:14px}
.lbl{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:12px 0 6px}
.lbl:first-child{margin-top:0}
.field{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:13px;color:var(--ink2);overflow:hidden;white-space:nowrap}
.kv{display:grid;gap:6px;font-size:13px;margin:0}
.kv div{display:flex;gap:10px}.kv dt{flex:none;width:4.5em;color:var(--muted)}.kv dd{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.hint{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--blue-s);color:var(--blue-d);font-size:12.5px;font-weight:600;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink2)}
.adprev{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.adprev .sp{display:inline-block;font-size:10.5px;font-weight:800;border:1px solid var(--line);border-radius:5px;padding:0 6px}
.adprev .url{font-size:11px;color:var(--muted)}
.adprev .hl{color:#1a4fc4;font-weight:700;font-size:16px;line-height:1.45;margin:4px 0 2px}
.adprev .ds{color:var(--ink2);font-size:12.5px;line-height:1.6}
.alts{display:grid;gap:5px;font-size:13px}
.alts li{display:flex;gap:8px;align-items:baseline}.alts li::before{content:"✓";color:var(--blue);font-weight:800;font-size:11px}
.imgdraft{position:relative;aspect-ratio:16/8;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1f6fff,#0f2a5c)}
.imgdraft::before{content:"";position:absolute;right:-8%;bottom:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:var(--yel);opacity:.95}
.imgdraft::after{content:"";position:absolute;left:8%;top:18%;width:38%;height:56%;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.25);background:linear-gradient(#dfe6f1,#dfe6f1) 14% 22%/70% 7px no-repeat,linear-gradient(#dfe6f1,#dfe6f1) 10% 44%/50% 7px no-repeat,linear-gradient(var(--red),var(--red)) 10% 76%/34% 12px no-repeat,#fff}
.imgdraft span{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.28);padding:2px 9px;border-radius:999px}
.connect{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.acct{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;font-size:13px;font-weight:700;background:#fff}
.acct .ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--bg);color:var(--ink2)}
.acct .ic svg{width:15px;height:15px}
.dbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700}
.dbtn.red{background:var(--red);border-color:var(--red);color:#fff}
.dbtn.red:hover{background:#e2403e}
.dbtn.done{background:var(--grn-s);border-color:#bfe8da;color:#0a7556;cursor:default}
.stage{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);font-weight:600}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13.5px;line-height:1.7;color:var(--ink2)}
.note b{color:var(--ink)}
.note .tg{margin-top:1px;flex:none}

/* LP feature */
.lpv{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;min-width:0}
.lpv .bar{padding:9px 12px;gap:5px;align-items:center;font-size:11.5px;color:var(--muted)}
.lpv .bar i{width:8px;height:8px}
.lpv .bar span{margin-left:8px;flex:1;min-width:0;background:var(--bg);border-radius:6px;padding:2px 10px;white-space:nowrap;overflow:hidden}
.lpv-b{position:relative;padding:22px 24px 24px;display:grid;gap:18px}
.lpv-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.lpv-hero h4{font-size:20px;line-height:1.4;letter-spacing:-.01em}
.lpv-hero p{font-size:12.5px;color:var(--ink2);margin-top:6px;line-height:1.6}
.lpv-cta{display:inline-flex;margin-top:12px;padding:7px 16px;border-radius:999px;background:var(--red);color:#fff;font-size:12.5px;font-weight:800}
.lpv-form{display:grid;gap:7px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:11px;color:var(--muted);font-weight:700}
.lpv-form i{display:block;height:24px;border-radius:7px;background:#fff;border:1px solid var(--line)}
.lpv-form i.go{background:var(--blue);border-color:var(--blue)}
.lpv-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lpv-feat div{border-radius:10px;background:var(--bg);padding:10px;font-size:12px;font-weight:700;line-height:1.45}
.lpv-feat div::before{content:"";display:block;width:22px;height:22px;border-radius:7px;background:var(--blue-s);margin-bottom:6px}
.anno{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;background:var(--ink);color:#fff;border-radius:999px;padding:2px 10px 2px 4px;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.anno.inl{position:relative;margin:12px 0 0 10px;vertical-align:top}
.anno i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-size:10px}
.uses{display:grid;gap:10px}
.use{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff}
.use .ui{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--blue-s);color:var(--blue-d)}
.use .ui svg{width:18px;height:18px}
.use b{display:block;font-size:14px;line-height:1.45}
.use small{display:block;font-size:12.5px;line-height:1.6;color:var(--ink2)}

/* analytics */
.steps{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.steps li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg);border:1px solid var(--line2)}
.steps li.y{background:var(--red-s);border-color:#ffd3d1;color:var(--red-d)}
.steps .num{width:20px;height:20px;border-radius:50%;font-size:10.5px}
.steps li.y .num{background:var(--red)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.kpi span{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.kpi b{display:block;font-size:20px;line-height:1.35;letter-spacing:-.01em;font-feature-settings:"tnum"}
.kpi small{font-size:11.5px;color:#0a7556;font-weight:700}
.kpi small.dn{color:var(--red-d)}
.src{display:grid;gap:9px;font-size:12.5px}
.src div{display:grid;grid-template-columns:3.4em 1fr 2.6em;gap:8px;align-items:center}
.src i{height:8px;border-radius:4px;background:var(--line2);position:relative;overflow:hidden}
.src i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--blue);border-radius:4px}
.src span:last-child{text-align:right;color:var(--muted);font-feature-settings:"tnum"}
.heat{position:relative;background:#fff;border-radius:8px;border:1px solid var(--line);overflow:hidden}
.heat::after{content:"";position:absolute;inset:0;background:
  radial-gradient(26% 18% at 30% 20%,rgba(244,81,79,.75),rgba(253,184,30,.45) 55%,transparent 75%),
  radial-gradient(22% 14% at 68% 46%,rgba(253,184,30,.55),transparent 72%),
  radial-gradient(18% 10% at 40% 82%,rgba(31,111,255,.28),transparent 75%);mix-blend-mode:multiply;pointer-events:none}
.wf{display:grid;gap:6px;padding:10px}
.wf i{display:block;height:6px;border-radius:3px;background:#dfe6f1}
.wf .w1{width:70%;height:9px;background:#c5d0e3}.wf .w2{width:90%}.wf .w3{width:55%}
.wf .wb{width:42%;height:14px;border-radius:7px;background:var(--ink)}
.wf .wbox{height:26px;border-radius:6px;background:#eef2f8}
.heatwrap{display:grid;grid-template-columns:1fr auto;gap:10px}
.reach{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;font-weight:700;color:var(--muted);text-align:right;padding:6px 0;font-feature-settings:"tnum"}
.reach b{color:var(--red-d)}
.pin{position:absolute;z-index:2;font-size:10.5px;font-weight:700;background:var(--ink);color:#fff;border-radius:999px;padding:1px 8px;white-space:nowrap}
.sug h4{font-size:15.5px;line-height:1.5;margin:0 0 6px}
.sug p{font-size:13px;color:var(--ink2);line-height:1.65}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.ab>div{border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff}
.ab>div.b{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-s)}
.ab em{display:block;font-style:normal;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:4px}
.ab .b em{color:var(--blue-d)}
.act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.result{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;align-items:center}
.cmp{display:grid;gap:8px;font-size:12.5px;font-weight:700}
.cmp div{display:grid;grid-template-columns:8.5em 1fr 3.4em;gap:10px;align-items:center}
.cmp i{height:14px;border-radius:7px;background:var(--line2);position:relative;overflow:hidden}
.cmp i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:7px;background:#b9c5da}
.cmp .b i::after{background:var(--blue)}
.cmp span:last-child{text-align:right;font-feature-settings:"tnum"}

/* report */
.seg{display:inline-grid;grid-auto-flow:column;gap:2px;padding:3px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;font-weight:700}
.seg span{padding:4px 12px;border-radius:7px;color:var(--muted)}
.seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,42,92,.14)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line2);font-size:13px}
.row:first-of-type{border-top:0}
.row span{color:var(--muted);flex:none}.row b{font-feature-settings:"tnum";text-align:right;overflow-wrap:anywhere}
.doc{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;min-width:0}
.doc-h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 12px;padding-bottom:12px;border-bottom:1px solid var(--line2);margin-bottom:14px}
.doc-h b{font-size:16px;display:block;line-height:1.4}.doc-h small{color:var(--muted);font-size:12px}
.docg{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.chart{width:100%;height:auto}
.lg{display:flex;gap:14px;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:6px}
.lg i{display:inline-block;width:16px;height:0;border-top:3px solid var(--blue);vertical-align:middle;margin-right:5px;border-radius:2px}
.lg i.p{border-top:2px dashed #a9b6cd}
.next{display:grid;gap:8px;font-size:13px;line-height:1.55}
.next li{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:9px 11px;border-radius:10px;background:var(--bg)}
.next li b{color:var(--blue-d);font-size:12px}
.delta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.delta div{border-radius:10px;background:var(--bg);padding:8px 10px;font-size:11.5px;color:var(--muted);font-weight:700}
.delta b{display:block;font-size:16px;color:var(--ink);font-feature-settings:"tnum"}
.delta small{color:#0a7556;font-weight:700}

/* chat */
.sw{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:4px;font-size:13px;font-weight:700}
.sw i{position:relative;width:44px;height:26px;border-radius:13px;background:#c8d1e2;transition:background .2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.sw[aria-checked="true"] i{background:var(--grn)}
.sw[aria-checked="true"] i::after{transform:translateX(18px)}
.files{display:grid;gap:7px;font-size:13px}
.files li{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;min-width:0;background:#fff}
.files li i{flex:none;display:grid;place-items:center;width:30px;height:24px;border-radius:7px;background:var(--blue-s);color:var(--blue-d);font-style:normal;font-size:10px;font-weight:800}
.widget{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;min-width:0;transition:opacity .2s,filter .2s}
.widget.off{opacity:.38;filter:grayscale(1)}
.widget-h{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ink);color:#fff;font-size:13px;font-weight:700}
.widget-h i{width:8px;height:8px;border-radius:50%;background:#4be3b0}
.widget.off .widget-h i{background:#93a0b8}
.chat{display:grid;gap:8px;padding:12px}
.bub{max-width:88%;padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:1.6}
.bub.q{margin-left:auto;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.bub.a{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.srcchip{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:700;color:var(--blue-d);background:var(--blue-s);border-radius:999px;padding:1px 8px}
.ask{display:grid;gap:5px;margin-top:7px}
.ask span{display:block;border:1px dashed #c3cde0;border-radius:8px;padding:4px 9px;font-size:11.5px;color:var(--muted);background:var(--bg)}
.stack{display:grid;gap:16px;align-content:start;min-width:0}
.after{display:grid;grid-template-columns:auto 1fr;gap:18px 28px;align-items:center;margin-top:18px;padding:20px 22px;border-radius:20px;background:#fff;border:1.5px dashed #c8d2e3}
.after h3{font-size:16px;line-height:1.45}
.after p{font-size:13px;color:var(--ink2);line-height:1.65;margin-top:4px}
.after ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.after li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--bg);font-size:13px;font-weight:700;line-height:1.35;min-width:0}
.after li .bic{width:36px;height:36px;border-radius:11px;flex:none}
.after li .bic svg{width:18px;height:18px}

/* status + start */
.avail{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:36px}
.av{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff}
.av h3{font-size:16px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.av ul{display:grid;gap:8px;font-size:14.5px;color:var(--ink2)}
.av li{padding-left:24px;position:relative}
.av li::before{content:"✓";position:absolute;left:2px;color:var(--grn);font-weight:800}
.av.wip{background:#fffbef;border-color:#f6e2a6}
.av.wip li::before{content:"…";color:var(--yel-d)}
.start{background:var(--bg)}
.s3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;counter-reset:s}
.s3 li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.s3 li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--ink);color:#fff;font-weight:800;margin-bottom:14px}
.s3 h3{font-size:18px;line-height:1.45;margin-bottom:6px}
.s3 p{font-size:14.5px;color:var(--ink2)}
.s3 .tg{margin-top:14px}
.fin{padding:104px 0;text-align:center;background:radial-gradient(50% 90% at 50% 100%,rgba(31,111,255,.12),transparent 70%)}
.fin .cta{justify-content:center;margin-top:28px}
.fin small{display:block;margin-top:18px;color:var(--muted);font-size:13px}
.ft{border-top:1px solid var(--line);padding:28px 0;font-size:12.5px;color:var(--muted)}
.ft .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ft .logo{width:86px;height:22px}

/* reveal: subtle, opt-in, never hides content without JS / with reduced motion */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .journey{grid-template-columns:1fr;gap:0}
  .bridge{flex-direction:row;padding:14px 0}
  .bridge::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed #b9c6dc}
  .bridge .tip{right:auto;left:50%;top:auto;bottom:-4px;margin:0 0 0 -6px;border:6px solid transparent;border-top:8px solid #b9c6dc;border-bottom:0}
  .bridge b{font-size:12px;background:var(--bg);padding:2px 6px}
  .bridge b br{display:none}
}
@media (max-width:1020px){
  .hero-top{grid-template-columns:1fr}
  .nav{display:none}
  .hd .btn{margin-left:auto}
  .fhead{grid-template-columns:1fr;gap:22px;align-items:start}
  .g3,.g3b{grid-template-columns:1fr 1fr}
  .g3>:first-child,.g3b>:first-child{grid-column:1/-1}
  .g2r{grid-template-columns:1fr}
  .panel{padding:32px}
  .after{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .nav{display:none}
  .hd .wrap{height:56px}.hd .btn{margin-left:auto}
  .hero .wrap{padding:20px 0 32px}
  h1{font-size:31px;margin-top:12px}
  .lead{font-size:14.5px;line-height:1.75}
  .cta .btn{flex:1 1 auto;min-height:44px;padding:0 16px;font-size:14px}
  .journey{margin-top:20px}
  .z-n{padding:14px 12px 12px;border-radius:22px}
  .zsteps{grid-template-columns:1fr;gap:20px;margin-top:10px}
  .st+.st::before{left:50%;top:-17px;margin:0 0 0 -7px;transform:rotate(90deg)}
  .card{display:grid;grid-template-columns:118px 1fr;grid-template-rows:auto 1fr;gap:4px 12px;padding:10px;border-radius:15px}
  .card .scr{grid-row:1/3;grid-column:1;height:86px}
  .card-h{grid-column:2}
  .card-d{grid-column:2}
  .scr .bar{display:none}
  .lpm{padding:7px;gap:6px}
  .adm{margin:7px;grid-template-columns:30px 1fr;padding:6px;gap:6px}.adm .im{height:30px}
  .anm{padding:6px;gap:5px}
  .pill{white-space:nowrap;padding:3px 7px}
  .adm b{font-size:9.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .visits{display:none}
  .anm .idea{display:none}
  .anm .k b{font-size:12px}
  .lpm .lbl2{display:none}
  .zone-h{flex-wrap:wrap;row-gap:2px}
  .loop{height:auto;margin-top:12px;text-align:center}
  .loop::before,.loop::after{display:none}
  .loop span{position:static;transform:none}
  .bsteps{gap:14px}
  .bst{padding:10px 2px}
  .bst small{display:none}
  .bst+.bst::before{left:-13px}
  .jcap{font-size:11.5px}
  .sec{padding:64px 0}
  .feat:first-of-type{padding-top:64px}
  .flow{grid-template-columns:1fr}.arr{transform:rotate(90deg);justify-self:center;line-height:1}
  .panel{padding:22px 14px;border-radius:24px}
  .roles,.g3,.g3b,.g2,.docg,.avail,.s3{grid-template-columns:1fr}
  .win-b{padding:12px}.box,.doc{padding:14px}
  .win-h{padding:10px 12px;flex-wrap:wrap}
  .win-h .dots{display:none}
  .stage{margin-left:0}
  .result{grid-template-columns:1fr}
  .cmp div{grid-template-columns:7.4em 1fr 3.2em}
  .note{flex-direction:column;gap:6px}
  .lpv-b{padding:16px 14px}
  .lpv-hero{grid-template-columns:1fr}
  .lpv-hero h4{font-size:17px}
  .anno{display:none}
  .after{padding:16px 14px}
  .after ol{grid-template-columns:1fr}
  .fin{padding:72px 0}
}
@media (max-width:360px){
  .card{grid-template-columns:96px 1fr}
  .bst b{font-size:11.5px;letter-spacing:-.02em}
  .z-n .zone-h small{flex-basis:100%;padding-left:38px}
}
.chat-inline{display:block;margin-top:7px;padding:7px 8px;background:#eaf1ff;border-radius:8px;color:#164fac;font-size:11px;line-height:1.45;font-weight:700}.hero h1{font-size:clamp(30px,3.7vw,48px)}@media(max-width:600px){.chat-inline{grid-column:2}.hero h1{font-size:32px}}