/* Light, Apple-inspired theme layered over the original Tailwind markup.
   Palette: white / #f5f5f7 surfaces, #1d1d1f text, single blue accent (#0071e3).
   Selectors are prefixed with `body` so they win over Tailwind's runtime-injected CSS.
   To revert to the old dark look, remove the <link> to this file and restore the
   primary/secondary colors in each page's tailwind.config. */
:root {
  --ap-bg: #ffffff;
  --ap-surface: #f5f5f7;
  --ap-text: #1d1d1f;
  --ap-text-2: #333336;
  --ap-text-3: #515154;
  --ap-text-4: #6e6e73;
  --ap-blue: #0071e3;
  --ap-link: #0066cc;
  --ap-line: rgba(0, 0, 0, 0.1);
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans SC", "Noto Sans JP", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body, body[data-lang] {
  background-color: var(--ap-bg) !important;
  color: var(--ap-text) !important;
  font-family: var(--ap-font) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}
body h1, body h2, body h3, body h4 { font-family: var(--ap-font); letter-spacing: -0.022em; line-height: 1.12; color: var(--ap-text); }
body h1, body h2 { font-weight: 600; }

/* ---------- surfaces ---------- */
body .bg-\[\#0A0A1F\], body .bg-\[\#0A0A1F\]\/80 { background-color: var(--ap-bg); }
body .bg-\[\#0F0F2F\], body .bg-\[\#050510\] { background-color: var(--ap-surface); }
body .bg-\[\#1A1A3F\], body .bg-\[\#252550\], body .bg-\[\#2A2A5F\], body .bg-\[\#3A3A6F\] {
  background-color: var(--ap-surface); border-color: transparent;
}
body .bg-\[\#0F0F2F\] .bg-\[\#1A1A3F\], body .bg-\[\#0F0F2F\] .bg-\[\#252550\],
body .bg-\[\#1A1A3F\] .bg-\[\#2A2A5F\], body .bg-\[\#252550\] .bg-\[\#2A2A5F\] { background-color: #ffffff; }
body .bg-gray-700, body .bg-gray-600 { background-color: #e8e8ed; }
body .bg-black\/50 { background-color: rgba(0, 0, 0, 0.35); }
body .bg-white\/10, body .bg-white\/20 { background-color: rgba(0, 0, 0, 0.05); }

/* ---------- text ---------- */
body .text-white { color: var(--ap-text); }
body .text-gray-300 { color: var(--ap-text-2); }
body .text-gray-400 { color: var(--ap-text-3); }
body .text-gray-500 { color: var(--ap-text-4); }
body .text-primary, body .text-secondary, body .text-blue-400, body .text-purple-400 { color: var(--ap-link); }
body .text-green-400 { color: #248a3d; }
body .text-red-500 { color: #d70015; }
body a.text-primary:hover, body .hover\:text-white:hover, body .hover\:text-primary:hover { color: var(--ap-blue); }
body .hover\:underline:hover { text-decoration: underline; }

/* gradient text -> solid ink */
body .bg-clip-text, body .gradient-text {
  background: none !important; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--ap-text); color: var(--ap-text) !important;
}

/* ---------- accent fills / buttons ---------- */
body a.bg-gradient-to-r, body button.bg-gradient-to-r, body a.bg-gradient-to-br, body button.bg-gradient-to-br,
body .btn-primary, body .gradient-btn {
  background-image: none !important; background-color: var(--ap-blue) !important; color: #fff !important;
}
body a.bg-gradient-to-r *, body button.bg-gradient-to-r *, body .btn-primary * { color: #fff; }
body .bg-primary { background-color: var(--ap-blue); color: #fff; }
body .text-black { color: #fff; }
body .bg-white .text-black, body .bg-white.text-black { color: var(--ap-text); }
body .btn-primary:hover, body .bg-primary:hover { background-color: #0077ed !important; }
body .btn-ghost, body .border-primary { color: var(--ap-link); border-color: var(--ap-link); }
body .btn-ghost:hover { background: rgba(0, 113, 227, 0.08); }
body .rounded-button, body .\!rounded-button { border-radius: 980px !important; }
body .shadow-primary\/50, body .shadow-primary\/20, body .shadow-lg, body .shadow-xl, body .shadow-2xl { box-shadow: none; }

/* soft tinted accents (icon discs, tags) */
body .bg-primary\/20, body .bg-primary\/10, body .bg-primary\/30, body .bg-secondary\/20, body .bg-secondary\/30,
body .bg-blue-500\/20, body .bg-purple-500\/20 { background-color: rgba(0, 113, 227, 0.1); }
body .bg-green-500\/20 { background-color: rgba(36, 138, 61, 0.12); }

/* decorative gradients (hero overlays, card washes) -> flat/transparent */
body [class*="from-primary"]:not(.bg-clip-text):not([class*="bg-gradient-to-r"]),
body [class*="from-secondary"]:not([class*="bg-gradient-to-r"]),
body [class*="from-\[\#"], body [class*="from-blue"] { --tw-gradient-from: rgba(245, 245, 247, 0) var(--tw-gradient-from-position); --tw-gradient-to: rgba(245, 245, 247, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body .via-\[\#0A0A1Fdd\], body .via-\[\#0A0A1F80\] { --tw-gradient-stops: rgba(255,255,255,0.0), rgba(255,255,255,0.0); }

/* ---------- borders ---------- */
body .border-gray-700, body .border-gray-800, body .border-gray-600, body .border-t, body .border-b { border-color: var(--ap-line); }

/* ---------- radii: Apple keeps rectangles <= 12px ---------- */
body .rounded-lg, body .rounded-xl, body .rounded-2xl, body .rounded-3xl { border-radius: 12px; }

/* ---------- navigation: translucent light glass ---------- */
body header.fixed {
  background-color: rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ap-line);
}
body header .nav-link { font-size: 0.875rem; letter-spacing: -0.01em; color: var(--ap-text); opacity: 0.85; }
body header .nav-link:hover { opacity: 1; color: var(--ap-text); }
body .language-options, body .language-dropdown, body #mobile-menu {
  background: rgba(255, 255, 255, 0.96); color: var(--ap-text); border: 1px solid var(--ap-line); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
body .language-options *, body .language-dropdown a, body .language-option { color: var(--ap-text); }
body .language-option:hover, body .language-dropdown a:hover { background: var(--ap-surface); }

/* ---------- custom classes defined in each page's <style> ---------- */
body .card-hover, body .glass-card, body .tech-card, body .gradient-bg, body .product-card, body .service-card,
body .feature-card, body .job-card, body .press-card, body .resource-card, body .testimonial-card, body .cookie-section, body .spec-table, body .tech-icon {
  background: var(--ap-surface) !important; border: none !important; box-shadow: none !important; backdrop-filter: none;
}
body .card-hover:hover, body .glass-card:hover, body .feature-card:hover, body .job-card:hover, body .press-card:hover { transform: translateY(-2px); box-shadow: 3px 5px 30px rgba(0, 0, 0, 0.12) !important; }
body .section-divider, body .divider { background: var(--ap-line) !important; }
body .code-block { background: #1d1d1f; border: none; color: #f5f5f7; }
body .arch-diagram { background: var(--ap-surface); border: none; }

/* ---------- forms ---------- */
body input, body textarea, body select, body .form-input {
  background-color: #fff !important; color: var(--ap-text) !important; border: 1px solid #d2d2d7 !important; border-radius: 11px;
}
body input::placeholder, body textarea::placeholder { color: var(--ap-text-4); }
body input:focus, body textarea:focus, body select:focus, body .form-input:focus {
  outline: none; border-color: var(--ap-blue) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}

/* ---------- accessibility ---------- */
body :focus-visible { outline: 2px solid var(--ap-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body * { animation: none !important; transition: none !important; } }

/* ---------- hero: clean light field instead of the dark space photo ---------- */
body section[style*="background-image"] { background-image: none !important; background-color: var(--ap-bg) !important; }
body section > .absolute.inset-0.bg-gradient-to-r, body .hero-particles, body #tech-particles { display: none; }
body section[style*="background-image"] h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.03em; font-weight: 600; }
body [class*="bg-gradient-to"]:not(a):not(button):not(.bg-clip-text) { background-image: none; background-color: rgba(0, 113, 227, 0.08); }
body .bg-\[\#1A1A3F\]\/50, body .bg-\[\#0A0A1F\]\/50, body .bg-\[\#0A0A1F\]\/90 { background-color: var(--ap-surface); }
body .tab-button.active { color: var(--ap-blue); background: rgba(0, 113, 227, 0.08); }
body .pagination-button.active { color: #fff; }