/* ==========================================================================
  NT TECH™ d.o.o. — Site-wide styles
   Design concept: printed-circuit-board substrate. Copper trace dividers,
   IC-chip cards with pin marks, via-dot accents, signal-green highlight.
   ========================================================================== */

:root{
  /* Color tokens */
  --bg:            #0A0D0B;
  --bg-panel:      #101512;
  --bg-panel-2:    #161C19;
  --trace-copper:  #B8733D;
  --trace-gold:    #D4A657;
  --signal:        #FF8A24;
  --signal-dim:    #C95A0A;
  --text:          #ECEDE8;
  --text-muted:    #8FA097;
  --border:        #24302A;
  --danger:        #E5716A;

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Layout */
  --maxw: 1180px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html{
  scrollbar-color:var(--signal) var(--bg-panel);
  scrollbar-width:thin;
}
html::-webkit-scrollbar{ width:10px; height:10px; }
html::-webkit-scrollbar-track{ background:var(--bg-panel); }
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #FFB15C, var(--signal) 45%, #D9650C);
  border:2px solid var(--bg-panel);
  border-radius:999px;
  box-shadow:0 0 8px rgba(255,138,36,.3);
}
html::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #FFC47F, #FF8A24 55%, #E66E12);
  box-shadow:0 0 12px rgba(255,138,36,.55);
}
html::-webkit-scrollbar-corner{ background:var(--bg-panel); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; color:var(--text-muted); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
}

/* ---------- PCB substrate background (all pages) ---------- */
.pcb-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(255,138,36,.05), transparent 40%),
    radial-gradient(circle at 82% 68%, rgba(184,115,61,.07), transparent 45%);
  background-size:64px 64px, 64px 64px, 100% 100%, 100% 100%;
  opacity:.55;
  animation:pcb-drift 9s ease-in-out infinite;
  will-change:background-position;
}
.pcb-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23B8733D' stroke-opacity='0.10' stroke-width='1.5'%3E%3Cpath d='M20 20 H100 V60 H180'/%3E%3Cpath d='M20 120 H60 V200 H140 V160 H220'/%3E%3Cpath d='M180 20 V90 H220'/%3E%3Cpath d='M40 200 V220 H100'/%3E%3C/g%3E%3Cg fill='%23FF8A24' fill-opacity='0.16'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='100' cy='60' r='3'/%3E%3Ccircle cx='180' cy='20' r='3'/%3E%3Ccircle cx='60' cy='120' r='3'/%3E%3Ccircle cx='140' cy='200' r='3'/%3E%3Ccircle cx='220' cy='160' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:240px 240px;
  animation:pcb-trace-drift 12s ease-in-out infinite;
  will-change:transform, opacity;
}
.pcb-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(115deg, transparent 38%, rgba(255,138,36,0) 44%, rgba(255,180,92,.9) 50%, rgba(255,138,36,0) 56%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,138,36,.42) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,138,36,.42) 0 1px, transparent 1px 64px);
  background-size:220% 100%, 64px 64px, 64px 64px;
  background-position:-120% 0, 0 0, 0 0;
  background-repeat:no-repeat, repeat, repeat;
  mix-blend-mode:screen;
  opacity:.2;
}
.pcb-bg::after{
  background-image:
    radial-gradient(circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,180,92,.7), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,138,36,.42) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,138,36,.42) 0 1px, transparent 1px 64px);
  background-size:100% 100%, 64px 64px, 64px 64px;
  background-position:0 0, 0 0, 0 0;
  background-repeat:no-repeat, repeat, repeat;
}
@keyframes pcb-drift{
  0%,100%{ background-position:0 0, 0 0, 0 0, 0 0; opacity:.38; }
  50%{ background-position:12px 7px, -8px 4px, 0 0, 0 0; opacity:.82; }
}
@keyframes pcb-trace-drift{
  0%,100%{ transform:translate(0, 0); opacity:.62; filter:brightness(.78) saturate(.82); }
  50%{ transform:translate(8px, 4px); opacity:1; filter:brightness(1.48) saturate(1.35); }
}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(10,13,11,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  transition:border-bottom .3s ease;
}
.nav{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:28px 24px;
  position:relative;
}

