/* different.hu – fő stíluslap
   Verziózás: a hivatkozásban lévő ?v= paramétert növeld módosításkor! */

:root{
  --ink:#0A1626;
  --panel:#12233C;
  --panel-2:#0E1B30;
  --paper:#F5F8FB;
  --white:#FFFFFF;
  --cyan:#4DC2E4;
  --cyan-deep:#187FA6;
  --diff-green:#3ECF8E;
  --diff-red:#EF6E6B;
  --text:#1D2B3F;
  --muted:#5A6B82;
  --muted-inv:#9FB2C9;
  --border:#DFE7F0;
  --radius:14px;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--body);color:var(--text);background:var(--white);line-height:1.65;font-size:1.0625rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-deep)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--cyan);color:var(--ink);padding:.6rem 1rem;z-index:100;font-weight:600}
.skip-link:focus{left:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:var(--disp);line-height:1.15;color:var(--ink)}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);margin-bottom:.75rem}
h3{font-size:1.2rem}
section{padding:5rem 0}
.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-deep);display:block;margin-bottom:.75rem}
.eyebrow::before{content:"++ ";color:var(--diff-green)}
.lead{color:var(--muted);max-width:46rem;margin-bottom:2.5rem}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* Fejléc */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:32px;width:auto;filter:brightness(0) invert(1)}
.main-nav{display:flex;gap:1.5rem;align-items:center;align-self:stretch}
.main-nav a{color:var(--muted-inv);text-decoration:none;font-size:.95rem}
.main-nav a:hover{color:var(--white)}
/* A CTA gomb saját színe – felülírja a fenti .main-nav a szabályt */
.main-nav a.btn-primary,.main-nav a.btn-primary:hover{color:var(--ink)}
.main-nav a.btn-ghost,.main-nav a.btn-ghost:hover{color:var(--white)}
.btn{display:inline-block;cursor:pointer;font-family:var(--disp);font-weight:700;text-decoration:none;border-radius:999px;padding:.8rem 1.7rem;transition:transform .15s ease,box-shadow .15s ease;text-align:center}
.btn-primary{background:var(--cyan);color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(77,194,228,.35)}
.btn-ghost{border:1.5px solid var(--muted-inv);color:var(--white)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-cta{padding:.55rem 1.2rem;font-size:.9rem}
.nav-toggle{display:none;background:none;border:0;color:var(--white);font-size:1.6rem;cursor:pointer}

/* Termékeink legördülő almenü */
.has-submenu{position:relative;display:flex;align-items:center;align-self:stretch}
.submenu-trigger{background:none;border:0;cursor:pointer;font-family:var(--body);font-size:.95rem;line-height:1;color:var(--muted-inv);display:inline-flex;align-items:center;gap:.35rem;padding:0}
.submenu-trigger:hover,.has-submenu:focus-within .submenu-trigger,.has-submenu.open .submenu-trigger{color:var(--white)}
.submenu-trigger .caret{font-size:.7rem;transition:transform .15s ease}
.submenu-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* Lenyíló panel: 2×2 logós rács */
.submenu{position:absolute;top:100%;left:0;z-index:60;
  display:none;grid-template-columns:repeat(2,1fr);gap:.3rem;
  width:460px;max-width:calc(100vw - 2rem);
  list-style:none;margin:0;padding:.6rem;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.08);border-top:0;border-radius:0;
  box-shadow:0 24px 48px rgba(0,0,0,.45)}
.has-submenu:hover>.submenu,.has-submenu:focus-within>.submenu,.has-submenu.open>.submenu{display:grid}
.submenu li{margin:0}
.submenu a{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;
  height:100%;padding:.9rem .95rem;border-radius:10px;text-decoration:none}
.submenu a:hover{background:var(--panel)}
.submenu-logo{height:36px;width:auto;max-width:150px;object-fit:contain}
.submenu a span{color:var(--muted-inv);font-size:.82rem;line-height:1.3}
.submenu a:hover span{color:var(--white)}

/* Ikonok */
.icon{width:42px;height:42px;color:var(--cyan-deep);display:block;margin-bottom:1rem}
.icon-sm{width:30px;height:30px;margin-bottom:.4rem}
.ai-item .icon{color:var(--cyan)}

