/* Spyke Technologies Inc. — website stylesheet */
:root, [data-theme="light"] {
  --brand-navy: #0A346C; --brand-amber: #FFB800; --brand-slate: #708090; --brand-off-white: #F2F4F7;
  --color-bg: #F2F4F7; --color-surface: #FFFFFF; --color-surface-2: #F8F9FB; --color-surface-offset: #E8ECF2; --color-surface-dark: #0A346C; --color-divider: #D4DAE5; --color-border: oklch(from #0A346C l c h / 0.14);
  --color-text: #14213D; --color-text-muted: #4A5568; --color-text-faint: #8899AA; --color-text-inverse: #F2F4F7; --color-text-on-dark: #E8EDF5;
  --color-primary: #0A346C; --color-primary-hover: #0C3F82; --color-primary-active: #082859; --color-primary-light: #D6E2F5;
  --color-accent: #FFB800; --color-accent-hover: #E6A600; --color-accent-active: #CC9400; --color-accent-text: #5C3D00; --color-neutral: #708090;
  --shadow-sm: 0 1px 3px oklch(0.2 0.08 250 / 0.07); --shadow-md: 0 4px 16px oklch(0.2 0.08 250 / 0.10); --shadow-lg: 0 12px 40px oklch(0.2 0.08 250 / 0.14);
  --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --text-xs: clamp(.75rem, .70rem + .25vw, .875rem); --text-sm: clamp(.875rem, .80rem + .35vw, 1rem); --text-base: clamp(1rem, .95rem + .25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --content-default: 960px; --content-wide: 1200px;
  --transition-fast: 140ms cubic-bezier(.16,1,.3,1); --transition-interactive: 180ms cubic-bezier(.16,1,.3,1); --transition-enter: 320ms cubic-bezier(.16,1,.3,1);
  --font-display: 'Cabinet Grotesk', 'Arial Black', 'Helvetica Neue', sans-serif; --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
}
[data-theme="dark"] { --color-bg:#0D1421; --color-surface:#131D2E; --color-surface-2:#192436; --color-surface-offset:#1D2A3E; --color-surface-dark:#0A1929; --color-divider:#1E2D42; --color-border:oklch(from #4A6FA5 l c h / .25); --color-text:#D8E4F0; --color-text-muted:#7A96B0; --color-text-faint:#425A72; --color-text-inverse:#0D1421; --color-text-on-dark:#D8E4F0; --color-primary:#4A90D9; --color-primary-hover:#5AA0E8; --color-primary-active:#3A7DC9; --color-primary-light:#1A3050; --color-neutral:#5A7080; --shadow-sm:0 1px 3px oklch(0 0 0 / .25); --shadow-md:0 4px 16px oklch(0 0 0 / .35); --shadow-lg:0 12px 40px oklch(0 0 0 / .45); }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:none; text-size-adjust:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:80px; }
body { min-height:100dvh; line-height:1.65; font-family:var(--font-body); font-size:var(--text-base); color:var(--color-text); background:var(--color-bg); }
img,picture,svg { display:block; max-width:100%; height:auto; }
ul[role="list"],ol[role="list"] { list-style:none; }
button,input,textarea,select { font:inherit; color:inherit; }
h1,h2,h3,h4 { text-wrap:balance; line-height:1.1; font-family:var(--font-display); font-weight:800; }
p,li { text-wrap:pretty; max-width:72ch; }
a,button,[role="button"] { transition:color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), opacity var(--transition-interactive); }
button { cursor:pointer; background:none; border:none; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:var(--radius-sm); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .fade-in { opacity:1!important; transform:none!important; } }

.container { width:100%; max-width:var(--content-wide); margin-inline:auto; padding-inline:clamp(var(--space-4),5vw,var(--space-16)); }
.skip-link { position:absolute; top:var(--space-3); left:var(--space-3); z-index:1000; padding:var(--space-2) var(--space-4); color:var(--color-accent-text); background:var(--color-accent); border-radius:var(--radius-md); font-weight:700; font-size:var(--text-sm); text-decoration:none; transform:translateY(-120%); transition:transform var(--transition-enter); }
.skip-link:focus-visible { transform:translateY(0); }

.site-header { position:sticky; top:0; z-index:100; background:oklch(from var(--color-bg) l c h / .92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--color-border); transition:box-shadow var(--transition-enter); }
.site-header.scrolled { box-shadow:var(--shadow-md); }
.header-inner { display:flex; align-items:center; gap:var(--space-6); height:68px; }
.logo-link { display:flex; align-items:center; flex-shrink:0; line-height:1; text-decoration:none; }
.logo-img { display:block; width:auto; height:52px; }
.logo-img--dark { display:none; }
[data-theme="dark"] .logo-img--light { display:none; }
[data-theme="dark"] .logo-img--dark { display:block; }
.footer-logo .logo-img { height:45px; }
.main-nav { margin-left:auto; }
.main-nav ul { display:flex; gap:var(--space-6); }
.main-nav a { padding-block:var(--space-2); color:var(--color-text-muted); font-size:var(--text-sm); font-weight:500; letter-spacing:.02em; text-decoration:none; }
.main-nav a:hover,.main-nav a.active { color:var(--color-primary); }
.main-nav a.active { font-weight:700; }
.header-controls { display:flex; align-items:center; gap:var(--space-3); }
.lang-toggle { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:32px; padding:var(--space-1) var(--space-2); color:var(--color-text-muted); background:transparent; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; }
.lang-toggle:hover { color:var(--color-primary); background:var(--color-primary-light); border-color:var(--color-primary); }
.theme-toggle { display:flex; align-items:center; justify-content:center; width:38px; height:38px; color:var(--color-text-muted); background:transparent; border:1px solid transparent; border-radius:var(--radius-full); }
.theme-toggle:hover { color:var(--color-primary); background:var(--color-primary-light); }
.mobile-menu-btn { display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; padding:var(--space-2); }
.mobile-menu-btn span { display:block; width:22px; height:2px; background:var(--color-text); border-radius:2px; transition:transform var(--transition-enter),opacity var(--transition-fast); }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-nav { padding:var(--space-4) 0 var(--space-6); background:var(--color-surface); border-top:1px solid var(--color-border); }
.mobile-nav[hidden] { display:none; }
.mobile-nav a { display:block; padding:var(--space-3) clamp(var(--space-4),5vw,var(--space-16)); color:var(--color-text); border-left:3px solid transparent; font-size:var(--text-base); font-weight:500; text-decoration:none; }
.mobile-nav a:hover { color:var(--color-primary); border-left-color:var(--color-accent); }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:var(--space-3) var(--space-8); border:2px solid transparent; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive),transform var(--transition-interactive); }
.btn-primary { color:var(--color-accent-text); background:var(--color-accent); border-color:var(--color-accent); }
.btn-primary:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); box-shadow:0 4px 20px oklch(from var(--color-accent) l c h / .30); transform:translateY(-1px); }
.btn-ghost { color:#fff; background:transparent; border-color:rgba(255,255,255,.45); }
.btn-ghost:hover { background:oklch(from white l c h / .10); border-color:oklch(from white l c h / .70); }
.btn-large { min-height:56px; padding:var(--space-4) var(--space-10); font-size:var(--text-base); }

.section-label { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); color:var(--color-accent); font-family:var(--font-body); font-size:var(--text-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.section-label::before { content:''; display:block; width:28px; height:2px; flex-shrink:0; background:var(--color-accent); }
.section-heading { margin-bottom:var(--space-8); color:var(--color-text); font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.section-heading.light { color:#fff; }
.body-lead { max-width:68ch; margin-bottom:var(--space-6); color:var(--color-text); font-size:var(--text-lg); line-height:1.7; }
.body-text { max-width:68ch; margin-bottom:var(--space-5); color:var(--color-text-muted); font-size:var(--text-base); line-height:1.75; }
.fade-in { opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1); }
.fade-in.visible { opacity:1; transform:translateY(0); }

.hero { position:relative; display:flex; align-items:center; min-height:90vh; overflow:hidden; background:var(--brand-navy); }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-img { width:100%; height:100%; object-fit:cover; object-position:center 40%; filter:saturate(.8) brightness(.7); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,oklch(.18 .09 255 / .88) 0%,oklch(.18 .09 255 / .72) 50%,oklch(.15 .06 255 / .60) 100%); }
.hero-content { position:relative; z-index:1; max-width:var(--content-wide); padding-block:clamp(var(--space-20),12vw,var(--space-32)); }
.hero-eyebrow { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); color:var(--color-accent); font-size:var(--text-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.hero-eyebrow::before { content:''; display:block; width:32px; height:2px; background:var(--color-accent); }
.hero-heading { max-width:14ch; margin-bottom:var(--space-8); color:#fff; font-family:var(--font-display); font-size:var(--text-3xl); font-weight:800; letter-spacing:-.025em; line-height:1.06; }
.hero-sub { max-width:52ch; margin-bottom:var(--space-12); color:oklch(from white l c h / .75); font-size:var(--text-lg); line-height:1.65; }
.hero-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.hero-scroll-hint { position:absolute; bottom:var(--space-8); left:50%; z-index:1; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%); }
.scroll-line { display:block; width:1px; height:52px; background:linear-gradient(to bottom,oklch(from white l c h / .6),transparent); animation:scrollHint 1.8s ease-in-out infinite; }
@keyframes scrollHint { 0%,100% { opacity:.5; transform:scaleY(1); transform-origin:top; } 50% { opacity:1; transform:scaleY(1.2); } }

.section-about { padding-block:clamp(var(--space-16),8vw,var(--space-32)); background:var(--color-bg); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-12),6vw,var(--space-24)); align-items:start; }
.about-primary { position:sticky; top:calc(68px + var(--space-8)); padding-top:var(--space-2); }
.about-timeline { display:flex; flex-direction:column; margin-left:var(--space-4); border-left:2px solid var(--color-divider); }
.timeline-item { position:relative; padding:var(--space-5) var(--space-6) var(--space-8); }
.timeline-item::before { content:''; position:absolute; top:22px; left:-7px; width:12px; height:12px; background:var(--color-surface); border:2px solid var(--color-neutral); border-radius:var(--radius-full); }
.timeline-year { margin-bottom:var(--space-2); color:var(--color-primary); font-family:var(--font-display); font-size:var(--text-sm); font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.timeline-desc { color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.65; }

.section-services { position:relative; overflow:hidden; padding-block:clamp(var(--space-16),8vw,var(--space-32)); background:var(--brand-navy); }
.services-bg-art { position:absolute; inset:0; z-index:0; overflow:hidden; }
.services-bg-art img { width:100%; height:100%; object-fit:cover; opacity:.15; filter:saturate(.3); }
.section-services .container { position:relative; z-index:1; }
.services-intro { max-width:60ch; margin-bottom:clamp(var(--space-10),4vw,var(--space-16)); color:oklch(from white l c h / .65); font-size:var(--text-base); line-height:1.75; }
.services-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; background:oklch(from white l c h / .08); border:1px solid oklch(from white l c h / .08); border-radius:var(--radius-lg); }
.service-card { min-width:0; padding:clamp(var(--space-6),3vw,var(--space-10)); background:oklch(.12 .05 250 / .85); transition:background var(--transition-interactive); }
.service-card:hover { background:oklch(.16 .06 250 / .95); }
.service-number { margin-bottom:var(--space-4); color:oklch(from white l c h / .07); font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; letter-spacing:-.03em; line-height:1; user-select:none; }
.service-title { margin-bottom:var(--space-4); color:#fff; font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; line-height:1.25; }
.service-desc { max-width:none; color:oklch(from white l c h / .60); font-size:var(--text-sm); line-height:1.75; }

.section-how { padding-block:clamp(var(--space-16),8vw,var(--space-32)); background:var(--color-surface); }
.how-intro { max-width:55ch; margin-bottom:clamp(var(--space-10),4vw,var(--space-16)); color:var(--color-text-muted); font-size:var(--text-base); }
.how-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(var(--space-8),4vw,var(--space-12)); }
.how-step { display:flex; align-items:flex-start; gap:var(--space-5); padding:var(--space-8); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); transition:box-shadow var(--transition-interactive),border-color var(--transition-interactive); }
.how-step:hover { border-color:var(--color-primary-light); box-shadow:var(--shadow-md); }
.step-marker { flex-shrink:0; margin-top:2px; }
.step-title { margin-bottom:var(--space-3); color:var(--color-primary); font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; line-height:1.3; }
.step-desc { max-width:none; color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.75; }

