/* samurai-blues.com home v3 — values from _handoff/ui_kits/website/*.jsx. Requires ds.css. */

html{scroll-padding-top:72px;scroll-behavior:smooth}
body{background:var(--surface-page)}
h1,h2,h3,p{margin:0}
em{font-style:normal}
ol{margin:0;padding:0;list-style:none}
svg{display:block;flex:none}
.sb-wrap{max-width:1320px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- Icons (Lucide, inline) ---------- */
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Wordmark ---------- */
.wordmark{display:inline-flex;align-items:baseline;gap:2px;font:700 22px/1 var(--font-mincho);letter-spacing:.06em;color:#fff;white-space:nowrap}
.wordmark b{font-weight:800;color:var(--neon-cyan);text-shadow:var(--glow-text)}
.wordmark--lg{font-size:26px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:46px;padding:0 24px;font:700 14px/1 var(--font-sans);letter-spacing:.06em;border:1px solid transparent;border-radius:var(--radius-1);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base),transform var(--dur-fast)}
.btn .ic{width:17px;height:17px}
.btn--sm{height:36px;padding:0 16px;font-size:13px}
.btn--sm .ic{width:16px;height:16px}
.btn--lg{height:56px;padding:0 32px;font-size:15px}
.btn--lg .ic{width:18px;height:18px}
.btn--accent,.btn--accent:hover{background:var(--neon-blue);color:#fff;text-decoration:none}
.btn--ghost-night,.btn--ghost-night:hover{background:transparent;color:var(--text-on-night);border-color:var(--text-on-night);text-decoration:none}
.btn .btn-arrow{transition:transform var(--dur-base) var(--ease-out)}
.btn:active{transform:translateY(1px)}
@media (hover:hover){
  .btn--accent:hover{box-shadow:var(--glow-neon)}
  .btn--ghost-night:hover{background:rgba(255,255,255,.08)}
  .btn:hover .btn-arrow{transform:translateX(4px)}
}
.btn--accent:focus-visible{box-shadow:var(--glow-neon)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(7,11,31,.86);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-night)}
.site-header.is-ready{transition:all var(--dur-base)}
.site-header.is-top{background:transparent;border-bottom-color:transparent}
.site-header__in{height:72px;display:flex;align-items:center;gap:32px}
.site-header__brand,.site-header__brand:hover{text-decoration:none}
.site-nav{display:flex;gap:32px;margin-left:auto}
.site-nav a{font:500 14px/1 var(--font-sans);letter-spacing:.08em;color:var(--text-on-night);text-decoration:none}
.site-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}

