/* ============================================================
   GLOBALFORCE LP — Design System
   Font: Noto Sans JP / Tone: 親しみ・わかりやすさ
   Color: 明るいスカイブルー〜ブルー
   ============================================================ */
:root{
  /* brand blues */
  --sky: #38bdf8;
  --blue: #2563eb;
  --blue-deep: #1d4ed8;
  --navy: #0f2c66;
  --grad: linear-gradient(135deg, #38bdf8 0%, #2f7bf6 55%, #2563eb 100%);
  --grad-soft: linear-gradient(135deg, #eef6ff 0%, #e6f1ff 100%);
  --grad-cta: linear-gradient(120deg, #103a8e 0%, #1c54c9 50%, #2f86e8 100%);

  /* ink / surface — slightly cool whites & inks */
  --ink: #15233d;
  --ink-2: #41506b;
  --ink-3: #54637c;
  --line: #e3e9f2;
  --line-2: #eef2f8;
  --bg: #ffffff;
  --bg-tint: #f5f9ff;
  --bg-tint-2: #eef5ff;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 2px 8px rgba(20,40,80,.06);
  --shadow-md: 0 14px 40px rgba(28,60,130,.10);
  --shadow-lg: 0 30px 70px rgba(28,60,130,.16);
  --shadow-blue: 0 22px 50px rgba(37,99,235,.28);

  --maxw: 1080px;
  --pad: 24px;
  --header-h: 72px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Noto Sans JP", system-ui, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.en{ font-family:"Inter","Noto Sans JP",sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:15px; line-height:1;
  padding:14px 22px; border-radius:999px; cursor:pointer;
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s, color .2s;
}
.btn .ico{ width:17px; height:17px; transition:transform .25s; }
.btn-fill{ background:var(--grad); color:#fff; box-shadow:var(--shadow-blue); }
.btn-fill:hover{ transform:translateY(-2px); box-shadow:0 26px 56px rgba(37,99,235,.36); }
.btn-fill:hover .ico{ transform:translateX(3px); }
.btn-ghost{ background:#fff; color:var(--blue); border-color:#cfe0fb; box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--blue); box-shadow:var(--shadow-md); }
.btn-white{ background:#fff; color:var(--blue-deep); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.18); }
.btn-white .ico{ }
.btn-white:hover .ico{ transform:translateX(3px); }
.btn-outline-w{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline-w:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }

/* ---------- section heads ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Inter",sans-serif; font-weight:700; font-size:13px; letter-spacing:.18em;
  color:var(--blue); text-transform:uppercase;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--grad); border-radius:2px; }
.sec-head{ text-align:center; max-width:760px; margin:0 auto 56px; }
.sec-head h2{ font-size:clamp(28px,4.2vw,42px); font-weight:900; line-height:1.35; margin:18px 0 16px; letter-spacing:.01em; word-break:keep-all; }
.sec-head .lead{ color:var(--ink-2); font-size:clamp(15px,1.7vw,17px); }
.pill{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700;
  background:rgba(255,255,255,.7); border:1px solid #d4e4ff; color:var(--blue-deep);
  backdrop-filter:blur(8px);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--sky); }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
section{ position:relative; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}
/* freeze/throttle fallback: if rAF never advances (transitions can't run), show instantly */
.no-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ============================================================
   ① HEADER
   ============================================================ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,0); border-bottom:1px solid transparent;
  transition:background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s;
}
.header.scrolled{
  background:rgba(255,255,255,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); box-shadow:0 4px 20px rgba(20,40,80,.05);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.logo{ display:flex; align-items:center; gap:11px; }
.logo-img{ height:38px; width:auto; display:block; }
.footer .logo-img{ height:30px; }
@media (max-width:680px){ .logo-img{ height:32px; } }
.logo .mark{
  width:40px; height:40px; border-radius:11px; background:var(--grad);
  display:grid; place-items:center; color:#fff; font-family:"Inter"; font-weight:800; font-size:15px;
  box-shadow:var(--shadow-blue); letter-spacing:.02em;
}
.logo .name{ display:flex; flex-direction:column; line-height:1.15; }
.logo .name b{ font-family:"Inter"; font-weight:800; font-size:18px; letter-spacing:.02em; color:var(--ink); }
.logo .name b.brandjp{ font-family:"Noto Sans JP","Inter",sans-serif; font-weight:900; letter-spacing:.04em; }
.logo .name span{ font-size:10.5px; color:var(--ink-3); font-weight:500; letter-spacing:.08em; }
.nav{ display:flex; gap:30px; }
.nav a{ font-size:15px; font-weight:500; color:var(--ink-2); position:relative; padding:6px 0; transition:color .2s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--grad); border-radius:2px; transition:width .25s; }
.nav a:hover{ color:var(--blue); }
.nav a:hover::after{ width:100%; }
.header-cta{ display:flex; gap:10px; align-items:center; }
.header-cta .btn{ padding:11px 18px; font-size:14px; }

/* ============================================================
   ② HERO
   ============================================================ */
.hero{
  position:relative; padding:calc(var(--header-h) + 70px) 0 100px; text-align:center; overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% -10%, #eaf3ff 0%, #f6faff 45%, #ffffff 75%);
}
/* うっすら背景写真（テスト・AIコンサルらしいテック素材） */
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../images/hero-bg.jpg') center/cover no-repeat; opacity:.45; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(246,250,255,.12) 0%, rgba(246,250,255,.38) 58%, rgba(255,255,255,.85) 100%); }
.hero .glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; z-index:0; }
.hero .glow.g1{ width:520px; height:520px; background:radial-gradient(circle,#7fc0ff,transparent 65%); top:-160px; left:50%; transform:translateX(-50%); }
.hero .glow.g2{ width:360px; height:360px; background:radial-gradient(circle,#9ad8ff,transparent 65%); top:60px; left:8%; }
.hero .glow.g3{ width:340px; height:340px; background:radial-gradient(circle,#acc6ff,transparent 65%); top:120px; right:6%; }
.hero .wrap{ position:relative; z-index:2; max-width:880px; }
.hero h1{
  font-size:clamp(34px,6vw,62px); font-weight:900; line-height:1.28; letter-spacing:.01em;
  margin:24px 0 22px; word-break:keep-all; line-break:strict;
}
.hero p.sub{ font-size:clamp(16px,2vw,19px); color:var(--ink-2); max-width:620px; margin:0 auto 34px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-cta .btn{ padding:16px 28px; font-size:16px; }
.hero .note{
  margin-top:26px; font-size:13.5px; color:var(--ink-2); font-weight:600; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.hero .note .b{ color:var(--blue); font-weight:700; }
.floaty{ display:inline-block; }

/* trust strip under hero */
.trust{ margin-top:54px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; color:var(--ink-2); font-size:13.5px; font-weight:600; }
.trust span{ display:inline-flex; align-items:center; gap:7px; }
.trust .ico{ width:16px; height:16px; color:var(--blue); }

/* ============================================================
   ③ CASES — REPLACEABLE DEMO FRAMES
   ============================================================ */
.cases{ padding:96px 0; background:linear-gradient(180deg,#fff 0%, var(--bg-tint) 100%); }
.case-list{ display:flex; flex-direction:column; gap:60px; }
.case-item{ }
.case-cap{ margin:0 auto 18px; max-width:760px; text-align:center; }
.case-cap .num{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
  background:var(--grad); color:#fff; font-family:"Inter"; font-weight:800; font-size:15px;
  margin-bottom:12px; box-shadow:var(--shadow-blue);
}
.case-cap h3{ font-size:clamp(20px,2.6vw,26px); font-weight:900; margin-bottom:6px; }
.case-cap p{ color:var(--ink-2); font-size:15px; }

/* The browser/app chrome shell */
.demo-frame{
  width:100%; border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.demo-frame:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.demo-bar{
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  background:linear-gradient(180deg,#fbfcff,#f3f6fc); border-bottom:1px solid var(--line);
}
.dots{ display:flex; gap:7px; }
.dots i{ width:12px; height:12px; border-radius:50%; display:block; }
.dots .r{ background:#ff5f57; } .dots .y{ background:#febc2e; } .dots .g{ background:#28c840; }
.demo-bar .title{ font-size:13px; color:var(--ink-3); font-weight:500; }
.demo-bar .ai-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:999px; font-family:"Inter"; font-weight:800; font-size:11px; letter-spacing:.04em;
  background:var(--grad); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.3);
}
.demo-badge-dot{ width:5px; height:5px; border-radius:50%; background:#fff; }
/* Empty slot — REPLACE the inner content of .demo-slot with the real demo */
.demo-slot{
  position:relative; min-height:380px; display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg, #f7f9fd 0 14px, #f2f5fb 14px 28px);
}
.demo-slot .placeholder{
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-3);
}
.demo-slot .placeholder .box{
  width:54px; height:54px; border-radius:14px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
}
.demo-slot .placeholder .box .ico{ width:24px; height:24px; color:var(--blue); }
.demo-slot .placeholder .lbl{ font-family:"Inter","Noto Sans JP"; font-size:12.5px; letter-spacing:.06em; font-weight:600; }

/* ============================================================
   ④ PRICING
   ============================================================ */
.pricing{ padding:96px 0; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:center; }
.price-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:34px 28px; box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
  display:flex; flex-direction:column;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#cfe0fb; }
.price-card.feat{
  border:2px solid var(--blue); box-shadow:var(--shadow-lg);
  padding:48px 32px; transform:scale(1.04); z-index:2;
  background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);
}
.price-card.feat:hover{ transform:scale(1.04) translateY(-6px); }
.price-card .ribbon{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-weight:700; font-size:12.5px;
  padding:8px 18px; border-radius:999px; box-shadow:var(--shadow-blue); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.price-card .ribbon .ico{ width:14px; height:14px; }
.price-card .pname{ font-size:18px; font-weight:900; margin-bottom:14px; }
.price-card .price{ display:flex; align-items:baseline; gap:6px; flex-wrap:nowrap; white-space:nowrap; margin-bottom:6px; }
.price-card .price .amt{ font-family:"Inter","Noto Sans JP"; font-size:34px; font-weight:800; color:var(--ink); line-height:1; }
.price-card.feat .price .amt{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.price-card .price .unit{ font-size:14px; color:var(--ink-2); font-weight:700; }
.price-card .price-note{ font-size:12px; color:var(--ink-3); margin-bottom:16px; }
.price-card .plead{ font-size:14px; color:var(--ink-2); border-top:1px solid var(--line-2); padding-top:16px; margin-bottom:18px; }
.checks{ list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:26px; flex:1; }
.checks li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink); line-height:1.55; }
.checks li .ico{ flex:none; width:20px; height:20px; color:var(--blue); margin-top:2px; }
.price-card .btn{ width:100%; justify-content:center; }

/* ============================================================
   ⑤ UNIFIED MESSAGE + VALUE
   ============================================================ */
.message{ padding:40px 0 96px; }
.msg-band{
  position:relative; overflow:hidden;
  background:var(--grad-soft); border:1px solid #dcebff; border-radius:var(--r-xl);
  padding:56px clamp(28px,5vw,64px); text-align:center;
}
.msg-band .glow{ position:absolute; width:380px; height:380px; border-radius:50%; filter:blur(70px); opacity:.4; background:radial-gradient(circle,#9ad0ff,transparent 65%); top:-120px; right:-60px; pointer-events:none; }
.msg-band h2{ position:relative; font-size:clamp(24px,3.6vw,36px); font-weight:900; line-height:1.4; margin-bottom:18px; word-break:keep-all; }
.msg-band p{ position:relative; color:var(--ink-2); max-width:720px; margin:0 auto; font-size:clamp(15px,1.8vw,17px); }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; }
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px;
  box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s;
}
.value-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.value-card .icw{
  width:52px; height:52px; border-radius:14px; background:var(--grad-soft); border:1px solid #d9e9ff;
  display:grid; place-items:center; margin-bottom:16px;
}
.value-card .icw .ico{ width:24px; height:24px; color:var(--blue); }
.value-card h3{ font-size:17px; font-weight:900; margin-bottom:8px; }
.value-card p{ font-size:14px; color:var(--ink-2); line-height:1.7; }

/* ============================================================
   ⑥ BY INDUSTRY
   ============================================================ */
.industry{ padding:96px 0; background:linear-gradient(180deg, var(--bg-tint) 0%, #fff 100%); }
.ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ind-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.ind-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:#cfe0fb; }
.ind-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ind-head .icw{
  width:46px; height:46px; border-radius:13px; background:var(--grad); display:grid; place-items:center;
  box-shadow:var(--shadow-blue); flex:none;
}
.ind-head .icw .ico{ width:23px; height:23px; color:#fff; }
.ind-head h3{ font-size:17px; font-weight:900; word-break:keep-all; }
.ind-card ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:20px; flex:1; }
.ind-card ul li{ display:flex; gap:9px; font-size:14px; color:var(--ink-2); line-height:1.55; }
.ind-card ul li::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--sky); margin-top:9px; }
.ind-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--blue); transition:gap .2s; }
.ind-link .ico{ width:15px; height:15px; transition:transform .2s; }
.ind-card:hover .ind-link .ico{ transform:translateX(4px); }

/* ============================================================
   ⑦ FINAL CTA
   ============================================================ */
.final{ padding:40px 0 90px; }
.final-band{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--grad-cta); color:#fff;
  padding:clamp(40px,6vw,68px) clamp(28px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.final-band .glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.final-band .glow.a{ width:340px; height:340px; background:radial-gradient(circle,rgba(120,180,255,.55),transparent 65%); top:-120px; left:-40px; }
.final-band .glow.b{ width:300px; height:300px; background:radial-gradient(circle,rgba(80,140,255,.4),transparent 65%); bottom:-120px; right:10%; }
.final-text{ position:relative; max-width:560px; }
.final-text h2{ font-size:clamp(24px,3.6vw,38px); font-weight:900; line-height:1.4; margin-bottom:16px; word-break:normal; line-break:strict; text-wrap:balance; }
.final-text h2 .kp{ white-space:nowrap; }
.final-text p{ color:rgba(255,255,255,.86); font-size:clamp(15px,1.8vw,17px); margin-bottom:28px; text-wrap:pretty; }
/* モバイルだけ意図的に改行（ブランド語句が割れないように） */
.sp-br{ display:none; }
@media (max-width:680px){ .sp-br{ display:inline; } }
.final-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.final-art{ position:relative; flex:none; width:240px; }
/* 代表者写真 */
.final-photo{ margin:0; width:240px; }
.final-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:var(--r-xl); box-shadow:0 18px 42px rgba(8,18,45,.38); display:block; }
.final-photo figcaption{ margin-top:13px; text-align:center; color:#fff; line-height:1.5; }
.final-photo figcaption b{ display:block; font-size:16px; font-weight:800; letter-spacing:.02em; }
.final-photo figcaption .en{ display:block; font-family:"Inter",sans-serif; font-size:10.5px; letter-spacing:.12em; color:rgba(255,255,255,.72); margin-top:2px; }
.final-photo figcaption .org{ display:block; font-size:12px; color:rgba(255,255,255,.86); margin-top:8px; }
.final-photo figcaption .desc{ display:block; font-size:11.5px; color:rgba(255,255,255,.72); margin-top:4px; }
/* illustration placeholder */
.art-ph{
  width:240px; height:240px; border-radius:var(--r-xl);
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 14px, rgba(255,255,255,.04) 14px 28px);
  border:1px dashed rgba(255,255,255,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:rgba(255,255,255,.85);
}
.art-ph .ico{ width:48px; height:48px; }
.art-ph .lbl{ font-family:"Inter","Noto Sans JP"; font-size:12px; letter-spacing:.05em; font-weight:600; }

/* ============================================================
   ⑧ FOOTER
   ============================================================ */
.footer{ padding:48px 0; border-top:1px solid var(--line); background:#fff; }
.footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer .f-left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer .copy{ font-size:13px; color:var(--ink-3); white-space:nowrap; }
.footer .f-links{ display:flex; gap:22px; }
.footer .f-links a{ font-size:13px; color:var(--ink-2); transition:color .2s; }
.footer .f-links a:hover{ color:var(--blue); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .price-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:34px; }
  .price-card.feat{ transform:none; }
  .price-card.feat:hover{ transform:translateY(-6px); }
  .value-grid{ grid-template-columns:1fr; max-width:440px; margin:30px auto 0; }
  .ind-grid{ grid-template-columns:1fr 1fr; }
  .final-band{ flex-direction:column; text-align:center; }
  .final-text{ max-width:none; }
  .final-cta{ justify-content:center; }
}
@media (max-width:680px){
  :root{ --pad:18px; }
  .nav{ display:none; }
  .header-cta .btn{ padding:10px 14px; font-size:13px; }
  .header-cta .btn .lbl-long{ display:none; }
  .header-cta .btn-ghost{ display:none; } /* 狭幅では資料請求を隠しCTA見切れ防止（ヒーローに両CTAあり） */
  .ind-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .hero{ padding-top:calc(var(--header-h) + 44px); padding-bottom:72px; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .hero .note{ white-space:normal; font-size:12.5px; }
  .trust{ gap:14px 22px; }
  .demo-slot{ min-height:320px; }
  .logo .name span{ display:none; }
  .final-art{ width:200px; }
  .art-ph{ width:200px; height:200px; }
}


/* ============================================================
   SHARED SUB-PAGE COMPONENTS (list / detail pages)
   ============================================================ */
.page-hero{ position:relative; overflow:hidden; padding:calc(var(--header-h) + 56px) 0 56px; background:radial-gradient(120% 120% at 50% -10%, #eaf3ff 0%, #f6faff 45%, #fff 78%); text-align:center; }
.page-hero .glow{ position:absolute; width:480px; height:480px; border-radius:50%; filter:blur(72px); opacity:.5; background:radial-gradient(circle,#9ad8ff,transparent 65%); top:-170px; left:50%; transform:translateX(-50%); pointer-events:none; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(30px,5vw,50px); font-weight:900; margin:16px 0 14px; word-break:keep-all; }
.page-hero .lead{ color:var(--ink-2); font-size:clamp(15px,1.8vw,18px); max-width:660px; margin:0 auto; }

.crumbs{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-3); flex-wrap:wrap; justify-content:center; margin-bottom:18px; }
.crumbs a{ color:var(--ink-2); transition:color .2s; }
.crumbs a:hover{ color:var(--blue); }
.crumbs .sep{ color:#c6d2e4; }
.crumbs .cur{ color:var(--blue); font-weight:700; }

.section{ padding:74px 0; }
.section.tint{ background:linear-gradient(180deg,#fff 0%, var(--bg-tint) 100%); }
.section.tint-up{ background:linear-gradient(180deg,var(--bg-tint) 0%, #fff 100%); }
.block-head{ text-align:center; max-width:680px; margin:0 auto 38px; }
.block-head h2{ font-size:clamp(22px,3.2vw,32px); font-weight:900; margin-top:8px; word-break:keep-all; }
.block-head .lead{ color:var(--ink-2); margin-top:10px; font-size:15px; }

/* clickable section titles on LP */
.sec-head h2 a{ transition:color .2s; }
.sec-head h2 a:hover{ color:var(--blue); }
.sec-more{ margin-top:4px; }
a.case-cap{ display:block; cursor:pointer; transition:transform .25s; border-radius:var(--r-md); }
a.case-cap:hover{ transform:translateY(-2px); }
a.case-cap:hover h3{ color:var(--blue); }
.case-cap-more{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:700; font-size:14px; color:var(--blue); }
.case-cap-more .ico{ width:15px; height:15px; transition:transform .2s; }
a.case-cap:hover .case-cap-more .ico{ transform:translateX(4px); }
a.ind-card{ cursor:pointer; }

/* overview card grid (list pages) */
.ov-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.ov-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; cursor:pointer; }
.ov-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#cfe0fb; }
.ov-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.ov-icw{ width:54px; height:54px; border-radius:15px; background:var(--grad); display:grid; place-items:center; box-shadow:var(--shadow-blue); flex:none; }
.ov-icw .ico{ width:26px; height:26px; color:#fff; }
.ov-meta{ display:flex; flex-direction:column; gap:2px; }
.ov-num{ font-family:"Inter"; font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--blue); }
.ov-card h3{ font-size:19px; font-weight:900; word-break:keep-all; }
.ov-card p{ color:var(--ink-2); font-size:14.5px; line-height:1.7; flex:1; }
.ov-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.ov-more{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-weight:700; font-size:14px; color:var(--blue); }
.ov-more .ico{ width:15px; height:15px; transition:transform .2s; }
.ov-card:hover .ov-more .ico{ transform:translateX(4px); }

/* tags */
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tags.center{ justify-content:center; }
.tag{ padding:6px 13px; border-radius:999px; background:#eef5ff; border:1px solid #d9e9ff; color:var(--blue-deep); font-size:12.5px; font-weight:700; }

/* detail hero badge */
.dhero-num{ display:block; font-family:"Inter"; font-weight:800; font-size:12px; letter-spacing:.18em; color:var(--blue); margin-bottom:14px; }
.dhero-badge{ width:66px; height:66px; border-radius:19px; background:var(--grad); display:inline-grid; place-items:center; box-shadow:var(--shadow-blue); margin-bottom:18px; }
.dhero-badge .ico{ width:31px; height:31px; color:#fff; }
.dhero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* big detail demo frame */
.demo-slot.lg{ min-height:460px; }

/* two-column panels */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 30px; box-shadow:var(--shadow-sm); }
.panel > h3{ font-size:18px; font-weight:900; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.panel > h3 .ico{ width:20px; height:20px; color:var(--blue); flex:none; }
.prob-list{ list-style:none; display:flex; flex-direction:column; gap:15px; }
.prob-list li{ display:flex; gap:12px; font-size:14.5px; color:var(--ink-2); line-height:1.65; }
.prob-list li .ico{ flex:none; width:19px; height:19px; color:#e8954e; margin-top:3px; }
.steps{ display:flex; flex-direction:column; gap:13px; }
.step{ display:flex; gap:15px; align-items:flex-start; }
.step .n{ flex:none; width:34px; height:34px; border-radius:10px; background:var(--grad-soft); border:1px solid #d9e9ff; color:var(--blue); font-family:"Inter"; font-weight:800; display:grid; place-items:center; font-size:14px; }
.step p{ font-size:14.5px; color:var(--ink); line-height:1.6; padding-top:5px; }

/* before / after */
.ba{ display:flex; align-items:stretch; gap:16px; flex-wrap:wrap; }
.ba .cell{ flex:1; min-width:150px; border-radius:var(--r-md); padding:22px; text-align:center; }
.ba .cell.b{ background:#f2f5fa; border:1px solid var(--line); }
.ba .cell.a{ background:var(--grad-soft); border:1px solid #cfe0fb; }
.ba .lbl{ font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--ink-3); margin-bottom:8px; }
.ba .cell.a .lbl{ color:var(--blue); }
.ba .v{ font-size:clamp(20px,3vw,27px); font-weight:900; line-height:1.2; }
.ba .cell.a .v{ color:var(--blue); }
.ba .mid{ display:grid; place-items:center; color:var(--blue); }
.ba .mid .ico{ width:26px; height:26px; }

/* related grid */
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rel-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:24px 22px; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s, border-color .3s; display:flex; flex-direction:column; gap:9px; cursor:pointer; }
.rel-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#cfe0fb; }
.rel-card .icw{ width:44px; height:44px; border-radius:12px; background:var(--grad-soft); border:1px solid #d9e9ff; display:grid; place-items:center; margin-bottom:4px; }
.rel-card .icw .ico{ width:21px; height:21px; color:var(--blue); }
.rel-card h4{ font-size:15.5px; font-weight:900; word-break:keep-all; }
.rel-card p{ font-size:13px; color:var(--ink-2); line-height:1.65; flex:1; }
.rel-card .go{ font-size:13px; font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:5px; }
.rel-card .go .ico{ width:14px; height:14px; transition:transform .2s; }
.rel-card:hover .go .ico{ transform:translateX(4px); }

/* pager */
.pager{ display:flex; justify-content:space-between; gap:14px; margin-top:48px; }
.pager a{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--ink-2); padding:13px 20px; border:1px solid var(--line); border-radius:999px; background:#fff; transition:.2s; max-width:48%; }
.pager a:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.pager a .ico{ width:16px; height:16px; flex:none; }
.pager a.disabled{ opacity:.35; pointer-events:none; }
.pager a .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:900px){
  .ov-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .two-col{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
}
@media (max-width:680px){
  .demo-slot.lg{ min-height:340px; }
  .pager a .t{ display:none; }
}