/*
Theme Name:   Lumatriq
Theme URI:    https://lumatriq.com/
Author:       Lumatriq — Serhii Ruban & Kostiantyn Makarovskiy
Author URI:   https://lumatriq.com/
Description:  Zero-bloat, hand-written classic theme for lumatriq.com. No page builders, no block library, no jQuery — one stylesheet and one deferred script. Ported from the Claude Design export (Lumatriq website design v2).
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      Proprietary — all rights reserved
License URI:  https://lumatriq.com/
Text Domain:  lumatriq
Tags:         one-page, custom-colors, dark-mode, accessibility-ready
*/

/* =========================================================================
   Design tokens + site styles.
   Extracted verbatim from the <style> block of the Claude Design export.
   Element-level presentation stays in inline style attributes in the
   templates (as in the export); this file holds tokens, states, motion,
   and the responsive grid rules.
   ========================================================================= */

:root {
  --accent:    #CBFF3A;
  --accent-2:  #BE4BFF;
  --bg:        #08080A;
  --bg-2:      #101014;
  --fg:        #F4F4EF;
  --muted:     #ADADA5;
  --line:      rgba(244,244,239,0.12);
  --card:      rgba(255,255,255,0.025);
  --on-accent: #08080A;
}
:root[data-theme="light"] {
  --accent:    #4C7C0F;
  --accent-2:  #7A18C4;
  --bg:        #F4F4EF;
  --bg-2:      #EBEBE4;
  --fg:        #0B0B0D;
  --muted:     #55554F;
  --line:      rgba(11,11,13,0.14);
  --card:      rgba(11,11,13,0.03);
  --on-accent: #F4F4EF;
}
* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Inter, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .5s ease, color .5s ease; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--on-accent); }
/* film grain — tactile depth, static, zero JS */
body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .032; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; }
.display { font-family: Syne, Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; }
h1.display { line-height: 1.02; }
h2.display { line-height: 1.05; }
h3.display { line-height: 1.18; }
h1.display, h2.display { overflow-wrap: normal; text-wrap: balance; hyphens: none; }
h3.display { overflow-wrap: normal; }
.cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cardhead h3 { flex: 0 0 auto; }
.cardhead a, .cardhead span { overflow-wrap: anywhere; }
p, li, .mono { overflow-wrap: break-word; }
header .display, header a, header .mono, header button { overflow-wrap: normal; white-space: nowrap; flex-shrink: 0; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.no-anim .reveal { opacity: 1; transform: none; }
:root[data-motion="reduce"] .reveal { opacity: 1 !important; transform: none !important; transition: none; }
:root[data-motion="reduce"] .glowcard, :root[data-motion="reduce"] .glowcard:hover { transform: none !important; }
:root[data-motion="reduce"] { scroll-behavior: auto; }
:root[data-motion="reduce"] .spin-ring, :root[data-motion="reduce"] .pulse-orb, :root[data-motion="reduce"] .sheen::after { animation: none !important; }
.theme-dark-only { display: inline-block; }
.theme-light-only { display: none; }
:root[data-theme="light"] .theme-dark-only { display: none; }
:root[data-theme="light"] .theme-light-only { display: inline-block; }
.tglbtn { position: relative; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; font-size: 13px; padding: 0; transition: border-color .25s ease, color .25s ease; }
#lum-theme { width: 40px; height: 40px; display: none; }
#lum-nav-theme, #lum-nav-appearance { display: none !important; }
.tglbtn > span.ticon { display: grid; place-items: center; transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.tglbtn .radar { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; transform: rotate(-90deg); }
.tglbtn .radar circle { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .4s cubic-bezier(.25,.8,.4,1); }
.tglbtn:hover { border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); color: var(--accent); }
.tglbtn:hover .radar circle { stroke-dashoffset: 0; }
.tglbtn:hover > span.ticon { transform: rotate(18deg); }
:root[data-motion="reduce"] .tglbtn:hover > span.ticon { transform: none; }
:root[data-motion="reduce"] .tglbtn .radar circle { transition: none; }
/* card hover — lime border + glow. Lime is the default brand hover everywhere. */
.glowcard { position: relative; isolation: isolate; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.glowcard::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background:
    radial-gradient(240px circle at var(--mx,50%) var(--my,0%), var(--accent), transparent 62%),
    radial-gradient(340px circle at var(--mx,50%) var(--my,0%), var(--accent-2), transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.glowcard:hover { transform: translateY(-6px); }
.glowcard:hover::before { opacity: 1; }
.glowcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--accent) 13%, transparent), transparent 68%),
    radial-gradient(520px circle at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--accent-2) 16%, transparent), transparent 76%);
  opacity: 0; transition: opacity .45s ease; pointer-events: none; z-index: -1; }