.brand{ 
  display:flex; align-items:center; gap:10px; 
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; 
  transition:all .6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
}
.nav:hover .brand{ 
  left:24px;
  transform:translateX(0);
}
.brand img{ width:42px; height:42px; }

.brand .chip-dot{ 
  width:9px; height:9px; border-radius:2px; background:var(--signal); box-shadow:0 0 8px var(--signal); 
}
.brand .brand-sub{ 
  color:var(--text-muted); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
  transition:opacity .6s cubic-bezier(0.34, 1.56, 0.64, 1) .2s;
  opacity:0;
}
.nav:hover .brand-sub{ 
  opacity:1;
}

/* Nav links - hidden by default, appear on hover, centered */
.nav-links{ 
  display:flex; align-items:center; gap:28px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  visibility:hidden;
  transition:opacity .6s cubic-bezier(0.34, 1.56, 0.64, 1) .15s, visibility .6s cubic-bezier(0.34, 1.56, 0.64, 1) .15s;
}
.nav:hover .nav-links{ 
  opacity:1;
  visibility:visible;
}

.nav-links a{
  font-size:.92rem; color:var(--text-muted); position:relative; padding:4px 0;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--signal);
}

/* Pulsing animation on hover */
.nav-links a:hover{
  animation:navPulse .8s ease-in-out infinite;
}
@keyframes navPulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.5; }
}

.nav-actions{ 
  display:flex; align-items:center; gap:14px;
  position:absolute;
  right:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .6s cubic-bezier(0.34, 1.56, 0.64, 1) .3s, visibility .6s cubic-bezier(0.34, 1.56, 0.64, 1) .3s;
}
.nav:hover .nav-actions{ 
  opacity:1;
  visibility:visible;
}

