:root{
    --nav:#0B1A33; --nav-2:#122644; --nav-line:#1E3252;
    --on-nav:#E8EEF8; --on-nav-soft:#93A6C4; --on-nav-faint:#647A9E;
    --brand:#0F5FE0; --brand-deep:#0033C4; --brand-bright:#2E93FF; --brand-pale:#8CC2FF;
    --bg:#FFFFFF; --bg-2:#F4F7FB; --surface:#FFFFFF; --surface-2:#EEF3FA;
    --ink:#0D1B2E; --ink-soft:#4A5A73; --ink-faint:#8493AA;
    --line:#DFE6F0; --line-2:#EDF1F7; --brand-ink:#0B4CBC; --brand-wash:#EAF1FE;
    --ok:#0E9F6E; --warn:#D9544D;
    --sh-s:0 1px 2px rgba(13,27,46,.05);
    --sh:0 1px 2px rgba(13,27,46,.04), 0 12px 28px -16px rgba(13,27,46,.22);
    --sh-l:0 2px 4px rgba(13,27,46,.04), 0 28px 60px -30px rgba(13,27,46,.3);
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --bg:#0B1220; --bg-2:#0E1727; --surface:#121D30; --surface-2:#162338;
    --ink:#E8EEF8; --ink-soft:#A3B2C9; --ink-faint:#6E7F9A;
    --line:#20304A; --line-2:#1A2740; --brand-ink:#6BA8FF; --brand-wash:#152540;
    --sh-s:0 1px 2px rgba(0,0,0,.4); --sh:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.7);
    --sh-l:0 2px 4px rgba(0,0,0,.5), 0 28px 60px -30px rgba(0,0,0,.85);
  }}
  :root[data-theme="dark"]{
    --bg:#0B1220; --bg-2:#0E1727; --surface:#121D30; --surface-2:#162338;
    --ink:#E8EEF8; --ink-soft:#A3B2C9; --ink-faint:#6E7F9A;
    --line:#20304A; --line-2:#1A2740; --brand-ink:#6BA8FF; --brand-wash:#152540;
    --sh-s:0 1px 2px rgba(0,0,0,.4); --sh:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.7);
    --sh-l:0 2px 4px rgba(0,0,0,.5), 0 28px 60px -30px rgba(0,0,0,.85);
  }

  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    font-weight:400;line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.45;text-wrap:balance;color:inherit;}
  p{margin:0;} img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;} table{border-collapse:collapse;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px;}
  .mono{font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;}
  .wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,56px);}

  .label{font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;letter-spacing:.18em;
    text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--brand-ink);}
  .label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);
    box-shadow:0 0 0 3px rgba(15,95,224,.16);}

  /* ============ header (light) ============ */
  header.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;}
  header.site.scrolled{border-bottom-color:var(--line);box-shadow:var(--sh-s);}
  .site-bar{display:flex;align-items:center;gap:20px;height:72px;max-width:1200px;margin:0 auto;
    padding:0 clamp(20px,5vw,56px);}
  .logo-wordmark{height:26px;width:auto;}
  :root[data-theme="dark"] .logo-wordmark,
  :root:not([data-theme="light"]) .logo-wordmark{filter:none;}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-wordmark{
    filter:brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(400%) hue-rotate(185deg);}}
  :root[data-theme="dark"] .logo-wordmark{filter:brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(400%) hue-rotate(185deg);}
  nav.main-nav{display:flex;gap:28px;margin-left:auto;}
  nav.main-nav a{position:relative;font-size:.85rem;font-weight:500;color:var(--ink-soft);padding:5px 0;
    transition:color .2s;white-space:nowrap;}
  nav.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--brand);
    transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1);}
  nav.main-nav a:hover,nav.main-nav a.cur{color:var(--ink);}
  nav.main-nav a:hover::after,nav.main-nav a.cur::after{transform:scaleX(1);}
  .nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;
    font-size:.82rem;font-weight:600;padding:11px 20px;border-radius:4px;white-space:nowrap;
    transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 6px 16px -8px rgba(15,95,224,.7);}
  .nav-cta:hover{background:var(--brand-deep);transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(15,95,224,.8);}
  .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:4px;padding:9px 11px;cursor:pointer;}
  .burger span{display:block;width:17px;height:1.5px;background:var(--ink);margin:3.5px 0;transition:transform .3s,opacity .2s;}
  header.site.open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg);}
  header.site.open .burger span:nth-child(2){opacity:0;}
  header.site.open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
  .mob-nav{display:none;border-top:1px solid var(--line);background:var(--bg);max-height:78vh;overflow:auto;}
  header.site.open .mob-nav{display:block;}
  .mob-nav a{display:block;padding:14px clamp(20px,5vw,56px);font-size:.9rem;color:var(--ink-soft);
    border-bottom:1px solid var(--line-2);}
  .mob-nav a.sub{padding-left:calc(clamp(20px,5vw,56px) + 20px);font-size:.84rem;color:var(--ink-faint);}
  .mob-nav a.cur{color:var(--brand-ink);font-weight:600;}

  /* ============ buttons ============ */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.94rem;font-weight:600;
    padding:15px 30px;border-radius:4px;cursor:pointer;border:1px solid transparent;
    transition:transform .2s,background .2s,border-color .2s,color .2s,box-shadow .2s;}
  .btn .ar{transition:transform .25s cubic-bezier(.4,0,.2,1);}
  .btn:hover .ar{transform:translateX(4px);}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px -12px rgba(15,95,224,.85);}
  .btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(15,95,224,.9);}
  .btn-quiet{color:var(--ink);border-color:var(--line);background:var(--surface);}
  .btn-quiet:hover{border-color:var(--brand);color:var(--brand-ink);transform:translateY(-2px);}
  .btn-onnav{color:#fff;border-color:rgba(255,255,255,.25);background:transparent;}
  .btn-onnav:hover{border-color:var(--brand-bright);background:rgba(46,147,255,.12);}
  .btn-sm{padding:11px 20px;font-size:.85rem;}
  .btn-full{width:100%;}

  /* ============ router ============ */
  .view{display:none;} .view.on{display:block;animation:vin .4s cubic-bezier(.2,.6,.3,1);}
  @keyframes vin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

  /* ============ hero (light) ============ */
  .hero{position:relative;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line);}
  .hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85;
    mask-image:radial-gradient(ellipse 70% 90% at 20% 45%,#000 10%,transparent 72%);
    -webkit-mask-image:radial-gradient(ellipse 70% 90% at 20% 45%,#000 10%,transparent 72%);pointer-events:none;}
  .hero .wrap{position:relative;z-index:2;}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(52px,7vw,92px) 0;}
  /* 日本語の改行を語の途中で起こさないための単位 */
  .nb{display:inline-block;}

  .hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:"IBM Plex Mono",monospace;
    font-size:.72rem;font-weight:500;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:22px;}
  .hero .eyebrow::before{content:"";width:22px;height:1px;background:var(--brand);}
  .hero h1{font-size:clamp(2.7rem,7vw,5.4rem);line-height:1.12;letter-spacing:-.045em;font-weight:700;}
  .hero h1 em{font-style:normal;position:relative;color:var(--brand);}
  .hero h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.1em;height:.11em;
    background:linear-gradient(90deg,var(--brand),rgba(15,95,224,0));border-radius:2px;}
  .hero .lead{margin-top:22px;font-size:clamp(1.05rem,2.1vw,1.45rem);font-weight:700;
    line-height:1.6;letter-spacing:-.025em;color:var(--ink);}
  .hero .lead b{color:var(--brand);font-weight:700;}
  .hero .sub{margin-top:20px;font-size:.97rem;line-height:2.05;color:var(--ink-soft);max-width:46ch;}

  /* live system panel */
  .sysp{margin-top:20px;background:var(--nav);border:1px solid var(--nav-line);border-radius:6px;
    overflow:hidden;box-shadow:var(--sh);}
  .sysp .sh{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--nav-line);
    background:var(--nav-2);}
  .sysp .sh .dot{width:7px;height:7px;border-radius:50%;background:#22C55E;flex:none;
    box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:beat 2.4s ease-out infinite;}
  @keyframes beat{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}
  .sysp .sh .st{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.13em;color:#4ADE80;}
  .sysp .sh .nm{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.64rem;color:var(--on-nav-faint);}
  .sysp .sb{padding:13px 15px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .sysp .sb div{display:flex;flex-direction:column;gap:3px;}
  .sysp .sb .k{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.12em;color:var(--on-nav-faint);}
  .sysp .sb .v{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:#fff;font-variant-numeric:tabular-nums;}
  .sysp .sf{padding:0 15px 13px;font-family:"IBM Plex Mono",monospace;font-size:.63rem;
    line-height:1.9;color:var(--on-nav-soft);min-height:2.6em;}
  .sysp .sf .m{color:var(--on-nav-faint);} .sysp .sf .ok{color:#4ADE80;} .sysp .sf .k2{color:var(--brand-bright);}
  .hero-ctas{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;}
  .hero-pts{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:10px 26px;}
  .hero-pts li{position:relative;padding-left:22px;font-size:.85rem;font-weight:500;color:var(--ink-soft);}
  .hero-pts li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:6px;
    border-left:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);transform:rotate(-45deg);}
  .hero-photo{position:relative;}
  .hero-photo img{width:100%;border-radius:6px;box-shadow:var(--sh-l);aspect-ratio:16/10;object-fit:cover;object-position:center 30%;}
  .hero-photo .bracket{position:absolute;border:1.5px solid var(--brand);width:52px;height:52px;}
  .hero-photo .bracket.tl{top:-12px;left:-12px;border-width:1.5px 0 0 1.5px;}
  .hero-photo .bracket.br{bottom:-12px;right:-12px;border-width:0 1.5px 1.5px 0;}
  .hero-photo .badge{position:absolute;right:-14px;bottom:26px;background:var(--surface);border:1px solid var(--line);
    border-left:3px solid var(--brand);border-radius:4px;padding:13px 18px;box-shadow:var(--sh);}
  .hero-photo .badge b{display:block;font-size:.85rem;font-weight:600;}
  .hero-photo .badge span{display:block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
    color:var(--ink-faint);letter-spacing:.06em;margin-top:2px;}

  /* rail */
  .rail{background:var(--surface);border-bottom:1px solid var(--line);}
  .rail-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(16px,3vw,34px);padding:20px 0;}
  .rail-in .rl{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-faint);}
  .rail-in .cap{position:relative;font-size:.86rem;font-weight:500;color:var(--ink);padding-left:15px;}
  .rail-in .cap::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:4px;border-radius:50%;background:var(--brand);}

  /* ============ sections ============ */
  section{padding:clamp(60px,7.5vw,104px) 0;}
  section.tight{padding:clamp(44px,5.5vw,72px) 0;}
  .band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .sec-head{max-width:66ch;margin-bottom:clamp(32px,4.5vw,52px);}
  .sec-head.ctr{margin-left:auto;margin-right:auto;text-align:center;}
  .sec-head.ctr .label{justify-content:center;}
  .sec-head .label{margin-bottom:18px;}
  .sec-head h2{font-size:clamp(1.45rem,2.9vw,2.15rem);line-height:1.5;}
  .sec-head h2 em{font-style:normal;color:var(--brand);}
  .sec-head p{margin-top:16px;color:var(--ink-soft);font-size:.97rem;}

  .dark{background:var(--nav);color:var(--on-nav);position:relative;overflow:hidden;}
  .dark .label{color:var(--brand-pale);} .dark .label::before{background:var(--brand-bright);}
  .dark h2,.dark h3,.dark h4{color:#fff;}
  .dark .sec-head p{color:var(--on-nav-soft);}
  .dark .wm{position:absolute;right:-70px;bottom:-90px;width:440px;opacity:.05;pointer-events:none;}
  .dark .wrap{position:relative;z-index:1;}

  /* ============ pain chips ============ */
  .pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
  .pain{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
    border-radius:4px;padding:16px 18px;font-size:.88rem;font-weight:500;line-height:1.6;
    transition:border-color .2s,transform .2s,box-shadow .2s;}
  .pain:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh);}
  .pain .pq{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--brand);flex:none;}
  .pains-foot{margin-top:34px;text-align:center;}
  .pains-foot p{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:700;letter-spacing:-.02em;}
  .pains-foot p em{font-style:normal;color:var(--brand);}

  /* ============ compare ============ */
  .cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .cmp-card{border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3vw,32px);background:var(--surface);}
  .cmp-card h3{font-size:1.02rem;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);}
  .cmp-card li{display:flex;gap:11px;font-size:.9rem;line-height:1.8;padding:9px 0;color:var(--ink-soft);}
  .cmp-card .m{flex:none;font-weight:700;font-size:.9rem;line-height:1.8;}
  .cmp-card.bad{background:var(--bg-2);}
  .cmp-card.bad .m{color:var(--warn);}
  .cmp-card.good{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,95,224,.07);}
  .cmp-card.good h3{color:var(--brand-ink);border-bottom-color:rgba(15,95,224,.2);}
  .cmp-card.good .m{color:var(--brand);}
  .cmp-card.good li{color:var(--ink);}

  /* ============ services rows ============ */
  .svc-list{border-top:1px solid var(--line);}
  .svc-row{position:relative;display:grid;align-items:center;
    grid-template-columns:56px minmax(150px,1.02fr) minmax(0,1.85fr) minmax(132px,auto) 24px;
    gap:0 clamp(12px,2vw,26px);padding:clamp(20px,2.8vw,28px) clamp(8px,1.4vw,18px);
    border-bottom:1px solid var(--line);transition:background .25s;}
  .svc-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--brand);
    transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.4,0,.2,1);}
  .svc-row:hover{background:var(--bg-2);} .svc-row:hover::before{transform:scaleY(1);}
  .svc-num{font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:500;color:var(--brand-ink);
    font-variant-numeric:tabular-nums;}
  .svc-name{font-size:1.03rem;font-weight:600;letter-spacing:-.01em;}
  .svc-desc{color:var(--ink-soft);font-size:.87rem;line-height:1.75;}
  .svc-price{font-family:"IBM Plex Mono",monospace;font-size:.83rem;font-weight:500;color:var(--ink);
    font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
  .svc-ar{color:var(--ink-faint);text-align:right;transition:transform .25s,color .25s;}
  .svc-row:hover .svc-ar{color:var(--brand);transform:translateX(4px);}

  /* ============ works cards ============ */
  .work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;}
  .work{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
    border-radius:6px;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s;}
  .work:hover{transform:translateY(-4px);box-shadow:var(--sh-l);border-color:var(--brand);}
  .work .wi{aspect-ratio:16/11;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line);}
  .work .wi img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.3,1);}
  .work:hover .wi img{transform:scale(1.045);}
  .work .wb{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1;}
  .work .wm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .work .wd{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-faint);letter-spacing:.06em;}
  .work h3{font-size:.98rem;line-height:1.65;}
  .work p{font-size:.845rem;line-height:1.85;color:var(--ink-soft);}
  .work .wf{margin-top:auto;padding-top:6px;font-family:"IBM Plex Mono",monospace;font-size:.7rem;
    color:var(--brand-ink);display:flex;align-items:center;gap:8px;}
  .work .wf .ar{transition:transform .25s;}
  .work:hover .wf .ar{transform:translateX(4px);}
  .work.soon{border-style:dashed;background:transparent;}
  .work.soon:hover{transform:none;box-shadow:none;border-color:var(--line);}
  .work.soon .wf{color:var(--ink-faint);}

  .cat{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;
    font-size:.67rem;font-weight:500;letter-spacing:.1em;padding:4px 11px;border-radius:3px;white-space:nowrap;}
  .cat::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;}
  .cat-case{color:var(--brand-ink);background:var(--brand-wash);}
  .cat-tech{color:#0A7B84;background:rgba(10,123,132,.1);}
  .cat-news{color:var(--ink-faint);background:var(--surface-2);}

  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;}
  .filters button{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.08em;
    padding:9px 17px;border-radius:3px;border:1px solid var(--line);background:var(--surface);
    color:var(--ink-soft);cursor:pointer;transition:all .2s;}
  .filters button:hover{border-color:var(--brand);color:var(--brand-ink);}
  .filters button.on{background:var(--nav);border-color:var(--nav);color:#fff;}

  /* featured work */
  .feat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,48px);
    background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);
    padding:clamp(22px,3.4vw,40px);margin-bottom:32px;align-items:center;transition:border-color .2s,box-shadow .2s;}
  .feat:hover{border-color:var(--brand);box-shadow:var(--sh-l);}
  .feat .fm{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
  .feat h3{font-size:clamp(1.12rem,2.1vw,1.5rem);line-height:1.55;}
  .feat p{margin-top:14px;font-size:.91rem;color:var(--ink-soft);line-height:1.95;}
  .feat .fl{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-size:.87rem;
    font-weight:600;color:var(--brand-ink);}
  .feat .fl .ar{transition:transform .25s;} .feat:hover .fl .ar{transform:translateX(4px);}

  /* ============ metrics ============ */
  .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);}
  .metric{padding:clamp(24px,3.4vw,38px) clamp(14px,2.2vw,28px);border-left:1px solid var(--nav-line);}
  .metric:first-child{border-left:0;padding-left:0;}
  .metric b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;
    font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.15;color:#fff;
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
  .metric b i{font-style:normal;font-size:.46em;color:var(--brand-bright);margin-left:3px;}
  .metric span{display:block;font-size:.78rem;color:var(--on-nav-soft);margin-top:11px;line-height:1.7;}

  /* ============ tech grid ============ */
  .tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;
    background:var(--nav-line);border:1px solid var(--nav-line);border-radius:4px;overflow:hidden;}
  .tech-cell{background:var(--nav);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px;
    transition:background .3s;}
  .tech-cell:hover{background:var(--nav-2);}
  .tech-cell .tn{font-family:"IBM Plex Mono",monospace;font-size:.69rem;letter-spacing:.16em;color:var(--brand-bright);}
  .tech-cell h3{font-size:1.03rem;}
  .tech-cell p{font-size:.86rem;color:var(--on-nav-soft);line-height:1.85;}
  .tech-cell ul{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:8px;}
  .tech-cell li{font-family:"IBM Plex Mono",monospace;font-size:.69rem;color:var(--on-nav-soft);
    border:1px solid var(--nav-line);background:rgba(255,255,255,.03);padding:4px 10px;border-radius:3px;}

  /* ============ tech stack matrix ============ */
  .stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
    background:var(--nav-line);border:1px solid var(--nav-line);border-radius:4px;overflow:hidden;}
  .stack-col{background:var(--nav);padding:22px 20px;display:flex;flex-direction:column;gap:13px;}
  .stack-col .sc{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.15em;
    color:var(--brand-bright);padding-bottom:11px;border-bottom:1px solid var(--nav-line);}
  .stack-col ul{display:flex;flex-direction:column;gap:8px;}
  .stack-col li{font-family:"IBM Plex Mono",monospace;font-size:.755rem;color:var(--on-nav-soft);
    display:flex;align-items:center;gap:9px;line-height:1.6;}
  .stack-col li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--brand-bright);flex:none;}

  /* ============ animated architecture ============ */
  .arch.live .arch-node{animation:nodeOn 6s ease-in-out infinite;}
  .arch.live .arch-node:nth-child(1){animation-delay:0s;}
  .arch.live .arch-node:nth-child(3){animation-delay:.5s;}
  .arch.live .arch-node:nth-child(5){animation-delay:1s;}
  .arch.live .arch-node:nth-child(7){animation-delay:1.5s;}
  @keyframes nodeOn{
    0%,22%,100%{border-top-color:var(--nav-line);background:var(--nav-2);}
    6%,16%{border-top-color:var(--brand-bright);background:#16294A;}
  }
  .arch.live .arch-link::before{background:rgba(46,147,255,.18);}
  .arch.live .arch-link i{position:absolute;top:50%;left:4px;width:6px;height:6px;margin-top:-3px;
    border-radius:50%;background:var(--brand-bright);box-shadow:0 0 9px 2px rgba(46,147,255,.85);
    opacity:0;animation:flow 6s linear infinite;}
  .arch.live .arch-link:nth-child(2) i{animation-delay:.25s;}
  .arch.live .arch-link:nth-child(4) i{animation-delay:.75s;}
  .arch.live .arch-link:nth-child(6) i{animation-delay:1.25s;}
  @keyframes flow{
    0%{opacity:0;transform:translateX(0);}
    3%{opacity:1;}
    9%{opacity:1;transform:translateX(30px);}
    12%,100%{opacity:0;transform:translateX(34px);}
  }
  @media (prefers-reduced-motion:reduce){
    .arch.live .arch-node,.arch.live .arch-link i{animation:none;}
    .arch.live .arch-link i{opacity:.8;}
  }

  /* ============ masthead ============ */
  .masthead{position:relative;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line);}
  .masthead canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8;
    mask-image:radial-gradient(ellipse 66% 100% at 78% 50%,#000 8%,transparent 72%);
    -webkit-mask-image:radial-gradient(ellipse 66% 100% at 78% 50%,#000 8%,transparent 72%);pointer-events:none;}
  .masthead .wrap{position:relative;z-index:1;}
  .mh-in{padding:clamp(30px,4vw,46px) 0 clamp(38px,5vw,58px);}
  .crumb{font-family:"IBM Plex Mono",monospace;font-size:.71rem;letter-spacing:.1em;
    color:var(--ink-faint);margin-bottom:26px;}
  .crumb a{transition:color .2s;} .crumb a:hover{color:var(--brand-ink);}
  .crumb .sep{margin:0 9px;color:var(--line);}
  .mh-in h1{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.42;letter-spacing:-.03em;max-width:27ch;}
  .mh-in .lede{margin-top:20px;font-size:.99rem;line-height:2;color:var(--ink-soft);max-width:58ch;}
  .mh-in .label{margin-bottom:18px;}
  .mh-meta{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
    display:flex;gap:clamp(18px,4vw,44px);flex-wrap:wrap;}
  .mh-meta div{display:flex;flex-direction:column;gap:3px;}
  .mh-meta .k{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-faint);}
  .mh-meta .v{font-size:.86rem;font-weight:600;}
  .mh-meta .v .live{display:inline-flex;align-items:center;gap:7px;color:var(--ok);}
  .mh-meta .v .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(14,159,110,.18);}

  /* ============ prose ============ */
  .two-col{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:clamp(32px,4.5vw,60px);align-items:start;}
  .prose{max-width:74ch;}
  .prose h2{font-size:clamp(1.18rem,2.1vw,1.48rem);line-height:1.5;margin:clamp(40px,5vw,58px) 0 18px;
    scroll-margin-top:96px;display:flex;gap:14px;align-items:baseline;}
  .prose h2:first-child{margin-top:0;}
  .prose h2 .hn{font-family:"IBM Plex Mono",monospace;font-size:.71rem;font-weight:500;
    color:var(--brand-ink);letter-spacing:.1em;flex:none;padding-top:2px;}
  .prose h3{font-size:1rem;margin:28px 0 12px;}
  .prose p{margin-bottom:18px;font-size:.945rem;line-height:2.05;color:var(--ink-soft);}
  .prose p strong{color:var(--ink);font-weight:600;}
  .bul{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
  .bul li{position:relative;padding-left:20px;font-size:.92rem;line-height:1.9;color:var(--ink-soft);}
  .bul li::before{content:"";position:absolute;left:3px;top:.82em;width:5px;height:5px;border-radius:50%;background:var(--brand);}
  .bul li b{color:var(--ink);font-weight:600;}
  .pull{margin:30px 0;padding:22px 26px;border-left:3px solid var(--brand);background:var(--brand-wash);
    font-size:.99rem;font-weight:500;line-height:1.9;color:var(--ink);border-radius:0 4px 4px 0;}
  figure{margin:30px 0;} figcaption{margin-top:11px;font-family:"IBM Plex Mono",monospace;
    font-size:.69rem;letter-spacing:.06em;color:var(--ink-faint);}

  .spec{width:100%;font-size:.88rem;}
  .spec th,.spec td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top;}
  .spec th{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.69rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-faint);width:152px;padding-right:18px;}
  .spec td{color:var(--ink);line-height:1.85;}

  .code{background:var(--nav);border:1px solid var(--nav-line);border-radius:5px;overflow:hidden;}
  .code .cb{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px;
    background:var(--nav-2);border-bottom:1px solid var(--nav-line);}
  .code .cf{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--on-nav-soft);letter-spacing:.06em;}
  .code .cl{font-family:"IBM Plex Mono",monospace;font-size:.61rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--on-nav-faint);}
  .code pre{margin:0;padding:18px;overflow-x:auto;font-family:"IBM Plex Mono",monospace;
    font-size:.725rem;line-height:1.95;color:#C4D4EE;}
  .code .st{color:#7FD8A0;} .code .cm{color:#647A9E;}

  .term{background:var(--nav);border:1px solid var(--nav-line);border-radius:5px;overflow:hidden;}
  .term .tb{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--nav-2);border-bottom:1px solid var(--nav-line);}
  .term .d{width:8px;height:8px;border-radius:50%;}
  .term .d.r{background:#FF5F57;} .term .d.y{background:#FEBC2E;} .term .d.g{background:#28C840;}
  .term .tt{margin-left:6px;font-family:"IBM Plex Mono",monospace;font-size:.65rem;color:var(--on-nav-faint);}
  .term pre{margin:0;padding:16px 18px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
    line-height:1.95;color:#BACAE4;overflow-x:auto;}
  .term .k{color:var(--brand-bright);} .term .ok{color:#4ADE80;} .term .m{color:var(--on-nav-faint);}

  .arch{background:var(--nav);border:1px solid var(--nav-line);border-radius:5px;
    padding:clamp(22px,3.4vw,36px) clamp(16px,3vw,30px);overflow-x:auto;}
  .arch-flow{display:flex;align-items:stretch;min-width:560px;}
  .arch-node{flex:1 1 0;background:var(--nav-2);border:1px solid var(--nav-line);border-top:2px solid var(--brand-bright);
    border-radius:3px;padding:15px 13px;display:flex;flex-direction:column;gap:6px;}
  .arch-node .an{font-family:"IBM Plex Mono",monospace;font-size:.59rem;letter-spacing:.14em;color:var(--brand-bright);}
  .arch-node b{font-size:.83rem;font-weight:600;color:#fff;line-height:1.5;}
  .arch-node span{font-family:"IBM Plex Mono",monospace;font-size:.65rem;color:var(--on-nav-faint);line-height:1.6;}
  .arch-link{flex:0 0 42px;position:relative;align-self:center;height:18px;}
  .arch-link::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;
    background:linear-gradient(90deg,rgba(46,147,255,.22),rgba(46,147,255,.7));}
  .arch-link::after{content:"";position:absolute;right:3px;top:50%;transform:translateY(-50%);width:5px;height:5px;
    border-radius:50%;background:var(--brand-bright);box-shadow:0 0 7px 1px rgba(46,147,255,.7);}
  .arch-cap{margin-top:16px;padding-top:14px;border-top:1px solid var(--nav-line);
    font-family:"IBM Plex Mono",monospace;font-size:.65rem;line-height:1.9;color:var(--on-nav-faint);}

  .ba{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin:28px 0;}
  .ba-card{border:1px solid var(--line);border-radius:5px;padding:20px;background:var(--surface);}
  .ba-card .bt{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;}
  .ba-card.aft{border-color:var(--brand);background:var(--brand-wash);}
  .ba-card.aft .bt{color:var(--brand-ink);}
  .ba-card li{position:relative;padding-left:18px;font-size:.86rem;line-height:1.85;color:var(--ink-soft);margin-bottom:7px;}
  .ba-card li::before{content:"";position:absolute;left:2px;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--ink-faint);}
  .ba-card.aft li{color:var(--ink);} .ba-card.aft li::before{background:var(--brand);}
  .ba-arrow{align-self:center;color:var(--brand);font-size:1.2rem;}

  .shot{display:flex;justify-content:center;}
  .phone-fr{max-width:250px;background:var(--nav);border:1px solid var(--nav-line);border-radius:27px;
    padding:10px;box-shadow:var(--sh-l);}
  .phone-fr .notch{width:64px;height:5px;border-radius:3px;background:rgba(255,255,255,.16);margin:2px auto 9px;}
  .phone-fr .scr{border-radius:18px;overflow:hidden;background:#fff;}

  .toc{position:sticky;top:100px;border-left:1px solid var(--line);padding-left:22px;}
  .toc h4{font-family:"IBM Plex Mono",monospace;font-size:.65rem;font-weight:500;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:15px;}
  .toc li{margin-bottom:10px;}
  .toc a{font-size:.81rem;line-height:1.6;color:var(--ink-soft);transition:color .2s;display:block;}
  .toc a:hover,.toc a.act{color:var(--brand-ink);} .toc a.act{font-weight:600;}
  .toc a .n{font-family:"IBM Plex Mono",monospace;font-size:.74em;color:var(--ink-faint);margin-right:8px;}

  /* ============ service page ============ */
  .aside-card{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);
    border-radius:6px;box-shadow:var(--sh);overflow:hidden;}
  .aside-card .ah{padding:18px 20px;background:var(--nav);color:#fff;}
  .aside-card .ah .k{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.14em;
    color:var(--brand-pale);display:block;margin-bottom:5px;}
  .aside-card .ah b{font-size:1.2rem;font-weight:600;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}
  .aside-card .ah .u{font-size:.75rem;color:var(--on-nav-soft);margin-left:4px;}
  .aside-card .ab{padding:18px 20px;}
  .aside-card .ab li{display:flex;gap:10px;font-size:.83rem;line-height:1.8;color:var(--ink-soft);
    padding:9px 0;border-bottom:1px solid var(--line-2);}
  .aside-card .ab li:last-child{border-bottom:0;}
  .aside-card .ab li .c{color:var(--brand);flex:none;font-weight:700;}
  .aside-card .af{padding:0 20px 20px;}

  .target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;}
  .target-card{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:20px;
    display:flex;flex-direction:column;gap:9px;}
  .target-card .tq{font-family:"IBM Plex Mono",monospace;font-size:.69rem;color:var(--brand-ink);letter-spacing:.1em;}
  .target-card p{font-size:.885rem;line-height:1.8;color:var(--ink);font-weight:500;}

  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
  .step{padding:22px clamp(14px,2vw,22px);border-left:1px solid var(--line);}
  .step:first-child{border-left:0;padding-left:0;}
  .step .sn{font-family:"IBM Plex Mono",monospace;font-size:.71rem;color:var(--brand-ink);
    letter-spacing:.12em;display:block;margin-bottom:9px;}
  .step .sn::after{content:"";display:block;width:24px;height:2px;background:var(--brand);margin-top:9px;}
  .step h4{font-size:.94rem;margin-bottom:7px;}
  .step p{font-size:.835rem;line-height:1.85;color:var(--ink-soft);}

  .ptable{width:100%;font-size:.9rem;background:var(--surface);border:1px solid var(--line);
    border-radius:6px;overflow:hidden;}
  .ptable thead th{background:var(--nav);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:.69rem;
    font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:13px 18px;text-align:left;white-space:nowrap;}
  .ptable td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.8;}
  .ptable tbody tr:last-child td{border-bottom:0;}
  .ptable tbody tr:hover{background:var(--bg-2);}
  .ptable .pn{font-weight:600;color:var(--ink);}
  .ptable .pp{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--brand-ink);
    font-variant-numeric:tabular-nums;white-space:nowrap;}
  .ptable .pd{color:var(--ink-soft);font-size:.85rem;}
  .tbl-scroll{overflow-x:auto;} .tbl-scroll .ptable{min-width:640px;}

  /* ============ FAQ ============ */
  .faq-list{border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{width:100%;display:flex;align-items:flex-start;gap:15px;padding:21px 6px;background:none;border:0;
    cursor:pointer;text-align:left;font-size:.97rem;font-weight:600;color:var(--ink);line-height:1.7;transition:color .2s;}
  .faq-q:hover{color:var(--brand-ink);}
  .faq-q .qi{font-family:"IBM Plex Mono",monospace;font-size:.77rem;color:var(--brand-ink);flex:none;padding-top:3px;}
  .faq-q .qt{flex:1;}
  .faq-q .qx{flex:none;width:18px;height:18px;position:relative;margin-top:5px;}
  .faq-q .qx::before,.faq-q .qx::after{content:"";position:absolute;background:var(--brand);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;}
  .faq-q .qx::before{left:0;right:0;top:8px;height:1.5px;}
  .faq-q .qx::after{top:0;bottom:0;left:8px;width:1.5px;}
  .faq-item.open .qx::after{transform:rotate(90deg);opacity:0;}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);}
  .faq-a .inner{padding:0 6px 23px 38px;font-size:.905rem;line-height:2;color:var(--ink-soft);}
  .faq-a .inner p+p{margin-top:13px;}

  /* ============ contact ============ */
  .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px;}
  .cc{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:24px;
    display:flex;flex-direction:column;gap:11px;transition:border-color .2s,transform .2s,box-shadow .2s;}
  .cc:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--sh);}
  .cc .ci{font-family:"IBM Plex Mono",monospace;font-size:.67rem;letter-spacing:.14em;color:var(--brand-ink);text-transform:uppercase;}
  .cc h3{font-size:1.02rem;}
  .cc p{font-size:.86rem;color:var(--ink-soft);line-height:1.85;}
  .cc .cv{font-family:"IBM Plex Mono",monospace;font-size:.97rem;font-weight:500;color:var(--ink);
    margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2);word-break:break-all;}
  .line-qr{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2);
    display:flex;align-items:center;gap:12px;}
  .line-qr img{width:76px;height:76px;flex:none;border-radius:4px;border:1px solid var(--line);background:#fff;}
  .line-qr-note{font-size:.74rem;line-height:1.7;color:var(--ink-faint);}
  .only-mobile{display:none;}
  @media (max-width:760px){
    .only-desktop{display:none;}
    .only-mobile{display:inline-flex;margin-top:auto;}
  }
  .form-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;
    padding:clamp(22px,3.4vw,40px);box-shadow:var(--sh);}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .fld{display:flex;flex-direction:column;gap:8px;} .fld.full{grid-column:1/-1;}
  .fld label{font-family:"IBM Plex Mono",monospace;font-size:.67rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-faint);display:flex;gap:8px;align-items:center;}
  .fld label .req{color:var(--brand);}
  .fld input,.fld textarea,.fld select{font-family:inherit;font-size:.92rem;color:var(--ink);background:var(--bg-2);
    border:1px solid var(--line);border-radius:4px;padding:12px 14px;transition:border-color .2s,background .2s;width:100%;}
  .fld textarea{min-height:128px;resize:vertical;line-height:1.8;}
  .fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--brand);background:var(--surface);}
  .fnote{margin-top:16px;font-size:.79rem;color:var(--ink-faint);line-height:1.8;}
  .fmsg{margin-top:16px;font-size:.86rem;color:var(--brand-ink);display:none;}
  .fmsg.on{display:block;}

  /* ============ about ============ */
  .prof{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4.5vw,58px);align-items:center;}
  .prof .ph{position:relative;padding:12px;}
  .prof .ph::after{content:"";position:absolute;right:0;bottom:0;width:40px;height:40px;
    border:1.5px solid var(--brand);border-width:0 1.5px 1.5px 0;}
  .prof img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px;box-shadow:var(--sh);}
  .prof .q{font-size:clamp(1.18rem,2.3vw,1.6rem);font-weight:700;line-height:1.6;letter-spacing:-.02em;}
  .prof .q span{color:var(--brand);}
  .prof p.b{margin-top:18px;color:var(--ink-soft);font-size:.93rem;line-height:2.05;}
  .tl{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,30px);margin-left:6px;}
  .tl-item{position:relative;padding-bottom:28px;} .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{content:"";position:absolute;left:calc(-1 * clamp(20px,3vw,30px) - 5px);top:9px;
    width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--bg);}
  .tl-item .ty{font-family:"IBM Plex Mono",monospace;font-size:.73rem;letter-spacing:.1em;color:var(--brand-ink);display:block;margin-bottom:5px;}
  .tl-item h4{font-size:.97rem;margin-bottom:5px;}
  .tl-item p{font-size:.87rem;color:var(--ink-soft);line-height:1.9;}

  /* ============ cta ============ */
  .cta{position:relative;overflow:hidden;background:var(--nav);color:var(--on-nav);text-align:center;}
  .cta .wm{position:absolute;left:-60px;top:-80px;width:330px;opacity:.055;pointer-events:none;}
  .cta .wrap{position:relative;z-index:1;}
  .cta .label{justify-content:center;margin-bottom:20px;color:var(--brand-pale);}
  .cta .label::before{background:var(--brand-bright);}
  .cta h2{font-size:clamp(1.45rem,3vw,2.2rem);color:#fff;letter-spacing:-.03em;}
  .cta p{margin-top:16px;color:var(--on-nav-soft);font-size:.95rem;}
  .cta .btns{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .cta-box{margin-top:clamp(40px,5vw,62px);padding:clamp(26px,3.6vw,40px);background:var(--nav);
    border-radius:6px;color:var(--on-nav);}
  .cta-box h3{color:#fff;font-size:1.12rem;line-height:1.55;}
  .cta-box p{margin-top:12px;font-size:.88rem;color:var(--on-nav-soft);}
  .cta-box .btn{margin-top:22px;}

  /* ============ footer ============ */
  footer.site{background:var(--nav);color:var(--on-nav);padding:clamp(46px,5.5vw,68px) 0 38px;}
  .foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(26px,4vw,46px);}
  .foot-brand .fwm{height:24px;margin-bottom:18px;
    filter:brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(400%) hue-rotate(185deg);}
  .foot-brand p{font-size:.82rem;color:var(--on-nav-soft);line-height:1.9;max-width:34ch;}
  .foot-brand .fc{margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:.76rem;
    color:var(--on-nav-soft);line-height:2;}
  .foot-brand .fc a:hover{color:var(--brand-bright);}
  .foot-col h4{font-family:"IBM Plex Mono",monospace;font-size:.67rem;font-weight:500;letter-spacing:.16em;
    text-transform:uppercase;color:var(--on-nav-faint);margin-bottom:15px;}
  .foot-col li{margin-bottom:9px;}
  .foot-col a,.foot-col span{font-size:.83rem;color:var(--on-nav-soft);transition:color .2s;}
  .foot-col a:hover{color:var(--brand-bright);}
  .foot-bar{margin-top:clamp(34px,4.5vw,52px);padding-top:22px;border-top:1px solid var(--nav-line);
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
  .foot-bar span,.foot-bar a{font-family:"IBM Plex Mono",monospace;font-size:.71rem;color:var(--on-nav-faint);letter-spacing:.04em;}
  .foot-bar a:hover{color:var(--brand-bright);}

  /* ============ reveal ============ */
  .rv{opacity:0;transform:translateY(18px);
    transition:opacity .65s cubic-bezier(.2,.6,.3,1),transform .65s cubic-bezier(.2,.6,.3,1);
    transition-delay:calc(var(--i,0) * 60ms);}
  .rv.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    .rv{opacity:1;transform:none;transition:none;} .view.on{animation:none;}
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }

  /* ============ responsive ============ */
  @media (max-width:1120px){nav.main-nav{gap:20px;} nav.main-nav a{font-size:.8rem;}}
  @media (max-width:1000px){
    .metric-grid{grid-template-columns:repeat(2,1fr);}
    .metric{border-left:1px solid var(--nav-line);padding-left:clamp(14px,2.2vw,28px);}
    .metric:nth-child(odd){border-left:0;padding-left:0;}
    .metric:nth-child(n+3){border-top:1px solid var(--nav-line);}
    .foot-grid{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:1/-1;}
    .two-col{grid-template-columns:1fr;} .aside-card{position:static;max-width:430px;}
    .feat{grid-template-columns:1fr;}
    .toc{display:none;}
    .steps{grid-template-columns:1fr 1fr;}
    .step{border-left:1px solid var(--line);padding-left:clamp(14px,2vw,22px);}
    .step:nth-child(odd){border-left:0;padding-left:0;}
  }
  @media (max-width:900px){
    nav.main-nav{display:none;} .burger{display:block;}
    .hero-grid,.prof,.cmp{grid-template-columns:1fr;}
    .hero-photo{max-width:540px;margin:0 auto;}
    .hero-photo .badge{right:0;}
    .prof .ph{max-width:360px;}
  }
  @media (max-width:760px){
    .svc-row{grid-template-columns:44px 1fr auto;gap:4px 13px;padding:18px 8px;}
    .svc-desc{grid-column:2/-1;}
    .svc-price{grid-column:2/-1;text-align:left;color:var(--brand-ink);margin-top:3px;}
    .svc-ar{display:none;}
    .fgrid{grid-template-columns:1fr;}
  }
  @media (max-width:620px){
    .ba{grid-template-columns:1fr;} .ba-arrow{transform:rotate(90deg);}
    .prose h2{flex-direction:column;gap:5px;}
    .steps{grid-template-columns:1fr;}
    .step{border-left:0 !important;padding-left:0 !important;border-top:1px solid var(--line);}
    .step:first-child{border-top:0;}
  }
  @media (max-width:520px){
    .metric-grid{grid-template-columns:1fr;}
    .metric{border-left:0 !important;padding-left:0 !important;border-top:1px solid var(--nav-line);}
    .metric:first-child{border-top:0;}
    .foot-grid{grid-template-columns:1fr;}
    .hero-photo .bracket{display:none;}
  }

  /* 本文中の表（Markdown のパイプ記法から生成される） */
  .tw{overflow-x:auto;margin:0 0 26px;-webkit-overflow-scrolling:touch;}
  .mdtable{width:100%;min-width:480px;border-collapse:collapse;font-size:.88rem;}
  .mdtable th,.mdtable td{text-align:left;padding:12px 14px 12px 0;
    border-bottom:1px solid var(--line);vertical-align:top;line-height:1.8;}
  .mdtable thead th{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.69rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
    border-bottom:1.5px solid var(--line);padding-bottom:9px;}
  .mdtable tbody tr:last-child th,.mdtable tbody tr:last-child td{border-bottom:0;}
  .mdtable td:first-child{white-space:nowrap;color:var(--ink);font-weight:600;}
  @media (max-width:640px){
    .mdtable{font-size:.82rem;}
    .mdtable th,.mdtable td{padding:10px 10px 10px 0;}
  }

  /* 引用。記事中の「そのまま送ってよい文面」などに使う */
  .prose blockquote{margin:0 0 26px;padding:16px 20px;border-left:3px solid var(--brand);
    background:var(--bg-2);border-radius:0 6px 6px 0;color:var(--ink);line-height:1.95;
    font-size:.93rem;}

  /* ------------------------------------------------ お問い合わせフォーム
     色は :root の変数だけを使う。**ダークモードでも読めるようにするため。** */
  .cform{max-width:860px;}
  .f-row{margin-bottom:clamp(16px,2vw,22px);}
  .f-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);}
  .fld{display:block;}
  .fl{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;
    color:var(--ink);margin-bottom:7px;}
  .fl .req{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
    font-weight:600;letter-spacing:.08em;background:var(--brand-wash);color:var(--brand-ink);
    border:1px solid var(--brand-pale);border-radius:3px;padding:1px 5px;}
  .fld input,.fld select,.fld textarea{
    width:100%;font-family:inherit;font-size:.95rem;line-height:1.7;color:var(--ink);
    background:var(--surface);border:1px solid var(--line);border-radius:8px;
    padding:12px 14px;transition:border-color .18s,box-shadow .18s;}
  .fld textarea{resize:vertical;min-height:150px;}
  .fld select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
      linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
    background-position:calc(100% - 20px) 51%,calc(100% - 15px) 51%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px;}
  .fld input::placeholder,.fld textarea::placeholder{color:var(--ink-faint);}
  .fld input:focus,.fld select:focus,.fld textarea:focus{
    outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);}
  /* **入力前に赤くしない。** 触る前から警告されると書く気を削ぐ */
  .fld input:not(:placeholder-shown):invalid,
  .fld textarea:not(:placeholder-shown):invalid{border-color:var(--warn);}
  .fh{display:block;font-size:.78rem;color:var(--ink-faint);margin-top:6px;line-height:1.7;}

  /* 機械対策の空欄。**見えない。読み上げもされない** */
  .f-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  .f-agree{display:flex;align-items:flex-start;gap:11px;font-size:.86rem;
    line-height:1.8;color:var(--ink-soft);cursor:pointer;}
  .f-agree input{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--brand);}
  .f-agree a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px;}

  .f-send{display:flex;align-items:center;gap:clamp(14px,2.5vw,26px);flex-wrap:wrap;
    margin-top:clamp(20px,2.5vw,28px);}
  .f-send .note{margin:0;max-width:44ch;}
  .f-send button[disabled]{opacity:.6;cursor:default;}
  .f-ns{margin-top:18px;border-left:2px solid var(--warn);padding-left:14px;}

  /* 送信完了ページ */
  .done{max-width:62ch;}
  .done .dn-ic{width:46px;height:46px;border-radius:50%;background:var(--brand-wash);
    border:1px solid var(--brand-pale);display:grid;place-items:center;margin-bottom:20px;}
  .done .dn-ic::after{content:"";width:13px;height:7px;border-left:2px solid var(--brand);
    border-bottom:2px solid var(--brand);transform:rotate(-45deg) translateY(-2px);}

  @media (max-width:720px){
    .f-2{grid-template-columns:1fr;}
  }

  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;
    padding:10px 18px;font-size:.85rem;border-radius:0 0 4px 0;}
  .skip:focus{left:0;}