/* ---------- Hero ---------- */
.hero{position:relative;margin-top:-72px;padding-top:72px;background:radial-gradient(90% 80% at 78% 18%,#1A2E6E 0%,#070B1F 62%);color:#fff;overflow:hidden;--slant:8vw}
.hero__word{position:absolute;left:-16px;bottom:7vw;font-size:min(22vw,330px);color:transparent;-webkit-text-stroke:1px rgba(134,162,230,.12);white-space:nowrap;pointer-events:none}
.hero__in{position:relative;padding-top:88px;padding-bottom:calc(140px + 8vw);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.hero__tags{display:flex;flex-wrap:wrap;row-gap:10px;gap:10px 18px;margin:0;padding:0;list-style:none;font:500 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--neon-cyan)}
.hero__tags li{display:flex;gap:18px}
.hero__tags .sep{color:var(--text-on-night-muted);font-size:13px}
.hero h1{margin-top:32px;word-break:keep-all;overflow-wrap:anywhere;font:700 clamp(40px,5.2vw,76px)/1.32 var(--font-mincho);letter-spacing:.04em}
.hero h1 .nw{white-space:nowrap}
.hero h1 em{color:var(--neon-cyan);text-shadow:var(--glow-text);white-space:nowrap}
.hero__lead{margin-top:32px;max-width:520px;word-break:keep-all;overflow-wrap:anywhere;font:400 17px/2 var(--font-sans);color:var(--text-on-night)}
.hero__lead strong{color:#fff;font-weight:700;border-bottom:1px solid var(--neon-cyan)}
.hero__actions{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.hero__trust{display:flex;flex-wrap:wrap;gap:12px 28px;margin:44px 0 0;padding:24px 0 0;list-style:none;border-top:1px solid var(--border-night);max-width:520px}
.hero__trust li{display:flex;gap:8px;align-items:center;font:500 13px/1 var(--font-sans);color:var(--text-on-night-muted)}
.hero__trust .ic{width:16px;height:16px}

.hero__visual{position:relative;height:560px;--s:1}
.hero__stage{position:absolute;inset:0}
.hero__paper{position:absolute;top:20px;left:50%;margin-left:-210px;transform:rotate(-3deg)}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(11,20,51,.82);border:1px solid var(--border-night);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);color:#fff;font:700 13px/1 var(--font-sans);letter-spacing:.04em;box-shadow:var(--shadow-3);white-space:nowrap}
.chip .ic{width:16px;height:16px;color:var(--neon-cyan)}
.chip--a{top:0;right:0}
.chip--b{top:250px;left:-30px}
.chip--c{bottom:30px;right:20px}

/* Invoice sample */
.inv{width:420px;background:var(--washi-0);color:var(--text-strong);padding:36px 36px 32px;box-shadow:0 40px 80px -24px rgba(0,0,0,.6);font-family:var(--font-sans);text-align:left}
.inv__l{font:500 9px/1 var(--font-mono);letter-spacing:.14em;color:var(--text-muted)}
.inv__row{display:flex;justify-content:space-between}
.inv__row--top{align-items:flex-start}
.inv__title{font:700 30px/1.2 var(--font-mincho);letter-spacing:.3em;margin-top:6px}
.inv__no{text-align:right;font:500 11px/1.7 var(--font-mono);color:var(--text-muted)}
.inv__row--to{margin-top:24px;align-items:flex-end;gap:16px}
.inv__to{font:700 14px/1.4 var(--font-sans);margin-top:6px;border-bottom:1px solid var(--sumi-900);padding-bottom:4px}
.inv__r{text-align:right}
.inv__amt{font:800 30px/1 var(--font-display);color:var(--ai-700);margin-top:6px}
.inv__tbl{margin-top:22px;font:400 11px/1 var(--font-sans)}
.inv__tr{display:grid;grid-template-columns:1fr 40px 80px;padding:10px 8px;border-bottom:1px solid var(--border-subtle)}
.inv__tr span+span{text-align:right;font-family:var(--font-mono)}
.inv__tr--head{padding:8px;background:var(--ai-700);color:#fff;font:500 10px/1 var(--font-sans);letter-spacing:.1em;border-bottom:0}
.inv__tr--head span+span{font-family:var(--font-sans)}
.inv__total{display:flex;justify-content:space-between;padding:12px 8px 0;font:700 12px/1 var(--font-sans)}
.inv__total span+span{font-family:var(--font-mono)}
.inv__row--foot{margin-top:22px;align-items:flex-end}
.inv__bank{font:400 11px/1.6 var(--font-sans);margin-top:6px}
.inv__stamp{width:44px;height:44px;border:1.5px solid var(--shu-500);color:var(--shu-500);border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--font-mincho);transform:rotate(-8deg)}

/* ---------- Section label ---------- */
.sb-label{display:block}
.lbl-ai{color:var(--ai-500)}
.lbl-neon{color:var(--neon-cyan)}

/* ---------- Tools ---------- */
.tools{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.tools__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.tools__kicker{display:flex;align-items:center;gap:14px}
.tools__line{width:40px;height:1px;background:var(--ai-500)}
.tools__num{font:800 40px/1 var(--font-display);color:var(--ai-700)}
.tools h2{margin-top:20px;word-break:keep-all;overflow-wrap:anywhere;font:700 clamp(32px,3.6vw,48px)/1.35 var(--font-mincho);letter-spacing:.04em;color:var(--text-strong)}
.tools__lead{max-width:360px;font:400 15px/1.9 var(--font-sans);color:var(--text-muted)}
.tools__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:56px 0 0;padding:0;list-style:none;border-top:1px solid var(--sumi-900);border-left:1px solid var(--border-subtle)}
.tools__grid>li{display:flex}
.tile{position:relative;flex:1;display:flex;flex-direction:column;gap:16px;min-height:260px;padding:28px 26px;border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-body);text-decoration:none;transition:background var(--dur-base) var(--ease-cut)}
.tile:hover{text-decoration:none;color:var(--text-body)}
.tile__top{display:flex;justify-content:space-between;align-items:center}
.tile__en{font:500 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--text-faint)}
.badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;background:var(--neon-blue);color:#fff;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.tile__ic{width:30px;height:30px;margin-top:8px;color:var(--ai-700)}
.tile h3{font:700 19px/1.4 var(--font-sans);color:var(--text-strong)}
.tile p{font:400 13px/1.85 var(--font-sans);color:var(--text-muted)}
.tile__arrow{position:absolute;right:22px;bottom:22px;width:20px;height:20px;transition:transform var(--dur-base) var(--ease-out)}
.tile:focus-visible{background:var(--ai-700);color:#fff}
@media (hover:hover){.tile:hover{background:var(--ai-700);color:#fff}}
.tile:focus-visible .tile__en{color:var(--ai-200)}
.tile:focus-visible .badge{background:var(--ai-950);color:var(--neon-cyan)}
.tile:focus-visible .tile__ic{color:var(--neon-cyan)}
.tile:focus-visible h3{color:#fff}
.tile:focus-visible p{color:var(--ai-100)}
.tile:focus-visible .tile__arrow{transform:translate(3px,-3px)}
@media (hover:hover){
  .tile:hover .tile__en{color:var(--ai-200)}
  .tile:hover .badge{background:var(--ai-950);color:var(--neon-cyan)}
  .tile:hover .tile__ic{color:var(--neon-cyan)}
  .tile:hover h3{color:#fff}
  .tile:hover p{color:var(--ai-100)}
  .tile:hover .tile__arrow{transform:translate(3px,-3px)}
}

/* ---------- Privacy ---------- */
.privacy{position:relative;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;background:var(--surface-night);color:var(--text-on-night);--slant:6vw}
.privacy__in{padding-top:calc(var(--section-y) + 6vw);padding-bottom:var(--section-y);display:grid;grid-template-columns:auto minmax(0,1fr);gap:72px}
.privacy h2{font:700 clamp(36px,4vw,56px)/1.5 var(--font-mincho);color:#fff;height:min(640px,52vw)}
.privacy h2 em{color:var(--neon-cyan)}
.privacy__body{display:flex;flex-direction:column;justify-content:space-between;gap:56px}
.privacy__text{margin-top:24px;max-width:640px;font:500 18px/2.1 var(--font-mincho);letter-spacing:.04em}
.privacy__claim{margin-top:20px;max-width:640px;font:700 clamp(20px,2vw,26px)/1.7 var(--font-mincho);letter-spacing:.04em;color:#fff}
.privacy__claim .nw{white-space:nowrap}
.privacy__claim .glow{color:var(--neon-cyan);text-shadow:var(--glow-text)}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.points li{border-top:1px solid var(--border-night);padding-top:24px}
.points__top{display:flex;justify-content:space-between;align-items:center}
.points__n{font:800 48px/1 var(--font-display);color:var(--neon-cyan)}
.points .ic{width:22px;height:22px;color:var(--text-on-night-muted)}
.points h3{font:700 18px/1.4 var(--font-sans);color:#fff;margin-top:18px}
.points p{font:400 13px/1.85 var(--font-sans);color:var(--text-on-night-muted);margin-top:10px}
/* 12px → 13px: #8E9AC4 on night is used only at 13px+ (contrast rule) */
.privacy__note{margin-top:32px;font:400 13px/1.8 var(--font-sans);color:var(--text-on-night-muted)}

/* ---------- About ---------- */
.about{position:relative;overflow:hidden}
.about__word{position:absolute;right:-20px;top:60px;font-size:min(18vw,260px);color:transparent;-webkit-text-stroke:1px var(--ai-100);white-space:nowrap;pointer-events:none}
.about__in{position:relative;padding-top:var(--section-y);padding-bottom:var(--section-y);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
.about h2{margin-top:20px;word-break:keep-all;overflow-wrap:anywhere;font:700 clamp(30px,3.4vw,44px)/1.5 var(--font-mincho);letter-spacing:.04em;color:var(--text-strong)}
.about h2 em{color:var(--ai-600);white-space:nowrap}
.plate{margin-top:40px;display:inline-flex;align-items:baseline;gap:12px;padding:14px 18px;background:var(--surface-night);font:800 22px/1 var(--font-display);letter-spacing:.08em;color:#fff}
.plate span{color:var(--neon-cyan)}
.about__body{font:400 15px/2.1 var(--font-sans);color:var(--text-body)}
.values{margin-top:40px}
.values li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--border-subtle)}
.values__n{font:500 12px/1.6 var(--font-mono);color:var(--ai-500);letter-spacing:.14em}
.values h3{font:700 16px/1.5 var(--font-sans);color:var(--text-strong)}
.values p{font:400 14px/1.9 var(--font-sans);color:var(--text-muted);margin-top:6px}

/* ---------- Final CTA ---------- */
.cta{background:var(--surface-brand);color:#fff;--slant:5vw}
.cta__in{padding-top:calc(96px + 5vw);padding-bottom:96px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta__in>div{min-width:0}
.cta h2{word-break:keep-all;overflow-wrap:anywhere;font:700 clamp(28px,3.2vw,44px)/1.5 var(--font-mincho);letter-spacing:.04em}
.cta p{margin-top:12px;font:400 15px/1.8 var(--font-sans);color:var(--ai-100)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ai-950);color:var(--text-on-night-muted);border-top:1px solid var(--border-night)}
.site-footer__in{padding-top:56px;padding-bottom:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.site-footer__brand,.site-footer__brand:hover{text-decoration:none}
/* 11px → 13px for #8E9AC4 contrast rule */
.site-footer__note{margin-top:18px;font:400 13px/1.6 var(--font-sans);white-space:nowrap}
.site-footer__nav{display:flex;gap:24px;font:500 13px var(--font-sans)}
.site-footer__nav a{color:var(--text-on-night)}
.site-footer__nav a:hover{color:#fff}
.site-footer__copy{padding-top:18px;padding-bottom:28px;border-top:1px solid var(--border-night);font:500 13px var(--font-mono);letter-spacing:.12em}

/* ---------- ≤1024px ---------- */
@media (max-width:1024px){
  .hero__in{grid-template-columns:minmax(0,1fr);gap:64px}
  .hero__visual{--s:.8;width:calc(480px * var(--s));height:calc(560px * var(--s));margin:0 auto}
  .hero__stage{inset:auto;top:0;left:0;width:480px;height:560px;transform:scale(var(--s));transform-origin:top left}
  .tools__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .privacy__in{grid-template-columns:minmax(0,1fr);gap:48px}
  .privacy h2{writing-mode:horizontal-tb;height:auto}
  .points{grid-template-columns:minmax(0,1fr);gap:32px}
  .about__in{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:760px){
  .site-nav{display:none}
  .site-header__in{justify-content:space-between;gap:16px}
}
/* ---------- ≤640px ---------- */
@media (max-width:640px){
  .hero__visual{--s:.66}
  .tools__grid{grid-template-columns:minmax(0,1fr)}
  .tile{min-height:0}
  .site-footer__note{white-space:normal}
}
@media (max-width:420px){
  .hero__visual{--s:.56}
  .hero h1 .nw{white-space:normal}
  .site-header .wordmark{font-size:18px}
  .site-header .btn--sm{padding:0 12px;gap:8px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}