.section-harsh { padding-block:clamp(var(--space-16),8vw,var(--space-32)); background:var(--color-bg); }
.harsh-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-12),6vw,var(--space-20)); align-items:start; }
.factor-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); padding-top:calc(var(--space-5) + 1.4rem); }
.factor-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive); }
.factor-item:hover { border-color:var(--color-primary); box-shadow:var(--shadow-sm); }
.factor-icon { display:flex; flex-shrink:0; color:var(--color-primary); font-size:1.2rem; line-height:1; }
.factor-name { color:var(--color-text); font-size:var(--text-sm); font-weight:600; line-height:1.3; }

.section-confidentiality { position:relative; overflow:hidden; padding-block:clamp(var(--space-16),8vw,var(--space-32)); background:var(--brand-navy); }
.section-confidentiality::before { content:''; position:absolute; top:-60px; right:-60px; width:320px; height:320px; pointer-events:none; background:radial-gradient(circle,oklch(from var(--color-accent) l c h / .07),transparent 70%); border-radius:var(--radius-full); }
.conf-inner { max-width:var(--content-default); }
.conf-body { max-width:60ch; margin-bottom:var(--space-5); color:oklch(from white l c h / .68); font-size:var(--text-base); line-height:1.8; }
.conf-tenets { display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-10); padding-top:var(--space-8); border-top:1px solid oklch(from white l c h / .12); }
.tenet { display:flex; align-items:baseline; gap:var(--space-4); }
.tenet-mark { width:var(--space-5); flex-shrink:0; color:var(--color-accent); font-family:var(--font-display); font-size:var(--text-lg); font-weight:800; }
.tenet p { max-width:none; color:oklch(from white l c h / .80); font-size:var(--text-base); font-weight:500; }

