/* Titán-Tech Bau – navy/királykék logóra épülő, "mérnöki rajz" arculat + hegesztőív-borostyán jelzőszín */
:root{
  --blue:#0F5BC4;--blue-lit:#4B93FF;--spark:#8DBBFF;
  --on-dark:#E9EFF8;--muted:#8D9BB2;--bg:#0A0F17;--ink:#0A2A5C;--paper:#EDEFF2;
  --line:rgba(255,255,255,.09);
  --f-d:'Bricolage Grotesque',sans-serif;--f-b:'Manrope',sans-serif;--f-m:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;color:var(--on-dark);background:var(--bg);font:300 1rem/1.65 var(--f-b);overflow-x:hidden}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px}
.wrap{width:min(1280px,100% - 3rem);margin-inline:auto}
.noise{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:10001;background:linear-gradient(90deg,var(--blue-lit),var(--spark));transform:scaleX(0);transform-origin:0 50%}
.glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(141,187,255,.10),rgba(75,147,255,.06) 55%,transparent);opacity:0;transition:opacity .5s;will-change:transform}
.glow.on{opacity:1}
main,.site-footer{position:relative;z-index:1}

/* LOGÓ */
.logo{display:flex;align-items:center;gap:.8rem;height:44px;opacity:0}
.logo-sym{height:100%;width:auto;flex:none;aspect-ratio:1070/670;overflow:visible}
.c-dark{fill:var(--on-dark)}.c-blue{fill:var(--blue-lit)}
.logo-word{display:flex;flex-direction:column;font:800 1rem/1 var(--f-d)}
.mask{display:block;overflow:hidden;padding-bottom:2px}.mask>span{display:block}
.l1{font-size:1.2rem}.l1 svg,.l2 svg{display:block;height:.78em;width:auto}
.l2{font-size:.84rem;margin-top:.3rem;color:var(--blue-lit)}
.logo.intro{position:fixed;z-index:10000;opacity:1;margin:0}

