/* ============================================================================
   Csomópont — szolgáltatás-aloldalak közös stílusa
   (weboldalkeszites-eger.html, halozatepites-eger.html, kamerarendszer-eger.html)
   A főoldal (index.html) dizájnnyelvét követi.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0D1321;
  --panel:#141C2F;
  --panel-2:#182236;
  --line:#293651;
  --text:#E8ECF3;
  --text-dim:#8E9BB8;
  --signal:#5EEAD4;
  --signal-dim: rgba(94,234,212,0.35);
  --copper:#C97B4A;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

.grid-bg{
  position:fixed;inset:0;z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:0.18;
  pointer-events:none;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;align-items:center;gap:8px;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px var(--signal);
}

/* --- Header ---------------------------------------------------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 6vw;
  background:rgba(13,19,33,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:10px;}
.logo svg{width:40px;height:40px;flex-shrink:0;}
.logo-text{
  font-family:var(--font-display);
  font-weight:600;font-size:1.2rem;
  letter-spacing:-0.01em;color:var(--text);
}
nav{display:flex;gap:30px;align-items:center;}
nav a{font-size:0.88rem;color:var(--text-dim);transition:color 0.2s;}
nav a:hover{color:var(--text);}
nav a[aria-current="page"]{color:var(--signal);}
.btn{
  font-family:var(--font-mono);font-size:0.8rem;
  padding:10px 20px;border:1px solid var(--signal-dim);
  border-radius:2px;color:var(--signal);
  transition:all 0.2s;white-space:nowrap;
}
.btn:hover{background:var(--signal);color:var(--ink);border-color:var(--signal);}
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;
}

/* --- Layout -------------------------------------------------------------- */
main{position:relative;z-index:1;}
.page-hero{
  max-width:1400px;margin:0 auto;
  padding:150px 6vw 60px;
}
.breadcrumb{
  font-family:var(--font-mono);font-size:0.76rem;
  color:var(--text-dim);margin-bottom:22px;
}
.breadcrumb a:hover{color:var(--signal);}
.breadcrumb span{color:var(--line);margin:0 8px;}
.page-hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem, 4vw, 3.1rem);
  line-height:1.12;letter-spacing:-0.01em;
  margin:16px 0 20px;max-width:16ch;
}
.page-hero h1 span{color:var(--signal);}
.page-hero .lead{
  color:var(--text-dim);font-size:1.08rem;
  max-width:60ch;margin-bottom:30px;
}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.btn-primary{
  font-family:var(--font-mono);
  background:var(--signal);color:var(--ink);
  padding:14px 26px;border-radius:2px;
  font-size:0.85rem;font-weight:500;border:none;cursor:pointer;
  transition:transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--signal-dim);}
.btn-ghost{
  font-family:var(--font-mono);font-size:0.85rem;
  color:var(--text-dim);padding:14px 6px;
  border-bottom:1px solid var(--line);
}
.btn-ghost:hover{color:var(--text);border-color:var(--text-dim);}

section{
  position:relative;z-index:1;
  max-width:1400px;margin:0 auto;
  padding:70px 6vw;
}
.section-head{max-width:680px;margin-bottom:40px;}
.section-head h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem, 2.8vw, 2.2rem);
  margin-top:14px;letter-spacing:-0.01em;
}
.prose{max-width:68ch;}
.prose p{color:var(--text-dim);margin-bottom:16px;}
.prose p strong{color:var(--text);font-weight:600;}
.prose a{color:var(--signal);}
.prose a:hover{text-decoration:underline;}

/* --- Feature grid ------------------------------------------------------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.feature{
  background:var(--panel);padding:26px 24px;
  transition:background 0.2s;
}
.feature:hover{background:var(--panel-2);}
.feature .k{
  font-family:var(--font-mono);font-size:0.7rem;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--signal);display:block;margin-bottom:10px;
}
.feature h3{
  font-family:var(--font-display);font-size:1.05rem;
  font-weight:600;margin-bottom:8px;
}
.feature p{color:var(--text-dim);font-size:0.9rem;}

/* --- Definition / option list ----------------------------------------- */
.option-list{
  display:flex;flex-direction:column;
  gap:1px;background:var(--line);
  border:1px solid var(--line);max-width:860px;
}
.option-list > div{background:var(--panel);padding:22px 26px;}
.option-list h3{
  font-family:var(--font-display);font-size:1.05rem;
  font-weight:600;margin-bottom:6px;
}
.option-list h3 .tag{
  font-family:var(--font-mono);font-size:0.68rem;
  color:var(--copper);margin-left:10px;letter-spacing:0.06em;
}
.option-list p{color:var(--text-dim);font-size:0.92rem;}

