/* =========================================================
   LiveFree — Tech theme (dark / neon-cyan)
   Loaded after style.css & components.css; overrides tokens
   and light-surface components. Content is untouched.
   ========================================================= */

:root {
  --c-ink:        #F2F6FF;
  --c-text:       #C3CEE6;
  --c-text-soft:  #8C9DBF;
  --c-text-faint: #5E6F92;
  --c-on-dark:    #EAF1FB;
  --c-on-dark-soft:#93A5C9;

  --c-bg:         #05080F;
  --c-bg-alt:     #080D18;
  --c-bg-alt2:    #0B1220;
  --c-surface:    #0B1322;
  --c-surface-2:  #101B30;
  --c-line:       rgba(120, 160, 255, 0.15);
  --c-line-dark:  rgba(120, 160, 255, 0.15);

  --c-navy:       #0A1222;
  --c-navy-2:     #0E1A33;
  --c-navy-deep:  #03060C;
  --c-blue:       #4D7CFF;
  --c-blue-600:   #3A66F0;
  --c-blue-light: #8FB0FF;
  --c-cyan:       #22E3FF;
  --c-violet:     #8B5CF6;

  --f-mono: "JetBrains Mono", "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow:    0 24px 60px -28px rgba(34, 227, 255, 0.28), 0 0 0 1px rgba(120,160,255,0.12);
  --shadow-sm: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --glow:      0 0 0 1px rgba(34,227,255,0.35), 0 12px 40px -12px rgba(34,227,255,0.35);
}