/* CTA button visibility on default state */
.nav-cta{
  /* Kontrolirano kroz .nav-actions parent */
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.03em;
  padding:11px 18px; border-radius:var(--radius); border:1px solid var(--signal);
  color:var(--signal); background:transparent; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ background:var(--signal); color:#06110B; transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,138,36,.18); }
.btn:active{ transform:translateY(0) scale(.97); box-shadow:none; }
.btn.btn-solid{ background:var(--signal); color:#06110B; }
.btn.btn-solid:hover{ background:var(--signal-dim); border-color:var(--signal-dim); color:#fff; }
.btn.btn-ghost{ border-color:var(--border); color:var(--text-muted); }
.btn.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); background:transparent; }

.nav-toggle{ display:none !important; }

/* ---------- Layout helpers ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ padding:96px 0; position:relative; }
.page-hero{ padding:88px 0 56px; }
.page-hero .container{ animation:page-rise .7s ease both; }
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.8rem); margin:14px 0 20px; max-width:820px; }
.page-hero p{ max-width:720px; font-size:1.05rem; }
@keyframes page-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* trace divider — signature element */
.trace-divider{ position:relative; height:40px; }
.trace-divider svg{ width:100%; height:100%; display:block; }
.trace-divider .via{ animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---------- IC-chip card ---------- */
.chip-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 24px;
  position:relative;
}
.chip-card::before, .chip-card::after{
  content:""; position:absolute; left:18px; right:18px; height:1px;
  background-image:repeating-linear-gradient(90deg, var(--trace-copper) 0 6px, transparent 6px 14px);
  opacity:.55;
}
.chip-card::before{ top:-1px; }
.chip-card::after{ bottom:-1px; }
.chip-card h3{ font-size:1.05rem; margin-bottom:.4em; }
.chip-card .chip-index{ font-family:var(--font-mono); color:var(--signal); font-size:.72rem; letter-spacing:.1em; }

.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.service-detail-card{
  border-left:3px solid var(--signal);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  animation:card-rise .65s ease both;
}
.service-detail-card:nth-child(2){ animation-delay:.08s; }
.service-detail-card:nth-child(3){ animation-delay:.16s; }
.service-detail-card:nth-child(4){ animation-delay:.24s; }
.service-detail-card:nth-child(5){ animation-delay:.32s; }
.service-detail-card:nth-child(6){ animation-delay:.4s; }
.service-detail-card:hover{ transform:translateX(6px); border-color:var(--trace-gold); box-shadow:10px 10px 0 rgba(255,138,36,.06); }
.service-detail-card ul{ padding-top:4px; }
.service-detail-card li{ transition:color .2s ease, transform .2s ease; }
.service-detail-card li::first-letter{ color:var(--signal); }
.service-detail-card li:hover{ color:var(--text); transform:translateX(4px); }
.pricing-section{ padding-top:32px; }
.pricing-title{ max-width:720px; margin:12px 0 12px; font-size:clamp(1.9rem,4vw,2.8rem); }
.pricing-subtitle{ max-width:680px; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; align-items:stretch; }
.pricing-card{ display:flex; flex-direction:column; padding:30px 24px 24px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); position:relative; animation:card-rise .7s ease both; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pricing-card:nth-child(2){ animation-delay:.12s; }
.pricing-card:nth-child(3){ animation-delay:.24s; }
.pricing-card:hover{ transform:translateY(-7px); border-color:var(--signal); box-shadow:0 14px 0 rgba(255,138,36,.06); }
.pricing-card-featured{ border-width:2px; }
.pricing-card h3{ font-size:1.7rem; margin:18px 0 8px; }
.pricing-card > p{ min-height:52px; font-size:.9rem; }
.pricing-price{ display:flex; flex-direction:column; gap:2px; margin:22px 0; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pricing-price strong{ color:var(--signal); font-family:var(--font-display); font-size:1.65rem; }
.pricing-price span{ color:var(--text-muted); font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.pricing-card ul{ display:flex; flex-direction:column; gap:10px; margin:0 0 26px; color:var(--text-muted); font-size:.88rem; flex:1; }
.pricing-card li::before{ content:"+"; color:var(--signal); font-family:var(--font-mono); margin-right:8px; }
.pricing-card .btn{ justify-content:center; width:100%; }
.process-card{ animation:card-rise .65s ease both; }
.process-card:nth-child(2){ animation-delay:.1s; }
.process-card:nth-child(3){ animation-delay:.2s; }
.process-card:nth-child(4){ animation-delay:.3s; }
.portfolio-card{ min-height:220px; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; animation:card-rise .65s ease both; }
.portfolio-card:nth-child(2){ animation-delay:.08s; }
.portfolio-card:nth-child(3){ animation-delay:.16s; }
.portfolio-card:nth-child(4){ animation-delay:.24s; }
.portfolio-card:nth-child(5){ animation-delay:.32s; }
.portfolio-card:nth-child(6){ animation-delay:.4s; }
.portfolio-card:hover{ transform:translateY(-6px); border-color:var(--signal); box-shadow:0 12px 0 rgba(255,138,36,.06); }
.portfolio-card h3{ flex:1; }
.portfolio-filters{ animation:page-rise .7s .15s ease both; }
@keyframes card-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
.contact-hero{ padding:88px 0 56px; }
.contact-hero .container{ animation:page-rise .7s ease both; }
.contact-form{ animation:card-rise .7s .1s ease both; }
.contact-aside .chip-card{ animation:card-rise .7s ease both; }
.contact-aside .chip-card:nth-child(2){ animation-delay:.12s; }
.contact-aside .chip-card:nth-child(3){ animation-delay:.24s; }
.error-page{ min-height:60vh; display:flex; align-items:center; }
.error-page .container{ animation:page-rise .7s ease both; }
.error-page .btn{ animation:soft-glow 2.8s ease-in-out infinite; }
@keyframes soft-glow{ 0%,100%{ box-shadow:0 0 0 rgba(255,138,36,0); } 50%{ box-shadow:0 0 22px rgba(255,138,36,.22); } }

/* ---------- Home page team and animated orange frames ---------- */
.company-intro{ padding:88px 0 56px; }
.company-intro-holder{
  max-width:920px; margin-top:20px; padding:48px 52px;
  border:1px solid var(--border); border-left:4px solid var(--signal);
  background:rgba(16,21,18,.86); box-shadow:16px 16px 0 rgba(255,138,36,.06);
}
.company-intro-holder h1{
  font-size:clamp(2.2rem,5vw,3.8rem);
  margin-bottom:20px;
  animation:subtle-title-pulse 4.8s ease-in-out infinite;
}
@keyframes subtle-title-pulse{
  0%,100%{ opacity:1; text-shadow:0 0 0 rgba(255,138,36,0); }
  50%{ opacity:.94; text-shadow:0 0 12px rgba(255,138,36,.18); }
}
.company-intro-holder p{ max-width:720px; font-size:1.1rem; }
.team-section{ padding:48px 0 72px; }
.section-heading{ margin-bottom:28px; }
.section-heading h2{ font-size:2rem; margin-top:10px; }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-card{ color:var(--text); background:var(--bg-panel); padding:10px; position:relative; overflow:hidden; }
.team-photo{ display:block; aspect-ratio:4 / 3; overflow:hidden; background:var(--bg-panel-2); }
.team-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); transition:transform .35s ease, filter .35s ease; }
.team-card:hover .team-photo img{ transform:scale(1.04); filter:grayscale(0) contrast(1.1); }
.team-photo-placeholder{ display:grid; place-items:center; border:1px solid var(--border); }
.team-photo-placeholder::before{ content:"X"; color:var(--signal); font-family:var(--font-mono); font-size:clamp(3rem, 9vw, 6rem); line-height:1; }
.team-copy{ padding:20px 14px 12px; text-align:center; }
.team-copy h3{ font-size:1.08rem; margin-bottom:5px; }
.team-role{ color:var(--signal); font-family:var(--font-mono); font-size:.76rem; margin-bottom:14px; }
.team-copy p:not(.team-role){ font-size:.9rem; min-height:52px; }
.team-contact{ display:block; color:var(--text-muted); font-family:var(--font-mono); font-size:.72rem; }
.seo-grid{ gap:16px; }
.seo-card{ min-height:190px; display:flex; flex-direction:column; justify-content:space-between; }
.seo-icon{ color:var(--signal); font-family:var(--font-display); font-size:2.1rem; line-height:1; text-align:center; padding-top:8px; }
.seo-card .team-copy{ padding:14px 8px 4px; }
.seo-card .team-copy p{ min-height:0; font-size:.82rem; }
.team-intro{ max-width:560px; }
.team-flip-grid{ margin-top:32px; }
.team-directory .team-flip-grid{ grid-template-columns:repeat(2, 1fr); max-width:960px; margin-left:auto; margin-right:auto; }
.team-flip-card{ min-height:520px; perspective:1000px; background:var(--bg-panel); }
.team-flip-inner{ width:100%; height:100%; min-height:520px; position:relative; transform-style:preserve-3d; transition:transform .65s ease; }
.team-flip-card.is-flipped .team-flip-inner{ transform:rotateY(180deg); }
.team-flip-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; padding:10px; background:var(--bg-panel); }
.team-flip-front{ text-align:center; }
.team-flip-front .team-photo{ width:100%; aspect-ratio:4 / 3; }
.team-flip-front .team-copy{ padding:20px 8px 8px; flex:1; display:flex; flex-direction:column; align-items:center; }
.team-flip-front .team-copy p:not(.team-role){ flex:1; width:100%; }
.team-flip-front .btn{ margin-top:10px; font-size:.72rem; padding:9px 12px; }
.team-flip-back{ transform:rotateY(180deg); justify-content:center; align-items:center; text-align:center; gap:8px; }
.team-flip-back h3{ margin-top:14px; }
.team-flip-back a{ color:var(--text); font-family:var(--font-mono); font-size:.82rem; }
.team-flip-back a:hover{ color:var(--signal); }
.team-flip-back .btn{ margin-top:18px; font-size:.72rem; }
.member-sections{ display:flex; flex-direction:column; gap:32px; margin-top:44px; }
.member-section{ display:grid; grid-template-columns:minmax(260px, .9fr) minmax(0, 1.1fr); gap:28px; align-items:stretch; scroll-margin-top:110px; }
.member-photo{ min-height:360px; overflow:hidden; background:var(--bg-panel-2); border:1px solid var(--border); }
.member-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.12) contrast(1.05); }
.member-details{ padding:34px; display:flex; flex-direction:column; justify-content:center; background:rgba(16,21,18,.9); }
.member-details h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin:12px 0 6px; }
.member-details > p:not(.team-role):not(.team-contact){ max-width:560px; }
.member-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.member-actions .btn{ white-space:nowrap; }
@property --border-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
.orange-frame{
  border:2px solid transparent;
  border-image-source:conic-gradient(
    from var(--border-angle),
    rgba(255,138,36,.58) 0deg 344deg,
    var(--signal) 350deg 360deg
  );
  border-image-slice:1;
  animation:orbit-border 2.8s linear infinite;
}
@keyframes orbit-border{ to{ --border-angle:360deg; } }
.stats-section{ padding:24px 0 96px; }
.stats-section h3{ color:var(--signal) !important; }

