/* ====== S2 TECH GROUP — site.css ====== */
/* Shared across all 4 pages: base reset, tokens, nav, btns, footer,
   lang/theme toggles, mobile nav, hamburger, light-mode overrides    */

/* ══════════════════════════════════════════
   1. DESIGN TOKENS (DARK — default)
   ══════════════════════════════════════════ */
:root {
  --bg:         #06070d;
  --bg-2:       #0b0d16;
  --panel:      #0f1320;
  --panel-2:    #131829;
  --line:       rgba(255,255,255,0.09);
  --line-2:     rgba(255,255,255,0.14);
  --deep:       #0d00b5;
  --it:         #3d8bff;
  --it-bright:  #5ea2ff;
  --sport:      #5b4bf5;
  --sport-bright:#7d70ff;
  --sky:        #bad6fe;
  --txt:        #eaedf5;
  --muted:      #8b95ab;
  --muted-2:    #5f6880;
  --display:    "Space Grotesk", sans-serif;
  --mono:       "Space Mono", ui-monospace, monospace;
  --body:       "Hanken Grotesk", sans-serif;
}

/* ══════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--body); background: var(--bg); color: var(--txt);
        -webkit-font-smoothing: antialiased; line-height: 1.55; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.04; font-weight: 700; }
a     { color: inherit; text-decoration: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.ph   { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, transparent 10px 20px);
        display: flex; align-items: flex-end; }
.ph-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
            text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 12px 14px; }
.grid-bg  { background-image: linear-gradient(var(--line) 1px, transparent 1px),
                               linear-gradient(90deg, var(--line) 1px, transparent 1px);
            background-size: 54px 54px; }
.case .img img.shot { position: absolute; inset: 0; width: 100%; height: 100%;
                      object-fit: cover; object-position: center; }

/* ══════════════════════════════════════════
   3. NAVIGATION
   ══════════════════════════════════════════ */
nav { position: sticky; top: 0; z-index: 60;
      display: flex; align-items: center; justify-content: space-between;
      padding: 15px 48px;
      background: rgba(6,7,13,0.85); backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line); }
.brand-logo       { height: 38px; display: block; object-fit: contain; }
.brand-logo-light { display: none !important; }
.navlinks         { display: flex; gap: 30px; font-size: 14px;
                    font-family: var(--mono); color: var(--muted); }
.navlinks a       { transition: color .15s; }
.navlinks a:hover,
.navlinks a.active { color: var(--it-bright); }
.navright         { display: flex; align-items: center; gap: 14px; }

/* ══════════════════════════════════════════
   4. BUTTONS
   ══════════════════════════════════════════ */
.btn { font-family: var(--display); font-weight: 600; font-size: 14px;
       padding: 11px 20px; border-radius: 9px; cursor: pointer; border: none;
       background: var(--it); color: #fff;
       transition: transform .15s, box-shadow .15s;
       display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(61,139,255,0.36); }
.btn-ghost { background: transparent; color: var(--txt); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--it), 0 8px 20px rgba(61,139,255,0.18); }
.btn-sport { background: var(--sport); }
.btn-sport:hover { box-shadow: 0 8px 28px rgba(91,75,245,0.36); }

/* ══════════════════════════════════════════
   5. PAGE HERO (internal pages)
   ══════════════════════════════════════════ */
