:root{
  --orange:#EA5B0C; --orange-d:#C24A08; --orange-l:#F5843D;
  --tint:#FFEEE0; --tint2:#FDF6F0;
  --ink:#1B1B1B; --ink2:#2A2A2A;
  --white:#fff; --soft:#F7F7F7; --soft2:#FAFAFA;
  --line:#E4E4E4; --line2:#D4D4D4;
  --g4:#444; --g5:#555; --g6:#6B6B6B; --g8:#888; --ga:#AAA;
  --maxw:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif;
  --font-num:"Segoe UI","Helvetica Neue",Arial,var(--font-ja);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ja);
  color:var(--ink); background:var(--white); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.en{font-family:var(--font-num)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:96px 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-num); font-weight:800; font-size:13px;
  letter-spacing:.14em; color:var(--ink); margin-bottom:18px;
}
.eyebrow::before{content:""; width:12px; height:12px; background:var(--orange); display:inline-block}
h2.title{font-size:clamp(26px,4vw,40px); font-weight:900; line-height:1.3; letter-spacing:-.01em}
.lead{font-size:clamp(15px,1.6vw,17px); color:var(--g5); margin-top:14px; max-width:760px}
.accent{color:var(--orange)}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ===== Header ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
header.scrolled{border-color:var(--line); box-shadow:0 2px 20px rgba(0,0,0,.04)}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:22px; letter-spacing:-.02em; text-decoration:none; color:var(--ink)}
.brand .mark{width:30px;height:30px;flex:none}
.brand b{color:var(--orange)}
.brand-logo{height:44px;width:auto;display:block}
.foot-brand .brand-logo{height:40px}
@media(max-width:560px){.brand-logo{height:34px}}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{color:var(--g5); text-decoration:none; font-size:14px; font-weight:500; transition:color .2s}
.nav-links a.btn{color:#fff}
.nav-links a.btn-ghost{color:var(--ink)}
.nav-links a:not(.btn):hover{color:var(--orange)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; text-decoration:none; border-radius:10px;
  padding:13px 24px; transition:transform .15s var(--ease), box-shadow .2s, background .2s; white-space:nowrap;
}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 6px 18px rgba(234,91,12,.28)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(234,91,12,.36)}
.btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fff}
.btn-sm{padding:10px 18px; font-size:14px; border-radius:9px}
.nav .btn{padding:11px 20px;font-size:14px}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s}

/* ===== Hero ===== */
.hero{padding:150px 0 80px; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; top:-10%; right:-8%; width:620px; height:620px;
  background:radial-gradient(circle,rgba(234,91,12,.09),transparent 62%); z-index:0;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:1}
.hero .pill{
  display:inline-block; background:var(--tint); color:var(--orange-d);
  font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:999px; margin-bottom:22px;
}
.hero h1{font-size:clamp(32px,5vw,54px); font-weight:900; line-height:1.18; letter-spacing:-.02em}
.hero h1 .accent{position:relative; white-space:nowrap}
.hero-sub{font-size:clamp(15px,1.7vw,18px); color:var(--g5); margin:24px 0 20px; line-height:1.85}
.hero-points{list-style:none; margin:0 0 32px; display:grid; gap:12px}
.hero-points li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--g4)}
.hero-points .ic{width:22px;height:22px;flex:none;border-radius:50%;background:var(--tint);display:grid;place-items:center;margin-top:2px}
.hero-points .ic svg{width:12px;height:12px;stroke:var(--orange);stroke-width:3;fill:none}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-note{font-size:12.5px;color:var(--g8);margin-top:16px}

