/* ============================================================
   SHIKARI LP — Sharp Editorial Design (Dark + Theme Color)
   黒×白 + LPごとのテーマカラー
   --lp-accent      : 各LPのメインアクセント色
   --lp-accent-dim  : アクセントの透過版（背景・tint用）
   ============================================================ */

/* ---- 1. Fallback (各LPのインラインstyleで上書きする) ---- */
:root {
  --lp-accent:     #8a9aa8;
  --lp-accent-dim: rgba(138,154,168,.12);
}

/* ---- 2. Design System Override — Dark Mode ---- */
:root {
  --bg-primary:       #060608;
  --bg-secondary:     #0c0d12;
  --bg-card:          rgba(255,255,255,.03);
  --bg-card-hover:    rgba(255,255,255,.055);
  --text-primary:     #f0ece8;
  --text-secondary:   #787888;
  --text-muted:       #3c3c50;
  --text-accent:      var(--lp-accent);
  --accent-start:     var(--lp-accent);
  --accent-end:       var(--lp-accent);
  --accent-grad:      linear-gradient(90deg, var(--lp-accent), var(--lp-accent));
  --accent-grad-text: linear-gradient(90deg, var(--lp-accent), color-mix(in srgb, var(--lp-accent) 60%, #fff));
  --border:           rgba(255,255,255,.08);
  --border-hover:     rgba(255,255,255,.16);
  --radius-sm:        0px;
  --radius-md:        0px;
  --radius-lg:        0px;
  --radius-xl:        0px;
}

/* ---- 3. Body ---- */
body {
  background-color: #060608 !important;
  color: #f0ece8 !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- 4. Nav: dark glass ---- */
header nav,
nav.nav,
nav#nav,
nav#main-nav {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  padding: .85rem 2rem !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(6,6,8,.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  transition: background .3s ease, padding .3s ease !important;
}

header nav.scrolled,
nav.nav.scrolled,
nav#nav.scrolled,
nav#main-nav.scrolled {
  background: rgba(6,6,8,.97) !important;
  padding: .65rem 2rem !important;
}

/* Nav inner wrapper — both naming conventions */
.nav-inner,
.nav__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
}

/* Logo: white SVG — no invert needed on dark bg */
.nav-logo img,
.nav__logo img {
  height: 34px !important;
  width: auto !important;
  filter: none !important;
  display: block !important;
}

/* Nav CTA — both naming conventions */
.nav-cta,
.nav__cta,
nav .btn {
  border-radius: 0 !important;
  background: var(--lp-accent) !important;
  color: #060608 !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  padding: .6em 1.5em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}

.nav-cta:hover,
.nav__cta:hover,
nav .btn:hover {
  opacity: .85 !important;
}

/* All buttons: sharp corners */
.btn,
[class*="cta-btn"],
[class*="btn--"] {
  border-radius: 0 !important;
}

/* ---- 5. Hero: left-aligned editorial ---- */
.hero {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 150px 80px 110px !important;
  min-height: 88vh !important;
  position: relative;
  overflow: hidden;
  background: #060608 !important;
}

/* Remove gradient orbs */
.hero::before {
  background: none !important;
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.06) !important;
  pointer-events: none;
}

/* Accent bottom rule */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.06);
}

/* Hero tag/label/eyebrow — all naming variations */
.hero-tag,
.hero__tag,
.hero-label,
.hero-eyebrow,
[class*="hero-tag"],
[class*="hero__tag"],
[class*="hero-label"],
[class*="hero-eyebrow"] {
  border-radius: 0 !important;
  border: 1px solid var(--lp-accent-dim) !important;
  color: var(--lp-accent) !important;
  background: var(--lp-accent-dim) !important;
  letter-spacing: .2em !important;
  font-size: 10px !important;
  padding: 5px 14px !important;
  text-transform: uppercase;
  display: inline-block;
}

.hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.05em !important;
  max-width: 860px;
  margin-bottom: 36px !important;
  color: #f0ece8 !important;
}

.hero-sub {
  text-align: left !important;
  max-width: 540px;
  line-height: 1.9 !important;
  font-weight: 300 !important;
  color: #787888 !important;
}

.hero-cta {
  border-radius: 0 !important;
  padding: 16px 36px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  background: var(--lp-accent) !important;
  color: #060608 !important;
  box-shadow: none !important;
  transition: opacity .2s ease, transform .2s ease !important;
}

.hero-cta:hover {
  opacity: .88 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px var(--lp-accent-dim) !important;
}

.hero-note {
  font-size: 11px !important;
  color: #3c3c50 !important;
  letter-spacing: .04em;
}

/* ---- 6. Proof Bar ---- */
.proof-bar {
  background: #0c0d12 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 32px 80px !important;
}