/* ---------- Buttons row / footer / forms shared ---------- */
.footer{
  border-top:1px solid var(--border);
  padding:56px 0 28px;
  background:linear-gradient(180deg, transparent, rgba(255,138,36,.02));
}
.footer .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer .brand{ position:static; transform:none; left:auto; display:inline-flex; margin-bottom:14px; }
.footer .brand-sub{ opacity:1; }
.footer h4{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.footer a{ color:var(--text-muted); font-size:.92rem; display:block; padding:4px 0; transition:color .2s; }
.footer a:hover{ color:var(--signal); }
.footer .footer-bottom{
  border-top:1px solid var(--border); padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); flex-wrap:wrap; gap:12px;
}

.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; }
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-panel-2); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--signal); }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-family:var(--font-mono); font-size:.78rem; }
.form-note.ok{ color:var(--signal); }
.form-note.err{ color:var(--danger); }

.quick-contact{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.quick-contact a{
  display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 18px; font-family:var(--font-mono); font-size:.85rem; color:var(--text); transition:all .2s;
}
.quick-contact a:hover{ border-color:var(--signal); color:var(--signal); }

/* ---------- Splash screen (blocking loading screen — fully opaque) ---------- */
#splash{
  position:fixed; inset:0; z-index:999;
  background:var(--bg); /* solid — nothing behind it should show through */
  display:flex; align-items:center; justify-content:center;
  opacity:1; visibility:visible;
  transition:opacity .6s ease, visibility .6s ease;
}
#splash::before{
  /* decorative PCB trace pattern, independent from the page's own .pcb-bg opacity */
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23B8733D' stroke-opacity='0.14' stroke-width='1.5'%3E%3Cpath d='M20 20 H100 V60 H180'/%3E%3Cpath d='M20 120 H60 V200 H140 V160 H220'/%3E%3Cpath d='M180 20 V90 H220'/%3E%3Cpath d='M40 200 V220 H100'/%3E%3C/g%3E%3Cg fill='%23FF8A24' fill-opacity='0.2'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='100' cy='60' r='3'/%3E%3Ccircle cx='180' cy='20' r='3'/%3E%3Ccircle cx='60' cy='120' r='3'/%3E%3Ccircle cx='140' cy='200' r='3'/%3E%3Ccircle cx='220' cy='160' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat; background-size:240px 240px;
}
#splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-panel{ text-align:center; padding:20px; position:relative; z-index:1; }
.splash-chip{
  border:1px solid var(--trace-copper);
  border-radius:var(--radius);
  padding:56px 72px;
  position:relative;
  background:rgba(16,21,18,.92);
}
.splash-chip::before, .splash-chip::after{
  content:""; position:absolute; left:24px; right:24px; height:1px;
  background-image:repeating-linear-gradient(90deg, var(--trace-gold) 0 6px, transparent 6px 14px);
}
.splash-chip::before{ top:-1px; } .splash-chip::after{ bottom:-1px; }
.splash-logo{
  width:96px; height:96px; margin:0 auto;
  animation:splashPulse 2.2s ease-in-out infinite;
}
@keyframes splashPulse{
  0%,100%{ opacity:1; text-shadow:0 0 0 rgba(255,138,36,0); }
  50%{ opacity:.82; text-shadow:0 0 22px rgba(255,138,36,.45); }
}
.splash-tag{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); letter-spacing:.1em; margin-top:10px; }
.splash-lang{ margin-top:32px; display:flex; gap:12px; justify-content:center; }
.splash-lang button{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.06em; padding:10px 22px;
  background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:var(--radius); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.splash-lang button:hover{ border-color:var(--signal); color:var(--signal); transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,138,36,.18); }