/* Hero */
.hero{background:linear-gradient(160deg,var(--ink) 0%,var(--panel-2) 100%);color:var(--white);padding:6rem 0 5.5rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(77,194,228,.2) 1.2px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:linear-gradient(120deg,rgba(0,0,0,.95),transparent 70%);mask-image:linear-gradient(120deg,rgba(0,0,0,.95),transparent 70%);pointer-events:none}
/* Egér-reflektor réteg (canvas): a kurzor körül képkockánként "töltjük" a pöttyöket,
   az egész réteg folyamatosan lecseng -> befelé felragyog, kifelé elhal, állva pulzál. */
.hero-lens{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);color:var(--white);margin-bottom:1.25rem}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero p{color:var(--muted-inv);max-width:34rem;margin-bottom:2rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
/* A hero áttetsző ghost gombja mögé tömör alap, hogy a reflektor pöttyei ne üssenek át */
.hero .btn-ghost{background:rgba(14,27,48,.92)}
.trust-row{display:flex;gap:2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.85rem;color:var(--muted-inv)}
.trust-row strong{display:block;font-family:var(--disp);font-size:1.35rem;color:var(--white)}

/* Diff kártya – szignatúra elem */
.diff-card{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);font-family:var(--mono);font-size:.92rem}
.diff-head{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);color:var(--muted-inv);font-size:.8rem}
.diff-head::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--diff-red);box-shadow:16px 0 0 #F5C563,32px 0 0 var(--diff-green)}
.diff-head span{margin-left:2.6rem}
.diff-body{padding:1.1rem 0;line-height:1.9}
.diff-line{padding:.1rem 1.25rem;white-space:pre-wrap}
.diff-line.del{background:rgba(239,110,107,.12);color:var(--diff-red)}
.diff-line.add{background:rgba(62,207,142,.12);color:var(--diff-green)}
.diff-line.ctx{color:var(--muted-inv)}
/* Gépelés-effekt: villogó kurzor az éppen írt soron */
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.diff-line.typing::after{content:"";display:inline-block;width:.5em;height:1.05em;
  background:currentColor;margin-left:2px;vertical-align:-.15em;
  animation:caretBlink .9s steps(1,end) infinite}

/* Szolgáltatások */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card{background:rgba(245,248,251,.68);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.card h3{margin-bottom:.6rem}
.card p{color:var(--muted);font-size:.98rem}
.card ul{list-style:none;margin-top:1rem}
.card li{padding-left:1.4rem;position:relative;font-size:.95rem;margin-bottom:.4rem;color:var(--text)}
.card li::before{content:"+";position:absolute;left:0;color:var(--diff-green);font-family:var(--mono);font-weight:700;display:inline-block}
/* Hover: kártya kiemelés + a "+" jelek egyszeri pördülése */
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 16px 40px rgba(24,127,166,.18);background:var(--paper)}
@keyframes plusSpin{to{transform:rotate(360deg)}}
.card:hover li::before{animation:plusSpin .5s ease}

/* Szolgáltatások háttér: alapból NEM látszó vonalak – csak a végigfutó glow világítja meg
   azt a szakaszt, amin épp áthalad (futófény). */
#szolgaltatasok{position:relative;overflow:hidden}
#szolgaltatasok>.wrap{position:relative;z-index:1}
.flow-lines{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fl{position:absolute;left:0;right:0;height:2px}
.fl::before{content:"";position:absolute;top:50%;left:0;height:2px;width:180px;border-radius:2px;
  transform:translate(-260px,-50%);
  background:linear-gradient(90deg,transparent 0%,rgba(77,194,228,.85) 50%,transparent 100%);
  filter:blur(.6px);
  box-shadow:0 0 12px 1px rgba(77,194,228,.4);
  animation:flRun 8s linear infinite}
.fl:nth-child(1){top:55%}
.fl:nth-child(2){top:82%}
.fl:nth-child(1)::before{width:150px;animation-duration:8s;animation-delay:0s}
.fl:nth-child(2)::before{width:210px;animation-duration:10.5s;animation-delay:3s}
@keyframes flRun{
  0%{transform:translate(-260px,-50%)}
  100%{transform:translate(calc(100vw + 260px),-50%)}
}

/* AI szekció */
.ai-section{background:var(--ink);color:var(--white)}
.ai-section h2,.ai-section h3{color:var(--white)}
.ai-section .lead{color:var(--muted-inv)}
.ai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:80%;margin-right:auto}
.ai-item{background:rgba(18,35,60,.72);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.75rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.ai-item:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 16px 40px rgba(77,194,228,.16);background:var(--panel)}