.proof-num {
  font-size: 2.6rem !important;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
  color: var(--lp-accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--lp-accent) !important;
}

.proof-label {
  letter-spacing: .1em !important;
  font-size: 10px !important;
  color: #3c3c50 !important;
  text-transform: uppercase;
}

.proof-divider {
  background: rgba(255,255,255,.07) !important;
}

/* ---- 7. Sections ---- */
section {
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section-label {
  display: flex !important;
  align-items: center;
  gap: 14px;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  color: var(--lp-accent) !important;
  margin-bottom: 18px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--lp-accent);
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(1.9rem, 4vw, 3.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.1 !important;
  margin-bottom: 14px !important;
  color: #f0ece8 !important;
}

.section-lead {
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: #787888 !important;
  font-weight: 300 !important;
}

/* ---- 8. Pain cards ---- */
.pain {
  background: #0c0d12 !important;
}

.pain-card {
  border-radius: 0 !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-left: 2px solid var(--lp-accent-dim) !important;
  box-shadow: none !important;
  transition: border-left-color .2s ease, background .2s ease !important;
}

.pain-card::before {
  height: 0 !important;
  display: none !important;
}

.pain-card:hover {
  transform: none !important;
  background: var(--lp-accent-dim) !important;
  border-color: rgba(255,255,255,.1) !important;
  border-left-color: var(--lp-accent) !important;
}

.pain-icon {
  border-radius: 0 !important;
  background: var(--lp-accent-dim) !important;
  width: 40px !important;
  height: 40px !important;
}

/* ---- 9. Solution pillars ---- */
.pillar {
  border-radius: 0 !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-left: 2px solid var(--lp-accent-dim) !important;
  transition: transform .2s ease, border-left-color .2s ease !important;
  box-shadow: none !important;
}

.pillar:hover {
  transform: translateX(4px) !important;
  border-left-color: var(--lp-accent) !important;
  background: var(--lp-accent-dim) !important;
}

.pillar-num {
  font-size: 11px !important;
  letter-spacing: .15em !important;
  color: var(--lp-accent) !important;
  font-weight: 700 !important;
}

/* ---- 10. Features ---- */
.features {
  background: #0c0d12 !important;
}

.feature-card {
  border-radius: 0 !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-top: 2px solid transparent !important;
  transition: border-top-color .25s ease, background .25s ease !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.feature-card:hover {
  transform: none !important;
  background: var(--lp-accent-dim) !important;
  border-color: rgba(255,255,255,.1) !important;
  border-top-color: var(--lp-accent) !important;
}

.feature-icon {
  border-radius: 0 !important;
  background: var(--lp-accent-dim) !important;
}

.feature-num {
  font-size: 10px !important;
  letter-spacing: .2em !important;
  color: var(--lp-accent) !important;
}

/* ---- 11. Flow steps ---- */
.flow-step-num {
  font-size: 10px !important;
  letter-spacing: .2em !important;
  font-weight: 700 !important;
  color: var(--lp-accent) !important;
}

/* ---- 12. FAQ ---- */
.faq-item {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.faq-item:first-child {
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

.faq-q {
  font-weight: 700 !important;
  letter-spacing: -.01em;
  padding: 22px 0 !important;
  color: #f0ece8 !important;
  cursor: default;
}

.faq-a {
  padding: 0 0 22px !important;
  color: #787888 !important;
  font-size: .95rem !important;
  line-height: 1.85 !important;
}

/* ---- 13. Final CTA ---- */
.cta-final {
  background: #0c0d12 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

.cta-final-box {
  border-radius: 0 !important;
  border: 1px solid var(--lp-accent-dim) !important;
  border-top: 2px solid var(--lp-accent) !important;
  background: transparent !important;
  padding: 56px 64px !important;
}

.cta-btn {
  border-radius: 0 !important;
  background: var(--lp-accent) !important;
  color: #060608 !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  transition: opacity .2s ease, transform .2s ease !important;
  box-shadow: none !important;
}

.cta-btn:hover {
  opacity: .85 !important;
  transform: translateY(-2px) !important;
}

/* ---- 14. Footer ---- */
footer {
  background: #060608 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  padding: 2rem 0 1.5rem !important;
}

.footer-inner,
.footer__inner {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1.2rem 2rem !important;
}

.footer-logo img,
.footer__logo img {
  height: 28px !important;
  width: auto !important;
  opacity: .6 !important;
  display: block !important;
  filter: none !important;
}

.footer-info,
.footer__info {
  font-size: .76rem !important;
  color: #3c3c50 !important;
  line-height: 1.8 !important;
}

.footer-info p,
.footer__info p {
  margin: 0 !important;
}

/* Reset footer nav from global nav styles */
footer nav,
.footer-links,
.footer__links {
  position: static !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
  z-index: auto !important;
  display: flex !important;
  gap: 1.2rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.footer-links a,
.footer__links a {
  font-size: .76rem !important;
  color: #3c3c50 !important;
  text-decoration: none !important;
  transition: color .2s !important;
}

.footer-links a:hover,
.footer__links a:hover {
  color: var(--lp-accent) !important;
}

.footer-copy,
.footer__copy {
  font-family: "Inter", sans-serif !important;
  font-size: .68rem !important;
  color: #2e2e42 !important;
  width: 100% !important;
  text-align: center !important;
  padding-top: 1.2rem !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  margin-top: .5rem !important;
}

/* Footer extra elements — hide complex multi-column in favor of unified layout */
.footer-top,
.footer-bottom,
.footer-tagline,
.footer-col,
.footer-col h4,
.footer-brand p,
.footer-brand,
.footer-tag,
address {
  all: unset !important;
  display: revert !important;
}

.footer-col ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.footer-col li a { font-size: .76rem !important; color: #3c3c50 !important; }
.footer-col li a:hover { color: var(--lp-accent) !important; }

/* ---- 15. Gradient text ---- */
.gradient-text {
  background: linear-gradient(90deg, var(--lp-accent), color-mix(in srgb, var(--lp-accent) 50%, #fff 50%)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ---- 16. SVG Pictograms ---- */
[class*="-icon"] svg,
[class*="icon"] svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: #787888;
  transition: stroke .2s ease;
}

[class*="card"]:hover [class*="-icon"] svg,
.pillar:hover [class*="-icon"] svg {
  stroke: var(--lp-accent);
}

.why-icon svg {
  width: 24px;
  height: 24px;
}

/* ---- 17. Breadcrumb ---- */
.breadcrumb a,
.breadcrumb li {
  color: #3c3c50 !important;
}

/* ---- 18. Section Heading — alias for section-title ---- */
.section-heading {
  font-size: clamp(1.9rem, 4vw, 3.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.1 !important;
  margin-bottom: 14px !important;
  color: #f0ece8 !important;
}

/* ---- 19. Section Label — editorial line style, no pill ---- */
.section-label {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ---- 20. Primary Buttons — all naming variants ---- */
.btn-primary,
.btn--primary {
  border-radius: 0 !important;
  background: var(--lp-accent) !important;
  color: #060608 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
  transition: opacity .2s ease, transform .2s ease !important;
}
.btn-primary:hover,
.btn--primary:hover {
  opacity: .88 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px var(--lp-accent-dim) !important;
}

/* ---- 21. Outline / Ghost / Secondary Buttons ---- */
.btn-outline,
.btn--outline,
.btn-ghost,
.btn-secondary {
  border-radius: 0 !important;
  background: transparent !important;
  color: #f0ece8 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}
.btn-outline:hover,
.btn--outline:hover,
.btn-ghost:hover,
.btn-secondary:hover {
  border-color: rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Size modifiers — no rounding */
.btn-lg, .btn--lg,
.btn-sm, .btn--sm {
  border-radius: 0 !important;
}

/* ---- 22. CTA Section — all naming variants ---- */
#cta-final,
.cta-section {
  background: #0c0d12 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Inner CTA box — all naming variants (like .cta-final-box) */
.cta-final-inner,
.cta-box {
  border-radius: 0 !important;
  border: 1px solid var(--lp-accent-dim) !important;
  border-top: 2px solid var(--lp-accent) !important;
  background: transparent !important;
  padding: 56px 64px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

@media (max-width: 960px) {
  .cta-final-inner, .cta-box { padding: 40px 40px !important; }
}
@media (max-width: 640px) {
  .cta-final-inner, .cta-box { padding: 32px 24px !important; }
}

/* ---- 23. Badges / Tags / Pills — force sharp corners ---- */
.hero-badge,
.price-badge,
.badge,
.result-tag,
.feature-tag,
.nav-tag,
.area-tag,
.clients__badge,
.faq-item__q-badge,
[class*="-badge"]:not(span),
[class*="-pill"] {
  border-radius: 0 !important;
}

/* ---- 24. Responsive ---- */
@media (max-width: 960px) {
  .hero {
    padding: 130px 48px 90px !important;
  }
  .proof-bar {
    padding: 24px 48px !important;
  }
  .cta-final-box {
    padding: 40px 40px !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 110px 24px 72px !important;
    min-height: auto !important;
  }
  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    letter-spacing: -0.04em !important;
  }
  .proof-bar {
    padding: 20px 24px !important;
  }
  .cta-final-box {
    padding: 32px 24px !important;
  }
}