.splash-lang button:active{ transform:translateY(0) scale(.95); }

/* Page content fades in as the splash fades out */
#page-content{ opacity:1; }
#page-content.fade-in-pending{ opacity:0; transform:translateY(10px); }
#page-content.fade-in{
  opacity:1; transform:translateY(0);
  transition:opacity .7s ease, transform .7s ease;
}
@media (prefers-reduced-motion: reduce){
  .splash-logo{ animation:none; }
}

/* ---------- Utility ---------- */
.mt-lg{ margin-top:48px; } .center{ text-align:center; }
.text-muted{ color:var(--text-muted); }
.badge{ display:inline-block; font-family:var(--font-mono); font-size:.72rem; border:1px solid var(--border); border-radius:99px; padding:4px 12px; color:var(--signal); letter-spacing:.06em; }
.portfolio-filters .btn.active{ background:var(--signal); color:#06110B; border-color:var(--signal); }
.quick-contact a strong{ color:var(--signal); font-weight:500; }
/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav{ min-height:72px; padding:14px 20px; justify-content:flex-start; }
  .nav .brand, .nav:hover .brand{ left:20px; transform:none; }
  .nav-links, .nav:hover .nav-links{ display:none; }
  .nav-links.is-open, .nav:hover .nav-links.is-open{
    display:flex; position:absolute; top:100%; left:0; right:0; transform:none;
    flex-direction:column; align-items:stretch; gap:4px; padding:12px 20px 20px;
    background:rgba(16,21,18,.98); border-bottom:1px solid var(--border);
    box-shadow:0 14px 28px rgba(0,0,0,.28); opacity:1; visibility:visible;
  }
  .nav-links.is-open a{ padding:10px 0; }
  .nav-actions, .nav:hover .nav-actions{ right:20px; opacity:1; visibility:visible; }
  .nav-cta{ display:none !important; }
  .nav-toggle{ display:grid !important; place-items:center; min-width:44px; min-height:44px; padding:8px; background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius); }
  .container{ padding-left:20px; padding-right:20px; }
  section{ padding:72px 0; }
  .page-hero, .contact-hero, .company-intro{ padding:64px 0 40px; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid[style*="repeat(4,1fr)"]{ grid-template-columns:1fr 1fr !important; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .footer .footer-grid{ grid-template-columns:1fr 1fr; }
  .pricing-grid{ grid-template-columns:1fr 1fr; }
  .contact-form{ max-width:620px !important; }
  .splash-chip{ padding:40px 30px; }
}
@media (max-width:680px){
  .nav{ padding:10px 16px; min-height:64px; }
  .nav .brand, .nav:hover .brand{ left:50vw !important; transform:translateX(-50%) !important; }
  .brand img{ width:38px; height:38px; }
  .nav-actions, .nav:hover .nav-actions{ right:10px; }
  .nav-links.is-open, .nav:hover .nav-links.is-open{ max-height:calc(100vh - 64px); overflow-y:auto; padding:12px 16px 20px; }
  .nav-links.is-open a{ min-height:44px; display:flex; align-items:center; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .grid[style*="repeat(4,1fr)"]{ grid-template-columns:1fr !important; }
  .container{ padding-left:16px; padding-right:16px; }
  section{ padding:48px 0; }
  .page-hero, .contact-hero, .company-intro{ padding:48px 0 28px; }
  .page-hero h1{ margin:10px 0 14px; }
  .company-intro-holder{ margin-top:14px; padding:28px 20px; box-shadow:8px 8px 0 rgba(255,138,36,.06); }
  .company-intro-holder h1{ margin-bottom:14px; }
  .company-intro-holder p{ font-size:1rem; }
  .chip-card{ padding:22px 18px; }
  .service-detail-card{ gap:18px !important; }
  .service-detail-card h3{ font-size:1.2rem !important; }
  .service-detail-card ul{ gap:10px !important; font-size:.84rem !important; }
  .pricing-section{ padding-top:12px; }
  .pricing-title{ margin:8px 0 10px; font-size:1.8rem; }
  .pricing-subtitle{ font-size:.95rem; }
  .pricing-grid{ grid-template-columns:1fr; gap:16px; margin-top:24px; }
  .pricing-card{ padding:20px 18px 18px; }
  .pricing-card .chip-index{ align-self:flex-start; padding:4px 8px; border:1px solid var(--border); }
  .pricing-card h3{ font-size:1.45rem; margin:12px 0 4px; }
  .pricing-card > p{ margin-bottom:8px; font-size:.88rem; }
  .pricing-price{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px; margin:12px 0 16px; padding:12px 0; }
  .pricing-price strong{ font-size:1.85rem; }
  .pricing-price span{ white-space:nowrap; }
  .pricing-card ul{ gap:9px; margin-bottom:20px; font-size:.84rem; line-height:1.45; }
  .pricing-card li{ display:flex; align-items:flex-start; }
  .pricing-card li::before{ flex:0 0 auto; }
  .pricing-card .btn{ min-height:48px; }
  .pricing-section .pricing-subtitle:last-child{ margin-top:24px; padding:14px 16px; border-left:2px solid var(--signal); background:rgba(16,21,18,.72); font-size:.86rem; }
  .team-flip-card, .team-flip-inner{ min-height:460px; }
  .team-flip-front .team-copy{ padding:16px 6px 6px; }
  .team-copy p:not(.team-role){ min-height:0; }
  .contact-form{ max-width:none !important; padding:24px 18px; }
  .field{ margin-bottom:16px; }
  .field input, .field textarea, .field select{ min-height:48px; font-size:16px; padding:12px; }
  .field textarea{ min-height:132px; }
  .quick-contact{ margin-top:28px; gap:10px; }
  .quick-contact a{ width:100%; min-height:64px; padding:12px 14px; }
  .portfolio-filters{ gap:8px !important; }
  .portfolio-filters .btn{ flex:1 1 calc(50% - 8px); justify-content:center; min-height:44px; padding:9px 12px; }
  .member-section{ grid-template-columns:1fr; }
  .member-photo{ min-height:280px; }
  .member-details{ padding:26px 22px; }
  .footer .footer-grid{ grid-template-columns:1fr; }
  .pricing-card > p{ min-height:0; }
  .footer{ padding:40px 0 22px; }
  .footer .footer-grid{ gap:22px; margin-bottom:28px; }
  .footer .footer-bottom{ align-items:flex-start; padding-top:16px; }
  .splash-logo{ width:76px; height:76px; }
  .splash-chip{ padding:36px 20px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}