.glowcard:hover::after { opacity: 1; }
/* case-study cards — corner-bracket "viewfinder" reveal instead of the gradient glow */
.workcard { position: relative; transition: border-color .4s ease; }
.workcard::before { content: ""; position: absolute; inset: 22px; border-radius: 3px; pointer-events: none; opacity: 0;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  transition: inset .5s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.workcard:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.workcard:hover::before { inset: 11px; opacity: .95; }
.workcard .schematic { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.workcard:hover .schematic { transform: scale(1.01); }
:root[data-motion="reduce"] .workcard::before { transition: opacity .3s ease; }
:root[data-motion="reduce"] .workcard:hover .schematic { transform: none; }
.grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; }
@keyframes lum-spin { to { transform: rotate(360deg); } }
@keyframes lum-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.ph { background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 9px); }
.sheen { position: relative; overflow: hidden; }
.sheen::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 42%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fg) 9%, transparent), transparent); transform: translateX(-170%) skewX(-14deg); animation: lum-sheen 9s ease-in-out infinite; }
@keyframes lum-sheen { 0%, 10% { transform: translateX(-170%) skewX(-14deg); } 62%, 100% { transform: translateX(350%) skewX(-14deg); } }
:root[data-motion="reduce"] .sheen::after { animation: none; opacity: 0; }
.link-u { position: relative; display: inline-block; }
.link-u::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--accent); transition: width .35s cubic-bezier(.16,1,.3,1); }
.link-u:hover::after { width: 100%; }
.btn-primary { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -20px var(--accent); color: var(--on-accent); }
.btn-second { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease, color .35s ease; }
.btn-second:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); box-shadow: 0 20px 50px -24px var(--accent); }
.btn-sweep { position: relative; overflow: hidden; isolation: isolate; }
.btn-sweep::before { content: ""; position: absolute; inset: 0; background: var(--on-accent); transform: translateX(-101%); transition: transform .5s cubic-bezier(.16,1,.3,1); z-index: 1; }
.btn-sweep:hover::before { transform: translateX(0); }
.btn-sweep > span { position: relative; z-index: 2; transition: color .32s ease .12s; }
.btn-sweep:hover > span { color: var(--accent); }
.btn-second-alt:hover { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 20px 50px -24px var(--accent-2); }
/* pillar CTA — lime fill-sweep, same mechanism as the Guarantee CTA */
.btn-scope { position: relative; overflow: hidden; isolation: isolate; transition: border-color .35s ease; }
.btn-scope::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform .5s cubic-bezier(.16,1,.3,1); z-index: 1; }
.btn-scope:hover { border-color: var(--accent); }
.btn-scope:hover::before { transform: translateX(0); }
.btn-scope > span { position: relative; z-index: 2; transition: color .32s ease .12s; }
.btn-scope:hover > span { color: var(--on-accent); }
:root[data-motion="reduce"] .btn-scope::before { transition: opacity .2s ease; transform: none; opacity: 0; }
:root[data-motion="reduce"] .btn-scope:hover::before { opacity: 1; }
/* scroll-to-top — appears past the hero, radar-ring hover like the theme toggle */
#lum-top { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 80; width: 48px; height: 48px; opacity: 0; visibility: hidden; transform: translateY(12px); background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(8px); transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility .3s, border-color .25s ease, color .25s ease; }
#lum-top[data-show="1"] { opacity: 1; visibility: visible; transform: translateY(0); }
:root[data-motion="reduce"] #lum-top { transition: opacity .2s ease, visibility .2s; transform: none; }
:root[data-motion="reduce"] #lum-top[data-show="1"] { transform: none; }
@media (max-width: 480px) { #lum-top { width: 42px; height: 42px; } }
/* rocket launch: the arrow lifts off out of the frame, a fresh one rises into place */
#lum-top > span.ticon { overflow: hidden; height: 16px; width: 16px; }
#lum-top:hover > span.ticon { transform: none; }
#lum-top .launch { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.62,0,.3,1); }
#lum-top:hover .launch { transform: translateY(-16px); }
:root[data-motion="reduce"] #lum-top .launch { transition: none; }
:root[data-motion="reduce"] #lum-top:hover .launch { transform: none; }
.lum-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
@media (max-width: 480px) { .lum-row { grid-template-columns: minmax(0, 1fr); } }
/* modal — Terminal Brutalism: sharp panel, mono labels, lime action */
#lum-modal { display: none; }
#lum-modal[data-open="1"] { display: flex; }
.lum-field { width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 2px; color: var(--fg); font-family: Inter, Helvetica, Arial, sans-serif; font-size: 15px; padding: 13px 14px; outline: none; transition: border-color .25s ease, box-shadow .25s ease; }
.lum-field::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
.lum-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.lum-submit { transition: box-shadow .3s ease, transform .3s ease; }
.lum-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px var(--accent); }
.lum-x { transition: color .25s ease, border-color .25s ease; }
.lum-x:hover { color: var(--accent); border-color: var(--accent); }
.ico { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
/* mobile header + slide-down nav overlay */
#lum-burger { display: none; transition: border-color .3s ease, color .3s ease; }
#lum-burger:hover { border-color: var(--accent); color: var(--accent); }
/* safety net: the action group may shrink and the CTA label truncate before anything overflows */
header nav { flex-wrap: wrap; }
.hdr-actions { min-width: 0; flex-shrink: 1; }
header .hdr-actions #lum-hdr-cta { flex-shrink: 1; min-width: 0; }
#lum-hdr-cta > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cta-short { display: none; }
#lum-nav { display: none; }
#lum-nav[data-open="1"] { display: block; }
.navlink { display: flex; align-items: baseline; gap: 18px; padding: clamp(13px, 2.6vw, 20px) 0; border-bottom: 1px solid var(--line); color: var(--fg); transition: color .25s ease, padding-left .35s cubic-bezier(.16,1,.3,1); }
.navlink:link, .navlink:visited { color: var(--fg); }
.navlink:hover, .navlink:focus-visible { color: var(--accent); }
.navlink:hover { padding-left: 10px; }
:root[data-motion="reduce"] .navlink:hover { padding-left: 0; }
/* layout — fluid, no fixed widths */
.wrap { max-width: 1440px; margin: 0 auto; }
.founder-name { font-size: clamp(24px, 2.1vw, 38px); overflow-wrap: normal; hyphens: none; }
.founder-card { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 639px) {
  .founder-card > .portrait { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (min-width: 640px) {
  .founder-card { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); }
}
.schematic { width: 100%; height: auto; display: block; color: var(--muted); }
.sect { padding: clamp(88px, 8vw, 140px) clamp(18px, 3vw, 40px); }
.nav-links { display: none; }
.g-hero, .g-pillars, .g-work, .g-pivot, .g-guarantee, .g-audit, .g-2, .g-3, .g-faq { display: grid; grid-template-columns: minmax(0, 1fr); }
.g-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-row { display: grid; }
@media (min-width: 720px) {
  .g-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .g-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-row { display: flex; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .audit-actions { padding-top: 43px; }
  .g-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .g-pivot { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .g-guarantee { grid-template-columns: minmax(0, 1fr) auto; }
  .g-audit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1179px) {
  #lum-burger { display: grid; }
  #lum-theme { display: none; }
}
@media (max-width: 480px) {
  .cta-full { display: none; }
  .cta-short { display: inline; }
  header a.display { font-size: 17px !important; }
  header nav { padding-left: 14px !important; padding-right: 14px !important; gap: 10px !important; }
  .hdr-actions { gap: 8px !important; }
  #lum-hdr-cta { padding: 11px 15px !important; font-size: 12px !important; }
  #lum-burger { width: 36px !important; height: 36px !important; }
}
@media (min-width: 1180px) {
  .nav-links { display: flex; }
}
@media (min-width: 1360px) {
  .g-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   WordPress-only additions (not present in the design export).
   The site header is position:fixed; the admin bar would sit on top of it.
   ------------------------------------------------------------------------- */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar header { top: 46px; } }