:root{
    --deep:#0f2f38; --deep2:#12333d; --teal:#2c7a8c; --teal-l:#3a8fa3;
    --ink:#14343d; --muted:#5c6f75; --line:#e2e8ea; --bg:#f6f8f9; --bg2:#eef3f4;
    --white:#ffffff; --gold:#c9a24b; --maxw:1120px;
    --shadow:0 10px 30px rgba(15,47,56,.08); --shadow-s:0 4px 14px rgba(15,47,56,.07);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth; scroll-padding-top:64px; -webkit-text-size-adjust:100%}
  body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--ink); background:var(--white); line-height:1.75; font-size:16px; letter-spacing:.01em; overflow-x:hidden}
  .stat .big{overflow-wrap:anywhere}
  img{max-width:100%; display:block}
  a{color:var(--teal); text-decoration:none}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  section{padding:76px 0}
  /* language toggle */
  body.lang-ja .en{display:none}
  body.lang-en .ja{display:none}
  /* ---------- header ---------- */
  header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
    backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:var(--maxw); margin:0 auto; padding:0 22px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; color:var(--deep2); font-size:19px; flex-shrink:0}
  .logo{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--teal),var(--deep));
    color:#fff; display:grid; place-items:center; font-weight:800; font-size:17px}
  .navlinks{display:flex; align-items:center; gap:22px; font-size:14px; font-weight:600}
  .navlinks a{color:var(--ink); opacity:.82; white-space:nowrap}
  .navlinks a:hover{opacity:1; color:var(--teal)}
  .navtools{display:flex; align-items:center; gap:14px; flex-shrink:0}
  .langbtn{border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 12px; font-size:13px;
    font-weight:700; cursor:pointer; color:var(--deep2); display:flex; gap:2px; align-items:center}
  .langbtn .on{color:var(--teal)}
  .langbtn .off{color:#b6c2c5}
  .navcta{background:var(--teal); color:#fff; padding:9px 16px; border-radius:999px; font-weight:700; font-size:14px}
  .hamb{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
  .hamb span{width:24px; height:2px; background:var(--deep2); border-radius:2px; transition:.25s}
  /* ---------- hero ---------- */
  .hero{background:radial-gradient(120% 130% at 80% 0%,#1c4d59 0%,var(--deep) 55%,#0b262d 100%);
    color:#eaf2f3; padding:96px 0 88px; position:relative; overflow:hidden}
  .hero::after{content:""; position:absolute; right:-10%; top:-20%; width:520px; height:520px;
    background:radial-gradient(circle,rgba(58,143,163,.35),transparent 65%); pointer-events:none}
  .hero .eyebrow{font-size:13px; letter-spacing:.28em; font-weight:700; color:#7fc4d3; text-transform:uppercase; margin-bottom:20px}
  .hero h1{font-size:clamp(30px,6vw,54px); line-height:1.2; font-weight:800; letter-spacing:.01em; margin-bottom:22px}
  .hero h1 .accent{color:#8fd3e0}
  .hero .lead{font-size:clamp(15px,2.4vw,19px); color:#cfe1e4; max-width:640px; margin-bottom:16px}
  .hero .sub{font-size:14.5px; color:#9fbcc2; max-width:600px; margin-bottom:36px}
  .btns{display:flex; flex-wrap:wrap; gap:14px}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15.5px; cursor:pointer; border:0}
  .btn-primary{background:#fff; color:var(--deep)}
  .btn-primary:hover{background:#eafafc}
  .btn-ghost{background:transparent; color:#eaf2f3; border:1.5px solid rgba(255,255,255,.4)}
  .btn-ghost:hover{border-color:#fff}
  .hero-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px}
  .hero-tags span{border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 15px; font-size:13px; color:#cfe1e4}
  .hero-inner{display:grid; grid-template-columns:1.3fr .7fr; gap:44px; align-items:center; position:relative; z-index:2}
  .hero-media{position:relative; text-align:center}
  .hero-media img{display:block; margin:0 auto; max-width:100%; max-height:470px; width:auto; border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14)}
  .hero-media .cap2{display:inline-block; margin-top:14px; background:rgba(255,255,255,.10); color:#cfe1e4; font-size:12px; font-weight:600; padding:6px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.18)}
  .hero-media .cap{position:absolute; left:14px; bottom:14px; background:rgba(9,32,38,.82); backdrop-filter:blur(4px); color:#eaf2f3; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.16)}
  /* facility gallery */
  .gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .gfig{position:relative; border-radius:16px; overflow:hidden; margin:0; box-shadow:var(--shadow-s); background:#0f2f38; aspect-ratio:1/1}
  .gfig img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
  .gfig:hover img{transform:scale(1.05)}
  .gfig figcaption{position:absolute; left:12px; bottom:12px; z-index:2; color:#fff; font-size:13px; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .gfig::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,26,31,.62)); z-index:1}
  .gtrust{display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:30px}
  .gtrust div{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); font-weight:600}
  .gtrust .ic{color:var(--teal); font-weight:800; font-size:17px}
  /* ---------- section headings ---------- */
  .kicker{color:var(--teal); font-weight:800; font-size:13px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:12px}
  h2.title{font-size:clamp(24px,4vw,36px); font-weight:800; line-height:1.3; color:var(--deep2); margin-bottom:16px; letter-spacing:.01em}
  .section-lead{font-size:16px; color:var(--muted); max-width:760px; margin-bottom:44px}
  .alt{background:var(--bg)}
  .deepbg{background:var(--deep); color:#e9f1f2}
  .deepbg h2.title{color:#fff} .deepbg .kicker{color:#7fc4d3} .deepbg .section-lead{color:#a9c4c9}
  /* ---------- generic cards ---------- */
  .grid{display:grid; gap:22px}
  .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
  .card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow-s)}
  .card h3{font-size:18px; color:var(--deep2); margin-bottom:10px; font-weight:700; display:flex; align-items:center; gap:10px}
  .card p{font-size:14.5px; color:var(--muted)}
  .num{width:30px; height:30px; min-width:30px; border-radius:8px; background:var(--bg2); color:var(--teal); font-weight:800; display:grid; place-items:center; font-size:15px}
  /* stat blocks */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px}
  .stat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 20px; text-align:center; box-shadow:var(--shadow-s)}
  .stat .big{font-size:clamp(26px,4vw,34px); font-weight:800; color:var(--teal); line-height:1.1}
  .stat .lab{font-size:13px; color:var(--muted); margin-top:8px}
  .deepbg .stat{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
  .deepbg .stat .big{color:#8fd3e0} .deepbg .stat .lab{color:#b7d0d4}
  /* flow / model diagram */
  .flowbox{background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow); display:grid; gap:16px}
  .flowrow{display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center}
  .flowrow .role{background:var(--bg2); border-radius:12px; padding:14px 16px; text-align:center; font-weight:700; color:var(--deep2); font-size:14.5px}
  .flowrow .desc{font-size:14.5px; color:var(--muted)}
  .flow-hq{background:linear-gradient(135deg,var(--teal),var(--deep)); color:#fff; border-radius:14px; padding:18px; text-align:center; font-weight:700; margin-top:6px}
  .flow-hq small{display:block; font-weight:500; opacity:.85; font-size:13px; margin-top:4px}
  /* value list with check */
  .checks{display:grid; gap:14px; margin-top:6px}
  .check{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px}
  .check .ic{color:var(--teal); font-weight:800; font-size:18px; line-height:1.4}
  .check b{color:var(--deep2)} .check p{font-size:14px; color:var(--muted); margin-top:2px}
  /* product screenshots */
  .shots{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .shot{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-s)}
  .shot img{width:100%; background:#0f2f38}
  .shot .cap{padding:14px 16px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line)}
  .shot .cap>b{display:block; color:var(--deep2); font-size:14.5px; margin-bottom:2px; font-weight:700}
  .shot .cap span b{font-weight:700; color:var(--deep2)}
  .mobrow{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:560px; margin:0 auto 20px}
  .mobrow .shot img{max-height:520px; object-fit:contain; object-position:top}
  .mobrow3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:880px; margin:0 auto 20px}
  .mobrow3 .shot img{max-height:560px; object-fit:contain; object-position:top}
  .mobrow3.tall .shot img{max-height:660px; background:#070d14}
  .shots.s2{grid-template-columns:repeat(2,1fr); max-width:820px; margin-left:auto; margin-right:auto}
  .shot-solo{max-width:270px; margin:0 auto}
  /* ---------- ecosystem (circulation) ---------- */
  .eco{background:linear-gradient(180deg,#f4f8f9,#fff); border:1px solid var(--line); border-radius:20px; padding:34px 28px; margin:36px 0 40px; box-shadow:var(--shadow)}
  .eco-head{text-align:center; max-width:820px; margin:0 auto 26px}
  .eco-badge{display:inline-block; background:var(--deep); color:#8fd3e0; font-weight:800; font-size:11.5px; letter-spacing:.16em; padding:6px 14px; border-radius:999px}
  .eco-head h3{font-size:21px; color:var(--deep2); margin:14px 0 0; font-weight:800; line-height:1.5}
  .eco-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .eco-step{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-s); display:flex; flex-direction:column}
  .eco-img{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0a1420}
  .eco-img img{width:100%; height:100%; object-fit:cover; display:block}
  .eco-num{position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .eco-body{padding:16px 16px 12px; flex:1}
  .eco-tag{font-size:11.5px; font-weight:800; color:var(--teal); letter-spacing:.06em; margin-bottom:6px}
  .eco-body h4{font-size:16px; color:var(--deep2); font-weight:800; line-height:1.45; margin:0 0 8px}
  .eco-body p{font-size:13.5px; color:var(--muted); line-height:1.75}
  .eco-next{border-top:1px dashed var(--line); padding:11px 16px; font-size:12.5px; font-weight:700; color:var(--deep2); background:var(--bg2)}
  .eco-next .ar{color:var(--gold); font-weight:800; margin-right:5px}
  .eco-loop{margin-top:16px; text-align:center; font-size:13px; font-weight:700; color:var(--deep2); background:var(--bg2); border:1px dashed var(--line); border-radius:999px; padding:11px 18px}
  .eco-eng{margin-top:26px; background:var(--deep); border-radius:18px; padding:26px 24px; color:#e9f1f2}
  .eco-eng-t{text-align:center; font-size:12px; font-weight:800; letter-spacing:.14em; color:#8fd3e0; margin-bottom:18px}
  .eco-eng-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:760px; margin:0 auto}
  .eco-eng-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px; text-align:center}
  .eco-eng-card img{width:100%; max-width:150px; border-radius:9px; display:block; margin:0 auto 12px; background:#0a1420}
  .eco-eng-card b{display:block; color:#fff; font-size:15px; margin-bottom:6px}
  .eco-eng-card p{font-size:12.5px; color:#b7d0d4; line-height:1.7}
  .eco-eng-note{max-width:760px; margin:18px auto 0; text-align:center; font-size:13.5px; color:#cfe1e4; line-height:1.8}
  .eco-eng-note b{color:#fff}
  /* ---------- academy: pass-rate wall / 2 patterns / 5 tips ---------- */
  .passwall{display:flex; align-items:center; gap:28px; max-width:820px; margin:34px auto 6px; padding:26px 30px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16)}
  .pw-num{font-size:72px; font-weight:800; color:#ffb4a2; line-height:1; letter-spacing:-.02em; white-space:nowrap}
  .pw-num span{font-size:.45em; margin-left:2px}
  .pw-txt b{display:block; color:#cfe1e4; font-size:14.5px; font-weight:700; margin-bottom:4px}
  .pw-txt p{color:#fff; font-size:24px; font-weight:800; margin:2px 0 8px}
  .pw-txt small{display:block; color:#8fb3ba; font-size:11.5px; line-height:1.6}
  .sub-h{color:#fff; text-align:center; font-size:22px; font-weight:800; margin:46px 0 20px}
  .pat-tag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.1em; padding:5px 12px; border-radius:999px; background:#e6f1f2; color:#0f5a66}
  .pat.p2 .pat-tag{background:#fbefe0; color:#9a5a12}
  .pat h3{margin-top:12px}
  .pat-steps{list-style:none; margin:14px 0 14px 6px; padding:0 0 0 18px; border-left:2px solid var(--line)}
  .pat-steps li{position:relative; padding:5px 0 5px 4px; font-size:14px; color:var(--deep2); font-weight:700; line-height:1.55}
  .pat-steps li::before{content:""; position:absolute; left:-25px; top:11px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--teal)}
  .pat-steps li.ok{color:#1f7a55}
  .pat-steps li.ok::before{background:#1f7a55; border-color:#1f7a55}
  .pat p{font-size:14px; color:var(--muted)}
  .tips-h{text-align:center; font-size:21px; font-weight:800; color:var(--deep2); margin:6px 0 22px}
  .tips{display:grid; gap:18px}
  .tip{display:grid; grid-template-columns:1fr 210px; gap:28px; align-items:center; background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:22px 26px}
  .tip:nth-child(even){grid-template-columns:210px 1fr}
  .tip:nth-child(even) .tip-img{order:-1}
  .tip-n{font-size:13px; font-weight:800; letter-spacing:.16em; color:var(--teal)}
  .tip h4{font-size:20px; color:var(--deep2); font-weight:800; margin:6px 0 8px; line-height:1.45}
  .tip p{font-size:14.5px; color:var(--muted); line-height:1.8}
  .tip-img img{width:100%; border-radius:14px; display:block; box-shadow:var(--shadow-s); background:#0a1420}
  .acfacts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 8px}
  .acfacts > div{background:var(--deep); border-radius:14px; padding:18px 14px; text-align:center}
  .acfacts b{display:block; font-size:36px; font-weight:800; line-height:1.1; color:#8fd3e0}
  .acfacts b small{font-size:.42em; margin-left:2px; color:#cfe1e4}
  .acfacts > div > span{display:block; font-size:12.5px; color:#cfe1e4; margin-top:6px}
  .acnote{text-align:center; font-size:14px; color:var(--deep2); font-weight:700; margin:12px 0 26px}
  .mgmt{margin-top:26px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); border-radius:18px; padding:28px 26px}
  .mgmt > h3{color:#fff; font-size:20px; font-weight:800; margin:12px 0 10px; line-height:1.45}
  .mgmt > p{color:#a9c4c9; font-size:15px; line-height:1.85}
  /* ---------- market by country ---------- */
  .mkt-block{border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); border-radius:18px; padding:28px 26px; margin-top:28px}
  .mkt-tag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.16em; color:#8fd3e0; border:1px solid rgba(143,211,224,.45); border-radius:999px; padding:5px 13px}
  .mkt-block > h3{color:#fff; font-size:20px; font-weight:800; margin:12px 0 10px; line-height:1.45}
  .mkt-block .stats{margin-top:0}
  /* ---------- movie ---------- */
  .vwrap{max-width:880px; margin:8px auto 0}
  .yt{position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; border-radius:18px; overflow:hidden; cursor:pointer; background:#0a1420; box-shadow:var(--shadow)}
  .yt img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
  .yt:hover img{transform:scale(1.02)}
  .yt-play{position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; background:rgba(14,124,134,.92); box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .yt-play::after{content:""; position:absolute; left:34px; top:26px; border-style:solid; border-width:16px 0 16px 26px; border-color:transparent transparent transparent #fff}
  .yt-dur{position:absolute; right:14px; bottom:14px; background:rgba(0,0,0,.72); color:#fff; font-size:13px; font-weight:700; padding:4px 10px; border-radius:8px}
  .yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
  .vmore{text-align:center; font-size:14px; color:var(--muted); margin:18px auto 0; max-width:880px}
  .vmore a{color:var(--teal); font-weight:700; text-decoration:none}
  .fac-photo{margin:26px 0 34px}
  .fac-photo img{width:100%; display:block; border-radius:18px; box-shadow:var(--shadow); aspect-ratio:1800/772; object-fit:cover}
  .fac-photo figcaption{font-size:12px; color:var(--muted); text-align:right; margin-top:8px}
  .pcbr{display:inline}
  @media(max-width:720px){ .pcbr{display:none} }
  /* feature highlight (alert -> tasks) */
  .feature{background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 30px; box-shadow:var(--shadow); margin:8px 0 24px}
  .feature-head{max-width:840px; margin:0 auto 24px; text-align:center}
  .feature-head h3{font-size:21px; color:var(--deep2); margin:12px 0 10px; font-weight:800; line-height:1.4}
  .feature-head p{font-size:14.5px; color:var(--muted)}
  .fbadge{display:inline-flex; align-items:center; gap:6px; background:#fbeae6; color:#b5432f; font-weight:800; font-size:12px; letter-spacing:.12em; padding:6px 13px; border-radius:999px}
  /* government adoption callout */
  .adopt{background:linear-gradient(135deg,#fffdf6,#ffffff); border:1px solid #e7dab2; border-left:5px solid var(--gold); border-radius:16px; padding:28px 30px; box-shadow:var(--shadow); margin-bottom:34px}
  .adopt-badge{display:inline-flex; align-items:center; gap:8px; background:var(--gold); color:#3a2e0c; font-weight:800; font-size:12.5px; letter-spacing:.06em; padding:6px 14px; border-radius:999px; margin-bottom:16px}
  .adopt-badge svg{width:15px; height:15px}
  .adopt h3{font-size:20px; color:var(--deep2); line-height:1.5; margin-bottom:12px; font-weight:800}
  .adopt .proj{font-weight:700; color:#8a6a15; font-size:14.5px; margin-bottom:12px; line-height:1.6}
  .adopt p{font-size:14px; color:var(--muted)}
  .adopt-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
  .adopt-links a{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700; color:var(--deep2); background:#fff}
  .adopt-links a:hover{border-color:var(--gold); background:#fffdf3}
  /* clients / traction */
  .clients{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
  .client-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow-s)}
  .client-tag{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.05em; color:var(--teal); background:var(--bg2); padding:5px 12px; border-radius:999px; margin-bottom:14px}
  .client-card h3{font-size:16px; color:var(--deep2); margin-bottom:14px; font-weight:800; line-height:1.55}
  .client-quote{border-left:3px solid var(--teal); padding:4px 0 4px 16px; font-size:14.5px; color:var(--ink); line-height:1.85; margin:0}
  .client-quote .src{display:block; font-size:12.5px; color:var(--muted); font-weight:700; margin-top:12px}
  /* merits & risks */
  .mr-list{list-style:none; display:grid; gap:12px; margin-top:6px}
  .mr-list li{font-size:14px; color:var(--ink); padding-left:24px; position:relative; line-height:1.75}
  .mr-list li b{color:var(--deep2)}
  .mr-list.good li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:800}
  .mr-list.risk li::before{content:"→"; position:absolute; left:0; color:var(--gold); font-weight:800}
  /* supporters */
  .sup-head{display:flex; align-items:center; gap:16px; margin-bottom:16px}
  .sup-head .av{width:54px; height:54px; min-width:54px; border-radius:50%; background:#e9f1f2; color:var(--teal); display:grid; place-items:center}
  .sup-head .av svg{width:27px; height:27px}
  .sup-head .nm{font-size:18px; font-weight:800; color:var(--deep2)}
  .sup-head .ttl{font-size:13.5px; color:var(--teal); font-weight:700; margin-top:3px}
  /* business structure pillars */
  .pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
  .pillar{display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow-s); transition:border-color .2s ease, transform .2s ease}
  .pillar:hover{border-color:var(--teal); transform:translateY(-3px)}
  .pillar .pnum{font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--teal)}
  .pillar h3{font-size:18px; color:var(--deep2); margin:8px 0 8px; font-weight:800; display:flex; align-items:baseline; gap:8px}
  .pillar h3 small{font-size:12px; color:var(--muted); font-weight:600}
  .pillar p{font-size:13.5px; color:var(--muted)}
  .pillar .more{display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--teal)}
  .vbadge{display:inline-flex; align-items:center; gap:6px; background:#1f7a55; color:#fff; font-weight:800; font-size:12px; letter-spacing:.08em; padding:6px 13px; border-radius:999px}
  /* services & schedule */
  .svc-list{list-style:none; display:grid; gap:16px}
  .svc-list li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start}
  .svc-list .n{width:26px; height:26px; min-width:26px; border-radius:8px; background:var(--bg2); color:var(--teal); font-weight:800; display:grid; place-items:center; font-size:13px}
  .svc-list b{display:block; color:var(--deep2); font-size:14.5px}
  .svc-list .d{display:block; font-size:13.5px; color:var(--muted); margin-top:2px; line-height:1.65}
  .timeline{display:grid}
  .tl{display:grid; grid-template-columns:96px 1fr; gap:14px; padding:12px 0; border-top:1px dashed var(--line)}
  .tl:first-child{border-top:0; padding-top:0}
  .tl .when{font-weight:800; color:var(--teal); font-size:13.5px}
  .tl .what b{color:var(--deep2); font-size:14px}
  .tl .what .d{display:block; font-size:13px; color:var(--muted); margin-top:2px; line-height:1.6}
  .tlnote{font-size:12px; color:var(--muted); margin-top:14px; line-height:1.6}
  /* steps */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
  .step{position:relative; padding:0 18px}
  .step .n{color:var(--teal); font-weight:800; font-size:13px; letter-spacing:.1em; margin-bottom:8px}
  .step h4{font-size:16px; color:var(--deep2); margin-bottom:6px}
  .step p{font-size:13.5px; color:var(--muted)}
  /* team */
  .team{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .member{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow-s)}
  .member .av{width:54px; height:54px; border-radius:50%; background:#e9f1f2; color:var(--teal); display:grid; place-items:center; margin-bottom:16px}
  .member .av svg{width:27px; height:27px}
  .member .nm{font-size:18px; font-weight:800; color:var(--deep2)}
  .member .ttl{font-size:13.5px; color:var(--teal); font-weight:700; margin:2px 0 10px}
  .member p{font-size:13.5px; color:var(--muted)}
  /* join / two paths */
  .paths{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
  .path{border-radius:18px; padding:32px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
  .path.owner{background:linear-gradient(160deg,#fff, #f2f8f9)}
  .path .tag{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); background:var(--bg2); padding:5px 12px; border-radius:999px; margin-bottom:14px}
  .path h3{font-size:21px; color:var(--deep2); margin-bottom:10px}
  .path p{font-size:14.5px; color:var(--muted); margin-bottom:16px}
  .path ul{list-style:none; display:grid; gap:9px; margin-bottom:22px}
  .path li{font-size:14px; color:var(--ink); padding-left:24px; position:relative}
  .path li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:800}
  /* contact */
  .contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start}
  .form{background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow)}
  .form label{display:block; font-size:13px; font-weight:700; color:var(--deep2); margin:16px 0 6px}
  .form label:first-child{margin-top:0}
  .form input,.form select,.form textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:15px; font-family:inherit; color:var(--ink); background:#fbfdfd}
  .form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--teal-l); border-color:transparent}
  .form textarea{resize:vertical; min-height:96px}
  .form .btn{width:100%; justify-content:center; background:var(--teal); color:#fff; margin-top:20px}
  .form .btn:hover{background:var(--teal-l)}
  .form .note{font-size:12px; color:var(--muted); margin-top:12px; text-align:center}
  .cinfo .card{margin-bottom:16px}
  .cinfo .card h3{font-size:16px}
  .cinfo a.mail{font-size:18px; font-weight:800; color:var(--teal)}
  .ctabtns{display:grid; gap:12px; margin-top:4px}
  .ctabtns a{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#fff; font-weight:700; color:var(--deep2); font-size:15px}
  .ctabtns a:hover{border-color:var(--teal); background:#f7fbfc}
  .ctabtns .ic{width:38px; height:38px; min-width:38px; border-radius:10px; background:var(--bg2); color:var(--teal); display:grid; place-items:center; font-size:18px}
  .ctabtns small{display:block; font-weight:500; color:var(--muted); font-size:12.5px}
  /* footer */
  footer{background:var(--deep); color:#a9c4c9; padding:52px 0 34px; font-size:14px}
  footer .fbrand{color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; gap:10px; margin-bottom:14px}
  footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-bottom:30px}
  footer a{color:#bcd6da} footer a:hover{color:#fff}
  footer .fh{color:#7fc4d3; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px}
  footer ul{list-style:none; display:grid; gap:8px}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:12.5px; color:#7f9aa0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
  .disc{font-size:11.5px; color:#6f8a90; margin-top:14px; line-height:1.6}
  /* reveal anim */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform}
  h2.title.reveal{transform:translateY(28px) scale(.975); transform-origin:left top}
  .kicker.reveal{transform:translateY(12px)}
  .reveal.in{opacity:1; transform:none}
  h2.title.reveal.in, .kicker.reveal.in{transform:none}
  @media(prefers-reduced-motion:reduce){ .reveal{opacity:1 !important; transform:none !important; transition:none !important} }
  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)} .shots, .shots.s2{grid-template-columns:1fr}
    .eco-flow{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:1fr; gap:24px} .step{padding:0}
    .team{grid-template-columns:1fr} .paths{grid-template-columns:1fr} .clients{grid-template-columns:1fr} .pillars{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr; gap:28px}
    footer .cols{grid-template-columns:1fr 1fr}
    .hero-inner{grid-template-columns:1fr; gap:32px}
    .hero-media img{max-height:380px}
    .gallery{grid-template-columns:repeat(4,1fr)}
  }
  @media(max-width:1160px){
    .navlinks{display:none; position:absolute; top:64px; left:0; right:0; background:#fff; flex-direction:column; padding:14px 22px; gap:4px; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
    .navlinks.open{display:flex}
    .navlinks a{padding:12px 2px; width:100%; border-bottom:1px solid var(--bg)}
    .hamb{display:flex}
  }
  @media(max-width:720px){
    .navcta{display:none}
    section{padding:56px 0}
    .g2{grid-template-columns:1fr}
    .flowrow{grid-template-columns:1fr; gap:8px}
    .mobrow{grid-template-columns:1fr; max-width:320px}
    .mobrow3{grid-template-columns:1fr; max-width:320px}
    .eco{padding:26px 18px; border-radius:16px}
    .mkt-block{padding:22px 16px; border-radius:14px}
    .mgmt{padding:22px 16px; border-radius:14px}
    .yt{border-radius:12px}
    .yt-play{width:64px; height:64px; margin:-32px 0 0 -32px}
    .yt-play::after{left:26px; top:20px; border-width:12px 0 12px 20px}
    .mgmt > h3{font-size:17.5px}
    .passwall{flex-direction:column; text-align:center; gap:10px; padding:22px 16px}
    .pw-num{font-size:58px}
    .pw-txt p{font-size:20px}
    .sub-h{font-size:18.5px}
    .tip, .tip:nth-child(even){grid-template-columns:1fr; gap:16px; padding:20px 16px}
    .tip:nth-child(even) .tip-img{order:0}
    .tip-img{max-width:240px; margin:0 auto; width:100%}
    .tip h4{font-size:18px}
    .acfacts{grid-template-columns:1fr}
    .mkt-block > h3{font-size:17.5px}
    .eco-flow{grid-template-columns:1fr}
    .eco-head h3{font-size:18px}
    .eco-eng-grid{grid-template-columns:1fr}
    .eco-eng-card img{max-width:190px}
    .gallery{grid-template-columns:repeat(2,1fr); gap:12px}
    /* mobile polish */
    .hero{padding:56px 0 52px}
    .hero .eyebrow{letter-spacing:.14em; font-size:11.5px; margin-bottom:16px}
    .hero .lead{font-size:16px} .hero .sub{font-size:14px; margin-bottom:30px}
    .hero-tags{margin-top:28px; gap:8px}
    .kicker{letter-spacing:.14em}
    .stats{gap:12px} .stat{padding:18px 12px} .stat .big{font-size:23px} .stat .lab{font-size:12px}
    .card{padding:22px} .flowbox{padding:22px}
    .btn{padding:13px 22px; font-size:15px}
    .btns{gap:10px} .btns .btn{flex:1 1 auto; justify-content:center}
    h2.title{font-size:23px} .section-lead{font-size:15px; margin-bottom:32px}
    .path{padding:24px} .member{padding:22px} .form{padding:22px}
  }
  @media(max-width:400px){
    .stats{grid-template-columns:1fr} .g4{grid-template-columns:1fr}
  }

/* ===== multi-page additions (2026-11) ===== */
.langsel{display:flex; border:1px solid var(--line); border-radius:999px; background:#fff; overflow:hidden; font-size:13px; font-weight:700}
.langsel a{padding:5px 11px; color:#9fb0b4; white-space:nowrap}
.langsel a.on{color:var(--teal)}
.langsel a+a{border-left:1px solid var(--line)}
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.door{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-s); color:inherit; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
.door:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.door img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#0a1420}
.door .db{padding:18px 20px 20px; flex:1; display:flex; flex-direction:column}
.door .dk{font-size:11.5px; font-weight:800; letter-spacing:.12em; color:var(--teal)}
.door h3{font-size:19px; color:var(--deep2); margin:6px 0 8px; line-height:1.45}
.door p{font-size:14px; color:var(--muted); flex:1}
.door .go{margin-top:14px; font-weight:800; color:var(--teal); font-size:14.5px}
.door .dl{font-size:12px; color:#8a9a9f; margin-top:4px}
.icard img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin-bottom:14px; display:block; background:#0a1420}
.icard .num-t{font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--teal)}
.hero-media img.wide{max-height:none; width:100%; aspect-ratio:1800/772; object-fit:cover}
.note-s{font-size:13px; color:var(--muted); margin-top:16px}
@media(max-width:900px){ .doors{grid-template-columns:1fr} }
@media(max-width:720px){ .langsel a{padding:5px 8px} }