/*
Theme Name: SJP Homepage Ver 4
Theme URI: https://example.com/sjp-homepage-ver-4
Author: Sotatek Japan
Description: SJP TOP Page ver.4 — Kinetic Confidence design system (VariantB).
Version: 4.0.0
Text Domain: sjp-homepage-ver-4
*/

/* Design tokens — Sotatek Japan Design System (colors_and_type.css) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Brand blues */
  --sjp-primary-blue: #1E40AF;
  --sjp-primary-blue-dark: #1E3A8A;
  --sjp-accent-blue: #3B82F6;
  --sjp-accent-blue-soft: #60A5FA;

  /* Links */
  --sjp-link: #2563EB;
  --sjp-link-hover: #1D4ED8;
  --sjp-link-active: #1E3A8A;
  --sjp-link-visited: #6D28D9;

  /* Text */
  --sjp-text-primary: #0F172A;
  --sjp-text-secondary: #475569;
  --sjp-text-body: #3F5069;
  --sjp-text-tertiary: #94A3B8;
  --sjp-text-slate: #334155;
  --sjp-text-white: #FFFFFF;
  --sjp-text-white-dim: rgba(255,255,255,0.70);
  --sjp-ink-hi: #0B1220;

  /* Backgrounds */
  --sjp-bg-white: #FFFFFF;
  --sjp-bg-gray: #F8FAFC;
  --sjp-bg-blue-subtle: #EFF6FF;
  --sjp-bg-dark: #0F172A;

  /* Section tints */
  --sjp-tint-sky:   #F0F7FF;
  --sjp-tint-mint:  #F1FAF6;
  --sjp-tint-peach: #FFF7F0;
  --sjp-tint-lilac: #F7F4FF;

  /* Borders */
  --sjp-border-default: #E2E8F0;
  --sjp-border-hover: #94A3B8;
  --sjp-border-input: #CBD5E1;

  /* Status */
  --sjp-error: #DC2626;
  --sjp-success: #16A34A;
  --sjp-warning: #D97706;

  /* Gradients */
  --sjp-gradient-accent: linear-gradient(90deg, #3B82F6 0%, #1E40AF 100%);
  --sjp-gradient-accent-light: linear-gradient(90deg, #60A5FA 0%, #93C5FD 100%);
  --sjp-gradient-card: linear-gradient(135deg, #1E40AF 0%, #0B2FA7 100%);

  /* Shadows */
  --sjp-shadow-card: 0 8px 16px rgba(0,0,0,0.03);
  --sjp-shadow-hover: 0 8px 24px rgba(30,64,175,0.10);
  --sjp-shadow-btn-inner: inset 0 0 4px rgba(255,255,255,0.7);

  /* Radius */
  --sjp-radius-sm: 4px;
  --sjp-radius-md: 8px;
  --sjp-radius-lg: 12px;
  --sjp-radius-xl: 16px;
  --sjp-radius-pill: 999px;

  /* Spacing (4px grid) */
  --sjp-space-1: 4px;
  --sjp-space-2: 8px;
  --sjp-space-3: 12px;
  --sjp-space-4: 16px;
  --sjp-space-5: 24px;
  --sjp-space-6: 32px;
  --sjp-space-7: 48px;
  --sjp-space-8: 64px;
  --sjp-space-9: 80px;
  --sjp-space-10: 120px;

  /* Fonts */
  --sjp-font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --sjp-font-latin: "Inter", "Noto Sans JP", system-ui, sans-serif;

  /* Type scale */
  --sjp-h1-size: 56px;
  --sjp-h2-size: 40px;
  --sjp-h3-size: 36px;
  --sjp-h4-size: 28px;
  --sjp-h5-size: 22px;
  --sjp-sh1-size: 20px;
  --sjp-sh2-size: 18px;
  --sjp-body-size: 16px;
  --sjp-sm-size: 14px;
  --sjp-xs-size: 12px;
  --sjp-eyebrow-size: 15px;

  /* Line heights */
  --sjp-line-tight: 1.2;
  --sjp-line-dense: 1.5;
  --sjp-line-body: 1.7;

  /* Tracking */
  --sjp-track-eyebrow: 0.14em;

  /* Ornaments */
  --sjp-ornament-soft: #DBEAFE;
  --sjp-ornament-deep: #BFDBFE;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-body-size);
  line-height: var(--sjp-line-body);
  color: var(--sjp-text-body);
  background: var(--sjp-bg-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* Scroll-snap targets */
.sjp-snap-section { scroll-snap-align: start; }
.sjp-no-snap      { scroll-snap-align: none; }
.sjp-scrolljack-wrap { scroll-snap-align: start; }

/* Section header utility */
.sjp-section-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 44px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.sjp-section-header.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sjp-section-header__eyebrow {
  font-family: var(--sjp-font-latin);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--sjp-accent-blue);
  text-transform: uppercase;
}
.sjp-section-header__eyebrow--dark { color: #93C5FD; }
.sjp-section-header__title {
  font-family: var(--sjp-font-jp);
  font-weight: 700;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.25;
  color: var(--sjp-ink-hi);
  margin: 0;
  letter-spacing: -.01em;
}
.sjp-section-header__title--dark { color: #fff; }
.sjp-section-header__line {
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: var(--sjp-gradient-accent);
}
.sjp-section-header__line--dark {
  background: linear-gradient(90deg,#60A5FA 0%,#93C5FD 100%);
}
.sjp-section-header__desc {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-body-size);
  line-height: 1.8;
  color: var(--sjp-text-body);
  max-width: 640px;
  margin: 4px 0 0;
}
.sjp-section-header__desc--dark { color: rgba(255,255,255,.75); }
.sjp-section-header--center { align-items: center; text-align: center; }
.sjp-section-header--center .sjp-section-header__desc { margin: 4px auto 0; }

.sjp-section-header__note {
  width: 100%;
  max-width: 1200px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #3F5069;
  margin: 0;
}

@media (max-width: 768px) {
  .sjp-section-header__note {
    font-size: 14px;
    line-height: 24px;
  }
}

/* Scroll reveal */
.sjp-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.sjp-reveal.is-visible { opacity: 1; transform: translateY(0); }
.sjp-reveal-x {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .9s ease, transform .9s ease;
}
.sjp-reveal-x.is-visible { opacity: 1; transform: translateX(0); }

/* Back to top */
.sjp-back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--sjp-primary-blue);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(30,64,175,.35);
  opacity: 0;
  transform: translateY(12px);
  transition: all .3s ease;
  pointer-events: none;
}
.sjp-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sjp-back-to-top:hover {
  background: #1E3A8A;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(30,64,175,.5);
}

/* Semantic text presets */
.sjp-eyebrow {
  font-family: var(--sjp-font-latin);
  font-size: var(--sjp-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--sjp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sjp-accent-blue);
}
.sjp-h1 {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-h1-size);
  font-weight: 700;
  line-height: var(--sjp-line-tight);
  color: var(--sjp-text-primary);
  margin: 0;
}
.sjp-h2 {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-h2-size);
  font-weight: 700;
  line-height: var(--sjp-line-tight);
  color: var(--sjp-text-primary);
  margin: 0;
}
.sjp-h3 {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-h3-size);
  font-weight: 700;
  line-height: var(--sjp-line-tight);
  color: var(--sjp-text-primary);
  margin: 0;
}
.sjp-h4 {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-h4-size);
  font-weight: 700;
  line-height: var(--sjp-line-dense);
  color: var(--sjp-text-primary);
  margin: 0;
}
.sjp-h5 {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-h5-size);
  font-weight: 700;
  line-height: var(--sjp-line-dense);
  color: var(--sjp-text-primary);
  margin: 0;
}
.sjp-sh1 {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-sh1-size);
  font-weight: 500;
  line-height: var(--sjp-line-dense);
  color: var(--sjp-text-primary);
}
.sjp-sh2 {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-sh2-size);
  font-weight: 500;
  line-height: var(--sjp-line-dense);
  color: var(--sjp-text-primary);
}
.sjp-body {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-body-size);
  font-weight: 400;
  line-height: var(--sjp-line-body);
  color: var(--sjp-text-body);
}
.sjp-sm {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-sm-size);
  font-weight: 400;
  line-height: var(--sjp-line-dense);
  color: var(--sjp-text-secondary);
}
.sjp-xs {
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-xs-size);
  font-weight: 400;
  line-height: var(--sjp-line-dense);
  color: var(--sjp-text-tertiary);
}

/* Accent lines */
.sjp-accent-line {
  display: block;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--sjp-gradient-accent);
}
.sjp-accent-line--light {
  background: var(--sjp-gradient-accent-light);
}
.sect-underline {
  width: 56px; height: 3px; border-radius: 2px;
  background: var(--sjp-gradient-accent);
}
.sjp-accent-line-short {
  display: block;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--sjp-gradient-accent);
}

/* Nav link with animated underline */
.sjp-nav-link {
  position: relative;
  font-family: var(--sjp-font-jp);
  font-size: var(--sjp-body-size);
  font-weight: 500;
  color: var(--sjp-text-primary);
  text-decoration: none;
  transition: color .2s ease;
}
.sjp-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--sjp-primary-blue);
  transition: width .25s ease;
}
.sjp-nav-link:hover {
  color: var(--sjp-primary-blue);
}
.sjp-nav-link:hover::after { width: 100%; }

/* External link with arrow */
.sjp-link-ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sjp-link);
  font-size: var(--sjp-sm-size);
  font-weight: 500;
  transition: color .2s ease;
}
.sjp-link-ext:hover { color: var(--sjp-link-hover); }
.sjp-link-ext::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}