/* ==========================================================================
   XDR PlusOne — Design Tokens
   Brand: SUPERNET digital 株式会社 / Sophos XDR managed security service
   B2B, JP, calm/trustworthy/specialist tone. Light theme only.
   ========================================================================== */

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/NotoSansJP-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/NotoSansJP-Regular.ttf") format("truetype");
}
@font-face { font-family: "Noto Sans JP"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/NotoSansJP-Regular.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans JP"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/NotoSansJP-Medium.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans JP"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/NotoSansJP-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans JP"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/NotoSansJP-Bold.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans JP"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/NotoSansJP-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans JP"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("../fonts/NotoSansJP-Black.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans JP"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/NotoSansJP-Light.ttf") format("truetype"); }

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
}

:root {
  --brand-purple:       #5B3FBF;
  --brand-purple-700:   #4A32A0;
  --brand-purple-900:   #2E1F66;
  --brand-purple-100:   #EEEAFB;
  --brand-purple-50:    #F6F3FE;
  --brand-purple-light: #B7A6FF;

  --brand-navy:         #1E3A8A;
  --brand-navy-700:     #1A317A;
  --brand-navy-100:     #E2E8F4;

  --gray-950: #0F1226;
  --gray-900: #1A1D33;
  --gray-800: #2A2D45;
  --gray-700: #404465;
  --gray-600: #5C6184;
  --gray-500: #7A7FA0;
  --gray-400: #A6AAC2;
  --gray-300: #CFD2E0;
  --gray-200: #E5E7F0;
  --gray-100: #F1F2F7;
  --gray-50:  #F8F9FC;
  --white:    #FFFFFF;

  --color-bg:           #FFFFFF;
  --color-bg-alt:       var(--brand-purple-50);
  --color-bg-muted:     var(--gray-100);
  --color-bg-dark:      var(--brand-purple-900);

  --color-fg:           var(--gray-950);
  --color-fg-muted:     var(--gray-600);
  --color-fg-subtle:    var(--gray-500);
  --color-fg-on-dark:   #FFFFFF;
  --color-fg-on-purple: #FFFFFF;

  --color-border:       var(--gray-200);
  --color-border-strong:var(--gray-300);
  --color-border-brand: var(--brand-purple);

  --color-accent:       var(--brand-purple);
  --color-accent-fg:    #FFFFFF;

  --color-danger:       #C8362B;
  --color-danger-bg:    #FBECEA;
  --color-danger-border:#F2C7C2;
  --color-warning:      #B8530B;
  --color-warning-bg:   #FDF1E2;

  --color-success:      #1E7C5A;
  --color-success-bg:   #E4F2EB;
  --color-info:         var(--brand-navy);
  --color-info-bg:      var(--brand-navy-100);

  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-jp);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-eyebrow:  12px;
  --text-xs:       12px;
  --text-sm:       14px;
  --text-base:     16px;
  --text-md:       17px;
  --text-lg:       18px;
  --text-xl:       20px;
  --text-2xl:      22px;
  --text-3xl:      26px;
  --text-4xl:      32px;
  --text-5xl:      40px;
  --text-6xl:      52px;
  --text-7xl:      64px;

  --lh-tight:    1.25;
  --lh-snug:     1.45;
  --lh-normal:   1.7;
  --lh-relaxed:  1.85;

  --ls-jp-body:    0.02em;
  --ls-jp-heading: 0.01em;
  --ls-en-eyebrow: 0.16em;
  --ls-tight:      -0.01em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --section-py-sm: 80px;
  --section-py:    120px;
  --section-py-lg: 160px;
  --num-display-2: clamp(80px, 9vw, 140px);
  --shadow-dashboard: 0 30px 80px rgba(15, 18, 38, 0.5);
  --content-max:    1200px;
  --content-narrow: 880px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --border-thin:   1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);
  --border-brand:  1px solid var(--brand-purple);

  --shadow-xs: 0 1px 2px rgba(15, 18, 38, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 18, 38, 0.05), 0 1px 2px rgba(15, 18, 38, 0.04);
  --shadow-md: 0 6px 16px rgba(15, 18, 38, 0.06), 0 2px 4px rgba(15, 18, 38, 0.04);
  --shadow-lg: 0 16px 32px rgba(15, 18, 38, 0.08), 0 4px 8px rgba(15, 18, 38, 0.04);
  --shadow-cta:0 8px 20px rgba(91, 63, 191, 0.25);
  --shadow-cta-lg: 0 18px 50px rgba(91, 63, 191, 0.35), 0 6px 14px rgba(91, 63, 191, 0.25);
  --shadow-focus: 0 0 0 3px rgba(91, 63, 191, 0.25);

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:   cubic-bezier(0.16, 1.2, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-cinema: 720ms;
  --dur-scene:  1200ms;

  --z-fixed-cta:  40;
  --z-header:     50;
  --z-modal:      80;
}

/* ============================ Base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-jp-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Accessible visually-hidden — content is read by screen readers and indexed by
   crawlers/LLMs but not painted on screen. Use for AEO supplemental phrasing. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.font-en, .eyebrow, .num { font-family: var(--font-en); }

.text-display {
  font-family: var(--font-jp);
  font-weight: var(--fw-black);
  font-size: clamp(36px, 5.2vw, var(--text-6xl));
  line-height: 1.3;
  letter-spacing: var(--ls-jp-heading);
  color: var(--color-fg);
  margin: 0;
}
.text-h1 { font-weight: var(--fw-bold); font-size: clamp(28px, 3.5vw, var(--text-5xl)); line-height: 1.35; letter-spacing: var(--ls-jp-heading); margin: 0; }
.text-h2 { font-weight: var(--fw-bold); font-size: clamp(24px, 2.8vw, var(--text-4xl)); line-height: 1.4; letter-spacing: var(--ls-jp-heading); margin: 0; }
.text-h3 { font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: 1.45; margin: 0; }
.text-h4 { font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: 1.5; margin: 0; }
.text-lead { font-size: var(--text-xl); line-height: 1.75; color: var(--color-fg-muted); font-weight: var(--fw-regular); }
.text-body { font-size: var(--text-md); line-height: var(--lh-normal); }
.text-small { font-size: var(--text-sm); line-height: var(--lh-snug); color: var(--color-fg-muted); }
.text-caption { font-size: var(--text-xs); line-height: var(--lh-snug); color: var(--color-fg-subtle); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-en-eyebrow);
  text-transform: uppercase;
  color: var(--brand-purple);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.num {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
.num-display {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: var(--text-7xl);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-purple);
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
}
.container-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 32px;
}
.section {
  padding: var(--section-py) 0;
}
.section--alt { background: var(--color-bg-alt); }
.section--muted { background: var(--color-bg-muted); }
.section--dark { background: var(--color-bg-dark); color: var(--color-fg-on-dark); }

.section-head { margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-bottom: 16px; }
.section-head .lead { color: var(--color-fg-muted); max-width: 720px; }
.section--dark .section-head .lead { color: rgba(255,255,255,0.75); }

@media (max-width: 768px) {
  :root {
    --section-py: 64px;
    --section-py-lg: 80px;
  }
  .container, .container-narrow { padding: 0 20px; }
}