/* PRELOADER – a logó körvonala a betöltéssel együtt rajzolódik ki, a számláló fehér, a kapu a középvonal mentén nyílik */
.preloader{position:fixed;inset:0;z-index:9999;overflow:hidden;color:#fff}
.pre-panel{position:absolute;left:0;right:0;height:calc(50% + 1px);background:#070B12;
  transition:transform 1.3s var(--ease);will-change:transform}
.pre-top{top:0;background:radial-gradient(55vw 45vw at 90% 0,rgba(180,205,255,.14),transparent 60%),#070B12}
.pre-bot{bottom:0}
.preloader.go .pre-top{transform:translateY(-101%);box-shadow:0 1px 0 rgba(255,255,255,.6),0 24px 90px -8px rgba(255,255,255,.35)}
.preloader.go .pre-bot{transform:translateY(101%);box-shadow:0 -1px 0 rgba(255,255,255,.6),0 -24px 90px -8px rgba(255,255,255,.35)}
.pre-meta{position:absolute;left:max(1.5rem,calc((100vw - 1280px)/2));right:max(1.5rem,calc((100vw - 1280px)/2));bottom:calc(2.6rem + 3.4rem);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;transition:opacity .5s ease,transform .8s var(--ease)}
.pre-count{display:flex;align-items:flex-end;font:300 clamp(5rem,min(17vw,24vh),16rem)/.8 var(--f-d);letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums}
.pre-count .col{display:block;height:.8em;overflow:hidden;width:.6em;position:relative}
.pre-count .col b{display:block;font-weight:inherit;will-change:transform}
.pre-count .col span{display:block;height:.8em;line-height:.8}
.pre-count .pct{font-size:.16em;font-weight:500;letter-spacing:.04em;align-self:flex-start;margin:.55em 0 0 .6em;color:rgba(255,255,255,.7)}
.pre-tag{margin:0;font:300 clamp(1rem,1.5vw,1.25rem)/1.3 var(--f-b);color:rgba(255,255,255,.72);text-align:right;padding-bottom:.4rem}
.pre-ruler{position:absolute;left:max(1.5rem,calc((100vw - 1280px)/2));right:max(1.5rem,calc((100vw - 1280px)/2));bottom:2.6rem;height:1.6rem;
  display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid rgba(255,255,255,.28);transition:opacity .5s ease}
.pre-ruler i{display:block;width:1px;height:.55rem;background:rgba(255,255,255,.2);transition:background .25s}
.pre-ruler i.major{height:1.1rem}
.pre-ruler i.on{background:#fff}
.preloader.go .pre-meta{opacity:0;transform:translateY(14px)}
.preloader.go .pre-ruler{opacity:0}
/* az intró-logó: a fejléc logójának pontos másolata, a képernyő közepére nagyítva */
.logo.intro .logo-sym :is(polygon,path,rect){fill-opacity:0;stroke:#fff;stroke-width:4.4px;stroke-linejoin:miter;transition:fill-opacity .9s ease,stroke-opacity .9s ease .25s}
.logo.intro.filled .logo-sym :is(polygon,path,rect){fill-opacity:1;stroke-opacity:0}
.logo.intro .mask>span{transform:translateY(145%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.logo.intro .l2>span{transition-delay:.12s}
.logo.intro.word-in .mask>span{transform:none}

/* HEADER */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.8rem max(1.2rem,calc((100vw - 1280px)/2));background:rgba(10,15,23,.38);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);transition:transform .6s var(--ease),background .4s}
.site-header.hide{transform:translateY(-101%)}
.site-header.solid{background:rgba(10,15,23,.82)}
.nav{display:flex;gap:2.2rem;font:500 .78rem var(--f-m);letter-spacing:.06em;text-transform:uppercase}
.nav a{position:relative;opacity:.7;transition:opacity .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--spark);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}

/* GOMBOK – egyenes élek, fehér alap; hover: a hegesztőív színe söpör végig */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #fff;cursor:pointer;font:600 .95rem var(--f-b);color:#0A0F17;background:#fff;
  padding:.85rem 1.5rem;border-radius:0;position:relative;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s}
.btn span{position:relative;pointer-events:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--spark);transform:translateX(-101%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{color:#06101F;border-color:var(--spark)}
.btn-glass{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.3)}
.btn-primary{padding:1.1rem 2.2rem;font-size:1rem}
.link-ghost{font:500 .8rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;padding:.5rem 0;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.link-ghost:hover{color:var(--spark);border-color:var(--spark)}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(165deg,#13203a,#080c14 70%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blueprint{position:absolute;inset:0;opacity:.55;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/80px 80px;
  -webkit-mask:radial-gradient(70% 70% at 70% 30%,#000,transparent 75%);mask:radial-gradient(70% 70% at 70% 30%,#000,transparent 75%)}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,23,.5),rgba(10,15,23,.1) 40%,rgba(10,15,23,.95))}
.hero-content{position:relative;width:min(1280px,100% - 3rem);margin:0 auto;padding:7.5rem 0 2.2rem}
.kicker{display:flex;align-items:center;gap:1rem;margin:0 0 1.6rem;font:400 clamp(.95rem,1.2vw,1.1rem)/1.3 var(--f-b);color:#C3CEDF}
.kicker::before{content:"";flex:none;width:2.6rem;height:1px;background:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--spark);box-shadow:0 0 0 0 rgba(141,187,255,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(141,187,255,0)}100%{box-shadow:0 0 0 0 rgba(141,187,255,0)}}
h1,h2,h3{font-family:var(--f-d);margin:0}
h1{font-weight:800;font-size:clamp(3rem,min(8.2vw,14vh),9rem);line-height:.88;letter-spacing:-.045em;margin-bottom:2.6rem}
h1 em{font-style:normal;color:var(--on-dark)}
@supports (-webkit-text-stroke:1px #000){h1 em{color:transparent;-webkit-text-stroke:2px var(--on-dark)}}
h1{display:flex;flex-direction:column}
.ln{display:block;overflow:hidden;padding:.2em 0 .2em;margin:-.2em 0 -.14em}.ln>span{display:block}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hero-lead{max-width:30rem;font-size:clamp(1rem,1.4vw,1.15rem);color:#C3CEDF;margin:0}
.hero-cta{display:flex;align-items:center;gap:2rem}
/* Címtábla – mint egy műszaki rajz sarokmezője */
.titleblock{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(1.6rem,4vh,3.2rem) 0 0;border:1px solid rgba(255,255,255,.28)}
.titleblock>div{display:flex;flex-direction:column;gap:.7rem;padding:1rem 1.3rem 1.2rem}
.titleblock>div+div{border-left:1px solid rgba(255,255,255,.28)}
.titleblock dt{font:400 .8rem/1 var(--f-b);color:var(--muted)}
.titleblock dd{margin:0;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.titleblock b{font:300 clamp(2.2rem,4vw,3.6rem)/.9 var(--f-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.titleblock dd span{font:300 .95rem/1.25 var(--f-b);color:#C3CEDF}

/* MARQUEE */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:#0C121C;padding:1.1rem 0}
.track{display:flex;width:max-content;gap:2.2rem;padding-right:2.2rem;align-items:center;animation:mq 45s linear infinite;font:500 .85rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.track i{width:6px;height:6px;background:var(--spark);transform:rotate(45deg)}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* SZEKCIÓK */
.section{padding:clamp(5rem,12vw,10rem) 0}.section.tight{padding:clamp(3rem,7vw,6rem) 0}
h2{font-weight:800;font-size:clamp(2.4rem,6vw,5.6rem);line-height:.95;letter-spacing:-.035em}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
.intro-text{color:#C3CEDF;font-size:1.12rem;max-width:34rem}.intro-text p:first-child{margin-top:.6rem}
.sec-head{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:2rem;align-items:end;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.sec-head p{margin:0;color:var(--muted);max-width:26rem;justify-self:end;font-size:.95rem}
.tag{font:500 .78rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--spark);align-self:start;padding-top:.7rem}
[data-split] .ln{display:block}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}.word>span{display:inline-block}

/* SZOLGÁLTATÁS SOROK */
.row{position:relative;border-bottom:1px solid var(--line);overflow:hidden;--mx:50%;--my:50%}
.row::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(75,147,255,.14),transparent 60%)}
.row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--spark);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
.row:hover::before,.row.open::before{opacity:1}.row.open::after{transform:scaleY(1)}
.row-h{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:1rem;width:100%;padding:1.7rem 0;position:relative}
.row-h:focus-visible{outline:2px solid var(--spark);outline-offset:-2px}
.row .n{font:400 .85rem var(--f-m);color:var(--muted);padding-left:1rem;transition:color .3s}
.row-title{font-weight:500;font-size:1rem}
.row .tt{display:block;font-weight:500;font-size:clamp(1.4rem,3.2vw,2.8rem);line-height:1.05;letter-spacing:-.025em;transition:transform .5s var(--ease),color .3s}
.row .ar{font:400 1.6rem var(--f-m);padding-right:1rem;color:var(--muted);transition:transform .5s var(--ease),color .3s}
.row.open .n,.row.open .ar{color:var(--spark)}.row.open .tt{transform:translateX(.6rem);color:#fff}.row.open .ar{transform:rotate(90deg)}
.row-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.row.open .row-b{grid-template-rows:1fr}
.row-b>div{overflow:hidden;padding-left:6rem;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.row-b p{margin:0 0 1.8rem;max-width:36rem;color:#B6C3D8;font-size:1.05rem}
.ask{margin:0 1rem 1.8rem 0;font:500 .8rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lit);border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .3s}
.ask:hover{color:var(--spark)}

/* FOLYAMAT – világos szakasz a ritmusért */
.paper{background:var(--paper);color:var(--ink);padding:clamp(5rem,11vw,9rem) 0;position:relative;z-index:1}
.paper .sec-head{border-color:rgba(10,42,92,.15);grid-template-columns:1fr 3fr}.paper .tag{color:#B8680A}
.steps-wrap{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-top:3rem}
.rail{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(10,42,92,.15)}
.rail b{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#E58A00);transform:scaleX(0);transform-origin:0 50%}
.steps li::before{content:"";display:block;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--blue);margin:-3.4rem 0 2.2rem}
.steps span{font:500 .8rem var(--f-m);color:#B8680A}
.steps h3{font-weight:800;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.03em;margin:.4rem 0 .8rem}
.steps p{margin:0;color:#3A4A66;font-weight:400;max-width:20rem}

/* CTA + FOOTER */
.cta{padding-bottom:clamp(3rem,6vw,5rem)}
.cta-box{position:relative;overflow:hidden;padding:clamp(3rem,7vw,6.5rem);border-radius:0;border:1px solid rgba(255,255,255,.28);background:#0B111B}
.cta-box::after{content:"";position:absolute;right:-6rem;bottom:-6rem;width:20rem;height:20rem;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 3rem rgba(255,255,255,.015),0 0 0 6rem rgba(255,255,255,.012)}
.cta-box h2{max-width:14ch}
.cta-box p{max-width:32rem;color:#C3CEDF;margin:1.6rem 0 2.2rem}
.cta-row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;position:relative;z-index:1}
.mail{font:500 .85rem var(--f-m);color:var(--muted);border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}.mail:hover{color:var(--spark);border-color:var(--spark)}
.site-footer{padding:2.5rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;background:var(--bg)}
.foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}.foot p{margin:0}.foot strong{color:var(--on-dark);font-weight:600}

/* MODAL */
.modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:1rem}.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,9,15,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-panel{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;padding:2.2rem;border-radius:0;background:#111A28;border:1px solid var(--line)}
.modal-panel h2{font-size:2.2rem;margin-bottom:.4rem}
.modal-sub{margin:0 0 1.5rem;color:var(--muted)}
.modal-close{position:absolute;top:1rem;right:1.2rem;background:none;border:0;color:var(--on-dark);font-size:2rem;line-height:1;cursor:pointer;transition:color .3s,transform .4s var(--ease)}
.modal-close:hover{color:var(--spark);transform:rotate(90deg)}
form label{display:block;margin-bottom:1rem;font:500 .72rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
form input,form select,form textarea{display:block;width:100%;margin-top:.45rem;padding:.8rem 1rem;border-radius:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);color:var(--on-dark);font:300 1rem var(--f-b);letter-spacing:0;text-transform:none;transition:border-color .3s,background .3s}
form select option,form select optgroup{background:#111A28}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--spark);background:rgba(141,187,255,.04)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-msg{min-height:1.4rem;margin:0 0 1rem;font-size:.9rem;color:var(--blue-lit)}.form-msg.err{color:#FF8E8E}

@media (max-width:1000px){
  .sec-head,.paper .sec-head{grid-template-columns:1fr}.sec-head p{justify-self:start}.split{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:3.5rem}.hero-foot{align-items:flex-start}
}
@media (max-width:700px){
  .site-header{padding:.6rem .8rem}
  .logo{height:36px}.l1{font-size:1rem}.l2{font-size:.7rem}
  .btn-glass{padding:.7rem 1rem;font-size:.85rem}
  .row-h{grid-template-columns:2.6rem 1fr auto}.row-b>div{padding-left:3.6rem}
  .steps{grid-template-columns:1fr}.rail{display:none}.steps li::before{margin-top:0}
  .row2{grid-template-columns:1fr}
  .hero-cta{gap:1.2rem}.glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation:none!important}
}

/* WebGL hero + Lenis + folyamat-kiemelés */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}.hero-canvas.on{opacity:1}
.hero.has-gl .blueprint{opacity:.22;mix-blend-mode:screen}
.hero-vignette{background:linear-gradient(180deg,rgba(10,15,23,.45),rgba(10,15,23,0) 35%,rgba(10,15,23,.55) 70%,rgba(10,15,23,.96))}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
.steps li h3,.steps li::before{transition:color .5s,background .5s,transform .5s var(--ease)}
.steps li:not(.on) h3{color:rgba(10,42,92,.3)}.steps li.on::before{background:var(--blue);transform:scale(1.5)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:rgba(10,15,23,.94)}.modal-backdrop{background:rgba(6,9,15,.92)}
}
/* a full-screen blend-mode layer is expensive on phones */
@media (pointer:coarse){.noise{display:none}}

/* Mobil menü (<=700px a sima menü eltűnt, és nem volt helyette semmi) */
.head-actions{display:flex;align-items:center;gap:.6rem}
.menu-btn{display:none;width:44px;height:44px;padding:0;border-radius:0;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--on-dark);transition:transform .35s var(--ease),opacity .2s}
.menu-btn span:nth-child(1){top:15px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:27px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-cta{display:none}
@media (max-width:700px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:calc(100% + .5rem);left:0;right:0;flex-direction:column;gap:0;padding:.5rem;border-radius:0;
    background:rgba(10,15,23,.97);border:1px solid var(--line);font-size:.85rem}
  .menu-open .nav{display:flex}
  .nav a{opacity:1;padding:1rem .9rem;border-bottom:1px solid var(--line)}.nav a::after{display:none}
  .nav a:last-child{border-bottom:0}
  .nav-cta{display:block;color:var(--spark)}
}
@media (max-width:430px){.btn-glass{display:none}}

.hero h1 em {
  font-style: normal;
  color: #0E1520; /* A weboldal sötét háttérszíne */
  -webkit-text-stroke: 2px #ffffff; /* Körvonal vastagsága és színe */
  paint-order: stroke fill; /* A kitöltés eltakarja a belső vonalakat */
}

/* HERO belépő: a html.intro-on csak akkor kerül fel, ha lefut az intró; JS nélkül / reduced-motion esetén minden azonnal látszik */
.intro-on:not(.intro-done) h1 .ln>span{transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.intro-on:not(.hero-in) h1 .ln>span{transform:translateY(145%)}
.intro-on:not(.intro-done) h1 .ln:nth-child(2)>span{transition-delay:.14s}
.intro-on:not(.intro-done) [data-hero]:not(h1){transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.intro-on:not(.hero-in) [data-hero]:not(h1){opacity:0;transform:translateY(36px)}
.intro-on:not(.intro-done) .kicker{transition-delay:.05s}
.intro-on:not(.intro-done) .hero-foot{transition-delay:.35s}
.intro-on:not(.intro-done) .titleblock{transition-delay:.55s}

/* REFERENCIÁK – "rajzlapok" címtáblával */
.refs{padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden}
.refs-rail{--pad:max(1.5rem,calc((100vw - 1280px)/2));display:flex;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding:1.5rem var(--pad) 1.5rem;scroll-padding-inline:var(--pad);scrollbar-width:none;cursor:grab}
.refs-rail::-webkit-scrollbar{display:none}
.refs-rail.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.refs-rail:focus-visible{outline-offset:-4px}
.sheet{position:relative;flex:0 0 clamp(270px,32vw,440px);margin:0;scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.28);background:#0B111B}
.sheet-open{all:unset;display:block;cursor:zoom-in;box-sizing:border-box}
.sheet-open:focus-visible{outline:2px solid var(--spark);outline-offset:-2px}
.sheet-img{display:block;aspect-ratio:4/5;overflow:hidden;background:#0E1622;position:relative}
.sheet-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:saturate(.9)}
.sheet:hover .sheet-img img{transform:scale(1.045);filter:none}
.tb{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid rgba(255,255,255,.28)}
.tb-c{display:flex;flex-direction:column;gap:.35rem;padding:.7rem .9rem .8rem;min-width:0}
.tb-c+.tb-c{border-left:1px solid rgba(255,255,255,.28)}
.tb-c:nth-child(n+3){border-top:1px solid rgba(255,255,255,.28)}
.tb-c:nth-child(3){border-left:0}
.tb-w2{grid-column:span 2}
.tb-c span{font:400 .72rem/1 var(--f-b);color:var(--muted)}
.tb-c b{font:500 .98rem/1.2 var(--f-b);color:#fff;overflow-wrap:anywhere}
.sheet[data-sample]::after{content:"MINTA – cseréld le";position:absolute;top:.8rem;left:.8rem;padding:.35rem .6rem;background:#FFB347;color:#1a1204;font:600 .72rem/1 var(--f-b)}
.refs-ctl{display:flex;align-items:center;gap:1.5rem;margin-top:.6rem}
.refs-count{font:400 .85rem var(--f-m);color:var(--muted);font-variant-numeric:tabular-nums;min-width:5ch}
.refs-track{flex:1;height:1px;background:rgba(255,255,255,.2);position:relative}
.refs-track b{position:absolute;left:0;top:-1px;height:3px;background:#fff;width:20%;transform-origin:0 50%;transition:left .25s linear,width .25s linear}
.refs-btns{display:flex;gap:.6rem}
.refs-btns button{width:3rem;height:3rem;border-radius:0;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:400 1.2rem var(--f-b);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.refs-btns button:hover:not(:disabled){background:#fff;color:#0A0F17}
.refs-btns button:disabled{opacity:.3;cursor:default}
.lightbox{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:rgba(6,9,15,.94);color:#fff}
.lightbox[open]{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1.5rem}
.lightbox::backdrop{background:rgba(6,9,15,.8)}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;min-width:0}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border:1px solid rgba(255,255,255,.28)}
.lightbox figcaption{font:400 .95rem var(--f-b);color:#C3CEDF;text-align:center}
.lb-close,.lb-nav{width:3rem;height:3rem;border-radius:0;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:400 1.4rem var(--f-b);cursor:pointer;transition:background .3s,color .3s}
.lb-close:hover,.lb-nav:hover{background:#fff;color:#0A0F17}
.lb-close{position:absolute;top:1.2rem;right:1.2rem;z-index:2}
@media (max-width:700px){
  .hero-cta{flex-wrap:wrap;gap:1rem 1.6rem}.btn-primary{padding:1rem 1.6rem;white-space:nowrap}
  .pre-meta{flex-direction:column;align-items:flex-start;gap:1rem;bottom:calc(2.2rem + 3rem)}.pre-tag{text-align:left}
  .titleblock{grid-template-columns:1fr}.titleblock>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.28)}
  .titleblock>div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:1rem;padding:.8rem 1rem}
  .lightbox[open]{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:3.5rem 1rem 1rem}
  .lb-nav{position:absolute;bottom:1rem}.lb-prev{left:1rem}.lb-next{right:1rem}
}
@media (prefers-reduced-motion:reduce){.pre-panel,.sheet-img img{transition:none!important}}

/* ===== INTRÓ v2: fehér számláló, hegesztő-szikrák a haladásjelző végén, fázis-szöveg, rajzlap-sarokjelek ===== */
.pre-sparks{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.preloader::before{content:"";position:absolute;inset:1.1rem;z-index:3;pointer-events:none;opacity:.55;transition:opacity .5s;background-repeat:no-repeat;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:24px 1px,1px 24px,24px 1px,1px 24px,24px 1px,1px 24px,24px 1px,1px 24px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
.preloader.go::before{opacity:0}
.pre-meta,.pre-ruler{z-index:3}
.pre-ruler .pre-fill{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#fff;box-shadow:0 0 14px 2px rgba(255,255,255,.75),0 0 40px 6px rgba(190,215,255,.45);pointer-events:none}
.pre-tag{overflow:hidden;font-size:clamp(1.2rem,2.2vw,2rem);font-weight:300;letter-spacing:-.01em;color:#fff}
.pre-tag span{display:inline-block;animation:tagIn .7s cubic-bezier(.16,1,.3,1) both}
@keyframes tagIn{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.preloader.flash .pre-count{animation:cntFlash .9s ease-out}
@keyframes cntFlash{0%{filter:none}30%{filter:drop-shadow(0 0 28px rgba(255,255,255,.75))}100%{filter:none}}

/* részecske-por (tsParticles) */
.pre-dust{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s}
.preloader.go .pre-dust{opacity:0}
.pre-top{background:radial-gradient(70vw 55vw at 85% -10%,rgba(190,210,255,.10),transparent 65%),#070B12}

/* Nyílt forráskódú kiegészítők: tsParticles (por) + vanilla-tilt (referencia-lapok) */
.fx-dust{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-box>*:not(.fx-dust){position:relative;z-index:1}
.sheet{transform-style:preserve-3d;will-change:transform}
.sheet .js-tilt-glare{border-radius:0}

.pre-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;transition:opacity .7s}
.preloader.go .pre-gl{opacity:0}
.bg-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}

.track i{width:12px;height:12px;transform:none;color:#fff;opacity:.5;background:linear-gradient(currentColor,currentColor) center/1px 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}

/* elválasztó: csavarfej (apró gyűrű) */
.track i{width:9px;height:9px;background:none;border:1px solid currentColor;border-radius:50%;color:#fff;opacity:.45}

/* ===== Grafikai finomítások az egész oldalon ===== */
.progress{background:linear-gradient(90deg,#6F9FE6,#fff)}
/* tervrajzi vonal a szekciófejlécek alatt: görgetésre kirajzolódik (ahol a böngésző támogatja) */
.sec-head{border-bottom:0;position:relative}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.12) 60%,transparent)}
.paper .sec-head::after{background:linear-gradient(90deg,rgba(10,42,92,.6),rgba(10,42,92,.1) 60%,transparent)}
@supports (animation-timeline:view()){
  .sec-head::after{transform-origin:0 50%;animation:seam linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
  @keyframes seam{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* körbefutó fénycsík az ajánlatkérő doboz szélén */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.cta-box::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--a),transparent 0 72%,rgba(200,222,255,.95) 90%,transparent 100%);
  -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 exclude,linear-gradient(#000 0 0);animation:ctaSpin 7s linear infinite}
@keyframes ctaSpin{to{--a:360deg}}

.logo.intro.filled .c-dark :is(polygon,path,rect){fill:url(#shD)}
.logo.intro.filled .c-blue :is(polygon,path,rect){fill:url(#shB)}

/* Grafikai finomítások v3 */
::selection{background:#fff;color:#0A0F17}
.marquee{-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.site-footer{position:relative;overflow:hidden;padding-bottom:0}
.foot-mark{font:800 clamp(3rem,15.5vw,15rem)/.82 var(--f-d);letter-spacing:-.05em;white-space:nowrap;text-align:center;margin-top:2.5rem;padding-bottom:.08em;user-select:none;pointer-events:none;
  color:var(--bg);-webkit-text-stroke:2px rgba(255,255,255,.16);paint-order:stroke fill;-webkit-mask:linear-gradient(#000 20%,transparent 96%);mask:linear-gradient(#000 20%,transparent 96%)}
.row.open .tt{text-shadow:0 0 40px rgba(150,190,255,.25)}

/* ===== INTRÓ v3: csiszolt acéllemez + a hegesztőfény visszaverődése + utóizzás ===== */
.pre-panel{background-color:#070B12;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='b' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.0022 .85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .72  0 0 0 0 .78  0 0 0 0 .9  0 0 0 .5 -.1'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");background-size:700px 700px}
.pre-light{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;transition:opacity .6s;
  background:radial-gradient(ellipse 640px 240px at var(--hx,50%) var(--hy,50%),rgba(200,222,255,.30),transparent 70%),radial-gradient(circle 120px at var(--hx,50%) var(--hy,50%),rgba(255,255,255,.35),transparent 70%)}
.preloader.go .pre-light{opacity:0}
.logo.intro:not(.filled) .logo-sym{filter:drop-shadow(0 0 5px rgba(200,225,255,.9))}
/* kurzor */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:10002;pointer-events:none;opacity:0;mix-blend-mode:difference}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid #fff;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s}
.has-cursor .cur-dot,.has-cursor .cur-ring{opacity:1}
.cur-ring.hot{width:72px;height:72px;margin:-36px 0 0 -36px;background:#fff}

/* v4: sima sötét háttér az épülő város mögött, kurzor-körözés nélkül */
.pre-top,.pre-bot{background-image:none}
.pre-top{background-image:radial-gradient(70vw 55vw at 85% -10%,rgba(150,185,235,.12),transparent 65%)}
.cur-dot,.cur-ring{display:none!important}

/* v5: sarokjelek ki; kurzor-fény + pontminta */
.preloader::before{display:none}
.spot{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(440px circle at var(--sx,50%) var(--sy,50%),rgba(150,190,255,.13),transparent 65%)}
.spot::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 1.6px) 0 0/30px 30px;
  -webkit-mask:radial-gradient(250px circle at var(--sx,50%) var(--sy,50%),#000,transparent 72%);mask:radial-gradient(250px circle at var(--sx,50%) var(--sy,50%),#000,transparent 72%)}
.spot.on{opacity:1}

/* v6: az intró két panelje pontosan egyszínű (nincs átmenet, nincs két külön tömb) */
.preloader .pre-panel{background:#070B12;background-image:none}
.pre-light{display:none}
/* kurzor: folyadék-füst, kékesfehér árnyalatra színezve */
.fluid{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s;mix-blend-mode:screen;
  filter:grayscale(1) sepia(1) hue-rotate(185deg) saturate(2.4) brightness(1.1)}
.fluid.on{opacity:.6}

/* ===== Mobil, elérhetőség, stabilitás ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,.btn,[role=button]{touch-action:manipulation}
.skip{position:fixed;left:.75rem;top:-4rem;z-index:10003;background:#fff;color:#0A0F17;padding:.7rem 1rem;font-weight:600;transition:top .2s}
.skip:focus{top:calc(.75rem + env(safe-area-inset-top,0px))}
@media (pointer:coarse){button,.btn,.menu-btn{min-height:44px}.row-h{min-height:56px}}
@media (max-width:700px){input,select,textarea{font-size:16px}body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}}
img,svg,video,canvas{max-width:100%}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cur-sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9000}

/* kurzor: tervrajz-lencse */
.xray{position:fixed;inset:0;z-index:8000;pointer-events:none;opacity:0;transition:opacity .5s;mix-blend-mode:screen;
  background:linear-gradient(rgba(150,190,255,.20) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(150,190,255,.20) 1px,transparent 1px) 0 0/24px 24px,
             linear-gradient(rgba(200,222,255,.42) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(200,222,255,.42) 1px,transparent 1px) 0 0/120px 120px;
  -webkit-mask:radial-gradient(circle var(--r,200px) at var(--sx,50%) var(--sy,50%),#000 0%,transparent 100%);mask:radial-gradient(circle var(--r,200px) at var(--sx,50%) var(--sy,50%),#000 0%,transparent 100%)}
.xray.on{opacity:.7}
/* intró: folytonos horizont-fény mindkét panel fölött (nincs két külön tömb) */
.pre-sky{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s;
  background:radial-gradient(130vw 70vh at 50% 108%,rgba(60,120,210,.32),transparent 68%),radial-gradient(80vw 50vh at 50% -10%,rgba(120,150,210,.10),transparent 70%)}
.preloader.go .pre-sky{opacity:0}

/* lábléc: Facebook-hivatkozás */
.foot-social{position:relative;z-index:2;display:flex;justify-content:center;padding:1.4rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom,0px))}
.foot-social a{display:inline-flex;align-items:center;gap:.7rem;color:#E9EFF8;text-decoration:none;font:500 .82rem/1 var(--f-m,"JetBrains Mono",monospace);letter-spacing:.14em;text-transform:uppercase;padding:.9rem 0;position:relative}
.foot-social a::after{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:1px;background:currentColor;transform:scaleX(.25);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.foot-social a:hover::after,.foot-social a:focus-visible::after{transform:scaleX(1)}
.foot-social i{font-style:normal;display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.foot-social a:hover i{transform:translate(3px,-3px)}
.foot-social a:focus-visible{outline:2px solid #9CC4FF;outline-offset:4px}

/* ===== Intró – telefonra optimalizálva ===== */
.preloader{touch-action:none;overscroll-behavior:none}
@media (max-width:700px){
  /* vastagabb körvonal: a szimbólum itt kisebbre skálázódik, mint gépen */
  .logo.intro .logo-sym :is(polygon,path,rect){stroke-width:7.2px}
  /* a szűrős SVG-t az iOS rajzolás közben nem frissíti: telefonon nincs filter, a fényt a szikra-vászon adja */
  .logo.intro:not(.filled) .logo-sym{filter:none}
  .pre-sky{background:radial-gradient(160vw 60vh at 50% 105%,rgba(60,120,210,.30),transparent 68%)}
}
@media (pointer:coarse){
  /* a kapunyílás fényárnyéka olcsóbb (nagy blur-sugár mobilon akad) */
  .preloader.go .pre-top{box-shadow:0 1px 0 rgba(255,255,255,.6),0 10px 32px -6px rgba(255,255,255,.3)}
  .preloader.go .pre-bot{box-shadow:0 -1px 0 rgba(255,255,255,.6),0 -10px 32px -6px rgba(255,255,255,.3)}
  .pre-panel{transition-duration:1.1s}
}

@media (pointer:coarse){.logo.intro:not(.filled) .logo-sym{filter:none}}

/* telefon: a körvonalat a vászon rajzolja, az SVG csak a kitöltést adja */
.logo.intro.cv-outline .logo-sym :is(polygon,path,rect){stroke:none;stroke-opacity:0;transition:fill-opacity .4s ease}

/* ===== Ajánlatkérő modál: telefonon görgethető ===== */
.modal-panel{max-height:92vh;max-height:92dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;outline:0}
@media (max-width:700px){
  .modal{padding:.6rem;place-items:center}
  .modal-panel{max-height:calc(100vh - 1.2rem);max-height:calc(100dvh - 1.2rem);padding:1.5rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
  .modal-panel h2{font-size:1.7rem;padding-right:2.2rem}
  .modal-sub{font-size:.92rem;margin-bottom:1.1rem}
  .modal-close{position:sticky;float:right;top:0;right:auto;margin:-.6rem -.3rem 0 0;z-index:2;padding:0 .5rem}
}

/* ===== Hero számlap: telefonon egységes oszlopok (a hosszabb szöveg ne tolja el a sort) ===== */
@media (max-width:700px){
  .titleblock>div{display:grid;grid-template-columns:6.4rem 1fr;align-items:center;gap:.6rem 1rem}
  .titleblock dd{display:grid;grid-template-columns:2.9rem 1fr;align-items:center;gap:.5rem;flex-wrap:nowrap}
  .titleblock dd b{text-align:left}
  .titleblock dd span{min-width:0;font-size:.9rem;line-height:1.25}
}

/* ajánlatkérő nyitva: nincs kurzor-effekt (tervrajz-lencse, fény, füst, szikrák) */
.modal-open .xray,.modal-open .glow,.modal-open .spot,.modal-open .fluid,.modal-open .cur-sparks,.modal-open .cur-dot,.modal-open .cur-ring{opacity:0!important;visibility:hidden!important;transition:none!important}

/* megjegyzés az ipari szekció alatt: a lakossági szolgáltatások ipari megrendelőknek is */
.cross{margin:1.8rem 0 0;padding:1.1rem 1.3rem;max-width:62rem;border:1px solid var(--line);border-left:2px solid var(--spark);color:#C3CEDF;font-size:1rem;line-height:1.6}
.cross strong{display:block;color:#fff;font-weight:600;margin-bottom:.3rem}
.cross a{color:var(--spark);border-bottom:1px solid currentColor;white-space:nowrap}
.cross a:hover{color:#fff}