/* Electrecatechno — interactive + responsive layer */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body > div[style*="width:1440px"] { width: 100% !important; max-width: none; }
.container { box-sizing: border-box; width: 100%; }
img { max-width: 100%; }

/* ---------- Nav ---------- */
.nav-bar { transition: box-shadow .3s, background .3s; }
.nav-bar.scrolled { box-shadow: 0 8px 30px -12px rgba(15,42,58,.25); background: rgba(246,247,249,.95) !important; }
.nav-links a { position: relative; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-links a:hover { color: var(--navy) !important; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons & cards ---------- */
.btn { transition: transform .2s ease, box-shadow .2s ease, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(15,42,58,.45); }
.card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
a.card:hover, .lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15,42,58,.35); }
.project-photo { overflow: hidden; }
.project-photo img { transition: transform .6s ease; }
.project-card:hover .project-photo img { transform: scale(1.06); }
.client-logo img { filter: grayscale(.15); transition: filter .3s, transform .3s; }
.client-card:hover .client-logo img { filter: none; transform: scale(1.05); }

/* ---------- Animated hero panels ---------- */
.hero-panel { will-change: transform; transition: transform .25s ease-out; transform-style: preserve-3d; }
.hero-panel canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-panel > svg { position: absolute; z-index: 1; }
.hero-panel > div { z-index: 2; }
.hero-panel .spin { transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; }
.hero-panel .spin.rev { animation-direction: reverse; animation-duration: 32s; }
.hero-panel .flow { stroke-dasharray: 6 8; animation: flow 1.6s linear infinite; }
.hero-panel .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.hero-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(15,118,110,.18), transparent 65%); pointer-events: none; z-index: 0; filter: blur(10px); animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-40px,-20px); } to { transform: translate(60px,40px); } }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero-in { opacity: 0; transform: translateY(18px); animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

[data-d="1"]{--d:.08s}[data-d="2"]{--d:.16s}[data-d="3"]{--d:.24s}[data-d="4"]{--d:.32s}[data-d="5"]{--d:.4s}[data-d="6"]{--d:.48s}[data-d="7"]{--d:.56s}[data-d="8"]{--d:.64s}[data-d="9"]{--d:.72s}[data-d="10"]{--d:.8s}[data-d="11"]{--d:.88s}[data-d="12"]{--d:.96s}
.hero-sec { position: relative; overflow: hidden; }
.hero-sec > * { position: relative; z-index: 1; }
.hero-sec > .hero-glow { position: absolute; z-index: 0; right: -120px; top: -80px; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); z-index: 100; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero-in { opacity: 1 !important; transform: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .container { padding-left: 40px !important; padding-right: 40px !important; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  .nav-links { gap: 24px !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .container[style*="padding:"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  .nav-bar .container { padding-top: 0 !important; padding-bottom: 0 !important; height: 72px !important; }
  .nav-bar img { height: 40px !important; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none !important; }
  .nav-links { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch !important; gap: 0 !important; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgba(15,42,58,.3); max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .nav-links a { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 16px !important; }
  .nav-links a::after { display: none; }
  .nav-open .nav-links { max-height: 420px; }

  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [style*="display:flex"][style*="justify-content:space-between"]:not(.nav-bar .container) { flex-wrap: wrap; }
  .project-card { grid-template-columns: 1fr !important; }
  [style*="display:flex"][style*="gap"]:not(.nav-links):not(.container) { flex-wrap: wrap; }
  [style*="display:flex"]:has(> [style*="flex:1"]), [style*="display:flex"]:has(> [style*="flex:0 0"]) { flex-direction: column !important; align-items: stretch !important; }
  [style*="flex:0 0"], [style*="flex:1"] { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; }
  [style*="padding:44px"], [style*="padding:40px"], [style*="padding:48px"] { padding: 22px !important; }
  .project-photo { min-height: 200px; max-height: 240px; }

  h1 { font-size: 34px !important; line-height: 1.15 !important; }
  h2 { font-size: 24px !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  p[style*="text-align:right"] { text-align: left !important; }
  [style*="max-width"] { max-width: 100% !important; }
  [style*="height:420px"] { height: 300px !important; }
  [style*="height:340px"] { height: 260px !important; }
  [style*="padding:44px"] { padding: 22px !important; }
  [style*="padding:36px"] { padding: 24px !important; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .hero-glow { display: none; }
  .scroll-progress { height: 2px; }
}
#quote, #apply { scroll-margin-top: 110px; }