/* Radar card */
.radar-card{
  background:var(--soft2); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.06);
}
.radar-head{background:var(--orange); color:#fff; padding:16px 22px; font-weight:700; font-size:15px; display:flex;align-items:center;gap:10px}
.radar-head .dot{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.9}
.radar-body{padding:20px}
.radar-legend{display:flex; gap:22px; justify-content:center; margin-top:8px; font-size:12.5px; color:var(--g5)}
.radar-legend span{display:inline-flex;align-items:center;gap:6px}
.radar-legend i{width:16px;height:3px;border-radius:2px;display:inline-block}

/* ===== Stats / Issue ===== */
.issue{background:var(--ink); color:#fff}
.issue .eyebrow{color:#fff}
.issue .title{color:#fff}
.issue .lead{color:#bbb}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
.stat{background:var(--ink2); border:1px solid #333; border-radius:16px; padding:34px 28px}
.stat .num{font-family:var(--font-num); font-weight:800; font-size:52px; color:var(--orange-l); line-height:1}
.stat .cap{font-weight:700; font-size:17px; margin:14px 0 10px}
.stat .desc{font-size:13.5px; color:#aaa; line-height:1.75}
.issue .src{list-style:none; font-size:12px;color:#888;margin-top:26px; display:grid; gap:4px}
.issue .src a{color:#bbb}
.stat sup{font-size:10px;color:#888;margin-left:2px}

/* ===== Problems ===== */
.prob-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px}
.prob{background:var(--soft2); border:1px solid var(--line); border-radius:14px; padding:28px 30px; display:flex; gap:20px}
.prob .no{font-family:var(--font-num); font-weight:800; font-size:15px; color:#fff; background:var(--orange); width:46px;height:46px;border-radius:50%; flex:none; display:grid;place-items:center}
.prob h3{font-size:16px; margin-bottom:7px; line-height:1.5}
.prob p{font-size:13.5px; color:var(--g5); line-height:1.7}
.bridge{text-align:center; margin-top:40px; font-size:17px; font-weight:700}
.bridge .accent{color:var(--orange-d)}

/* ===== Solution ===== */
.sol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.sol{background:var(--tint2); border:1px solid var(--tint); border-radius:16px; padding:36px 28px; text-align:center}
.sol .badge{width:74px;height:74px;border-radius:50%;background:var(--orange);color:#fff;font-size:30px;font-weight:900;display:grid;place-items:center;margin:0 auto 18px}
.sol h3{font-size:19px; margin-bottom:10px}
.sol p{font-size:13.5px;color:var(--g5);line-height:1.75}
.sol-band{margin-top:34px; background:var(--orange); color:#fff; text-align:center; font-weight:700; font-size:16px; padding:16px; border-radius:12px}

/* ===== Features ===== */
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.feat{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 28px; display:flex; gap:18px; transition:border-color .25s, transform .25s, box-shadow .25s}
.feat:hover{border-color:var(--orange); transform:translateY(-3px); box-shadow:0 12px 30px rgba(234,91,12,.1)}
.feat .ic{width:48px;height:48px;flex:none;border-radius:12px;background:var(--tint);display:grid;place-items:center}
.feat .ic svg{width:24px;height:24px;stroke:var(--orange);stroke-width:2;fill:none}
.feat h3{font-size:16px; margin-bottom:6px}
.feat p{font-size:13px;color:var(--g5);line-height:1.7}

/* ===== Flow ===== */
.flow{background:var(--tint2)}
.flow-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; position:relative}
.fstep{text-align:center; position:relative}
.fstep .time{font-family:var(--font-num);font-weight:800;font-size:14px;color:var(--orange);margin-bottom:12px}
.fstep .circle{width:92px;height:92px;border-radius:50%;background:var(--orange);display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 10px 26px rgba(234,91,12,.25)}
.fstep .circle svg{width:40px;height:40px;stroke:#fff;stroke-width:2;fill:none}
.fstep h3{font-size:17px;margin-bottom:6px}
.fstep p{font-size:12.5px;color:var(--g6)}
.fstep .arrow{position:absolute; top:56px; right:-24px; width:24px; color:var(--orange); z-index:2}
.fstep:last-child .arrow{display:none}

/* ===== Before/After ===== */
.ba{display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; margin-top:40px}
.ba-card{border-radius:16px; padding:32px 30px}
.ba-before{background:var(--soft); border:1px solid var(--line)}
.ba-after{background:var(--ink); color:#fff}
.ba-tag{display:inline-block; font-family:var(--font-num); font-weight:800; font-size:13px; letter-spacing:.08em; padding:6px 16px; border-radius:8px; margin-bottom:18px}
.ba-before .ba-tag{background:var(--g8); color:#fff}
.ba-after .ba-tag{background:var(--orange); color:#fff}
.ba-card h3{font-size:20px; margin-bottom:20px; line-height:1.4}
.ba-after h3{color:#fff}
.ba-list{list-style:none; display:grid; gap:14px}
.ba-list li{display:flex; gap:12px; font-size:14px; line-height:1.6}
.ba-before li{color:var(--g5)}
.ba-after li{color:#ccc}
.ba-mark{font-weight:800; flex:none}
.ba-before .ba-mark{color:var(--g8)}
.ba-arrow{display:grid; place-items:center; color:var(--orange)}
.ba-arrow svg{width:40px;height:40px}
.uc-tabs{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.uc-more{margin-top:36px}
.uc-more p{text-align:center; font-weight:700; margin-bottom:16px; font-size:14px}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.tag{background:var(--soft2); border:1px solid var(--line); border-radius:8px; padding:9px 16px; font-size:13px; font-weight:700; color:var(--g5)}

/* growth chart */
.growth{margin-top:22px;background:#222;border-radius:12px;padding:18px}


/* ===== Axes ===== */
.spec{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
.spec div{background:var(--tint2); border:1px solid var(--tint); border-radius:12px; padding:18px 20px}
.spec b{display:block; font-size:12px; color:var(--orange-d); letter-spacing:.06em; margin-bottom:4px}
.spec span{font-size:14px; font-weight:700}

/* ===== Report ===== */
.rep-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; margin-top:44px; align-items:start}
.rep{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.06); overflow:hidden}
.rep-bar{display:flex; align-items:center; gap:6px; padding:12px 16px; background:var(--soft); border-bottom:1px solid var(--line); font-size:12px; color:var(--g6); font-weight:700}
.rep-bar i{width:9px; height:9px; border-radius:50%; background:var(--line2)}
.rep-bar span{margin-left:8px}
.rep-body{padding:22px 24px}
.rep-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.rep-head .who{font-size:13px; color:var(--g6)}
.rep-head .who b{display:block; font-size:16px; color:var(--ink)}
.rep-head .total{font-family:var(--font-num); font-weight:800; font-size:40px; color:var(--orange); line-height:1}
.rep-head .total small{font-size:13px; color:var(--g6); font-family:var(--font-ja); font-weight:700; margin-right:6px}
.bars{display:grid; gap:12px}
.bar-row{display:grid; grid-template-columns:96px 1fr 36px; gap:12px; align-items:center; font-size:13px}
.bar-row .lbl{font-weight:700}
.bar-row .val{font-family:var(--font-num); font-weight:800; text-align:right}
.track{position:relative; height:10px; background:var(--soft); border-radius:99px}
.track .fill{position:absolute; inset:0 auto 0 0; background:var(--orange); border-radius:99px}
.track .avg{position:absolute; top:-4px; width:2px; height:18px; background:var(--ink)}
.rep-legend{display:flex; gap:18px; margin-top:12px; font-size:11.5px; color:var(--g6)}
.rep-legend span{display:inline-flex; align-items:center; gap:6px}
.rep-legend i{display:inline-block; width:14px; height:6px; border-radius:3px; background:var(--orange)}
.rep-legend i.a{width:2px; height:12px; background:var(--ink); border-radius:0}
.rep-comment{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
.rep-comment div{border-radius:10px; padding:12px 14px; font-size:12.5px; line-height:1.6}
.rep-comment b{display:block; font-size:12px; margin-bottom:4px}
.rep-comment .good{background:var(--tint2); border:1px solid var(--tint)}
.rep-comment .good b{color:var(--orange-d)}
.rep-comment .grow{background:var(--soft); border:1px solid var(--line)}
.heat{width:100%; border-collapse:separate; border-spacing:4px; font-size:12px}
.heat th{font-weight:700; color:var(--g6); text-align:left; padding:4px 2px}
.heat thead th{text-align:center; font-size:11px}
.heat td{text-align:center; font-family:var(--font-num); font-weight:800; border-radius:6px; padding:9px 0}
.hm1{background:#FFEEE0; color:var(--orange-d)} .hm2{background:#F9C9A6; color:#7A2E05} .hm3{background:#F5843D; color:#fff} .hm4{background:var(--orange-d); color:#fff}
.rep-points{list-style:none; display:grid; gap:12px; margin-top:22px}
.rep-points li{display:flex; gap:10px; font-size:14px; color:var(--g4); line-height:1.6}
.rep-points li::before{content:"✓"; color:var(--orange); font-weight:800; flex:none}
.rep-note{font-size:12px; color:var(--g8); margin-top:14px}


/* ===== Compare ===== */
.cmp-ttl{margin-top:56px; font-weight:900; font-size:18px}
.cmp-sub{font-size:14px; color:var(--g5); margin-top:4px}
.cmp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px}
.cmp{background:var(--soft2); border:1px solid var(--line); border-radius:12px; padding:18px 18px 16px}
.cmp b{display:block; font-size:15px; margin-bottom:6px}
.cmp b::before{content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--orange); margin-right:8px; vertical-align:2px}
.cmp p{font-size:12.5px; color:var(--g5); line-height:1.65}

/* ===== Cycle ===== */
.cycle{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:44px; counter-reset:cy}
.cy{position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 18px}
.cy .n{font-family:var(--font-num); font-weight:800; font-size:28px; color:var(--orange); line-height:1}
.cy h3{font-size:16px; margin:10px 0 6px}
.cy p{font-size:12.5px; color:var(--g5); line-height:1.65}
.cy:not(:last-child)::after{content:""; position:absolute; top:50%; right:-11px; width:8px; height:8px; border-top:2px solid var(--orange); border-right:2px solid var(--orange); transform:translateY(-50%) rotate(45deg); z-index:1}
.cy.loop{background:var(--tint2); border-color:var(--orange)}
.loop-band{margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; font-weight:700; color:var(--orange-d); text-align:center}
.loop-band svg{width:20px; height:20px; flex:none}

/* ===== Value ===== */
.val-table{width:100%; border-collapse:separate; border-spacing:0; margin-top:44px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; font-size:14px}
.val-table th,.val-table td{padding:18px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.7}
.val-table tr:last-child th,.val-table tr:last-child td{border-bottom:none}
.val-table thead th{background:var(--ink); color:#fff; font-size:13px; font-weight:700}
.val-table tbody th{width:22%; font-weight:900; font-size:15px}
.val-table td{color:var(--g4)}
.val-table td.eff{color:var(--ink); font-weight:700}
.calc{margin-top:28px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; background:#fff; border:2px solid var(--orange); border-radius:16px; padding:26px 30px}
.calc .fig{text-align:center}
.calc .fig small{display:block; font-size:12px; font-weight:700; color:var(--g6)}
.calc .fig b{font-family:var(--font-num); font-weight:800; font-size:44px; color:var(--orange); line-height:1.1}
.calc .fig b span{font-size:18px; font-family:var(--font-ja)}
.calc .fig em{display:block; font-style:normal; font-size:12px; color:var(--g6); margin-top:4px}
.calc h3{font-size:17px; margin-bottom:6px}
.calc p{font-size:13.5px; color:var(--g5); line-height:1.75}
.calc .src{font-size:11.5px; color:var(--g8); margin-top:8px}

/* ===== Pricing ===== */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px}
.plan{position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 32px; display:flex; flex-direction:column}
.plan-pro{border:2px solid var(--orange); box-shadow:0 20px 50px rgba(234,91,12,.12)}
.plan .badge{position:absolute; top:-14px; left:32px; background:var(--orange); color:#fff; font-size:12px; font-weight:700; padding:5px 14px; border-radius:99px}
.plan h3{font-size:20px}
.plan .for{font-size:13px; color:var(--g6); margin-top:2px}
.plan .price{font-size:34px; font-weight:900; margin-top:18px; line-height:1.2}
.plan .price small{font-size:15px; font-weight:700; margin-left:2px}
.plan .unit{font-size:13.5px; font-weight:700; color:var(--orange-d); margin-top:4px}
.plan .desc{font-size:13.5px; color:var(--g5); margin:16px 0 18px; line-height:1.75}
.plan ul{list-style:none; display:grid; gap:9px; padding-top:18px; border-top:1px solid var(--line); margin-bottom:24px}
.plan li{display:flex; gap:10px; font-size:14px}
.plan li::before{content:"✓"; color:var(--orange); font-weight:800}
.plan .scene{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.plan .scene span{font-size:12px; font-weight:700; background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:4px 10px; color:var(--g5)}
.pt-ttl{margin-top:48px; font-weight:900; font-size:18px}
.pt-sub{font-size:14px; color:var(--g5); margin-top:4px}
.trial-band{margin-top:32px; background:var(--ink); color:#fff; border-radius:16px; padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.trial-band h3{font-size:18px}
.trial-band p{font-size:13.5px; color:#bbb; margin-top:4px}

/* ===== FAQ ===== */
.faq{margin-top:40px; display:grid; gap:12px; max-width:880px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:12px; transition:border-color .2s}
.faq details[open]{border-color:var(--orange)}
.faq summary{list-style:none; cursor:pointer; padding:20px 56px 20px 24px; font-weight:700; font-size:15px; position:relative; display:flex; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--font-num); font-weight:800; color:var(--orange); flex:none}
.faq summary::after{content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--g6); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 24px 22px 50px; font-size:14px; color:var(--g5); line-height:1.8}
.faq .a a{color:var(--orange-d)}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg,var(--orange),var(--orange-d)); color:#fff; text-align:center}
.cta h2{font-size:clamp(26px,4vw,40px); font-weight:900}
.cta p{margin:18px auto 32px; max-width:560px; color:#ffe9dc; font-size:16px}
.cta .btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.cta .btn-primary{background:#fff; color:var(--orange-d); box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cta .btn-ghost{background:transparent; color:#fff; border-color:#fff}
.cta .btn-ghost:hover{background:#fff; color:var(--orange-d)}

/* ===== Footer ===== */
footer{background:var(--ink); color:#fff; padding:64px 0 40px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px}
.foot-brand .brand{color:#fff; margin-bottom:16px}
.foot-brand p{color:#999; font-size:13.5px; line-height:1.8; max-width:320px}
.foot-col h4{font-size:12px; letter-spacing:.1em; color:var(--orange-l); font-family:var(--font-num); font-weight:800; margin-bottom:16px}
.foot-col a,.foot-col p{display:block; color:#bbb; text-decoration:none; font-size:14px; margin-bottom:11px; transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid #333; margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; color:#888; font-size:12.5px; flex-wrap:wrap; gap:10px}

/* ===== Responsive ===== */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .stat-grid,.sol-grid{grid-template-columns:1fr}
  .prob-grid,.feat-grid{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:1fr 1fr; gap:30px}

  .spec,.rep-grid,.plans{grid-template-columns:1fr}
  .cmp-grid{grid-template-columns:1fr 1fr}
  .cycle{grid-template-columns:1fr 1fr}
  .cy::after{display:none}
  .calc{grid-template-columns:1fr; gap:14px}
  .fstep .arrow{display:none}
  .ba{grid-template-columns:1fr; gap:16px}
  .ba-arrow{transform:rotate(90deg)}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
  .nav-links{
    position:fixed; inset:70px 0 auto 0; background:#fff; flex-direction:column;
    padding:24px; gap:18px; border-bottom:1px solid var(--line); transform:translateY(-120%);
    transition:transform .35s var(--ease); box-shadow:0 20px 40px rgba(0,0,0,.08);
  }
  .nav-links.open{transform:none}
  .nav-toggle{display:block}
  section{padding:72px 0}
}
@media(max-width:560px){
  .flow-steps{grid-template-columns:1fr}
  .rep-comment{grid-template-columns:1fr}
  .bar-row{grid-template-columns:80px 1fr 30px}
  .faq .a{padding-left:24px}
  .cmp-grid,.cycle{grid-template-columns:1fr}
  .val-table thead{display:none}
  .val-table,.val-table tbody,.val-table tr,.val-table th,.val-table td{display:block; width:100%}
  .val-table tbody th{width:100%; border-bottom:none; padding-bottom:4px; background:var(--soft2)}
  .val-table td{padding-top:8px; padding-bottom:8px; border-bottom:none}
  .val-table td.eff{border-bottom:1px solid var(--line); padding-bottom:16px}
  .foot-bottom{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===== Sub pages ===== */
.page-hero{padding:140px 0 64px; background:var(--tint2); border-bottom:1px solid var(--tint)}
.page-hero h1{font-size:clamp(28px,4.4vw,46px); font-weight:900; line-height:1.3; letter-spacing:-.01em}
.crumbs{font-size:12.5px; color:var(--g6); margin-bottom:28px; display:flex; flex-wrap:wrap; gap:6px}
.crumbs a{color:var(--g5); text-decoration:none}
.crumbs a:hover{color:var(--orange)}
.crumbs span{color:var(--ga)}
.page-sec{padding:80px 0}
.narrow{max-width:880px}

/* link cards */
.link-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:32px}
.link-card{display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 44px 18px 20px; text-decoration:none; color:var(--ink); position:relative; transition:border-color .2s, transform .2s, box-shadow .2s}
.link-card::after{content:"→"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--orange); font-weight:800}
.link-card:hover{border-color:var(--orange); transform:translateY(-2px); box-shadow:0 10px 24px rgba(234,91,12,.1)}
.link-card b{display:block; font-size:15px}
.link-card span{display:block; font-size:12.5px; color:var(--g6); margin-top:2px}
.uc-links{margin-top:40px}
.uc-links p{text-align:center; font-weight:700; font-size:14px}
.uc-links .link-cards{margin-top:16px}

/* company / privacy */
.info-table{width:100%; border-collapse:collapse; font-size:14.5px}
.info-table th,.info-table td{padding:18px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.8}
.info-table th{width:28%; font-weight:700; color:var(--g5); background:var(--soft2)}
.info-table a{color:var(--orange-d)}
.prose h2{font-size:20px; font-weight:900; margin:44px 0 14px; padding-left:14px; border-left:4px solid var(--orange)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:14.5px; color:var(--g4); line-height:1.9; margin-bottom:12px}
.prose ul{margin:0 0 12px 1.4em; font-size:14.5px; color:var(--g4); line-height:1.9}
.prose a{color:var(--orange-d)}
.data-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:8px 0 18px}
.data-card{background:var(--tint2); border:1px solid var(--tint); border-radius:12px; padding:18px}
.data-card b{display:block; font-size:15px; margin-bottom:6px}
.data-card p{font-size:13px !important; margin:0 !important; line-height:1.7 !important}
.note-box{background:var(--tint2); border:1px solid var(--tint); border-radius:12px; padding:16px 20px; font-size:13.5px !important}
.contact-box{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px 20px}

/* contact form */
.form-wrap{display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start}
.form,.form-done{background:#fff; border:1px solid var(--line); border-radius:16px; padding:36px 34px}
.form-done{text-align:center}
.form-done h2{font-size:22px; margin-bottom:10px}
.form-done p{color:var(--g5); margin-bottom:24px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:20px; min-width:0}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field label{font-size:14px; font-weight:700}
.req{display:inline-block; margin-left:8px; font-size:11px; font-weight:700; color:#fff; background:var(--orange-d); border-radius:4px; padding:1px 6px; vertical-align:1px}
.field input,.field select,.field textarea{font:inherit; font-size:15px; color:var(--ink); background:var(--soft2); border:1.5px solid var(--line2); border-radius:10px; padding:12px 14px; width:100%; transition:border-color .2s, background .2s}
.field textarea{resize:vertical; min-height:140px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--orange); background:#fff}
[aria-invalid="true"]{border-color:#D93025 !important; background:#FFF5F4 !important}
.agree{display:flex; gap:10px; align-items:flex-start; font-size:14px; margin:4px 0 20px; cursor:pointer}
.agree input{width:18px; height:18px; margin-top:3px; accent-color:var(--orange)}
.agree a{color:var(--orange-d)}
.form-error{background:#FFF5F4; border:1px solid #F3C1BC; color:#B3261E; border-radius:10px; padding:12px 14px; font-size:13.5px; margin-bottom:18px}
.form-submit{width:100%; padding:16px; font-size:16px; border:none; cursor:pointer}
.form-submit:disabled{opacity:.6; cursor:wait}
.form-side{display:grid; gap:16px}
.side-card{background:var(--tint2); border:1px solid var(--tint); border-radius:14px; padding:22px}
.side-card h3{font-size:15px; margin-bottom:6px}
.side-card p{font-size:13px; color:var(--g5); margin-bottom:14px}
.side-card p:last-child{margin-bottom:0}
.side-card a:not(.btn){color:var(--orange-d); font-weight:700}
.side-card .btn{width:100%; white-space:normal}

/* usecase pages */
.uc-prob{grid-template-columns:repeat(3,1fr)}
.uc-prob .prob{flex-direction:column; gap:14px; background:#fff}
.uc-sol-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:40px}
.uc-sol{background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:12px; padding:24px 26px}
.uc-sol h3{font-size:17px; margin-bottom:8px}
.uc-sol p{font-size:14px; color:var(--g5); line-height:1.8}
.uc-steps{list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:40px}
.uc-steps li{background:#fff; border:1px solid var(--tint); border-radius:12px; padding:18px; font-size:14px; font-weight:700; line-height:1.6}
.uc-steps .sn{display:block; font-family:var(--font-num); font-size:12px; color:var(--orange); letter-spacing:.08em; margin-bottom:6px}
.uc-plan{margin-top:28px; background:#fff; border:2px solid var(--orange); border-radius:14px; padding:22px 26px; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center}
.uc-plan b{color:var(--orange-d); font-size:15px; white-space:nowrap}
.uc-plan p{font-size:14px; color:var(--g4); line-height:1.75}

@media(max-width:900px){
  .page-hero{padding:120px 0 48px}
  .page-sec{padding:64px 0}
  .form-wrap{grid-template-columns:1fr}
  .data-grid,.uc-prob,.uc-sol-grid{grid-template-columns:1fr}
  .uc-steps{grid-template-columns:1fr 1fr}
  .uc-plan{grid-template-columns:1fr; gap:10px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr; gap:0}
  .form,.form-done{padding:26px 20px}
  .uc-steps{grid-template-columns:1fr}
  .info-table th,.info-table td{display:block; width:100%}
  .info-table th{border-bottom:none; padding-bottom:6px}
  .info-table td{padding-top:6px}
}

/* ===== Pricing: published prices ===== */
.plan .price .pre{font-size:15px; font-weight:700; margin:0 6px 0 0}
.plan .consult{margin-top:20px; padding-top:18px; border-top:1px dashed var(--line2); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.plan .consult p{font-size:13px; color:var(--g5); line-height:1.6; flex:1; min-width:180px}
.price-note{font-size:12.5px; color:var(--g6); margin-top:16px}
.price-table-wrap{margin-top:20px; overflow-x:auto}
.price-table{width:100%; min-width:480px; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14px}
.price-table th,.price-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line)}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:none}
.price-table thead th{background:var(--soft); font-size:12.5px; color:var(--g6); font-weight:700}
.price-table td{font-family:var(--font-num); font-weight:700}
.cmp-table td{text-align:center}
.cmp-table thead th:not(:first-child){text-align:center}
.cmp-table td.y{color:var(--orange)}
.cmp-table td.n{color:var(--ga); font-weight:400}

/* honeypot (bots only) */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.plans-3{grid-template-columns:repeat(3,1fr); gap:20px}
.plans-3 .plan{padding:32px 26px}
.plans-3 .plan .price{font-size:30px}
@media(max-width:1080px){ .plans-3{grid-template-columns:1fr; max-width:640px; margin-left:auto; margin-right:auto} }

/* ===== Skill set ===== */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:40px}
.cat{background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:10px; padding:14px 16px}
.cat b{display:block; font-size:14.5px}
.cat span{display:block; font-size:12px; color:var(--g6); margin-top:3px; line-height:1.5}
.ss-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px}
.ss{background:var(--soft2); border:1px solid var(--line); border-radius:14px; padding:22px 20px}
.ss .n{font-family:var(--font-num); font-weight:800; font-size:24px; color:var(--orange); line-height:1}
.ss h3{font-size:16px; margin:10px 0 6px}
.ss p{font-size:13px; color:var(--g5); line-height:1.7}
@media(max-width:900px){ .cat-grid{grid-template-columns:1fr 1fr} .ss-steps{grid-template-columns:1fr} }