.section-contact { padding-block:clamp(var(--space-16),8vw,var(--space-32)); background:var(--color-surface); }
.contact-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(var(--space-12),6vw,var(--space-24)); align-items:center; }
.contact-details { display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-2); margin-bottom:var(--space-8); }
.contact-item { display:flex; flex-direction:column; gap:var(--space-1); }
.contact-label { color:var(--color-text-faint); font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.contact-value { color:var(--color-text); font-size:var(--text-base); font-weight:500; text-decoration:none; }
a.contact-value:hover { color:var(--color-primary); }

.site-footer { padding-block:var(--space-10); background:var(--color-bg); border-top:1px solid var(--color-divider); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-8); }
.footer-brand { display:flex; flex-direction:column; gap:var(--space-2); }
.footer-tagline { max-width:none; color:var(--color-text-faint); font-size:var(--text-xs); letter-spacing:.04em; }
.footer-nav { display:flex; flex-wrap:wrap; gap:var(--space-6); }
.footer-nav a { color:var(--color-text-muted); font-size:var(--text-sm); text-decoration:none; }
.footer-nav a:hover { color:var(--color-primary); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-6); border-top:1px solid var(--color-divider); }
.footer-copy,.footer-email { max-width:none; color:var(--color-text-faint); font-size:var(--text-xs); }
.footer-email { color:var(--color-neutral); font-weight:600; text-decoration:none; }
.footer-email:hover { color:var(--color-primary); }