.page-hero { position: relative; padding: 96px 0 56px;
             background: linear-gradient(160deg,#0e1f55 0%,#06070d 60%); overflow: hidden; }
.page-hero.sport { background: linear-gradient(160deg,#1c1453 0%,#06070d 60%); }
.page-hero .hglow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.page-hero .wrap  { position: relative; z-index: 1; }
.page-hero .crumb { font-family: var(--mono); font-size: 13px; color: var(--muted-2);
                    display: flex; gap: 8px; align-items: center; margin-bottom: 28px; }
.page-hero .crumb a { color: var(--it-bright); }
.page-hero .div-tag { background: rgba(61,139,255,0.12); color: var(--it-bright);
                      padding: 3px 10px; border-radius: 999px; }
.page-hero.sport .div-tag { background: rgba(91,75,245,0.14); color: var(--sport-bright); }
.page-hero h1  { font-size: 62px; letter-spacing: -0.03em; max-width: 22ch; }
.page-hero .lead { margin-top: 20px; font-size: 18px; color: var(--muted); max-width: 60ch; }
.page-hero .hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.g-it    { background: linear-gradient(100deg, var(--it-bright), var(--sky));
           -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-sport { background: linear-gradient(100deg, var(--sport-bright), #a8a0ff);
           -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ══════════════════════════════════════════
   6. SECTION SHELL
   ══════════════════════════════════════════ */
section.block { padding: 104px 0; }
.sec-head .k  { font-family: var(--mono); font-size: 13px; color: var(--sky);
                display: inline-flex; align-items: center; gap: 10px; }
.sec-head .k::before { content:""; width: 22px; height: 1px; background: var(--sky); }
.sec-head h2  { font-size: 48px; margin-top: 16px; max-width: 20ch; letter-spacing: -0.03em; }
.sec-head p   { margin-top: 16px; color: var(--muted); font-size: 18px; max-width: 56ch; }

/* ══════════════════════════════════════════
   7. CTA BOX
   ══════════════════════════════════════════ */
.cta { padding: 0 0 104px; }
.cta-box { border: 1px solid var(--line-2); border-radius: 24px; padding: 72px 60px;
           position: relative; overflow: hidden; background: var(--bg-2); }
.cta-box .glow { position: absolute; inset: 0;
  background: radial-gradient(46% 130% at 82% 0%, rgba(61,139,255,0.22), transparent 60%),
              radial-gradient(40% 120% at 12% 100%, rgba(91,75,245,0.18), transparent 60%); }
.cta-box h2  { font-size: 54px; max-width: 17ch; position: relative; letter-spacing: -0.03em; }
.cta-box p   { margin-top: 18px; color: var(--muted); font-size: 19px; max-width: 50ch; position: relative; }
.cta-actions { margin-top: 34px; display: flex; gap: 12px; position: relative; }

/* ══════════════════════════════════════════
   8. FOOTER
   ══════════════════════════════════════════ */
footer { border-top: 1px solid var(--line); padding: 64px 0 38px; background: var(--bg); }
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 30px; }
.foot-logo { height: 40px; margin-bottom: 16px; object-fit: contain; display: block; }
footer h5  { font-family: var(--mono); font-size: 12px; color: var(--txt);
             margin-bottom: 16px; letter-spacing: 0.06em; }
footer a   { display: block; font-size: 14px; color: var(--muted); margin-bottom: 11px; transition: color .15s; }
footer a:hover { color: var(--it-bright); }
.foot-desc { color: var(--muted); font-size: 14px; max-width: 32ch; }
.foot-social { display: flex; gap: 10px; margin-top: 18px; }
.foot-social a { width: 36px; height: 36px; border-radius: 9px;
                 border: 1px solid var(--line); display: grid; place-items: center; margin: 0; }
.foot-social a:hover { border-color: var(--it); }
.foot-social svg { width: 17px; height: 17px; }
.foot-bot  { display: flex; justify-content: space-between; margin-top: 50px;
             padding-top: 24px; border-top: 1px solid var(--line);
             font-family: var(--mono); font-size: 12px; color: var(--muted-2); }

/* ══════════════════════════════════════════
   9. STRIP (trust bar)
   ══════════════════════════════════════════ */
.strip { border-bottom: 1px solid var(--line); padding: 22px 0; }
.strip .wrap { display: flex; align-items: center; gap: 38px;
               font-family: var(--mono); font-size: 13px; color: var(--muted-2); flex-wrap: wrap; }
.strip .wrap b { color: var(--sky); font-weight: 400; }

/* ══════════════════════════════════════════
   10. LANG TOGGLE
   ══════════════════════════════════════════ */
.lang { font-family: var(--mono); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.lang button { font-family: inherit; font-size: 12px; background: none; border: none;
               color: var(--muted-2); cursor: pointer; padding: 2px 4px; border-radius: 4px;
               transition: color .15s; }
.lang button:hover { color: var(--txt); }
.lang button.on { color: var(--txt); font-weight: 700; }
.lang .sep { color: var(--muted-2); }

/* ══════════════════════════════════════════
   11. THEME FAB  (floating action button)
   ══════════════════════════════════════════ */
.theme-fab { position: fixed; bottom: 24px; right: 24px; z-index: 999;
             display: flex; flex-direction: column; align-items: center; gap: 8px; }

.theme-fab-main {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--txt);
  font-size: 22px; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: transform .2s, box-shadow .2s;
  backdrop-filter: blur(10px);
}
.theme-fab:hover .theme-fab-main { transform: scale(1.06); box-shadow: 0 8px 32px rgba(0,0,0,0.45); }

.theme-fab-opts {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: 0; pointer-events: none;
  transform: translateY(10px) scale(0.92);
  transition: opacity .22s ease, transform .22s ease;
}
.theme-fab:hover .theme-fab-opts,
.theme-fab-opts.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }

.theme-fab-opts button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted);
  font-size: 17px; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: background .15s, color .15s, transform .15s, border-color .15s;
  position: relative;
}
.theme-fab-opts button:hover { color: var(--txt); transform: scale(1.12); border-color: var(--it); }
.theme-fab-opts button.on { background: var(--it); color: #fff; border-color: var(--it); }

.theme-fab-opts button::after {
  content: attr(title);
  position: absolute; right: 50px;
  background: var(--bg-2); color: var(--txt);
  font-family: var(--body, sans-serif); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line);
  white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.theme-fab-opts button:hover::after { opacity: 1; }

html.s2-light .theme-fab-main { background: rgba(255,255,255,0.92); box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
html.s2-light .theme-fab-opts button { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
html.s2-light .theme-fab-opts button::after { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
html.s2-light .theme-fab-opts button.on { background: var(--it); color: #fff; }

/* ══════════════════════════════════════════
   12. THEME TOGGLE (nav — keep styles for any remnant)
.theme-toggle { display: flex; align-items: center; gap: 2px;
                background: rgba(255,255,255,0.08); border-radius: 999px; padding: 3px 4px; }
.theme-toggle button { background: none; border: none; cursor: pointer;
  min-width: 30px; height: 24px; border-radius: 999px; font-size: 12px;
  font-family: var(--body); font-weight: 500; color: var(--muted); padding: 0 6px;
  transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.theme-toggle button:hover { color: var(--txt); }
.theme-toggle button.on { background: var(--bg-2); color: var(--txt); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* ══════════════════════════════════════════
   12. HAMBURGER
   ══════════════════════════════════════════ */
.ham { display: none; flex-direction: column; justify-content: center; gap: 5px;
       background: none; border: none; cursor: pointer; padding: 8px 6px; width: 38px; height: 38px; flex-shrink: 0; }
.ham span { display: block; width: 22px; height: 2px; background: var(--txt); border-radius: 2px;
            transition: transform .22s, opacity .22s; }
.ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   13. MOBILE NAV  (≤860px)
   ══════════════════════════════════════════ */
@media (max-width: 860px) {
  .ham { display: flex; }
  nav .navlinks {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    flex-direction: column; padding: 10px 20px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(0,0,0,0.28); gap: 0;
  }
  nav .navlinks.open { display: flex; }
  nav .navlinks a { font-size: 16px !important; padding: 13px 4px !important;
    border-bottom: 1px solid var(--line); color: var(--muted); display: block; width: 100%; }
  nav .navlinks a:last-child { border-bottom: 0; }
  nav .navlinks a.active, nav .navlinks a:hover { color: var(--txt); }
  .navright .btn-nav-cta { display: none; }
  nav { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ══════════════════════════════════════════
   14. DUAL LOGO
   ══════════════════════════════════════════ */
html.s2-light .brand-logo-dark  { display: none !important; }
html.s2-light .brand-logo-light { display: block !important; }

/* ══════════════════════════════════════════
   15. LIGHT THEME — CSS VARIABLES
   ══════════════════════════════════════════ */
html.s2-light {
  --bg:           #f4f7fc;
  --bg-2:         #ffffff;
  --panel:        #ffffff;
  --panel-2:      #eef2fa;
  --line:         rgba(15,20,60,0.09);
  --line-2:       rgba(15,20,60,0.16);
  --it:           #1b6ee8;
  --it-bright:    #2b7df5;
  --sport:        #4535cc;
  --sport-bright: #5a4de0;
  --sky:          #2b7df5;
  --txt:          #0f1419;
  --muted:        #4b5568;
  --muted-2:      #9ca3af;
}

/* ══════════════════════════════════════════
   16. LIGHT THEME — COMPONENT OVERRIDES
   ══════════════════════════════════════════ */
html.s2-light body { background: var(--bg); color: var(--txt); }

html.s2-light nav {
  background: rgba(244,247,252,0.90) !important;
  border-bottom-color: rgba(15,20,60,0.09) !important;
}
html.s2-light .navlinks a { color: #3a424d; }
html.s2-light .navlinks a:hover,
html.s2-light .navlinks a.active { color: var(--it); }
html.s2-light .ham span { background: var(--txt); }
html.s2-light nav .navlinks {
  background: var(--bg);
  border-bottom-color: var(--line);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
html.s2-light .grid-bg {
  background-image: linear-gradient(rgba(0,0,0,0.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,0.055) 1px, transparent 1px);
  background-size: 54px 54px;
}
html.s2-light .ph {
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 10px, transparent 10px 20px);
}
html.s2-light .ph-label { color: rgba(0,0,0,0.38); }

html.s2-light .theme-toggle { background: rgba(0,0,0,0.07); }
html.s2-light .theme-toggle button { color: var(--muted); }
html.s2-light .theme-toggle button:hover { color: var(--txt); }
html.s2-light .theme-toggle button.on { background: #fff; color: var(--txt); box-shadow: 0 1px 6px rgba(0,0,0,0.14); }
html.s2-light .lang button { color: var(--muted-2); }
html.s2-light .lang button.on { color: var(--txt); }

html.s2-light .btn { background: var(--it); color: #fff; }
html.s2-light .btn:hover { box-shadow: 0 8px 28px rgba(27,110,232,0.36); }
html.s2-light .btn-ghost { background: transparent; color: var(--txt); box-shadow: inset 0 0 0 1px var(--line-2); }
html.s2-light .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--it), 0 8px 20px rgba(27,110,232,0.12); color: var(--it); }
html.s2-light .btn-sport { background: var(--sport); color: #fff; }

html.s2-light .strip { background: var(--bg-2); border-color: var(--line); }
html.s2-light .strip .wrap b { color: var(--it); }
html.s2-light .strip .wrap span { color: var(--muted); }

html.s2-light .sec-head .k { color: var(--it); }
html.s2-light .sec-head .k::before { background: var(--it); }

html.s2-light .cta-box { background: var(--bg-2); border-color: var(--line); box-shadow: 0 4px 60px rgba(27,110,232,0.06); }
html.s2-light .cta-box .glow { background: radial-gradient(46% 130% at 82% 0%, rgba(27,110,232,0.12), transparent 60%),
                                             radial-gradient(40% 120% at 12% 100%, rgba(90,78,224,0.10), transparent 60%); }
html.s2-light .cta-box h2 { color: var(--txt); }
html.s2-light .cta-box p  { color: var(--muted); }

html.s2-light footer { background: var(--bg); border-top-color: var(--line); }
html.s2-light footer h5 { color: var(--txt); }
html.s2-light footer a  { color: var(--muted); }
html.s2-light footer a:hover { color: var(--it); }
html.s2-light .foot-bot { color: var(--muted-2); border-top-color: var(--line); }

html.s2-light .page-hero.it    { background: linear-gradient(160deg,#dceeff 0%,#f4f7fc 60%); }
html.s2-light .page-hero.sport { background: linear-gradient(160deg,#e0dcff 0%,#f4f7fc 60%); }
html.s2-light .page-hero h1    { color: var(--txt); }
html.s2-light .page-hero .lead { color: var(--muted); }
html.s2-light .page-hero .crumb a { color: var(--it); }
html.s2-light .page-hero .crumb span { color: var(--muted); }
html.s2-light .page-hero .div-tag { background: rgba(27,110,232,0.10); color: var(--it); }
html.s2-light .page-hero.sport .div-tag { background: rgba(90,78,224,0.10); color: var(--sport); }