::selection { background: rgba(34, 227, 255, 0.28); color: #fff; }
html { color-scheme: dark; }

body {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(120,160,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  background-attachment: fixed;
}

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: #25365a #05080F; }

/* ---------- Sections ---------- */
.section--alt {
  background: linear-gradient(180deg, rgba(10,18,34,0.85), rgba(6,10,20,0.85));
  border-block: 1px solid var(--c-line);
}
.section--navy { background: var(--c-navy); }

.eyebrow { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.2em; color: var(--c-cyan); }
.eyebrow::before { content: ">_"; width: auto; height: auto; background: none; font-weight: 700; letter-spacing: 0; color: var(--c-cyan); text-shadow: 0 0 12px rgba(34,227,255,0.7); }
.section--navy .eyebrow::before { background: none; }
.section-head h2 { text-shadow: 0 0 40px rgba(77,124,255,0.25); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-family: var(--f-jp); }
.btn--primary {
  background: linear-gradient(135deg, #4D7CFF 0%, #22C7FF 60%, #22E3FF 100%);
  color: #021019;
  box-shadow: 0 10px 34px -10px rgba(34,227,255,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn--primary:hover { background: linear-gradient(135deg, #6A93FF 0%, #3ED3FF 60%, #5CEBFF 100%); box-shadow: 0 14px 44px -10px rgba(34,227,255,0.8), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn--ghost { color: var(--c-ink); border-color: var(--c-line); background: rgba(255,255,255,0.03); }
.btn--ghost:hover { border-color: var(--c-cyan); color: var(--c-cyan); box-shadow: 0 0 24px -6px rgba(34,227,255,0.5); }
.btn--light { background: linear-gradient(135deg, #4D7CFF 0%, #22C7FF 60%, #22E3FF 100%); color: #021019; box-shadow: 0 10px 34px -10px rgba(34,227,255,0.55); }
.btn--light:hover { box-shadow: 0 14px 44px -10px rgba(34,227,255,0.8); }
.btn--outline-light { border-color: rgba(143,176,255,0.4); background: rgba(255,255,255,0.03); }
.btn--outline-light:hover { border-color: var(--c-cyan); color: var(--c-cyan); box-shadow: 0 0 24px -6px rgba(34,227,255,0.5); }

/* ---------- Header ---------- */
.site-header { background: rgba(5, 8, 15, 0.72); border-bottom: 1px solid var(--c-line); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,227,255,0.55), rgba(139,92,246,0.45), transparent); opacity: .7; }
.brand__mark { background: linear-gradient(135deg, #4D7CFF 0%, #22E3FF 100%); box-shadow: 0 0 22px -2px rgba(34,227,255,0.6); border-radius: 10px; }
.brand__name { font-family: var(--f-mono); font-weight: 700; color: #fff; }
.brand__name b { color: var(--c-cyan); text-shadow: 0 0 14px rgba(34,227,255,0.6); }
.nav a { color: var(--c-text); font-size: 0.9rem; }
.nav a:hover { color: var(--c-cyan); background: rgba(34,227,255,0.07); }
.nav a.is-active { color: var(--c-cyan); text-shadow: 0 0 14px rgba(34,227,255,0.5); }
.nav-toggle span { background: #fff; }
@media (max-width: 900px) {
  .nav { background: rgba(5, 8, 15, 0.97); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px #000; }
}

/* ---------- Hero ---------- */
.hero, .page-hero {
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(77,124,255,0.32) 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(139,92,246,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #060B16 0%, #03060C 100%);
  border-bottom: 1px solid var(--c-line);
}
.hero__grid {
  background-image: linear-gradient(rgba(34,227,255,0.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34,227,255,0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: grid-drift 24s linear infinite;
}
@keyframes grid-drift { to { background-position: 56px 56px, 56px 56px; } }
.hero__glow { display: block; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: .55; pointer-events: none; animation: glow-float 14s ease-in-out infinite alternate; }
.hero__glow--1 { background: rgba(77,124,255,0.55); top: -200px; right: -120px; }
.hero__glow--2 { background: rgba(139,92,246,0.4); bottom: -260px; left: -160px; animation-delay: -6s; }
@keyframes glow-float { to { transform: translate3d(-40px, 30px, 0) scale(1.08); } }

.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-cyan), var(--c-violet), transparent); opacity: .8; }
.hero__badge { font-family: var(--f-mono); font-size: 0.76rem; background: rgba(34,227,255,0.06); border: 1px solid rgba(34,227,255,0.32); color: var(--c-cyan); border-radius: 6px; }
.hero__badge .dot { background: var(--c-cyan); box-shadow: 0 0 0 3px rgba(34,227,255,0.2), 0 0 12px var(--c-cyan); animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hero h1 { text-shadow: 0 0 60px rgba(77,124,255,0.4); }
.hero h1 .grad { background: linear-gradient(100deg, #6FA0FF 0%, #22E3FF 50%, #A78BFA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgba(34,227,255,0.35)); }
.hero__stats { border-top: 1px solid var(--c-line); padding-top: clamp(28px, 4vw, 44px); }
.hero__stat .num { font-family: var(--f-mono); text-shadow: 0 0 24px rgba(34,227,255,0.35); }
.hero__stat .num.en { font-family: var(--f-mono); }
.hero__stat .lbl { font-family: var(--f-mono); font-size: 0.74rem; color: var(--c-text-soft); }
.page-hero h1 { text-shadow: 0 0 50px rgba(77,124,255,0.35); }
.breadcrumb { font-family: var(--f-mono); font-size: 0.76rem; color: var(--c-text-soft); }

/* ---------- Card surfaces (shared glass look) ---------- */
body .svc-card, body .record-card, body .feature, body .work-card, body .step, body .contact-card, body .svc-detail, body .flow__step {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(16,27,48,0.85), rgba(9,15,28,0.85));
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* cursor-follow spotlight (positions set by main.js) */
body .svc-card::before, body .record-card::before, body .feature::before, body .work-card::before, body .step::before, body .contact-card::before, body .svc-detail::before, body .flow__step::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(34,227,255,0.13), transparent 62%);
  transition: opacity .3s var(--ease);
}
body .svc-card:hover::before, body .record-card:hover::before, body .feature:hover::before, body .work-card:hover::before, body .step:hover::before, body .contact-card:hover::before, body .svc-detail:hover::before, body .flow__step:hover::after { opacity: 1; }
body .svc-card:hover, body .record-card:hover, body .feature:hover, body .work-card:hover, body .step:hover, body .svc-detail:hover { border-color: rgba(34,227,255,0.4); box-shadow: var(--glow); }
body .svc-card:hover { transform: translateY(-6px); }
body .svc-card::after { background: linear-gradient(90deg, var(--c-blue), var(--c-cyan), var(--c-violet)); height: 2px; }
body .step::before { content: none; }

.svc-card__icon, .feature__icon, .contact-card__icon {
  background: rgba(34,227,255,0.07); border: 1px solid rgba(34,227,255,0.28);
  box-shadow: inset 0 0 18px rgba(34,227,255,0.08), 0 0 20px -6px rgba(34,227,255,0.4);
  border-radius: 12px;
}
.svc-card__icon svg, .feature__icon svg, .contact-card__icon svg { stroke: var(--c-cyan); }
.svc-card__no, .step__no, .work-card__label { font-family: var(--f-mono); color: var(--c-cyan); }
body .work-card__label { color: var(--c-cyan); }
body .work-card a.work-link { color: var(--c-cyan); font-family: var(--f-mono); }
.svc-card h3, .record-card h3, .work-card h3, .step h3 { color: var(--c-ink); }
.svc-card p, .record-card p, .work-card p, .step p { color: var(--c-text-soft); }

/* index: final "details" svc-card keeps inline dark bg — add a gradient edge */
.svc-grid > .svc-card[style] { background: linear-gradient(135deg, rgba(34,227,255,0.12), rgba(139,92,246,0.14)) !important; border: 1px solid rgba(34,227,255,0.35) !important; }

.svc-detail__num { font-family: var(--f-mono); color: #021019; background: linear-gradient(135deg, #4D7CFF, #22E3FF); box-shadow: 0 0 28px -4px rgba(34,227,255,0.55); border-radius: 14px; }
.svc-detail__body > p { color: var(--c-text-soft); }
.svc-detail__list li { color: var(--c-text); }
.svc-detail__list li svg { stroke: var(--c-cyan); }
.tag { font-family: var(--f-mono); font-size: 0.74rem; color: var(--c-cyan); background: rgba(34,227,255,0.07); border: 1px solid rgba(34,227,255,0.28); border-radius: 6px; }

.record-card__label { font-family: var(--f-mono); color: #5CF0C8; background: rgba(92,240,200,0.08); border: 1px solid rgba(92,240,200,0.3); border-radius: 6px; }

/* ---------- Tables ---------- */
.info-table { background: rgba(11,19,34,0.8); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
.info-table th, .info-table td { border-bottom: 1px solid var(--c-line); }
.info-table th { background: rgba(34,227,255,0.05); color: var(--c-cyan); font-family: var(--f-mono); font-size: 0.82rem; }
.info-table td { color: var(--c-text); }
.info-table td .muted { color: var(--c-text-soft); }
.info-table td a { color: var(--c-cyan); }
@media (max-width: 640px) { .info-table tr { border-bottom: 1px solid var(--c-line); } }

/* ---------- Profile ---------- */
.profile__card { background: linear-gradient(160deg, #0E1A33, #070C18); border: 1px solid rgba(34,227,255,0.3); box-shadow: 0 0 60px -20px rgba(34,227,255,0.35); }
.profile__avatar { background: linear-gradient(135deg, #4D7CFF, #22E3FF); color: #021019; box-shadow: 0 0 34px -4px rgba(34,227,255,0.6); font-family: var(--f-mono); border-radius: 22px; }
.profile__card .role { font-family: var(--f-mono); }
.profile__body p { color: var(--c-text-soft); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(77,124,255,0.4), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(139,92,246,0.3), transparent 60%),
    #070C18;
  border: 1px solid rgba(34,227,255,0.3);
  box-shadow: 0 0 80px -30px rgba(34,227,255,0.4);
}

/* ---------- Legal pages ---------- */
.legal-intro { background: linear-gradient(115deg, rgba(14,26,51,0.95), rgba(8,13,24,0.95)); border-left: 3px solid var(--c-cyan); box-shadow: var(--shadow-sm); border-top: 1px solid var(--c-line); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.legal-section { background: rgba(11,19,34,0.8); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
.legal-section:hover { border-color: rgba(34,227,255,0.4); }
.legal-section::before { color: var(--c-cyan); font-family: var(--f-mono); }
.legal-section::after { background: linear-gradient(var(--c-cyan), transparent); }
.legal-section a { color: var(--c-cyan); }
.legal-contact { background: rgba(34,227,255,0.05); border: 1px solid rgba(34,227,255,0.25); }
.legal-date { color: var(--c-text-soft); font-family: var(--f-mono); }

/* ---------- Contact / form ---------- */
.contact-card .label { font-family: var(--f-mono); color: var(--c-text-soft); }
.contact-card .value, .contact-card .value a { color: var(--c-ink); }
.contact-card .value a:hover { color: var(--c-cyan); }
.contact-card .sub { color: var(--c-text-soft); }
.form { background: linear-gradient(160deg, rgba(16,27,48,0.85), rgba(9,15,28,0.85)); border: 1px solid var(--c-line); }
.field label { color: var(--c-ink); }
.field .req { color: #FF6B8A; }
.field input, .field textarea, .field select { background: rgba(3,6,12,0.7); border: 1px solid var(--c-line); color: var(--c-ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-faint); }
.field input:focus, .field textarea:focus, .field select:focus { background: rgba(3,6,12,0.95); border-color: var(--c-cyan); box-shadow: 0 0 0 3px rgba(34,227,255,0.18), 0 0 24px -6px rgba(34,227,255,0.5); }
.field select option { background: #0B1322; color: var(--c-ink); }
.form__note { color: var(--c-text-soft); }
.form__ok { background: rgba(92,240,200,0.08); border: 1px solid rgba(92,240,200,0.35); color: #5CF0C8; }

/* ---------- Map (dark-tinted) ---------- */
.map-frame { border: 1px solid var(--c-line); }
.map-frame iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.9); }

/* ---------- Portfolio ---------- */
body .work-video { border: 1px solid rgba(34,227,255,0.3); box-shadow: 0 0 70px -24px rgba(34,227,255,0.45); background: #03060C; }
body .shot { background: #0B1322; border: 1px solid var(--c-line); }
body .shot figcaption { color: var(--c-text-soft); border-top: 1px solid var(--c-line); font-family: var(--f-mono); }
body .flow__step { background: linear-gradient(160deg, rgba(16,27,48,0.85), rgba(9,15,28,0.85)); border: 1px solid var(--c-line); }
body .flow__step::before { font-family: var(--f-mono); text-shadow: 0 0 14px rgba(34,227,255,0.6); }

/* ---------- Footer ---------- */
.site-footer { background: #03060C; border-top: 1px solid var(--c-line); position: relative; }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,227,255,0.6), rgba(139,92,246,0.5), transparent); }
.footer-col h4 { font-family: var(--f-mono); color: var(--c-cyan); }
.footer-col a:hover { color: var(--c-cyan); text-shadow: 0 0 12px rgba(34,227,255,0.5); }
.footer-bottom { border-top: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 0.74rem; }
.footer-brand .brand__name b { color: var(--c-cyan) !important; }

@media (prefers-reduced-motion: reduce) {
  .hero__grid, .hero__glow, .hero__badge .dot { animation: none; }
}

/* headline wrapping */
.hero h1, .page-hero h1, .section-head h2 { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.hero__inner { max-width: 960px; }