[data-theme="dark"] .services-bg-art img { opacity:.08; }
[data-theme="dark"] .service-card { background:oklch(.10 .04 250 / .90); }
[data-theme="dark"] .service-card:hover { background:oklch(.14 .05 250 / .95); }
[data-theme="dark"] .section-confidentiality { background:#050D1A; }
[data-theme="dark"] .btn-ghost { border-color:rgba(255,255,255,.35); }

@media (max-width:1024px) { .about-grid { grid-template-columns:1fr; gap:var(--space-12); } .about-primary { position:static; } .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .harsh-grid { grid-template-columns:1fr; gap:var(--space-10); } .contact-grid { grid-template-columns:1fr; } }
@media (max-width:768px) { .main-nav { display:none; } .mobile-menu-btn { display:flex; } .lang-toggle { min-width:38px; } .hero-heading { max-width:none; } .hero-ctas { flex-direction:column; align-items:flex-start; } .hero-ctas .btn { width:100%; max-width:280px; } .services-grid,.how-steps,.factor-grid { grid-template-columns:1fr; } .footer-inner,.footer-bottom { flex-direction:column; align-items:flex-start; } .footer-nav { gap:var(--space-4); } }
@media (max-width:480px) { .about-timeline { margin-left:var(--space-2); } .how-step { padding:var(--space-5); } }
@media print { .site-header,.hero-scroll-hint,.mobile-menu-btn,.theme-toggle,.lang-toggle { display:none!important; } body { color:#000; background:#fff; font-size:11pt; } a { color:#000; } .fade-in { opacity:1!important; transform:none!important; } }