/* --- Pricing table --------------------------------------------------- */
.price-table{
  width:100%;max-width:860px;border-collapse:collapse;
  font-size:0.92rem;margin-top:6px;
}
.price-table td{
  border-bottom:1px solid var(--line);
  padding:14px 14px 14px 0;vertical-align:top;color:var(--text-dim);
}
.price-table tr td:last-child{
  color:var(--text);font-family:var(--font-mono);
  white-space:nowrap;text-align:right;padding-right:0;
}
.price-note{
  font-size:0.82rem;color:var(--text-dim);
  margin-top:16px;max-width:68ch;
}

/* --- Steps --------------------------------------------------------- */
.steps{position:relative;max-width:760px;}
.steps .rail{position:absolute;left:19px;top:14px;bottom:14px;width:1px;background:var(--line);}
.step{
  display:grid;grid-template-columns:40px 1fr;gap:22px;
  padding:20px 0;position:relative;
}
.step:not(:last-child){border-bottom:1px solid var(--line);}
.step .n{
  font-family:var(--font-mono);font-size:0.76rem;
  color:var(--ink);background:var(--signal);
  width:40px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:2px;position:relative;z-index:1;
}
.step h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:4px;}
.step p{color:var(--text-dim);font-size:0.9rem;}

/* --- Callout (amit nem vállalok / megjegyzés) ----------------------- */
.callout{
  border-left:3px solid var(--copper);
  background:rgba(201,123,74,0.07);
  padding:18px 22px;border-radius:0 4px 4px 0;
  max-width:68ch;
}
.callout .k{
  font-family:var(--font-mono);font-size:0.72rem;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--copper);display:block;margin-bottom:8px;
}
.callout p{color:var(--text-dim);font-size:0.92rem;}
.callout p + p{margin-top:10px;}
.callout ul{margin:8px 0 0;padding-left:20px;color:var(--text-dim);font-size:0.92rem;}
.callout li{margin-bottom:6px;}
.callout li strong{color:var(--text);font-weight:600;}
.callout + .callout{margin-top:18px;}
.callout.is-info{border-left-color:var(--signal);}
.callout.is-info .k{color:var(--signal);}

/* --- FAQ --------------------------------------------------------- */
.faq-list{
  max-width:820px;display:flex;flex-direction:column;
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.faq-item{background:var(--panel);padding:22px 26px;}
.faq-item summary{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";font-family:var(--font-mono);color:var(--signal);
  font-size:1.2rem;flex-shrink:0;transition:transform 0.2s;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--text-dim);font-size:0.92rem;margin-top:14px;max-width:640px;}
.faq-item p + p{margin-top:10px;}

/* --- CTA band -------------------------------------------------- */
.cta-band{
  max-width:1400px;margin:0 auto;
  padding:56px 6vw 90px;
}
.cta-inner{
  border:1px solid var(--line);background:var(--panel);
  padding:48px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:24px;
}
.cta-inner h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.9rem);max-width:20ch;
}
.cta-inner p{color:var(--text-dim);font-size:0.92rem;margin-top:8px;}

/* --- Related services ---------------------------------------- */
.related{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);max-width:860px;
}
.related a{
  background:var(--panel);padding:22px 24px;transition:background 0.2s;
}
.related a:hover{background:var(--panel-2);}
.related .k{font-family:var(--font-mono);font-size:0.68rem;color:var(--copper);letter-spacing:0.06em;}
.related h3{font-family:var(--font-display);font-size:1rem;font-weight:600;margin:8px 0 4px;}
.related p{color:var(--text-dim);font-size:0.86rem;}
.related .go{color:var(--signal);font-family:var(--font-mono);font-size:0.8rem;margin-top:12px;display:inline-block;}

/* --- Footer -------------------------------------------------- */
footer{
  position:relative;z-index:1;
  padding:36px 6vw;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:0.78rem;color:var(--text-dim);
  max-width:1600px;margin:0 auto;
}
footer .footer-left{justify-self:start;}
footer .footer-center{justify-self:center;text-align:center;}
footer .footer-right{justify-self:end;}
footer .footer-links{display:flex;gap:16px;flex-wrap:wrap;}
footer .footer-links a{color:var(--text-dim);}
footer .footer-links a:hover{color:var(--signal);}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto;}
}
@media (max-width: 900px){
  nav{display:none;}
  footer{grid-template-columns:1fr;text-align:center;justify-items:center;}
  footer .footer-left,footer .footer-center,footer .footer-right{justify-self:center;}
  .cta-inner{padding:32px;}
}