/* AI szekció háttere: izzó áramköri alaplap, középen pulzáló AI chippel */
.ai-section{position:relative;overflow:hidden}
.ai-section>.wrap{position:relative;z-index:1}
.ai-board{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  /* A chip (150 viewBox-egység) mérete a board szélességéből jön: board/8. 1700px -> chip ~213px */
  max-width:1700px;left:50%;right:auto;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 92%,transparent 100%)}
.ai-board .board-rot{transform-box:view-box;transform-origin:0 0}
.ai-board .traces{opacity:.5}
.ai-board .pulses{opacity:.6}
.ai-board .traces path{fill:none;stroke:rgba(255,255,255,.15);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-board .node{fill:rgba(255,255,255,.45)}
.ai-board .pins line{stroke:rgba(255,255,255,.3);stroke-width:3;stroke-linecap:round}
.ai-board .chip-body{fill:#0E1B30;stroke:rgba(77,194,228,.7);stroke-width:2}
.ai-board .chip-inner{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5}
.ai-board .chip-label{fill:#fff;font-family:var(--disp);font-weight:700;font-size:54px;text-anchor:middle;dominant-baseline:middle}
/* A pulzálást JS randomizálja; ez a statikus fallback (JS/kevés mozgás esetén) */
.ai-board .chip{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 8px rgba(77,194,228,.5))}
/* Energiaimpulzusok: fehéren izzó fény fut a nyomvonalakon a chip felé */
.ai-board .pulses path{fill:none;stroke:#eafcff;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:6 180;stroke-dashoffset:0;
  animation:tracePulse 3.4s linear infinite}
@keyframes tracePulse{to{stroke-dashoffset:186}}
.ai-board .pulses path:nth-child(1){animation-duration:3.4s;animation-delay:-0.0s}
.ai-board .pulses path:nth-child(2){animation-duration:4.0s;animation-delay:-1.3s}
.ai-board .pulses path:nth-child(3){animation-duration:3.0s;animation-delay:-0.7s}
.ai-board .pulses path:nth-child(4){animation-duration:4.4s;animation-delay:-2.1s}
.ai-board .pulses path:nth-child(5){animation-duration:3.6s;animation-delay:-1.0s}
.ai-board .pulses path:nth-child(6){animation-duration:3.2s;animation-delay:-2.6s}
.ai-board .pulses path:nth-child(7){animation-duration:4.2s;animation-delay:-0.4s}
.ai-board .pulses path:nth-child(8){animation-duration:3.8s;animation-delay:-1.8s}
.ai-board .pulses path:nth-child(9){animation-duration:2.8s;animation-delay:-0.9s}
.ai-board .pulses path:nth-child(10){animation-duration:4.6s;animation-delay:-3.0s}
.ai-board .pulses path:nth-child(11){animation-duration:3.5s;animation-delay:-1.5s}
.ai-board .pulses path:nth-child(12){animation-duration:3.1s;animation-delay:-2.2s}
@media (prefers-reduced-motion:reduce){.ai-board .pulses{display:none}}
.ai-item h3{font-size:1.1rem;margin-bottom:.5rem}
.ai-item p{color:var(--muted-inv);font-size:.97rem}

/* Termékek */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.product{position:relative;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:.6rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.product:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 16px 40px rgba(24,127,166,.18)}
/* Az egész kártya kattintható: a "Részletek" link kifeszül a teljes kártyára */
.product a.more::after{content:"";position:absolute;inset:0;z-index:1}
.product .product-logo{display:flex;align-items:center;min-height:80px;margin-bottom:.6rem}
.product .product-logo img{height:80px;width:auto;max-width:100%;object-fit:contain}
/* TerraWise logó fehér szövegű, ezért nála marad a sötét doboz – tartalomhoz igazodó szélességgel */
.product .product-logo.boxed{align-self:flex-start;min-height:0;background:var(--ink);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 30px}
.product .product-logo.boxed img{height:60px}
.product .tag{font-family:var(--mono);font-size:.75rem;color:var(--cyan-deep);text-transform:uppercase;letter-spacing:.06em}
.product p{color:var(--muted);font-size:.97rem;flex:1}
.product a.more{font-weight:600;text-decoration:none}
.product a.more:hover{text-decoration:underline}

/* Referenciák */
.refs{background:var(--paper)}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.ref{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem}
.ref .tag{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ref h3{margin:.35rem 0 .5rem}
.ref p{font-size:.95rem;color:var(--muted)}

/* Folyamat */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step}
.step{position:relative;overflow:hidden;padding:1.75rem 1.5rem;border:1px solid var(--border);border-radius:var(--radius)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--mono);color:var(--cyan);font-size:.9rem;display:block;margin-bottom:.6rem;position:relative;z-index:1}
.step h3{font-size:1.05rem;margin-bottom:.4rem;position:relative;z-index:1}
.step p{font-size:.93rem;color:var(--muted);position:relative;z-index:1}
/* Ikon-lenyomat a box hátterében (jobb alsó sarok) */
.step-bg{position:absolute;right:-14px;bottom:-16px;width:98px;height:98px;color:var(--cyan-deep);opacity:.07;z-index:0;pointer-events:none}
/* Sorban kiemelő belépő animáció (JS kapcsolja be, ha nincs reduced-motion) */
.steps.anim .step{opacity:0}
.steps.anim.in .step{animation:stepReveal .85s ease forwards}
.steps.anim.in .step:nth-child(2){animation-delay:.22s}
.steps.anim.in .step:nth-child(3){animation-delay:.44s}
.steps.anim.in .step:nth-child(4){animation-delay:.66s}
@keyframes stepReveal{
  0%{opacity:0;transform:translateY(16px)}
  55%{opacity:1;transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 12px 32px rgba(77,194,228,.22)}
  100%{opacity:1;transform:none}
}
/* Offscreen szekciók CSS-animációinak leállítása (CPU-kímélés) */
.anim-off .fl::before,.anim-off .pulses path{animation-play-state:paused}

/* GYIK */
.faq{background:var(--paper)}
.faq details{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.85rem;background:var(--white);
  transition:border-color .18s ease,box-shadow .18s ease}
.faq details:hover{border-color:var(--cyan);box-shadow:0 10px 30px rgba(24,127,166,.13)}
.faq summary{cursor:pointer;padding:1.15rem 1.4rem;font-family:var(--disp);font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cyan-deep);font-size:1.3rem;line-height:1;transition:transform .3s ease}
.faq details[open] summary::after{content:"–"}
.faq details:hover summary::after{transform:rotate(180deg)}
.faq .answer{padding:0 1.4rem 1.25rem;color:var(--muted)}

/* Dekoratív háttér a világos szekciókban (folyamat + GYIK)
   A hero szignatúrás pontrácsát idézi, sarokból kifutó maszkkal. */
#folyamat,.faq{position:relative;overflow:hidden}
#folyamat>.wrap,.faq>.wrap{position:relative;z-index:1}
/* Pontháló-csík a sarokban */
#folyamat::before,.faq::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(48vw,560px);aspect-ratio:1;
  background-image:radial-gradient(rgba(24,127,166,.18) 1.2px,transparent 1.2px);
  background-size:24px 24px;
}
/* Lágy cyan fénymag az átellenes sarokban */
#folyamat::after,.faq::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(40vw,460px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(77,194,228,.14),transparent 68%);
}
/* Folyamat: rács jobb felül, fénymag bal alul */
#folyamat::before{top:-48px;right:-48px;
  -webkit-mask-image:radial-gradient(circle at top right,#000,transparent 70%);
  mask-image:radial-gradient(circle at top right,#000,transparent 70%)}
#folyamat::after{bottom:-140px;left:-140px}
/* Régi böngészők (nincs mask): a rácsot elrejtjük, hogy ne legyen éles éle */
@supports not ((-webkit-mask-image:radial-gradient(#000,transparent)) or (mask-image:radial-gradient(#000,transparent))){
  #folyamat::before{display:none}
}

/* GYIK háttér: nagy, halvány "FAQ" felirat, rajta fel-le futó szkenner-kiemeléssel */
.faq::before,.faq::after{display:none}
/* Fentről halvány -> lent a következő (sötét) szekció színébe olvad, alul a szekcióhatárnál levágva,
   így úgy néz ki, mintha a lenti sötét szekcióból bukkanna elő. */
.faq-scan{position:absolute;right:0;bottom:-0.12em;z-index:0;
  pointer-events:none;user-select:none;white-space:nowrap;
  font-family:var(--disp);font-weight:700;font-style:italic;line-height:.9;letter-spacing:.01em;
  font-size:clamp(4.5rem,11vw,9rem);
  color:transparent;
  background:linear-gradient(to bottom, rgba(10,22,38,.05), rgba(10,22,38,.9));
  -webkit-background-clip:text;background-clip:text}

/* Kapcsolat */
.contact{background:var(--ink);color:var(--white)}
.contact h2{color:var(--white)}
.contact .lead{color:var(--muted-inv)}
.contact .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:start}
.contact-info address{font-style:normal;color:var(--muted-inv);margin-top:1.5rem;line-height:2}
.contact-info a{color:var(--cyan)}
form{display:grid;gap:1rem;background:var(--panel);padding:2rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)}
label{font-size:.9rem;font-weight:600;color:var(--white)}
label .req{color:var(--diff-red)}
input,textarea{width:100%;padding:.85rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:var(--panel-2);color:var(--white);font-family:var(--body);font-size:1rem;margin-top:.35rem}
input:focus,textarea:focus{outline:2px solid var(--cyan);border-color:transparent}
.gdpr{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--muted-inv);font-weight:400}
.gdpr input{width:auto;margin-top:.25rem}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{font-size:.92rem;min-height:1.3em}
.form-status.ok{color:var(--diff-green)}
.form-status.err{color:var(--diff-red)}

/* Lábléc */
.site-footer{background:var(--panel-2);color:var(--muted-inv);padding:3.5rem 0 2rem;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:2.5rem}
.site-footer h3{color:var(--white);font-size:.95rem;margin-bottom:.8rem}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:.45rem}
.site-footer a{color:var(--muted-inv);text-decoration:none}
.site-footer a:hover{color:var(--cyan)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

@media (max-width:900px){
  .hero .wrap,.contact .wrap{grid-template-columns:1fr}
  .cards,.ref-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* Mobil navigáció: a menü ~860px alatt már összezsúfolódna, ezért itt vált hamburgerre */
@media (max-width:860px){
  .nav-toggle{display:block}
  .main-nav{position:fixed;inset:64px 0 auto 0;background:var(--ink);
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem 1.25rem 1.5rem;display:none;
    border-bottom:1px solid rgba(255,255,255,.1);
    max-height:calc(100dvh - 64px);overflow-y:auto}
  .main-nav.open{display:flex}
  /* Elsőszintű tételek: egységes magasság + finom elválasztók */
  .main-nav>a:not(.nav-cta){padding:.8rem .25rem;border-bottom:1px solid rgba(255,255,255,.07)}
  /* Termék-almenü mobilon: kinyíló logós rács, nem lebegő panel */
  .has-submenu{position:static;flex-direction:column;align-items:stretch;align-self:auto;
    width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
  .submenu-trigger{width:100%;justify-content:space-between;padding:.8rem .25rem;font-size:1rem}
  .submenu-trigger .caret{font-size:.8rem}
  .submenu{position:static;width:auto;max-width:none;z-index:auto;
    grid-template-columns:1fr 1fr;gap:.4rem;
    margin:.35rem 0 .7rem;padding:.4rem 0 .2rem;
    background:transparent;border:none;box-shadow:none}
  .has-submenu:hover>.submenu,.has-submenu:focus-within>.submenu{display:none}
  .has-submenu.open>.submenu{display:grid}
  .submenu a{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:.85rem}
  .submenu a:hover{background:rgba(255,255,255,.07)}
  /* CTA gomb: teljes szélességű, középre igazított */
  .nav-cta{align-self:stretch;text-align:center;margin-top:1rem;padding:.9rem 1.2rem}
}
@media (max-width:640px){
  section{padding:3.5rem 0}
  .cards,.ref-grid,.ai-grid,.product-grid,.steps{grid-template-columns:1fr}
  .ai-grid{max-width:none;margin-right:0}
  /* AI alaplap mobilon: alsó sávba téve, a chipre zoomolva (a viewBox-ot JS állítja),
     így az álló, olvasható chip a dobozok alá kerül */
  .ai-section{padding-bottom:14rem}
  .ai-board{top:auto;bottom:0;height:300px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 100%)}
}

/* Termék landing oldalak */
.hero-product{padding:4.5rem 0 4rem}
.hero-product .wrap{display:block;max-width:820px}
.hero-product .product-logo{height:44px;width:auto;margin-bottom:1.5rem}
.breadcrumb{font-family:var(--mono);font-size:.8rem;margin-bottom:1.2rem}
.breadcrumb ol{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;padding:0}
.breadcrumb a{color:var(--muted-inv);text-decoration:none}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.5rem;color:var(--muted-inv)}
.breadcrumb [aria-current]{color:var(--cyan)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feature{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem 1.5rem}
.feature h3{font-size:1rem;margin-bottom:.3rem}
.feature h3::before{content:"+ ";color:var(--diff-green);font-family:var(--mono)}
.feature p{font-size:.92rem;color:var(--muted)}
.cta-band{background:var(--ink);color:var(--white);text-align:center;border-radius:var(--radius)}
.cta-band-inner{padding:3.5rem 2rem}
.cta-band h2{color:var(--white)}
.cta-band p{color:var(--muted-inv);max-width:38rem;margin:0 auto 2rem}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.feature-grid{grid-template-columns:1fr}}

/* Jogi / szöveges oldalak */
.legal-hero{padding:3.5rem 0 3rem}
.legal-hero .wrap{display:block;max-width:52rem}
.legal-hero h1{font-size:clamp(1.7rem,3.5vw,2.5rem);color:var(--white);margin-bottom:.75rem}
.legal-hero p{color:var(--muted-inv);margin:0}
.legal{padding:3.5rem 0 5rem}
.legal .wrap{max-width:52rem}
.legal h2{font-size:1.45rem;margin:3rem 0 .9rem;padding-top:.5rem;scroll-margin-top:80px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.1rem;margin:2rem 0 .6rem;color:var(--cyan-deep);scroll-margin-top:80px}
.legal p{margin-bottom:1rem}
.legal ul{margin:0 0 1.25rem 0;padding-left:1.4rem}
.legal li{margin-bottom:.5rem}
.legal dl{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem}
.legal dt{font-weight:600;color:var(--ink)}
.legal dd{margin:0;color:var(--muted)}
.legal-note{border-left:3px solid var(--cyan);background:var(--paper);padding:1rem 1.25rem;border-radius:0 var(--radius) var(--radius) 0;margin-bottom:1.5rem;font-size:.95rem;color:var(--muted)}
.toc{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem 2rem;margin-bottom:3rem}
.toc h2{font-size:1.1rem;margin:0 0 1rem;font-family:var(--disp)}
.toc ol{margin:0;padding-left:1.3rem;font-size:.95rem}
.toc li{margin-bottom:.4rem}
.toc a{color:var(--text);text-decoration:none}
.toc a:hover{color:var(--cyan-deep);text-decoration:underline}
.updated{font-family:var(--mono);font-size:.85rem;color:var(--muted);margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
@media (max-width:640px){.legal dl{grid-template-columns:1fr;gap:.15rem 0}.legal dd{margin-bottom:.75rem}}

/* Referencia-logók: háttér nélkül, közvetlenül a kártyán, egységes 80px magasság.
   Fehér logóhoz (pl. Weltgumi) a .ref-logo--dark módosító ad sötét dobozt. */
.ref-logo{
  --logo-bg:var(--cyan-deep);
  height:80px;margin-bottom:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.ref-logo img{height:80px;max-width:100%;width:auto;object-fit:contain}
/* Szélesebb logók kisebb magassággal, hogy ne domináljanak */
.ref-logo--70{height:70px}
.ref-logo--70 img{height:70px}
/* Patent Gate nagyon széles (259×49), ezért szélességre korlátozzuk – a magasság ebből jön ki */
.ref-logo img[data-logo="patentgate"]{width:235px;height:auto;max-width:100%}
/* Fehér logóhoz: tartalomhoz igazodó sötét doboz (fent-lent 10, oldalt 30 padding) */
.ref-logo--dark{
  width:fit-content;height:auto;margin-inline:auto;
  background:var(--logo-bg);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:10px 30px;
}
.ref-logo--dark img{height:60px}
.ref-logo.no-logo{display:none}
.ref .tag{display:block;margin-bottom:.9rem}