/*
  -=====================================================¬
  ¦  Készítette: KexDesign – www.kexdesign.hu           ¦
  ¦  Weboldal készítés és szerver szolgáltatás, Siófok  ¦
  ¦                                                     ¦
  ¦  © 2026 KexDesign. Minden jog fenntartva.           ¦
  ¦  E forráskód szerzői jogi védelem alatt áll.        ¦
  ¦  Másolása, módosítása, újrafelhasználása kizárólag  ¦
  ¦  a KexDesign írásos engedélyével lehetséges.        ¦
  L=====================================================-
*/

/* ═══ 1. TOKENS ═══════════════════════════════════════ */
:root{
  --ink:        #000000;
  --bg:         #0a0a0a;
  --band:       #111111;
  --band-deep:  #0d0d0d;
  --band-foot:  #070707;
  --line:       #232323;
  --red:        #e01f26;
  --red-lit:    #ff2f36;
  --white:      #f4f4f4;
  --muted:      #a8a8a8;
  --dim:        #6b6b6b;

  --display: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --body: "Barlow Condensed", "Arial Narrow", "DejaVu Sans Condensed", Arial, sans-serif;

  --pad-x: clamp(0.9rem, 4vw, 4.4rem);
}

/* ═══ 2. RESET / SHELL ════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  /* the whole page scales to the smaller of width / height — this is what
     keeps every element inside one screen without a scrollbar */
  font-size: clamp(8px, min(1.02vw, 1.55vh), 11.8px);
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--body);
  color: var(--white);
  background:
    radial-gradient(120% 90% at 50% 50%, #0d0d0d 0%, #050505 55%, #000 100%);
  line-height:1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img{ display:block; max-width:100%; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

:focus-visible{
  outline: 2px solid var(--red-lit);
  outline-offset: 3px;
}

.hl{ color: var(--red); }

/* ═══ 3. STAGE (single screen, no scroll) ═════════════ */
.stage{
  position:relative;
  width:100%;
  max-width: 1050px;
  height:100vh;
  height:100dvh;
  max-height: 1000px;
  min-height:-webkit-fill-available;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background: var(--bg);
  box-shadow: 0 0 4rem rgba(0,0,0,.85);
  padding-bottom: env(safe-area-inset-bottom);
}

/* thin edge so the card reads as a poster on wide screens */
@media (min-width: 1090px){
  .stage{ border:1px solid #191919; }
}

/* ═══ 4. HERO ═════════════════════════════════════════ */
.hero{
  position:relative;
  flex:0 0 auto;
  height: min(36vh, calc(100vw / 3.6), 404px);
  min-height: 12rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(.6rem, 1.6vw, 1.6rem);
  padding: 0 47% 0 clamp(.6rem, 1.6vw, 1.6rem);
  background: #000;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

/* fighter panel — cropped so the head and the feet always stay in frame */
.hero__photo{
  position:absolute;
  top:0; right:0; bottom:0;
  width:47%;
  display:block;
  z-index:0;
}
.hero__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center center;
}
.hero__photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 14%, rgba(0,0,0,.18) 34%, rgba(0,0,0,0) 55%);
}

.hero__logo{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:block;
  height:94%;
  width:auto;
  object-fit:contain;
  animation: rise .8s .05s both cubic-bezier(.2,.7,.3,1);
}

.hero__copy{
  position:relative;
  z-index:2;
  flex:0 1 auto;
  max-width:30ch;
  padding-right:0;
  animation: rise .8s .18s both cubic-bezier(.2,.7,.3,1);
}

.hero__title{
  font-family: var(--display);
  font-weight:400;
  font-size: 3.05rem;
  line-height:.99;
  letter-spacing:.012em;
  text-transform:uppercase;
  text-shadow: 0 .18rem 1.6rem rgba(0,0,0,.95);
}

.hero__sub{
  margin-top:.85rem;
  font-size:1.18rem;
  font-weight:400;
  line-height:1.45;
  color:#d2d2d2;
  letter-spacing:.008em;
  text-shadow: 0 .1rem .9rem rgba(0,0,0,.9);
}

/* pixel-perfect logo: never scale the original 472x462 PNG above 1:1
   on high-density screens, so it always stays razor sharp */
@media (min-resolution: 1.5dppx){
  .hero__logo{ max-height: 231px; }
}
@media (min-resolution: 2.5dppx) and (orientation: portrait){
  .hero__logo{ max-height: 154px; }
}

/* ═══ 5. TRAITS BAND ══════════════════════════════════ */
.traits{
  flex:24 1 0;
  min-height:0;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  align-items:center;
  padding: 1.4rem var(--pad-x);
  background:
    linear-gradient(180deg, #141414 0%, #0f0f0f 55%, #0b0b0b 100%);
  border-bottom:1px solid var(--line);
}

.trait{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  height:100%;
  padding:.2rem 1rem;
  text-align:center;
  border-left:1px solid #1e1e1e;
  animation: rise .7s both cubic-bezier(.2,.7,.3,1);
}
.trait:first-child{ border-left:0; }
.trait:nth-child(1){ animation-delay:.30s; }
.trait:nth-child(2){ animation-delay:.38s; }
.trait:nth-child(3){ animation-delay:.46s; }
.trait:nth-child(4){ animation-delay:.54s; }
.trait:nth-child(5){ animation-delay:.62s; }

.trait__icon{
  width:2.75rem; height:2.75rem;
  color:var(--red);
  filter: drop-shadow(0 0 .45rem rgba(224,31,38,.35));
  flex:0 0 auto;
}

.trait__name{
  font-family: var(--body);
  font-weight:700;
  font-size:1.24rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--white);
}

.trait__text{
  font-size:1.02rem;
  line-height:1.34;
  color:var(--muted);
  min-height:4.02em;      /* 3 lines — keeps every icon + label on one line */
}

/* ═══ 6. OFFER BAND ═══════════════════════════════════ */
.offer{
  position:relative;
  flex:33 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  padding:1.1rem var(--pad-x);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background-color:#0a0a0a;
}

/* háttérfotó: a sáv szélességéhez igazodik, magasságból veszít, középre igazítva */
.offer__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}
.offer__veil{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(52% 58% at 50% 48%, rgba(0,0,0,.3) 0%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(6,6,6,.62) 0%, rgba(6,6,6,.2) 26%, rgba(6,6,6,.18) 66%, rgba(6,6,6,.66) 100%);
}

/* cage mesh texture, fading out towards the centre */
.offer::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 13px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.25) 26%, transparent 45%, transparent 55%, rgba(0,0,0,.25) 74%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.25) 26%, transparent 45%, transparent 55%, rgba(0,0,0,.25) 74%, #000 100%);
  opacity:.22;
  z-index:1;
  pointer-events:none;
}
.offer > *:not(.offer__bg):not(.offer__veil){ position:relative; z-index:2; }

.offer__title{
  font-family: var(--display);
  font-weight:400;
  font-size:2.7rem;
  line-height:1;
  letter-spacing:.015em;
  text-transform:uppercase;
  text-align:center;
  text-shadow: 0 .12rem 1.1rem rgba(0,0,0,.95), 0 0 2.4rem rgba(0,0,0,.8);
  animation: rise .7s .5s both cubic-bezier(.2,.7,.3,1);
}

.offer__status{
  display:flex;
  align-items:center;
  gap:.9rem;
  font-size:1.1rem;
  color:var(--muted);
  letter-spacing:.02em;
  text-align:center;
  text-shadow: 0 .1rem .9rem rgba(0,0,0,.95);
  animation: rise .7s .58s both cubic-bezier(.2,.7,.3,1);
}
.offer__status .rule{
  display:block;
  width:2.6rem; height:1px;
  background:#3a3a3a;
}

.plates{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  width:100%;
  animation: rise .7s .66s both cubic-bezier(.2,.7,.3,1);
}

/* signature element: octagon-cut "belt plates" */
.plate{
  --cut: .85rem;
  --edge: .16rem;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:14.5rem;
  padding:.95rem 2.1rem;
  font-family: var(--display);
  font-size:2.05rem;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--white);
  background: var(--red);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 0 .9rem rgba(224,31,38,.28));
  transition: color .18s ease, filter .25s ease, transform .18s ease;
}
.plate::before{
  content:"";
  position:absolute;
  inset:var(--edge);
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(224,31,38,.18), rgba(224,31,38,.04) 70%),
    rgba(6,6,6,.72);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: opacity .18s ease;
}
.plate:hover,
.plate:focus-visible{
  color:#fff;
  filter: drop-shadow(0 0 1.7rem rgba(224,31,38,.6));
  transform: translateY(-.12rem);
}
.plate:hover::before,
.plate:focus-visible::before{ opacity:0; }
.plate:active{ transform: translateY(0); }

.plates__plus{
  font-family: var(--display);
  font-size:2.1rem;
  color:var(--red);
  line-height:1;
}

.offer__pitch{
  margin-top:-.15rem;
  font-family: var(--display);
  font-size:1.62rem;
  line-height:1.1;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  color:var(--white);
  text-shadow: 0 .1rem 1rem rgba(0,0,0,.95);
  animation: rise .7s .82s both cubic-bezier(.2,.7,.3,1);
}

.offer__note{
  font-size:1.02rem;
  color:var(--muted);
  text-align:center;
  text-shadow: 0 .1rem .9rem rgba(0,0,0,.95);
  animation: rise .7s .74s both cubic-bezier(.2,.7,.3,1);
}

/* ═══ 7. CONTACT BAND ═════════════════════════════════ */
.contact{
  flex:13 1 0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(1.2rem, 3.4vw, 3.6rem);
  padding:1rem var(--pad-x);
  background: linear-gradient(180deg, #101010 0%, #0b0b0b 100%);
  border-bottom:1px solid var(--line);
  animation: rise .7s .82s both cubic-bezier(.2,.7,.3,1);
}

.contact__intro{
  display:flex;
  align-items:center;
  gap:1rem;
}

.contact__badge{
  width:3.3rem; height:3.3rem;
  color:var(--red);
  flex:0 0 auto;
  filter: drop-shadow(0 0 .5rem rgba(224,31,38,.3));
}

.contact__title{
  font-family: var(--body);
  font-weight:700;
  font-size:1.42rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact__lead{
  font-size:1.08rem;
  color:var(--muted);
  margin-top:.12rem;
}

.contact__list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding-left: clamp(1.2rem, 3.4vw, 3.6rem);
  border-left:1px solid #262626;
}
.contact__list li{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.contact__list svg{
  width:1.5rem; height:1.5rem;
  color:var(--red);
  flex:0 0 auto;
}
.contact__list a{
  font-size:1.15rem;
  letter-spacing:.015em;
  color:#e9e9e9;
  transition: color .16s ease;
}
.contact__list a:hover,
.contact__list a:focus-visible{ color:var(--red-lit); }

/* pointed "fight card" button */
.cta{
  --tip: 1.15rem;
  --edge: .14rem;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:.9rem 2.6rem;
  font-family: var(--display);
  font-size:1.38rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red);
  background: var(--red);
  clip-path: polygon(
    var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%,
    calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
  filter: drop-shadow(0 0 .8rem rgba(224,31,38,.25));
  transition: color .2s ease, filter .25s ease, transform .18s ease;
}
.cta::before{
  content:"";
  position:absolute;
  inset:var(--edge);
  z-index:-1;
  background:#0c0c0c;
  clip-path: polygon(
    var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%,
    calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
  transition: opacity .2s ease;
}
.cta:hover,
.cta:focus-visible{
  color:#fff;
  filter: drop-shadow(0 0 1.6rem rgba(224,31,38,.55));
  transform: translateY(-.1rem);
}
.cta:hover::before,
.cta:focus-visible::before{ opacity:0; }

/* ═══ 8. FINE PRINT ═══════════════════════════════════ */
.fineprint{
  flex:0 0 auto;
  padding:.8rem var(--pad-x) .9rem;
  background: var(--band-foot);
  text-align:center;
}
.fineprint p{
  max-width:96ch;
  margin:0 auto;
  font-size:1.02rem;
  line-height:1.42;
  color:#7c7c7c;
  letter-spacing:.008em;
}
.fineprint__lead{
  display:inline-block;
  margin-bottom:.15rem;
  color:#9a9a9a;
  font-weight:500;
}

/* ═══ 9. MOTION ═══════════════════════════════════════ */
@keyframes rise{
  from{ opacity:0; transform: translateY(1.1rem); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes riseHero{
  from{ opacity:0; transform: translateY(calc(-50% + 1.1rem)); }
  to  { opacity:1; transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
}

/* ═══ 10. TABLET / PORTRAIT / PHONE ═══════════════════ */
@media (max-width: 900px) and (orientation: portrait), (max-width: 560px){

  html{ font-size: clamp(9.5px, min(2.95vw, 1.34vh), 15px); }

  .stage{ max-height:none; box-shadow:none; }

  :root{ --pad-x: clamp(.85rem, 4.5vw, 3rem); }

  /* logo band on top, headline underneath */
  .hero{
    height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 !important;
    background: linear-gradient(180deg, #000 0%, #070707 100%);
  }
  .hero__photo{
    top:0; right:0; left:0; bottom:auto;
    width:100%;
    height: min(17vh, 38vw);
    opacity:.3;
  }
  .hero__photo::after{
    background:
      radial-gradient(62% 105% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, #000 92%),
      linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%, #000 100%),
      linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, #000 100%);
  }
  .hero__logo{
    height: min(17vh, 38vw);
    width:auto;
    max-width:60%;
    align-self:center;
    margin:.3rem auto 0;
  }
  .hero__copy{
    max-width:none;
    padding:.35rem var(--pad-x) .8rem;
    text-align:center;
  }
  .hero__title{ font-size:2rem; }
  .hero__sub{ margin-top:.38rem; font-size:.98rem; line-height:1.3; }

  .traits{
    flex:50 1 0;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap:.15rem .4rem;
    padding: .7rem var(--pad-x);
    align-items:start;
    align-content:space-evenly;
  }
  .trait{
    border-left:0;
    padding:.1rem .3rem;
    gap:.22rem;
  }
  .trait:nth-child(5){ grid-column: 1 / -1; }
  .trait__icon{ width:1.9rem; height:1.9rem; }
  .trait__name{ font-size:1rem; letter-spacing:.08em; }
  .trait__text{ font-size:.88rem; line-height:1.2; min-height:0; }

  .offer{ flex:32 1 0; gap:.5rem; padding:.7rem var(--pad-x); }
  .offer__title{ font-size:2.15rem; }
  .offer__status{ font-size:1rem; gap:.6rem; }
  .offer__status .rule{ width:1.5rem; }
  .plates{ gap:.75rem; }
  .plate{
    --cut:.6rem;
    min-width:0;
    flex:1 1 0;
    padding:.75rem .6rem;
    font-size:1.5rem;
    letter-spacing:.02em;
  }
  .plates__plus{ font-size:1.5rem; }
  .offer__note{ font-size:.98rem; }
  .offer__pitch{ font-size:1.3rem; }

  .contact{
    flex:19 1 0;
    flex-direction:column;
    gap:.7rem;
    padding:.9rem var(--pad-x);
    text-align:center;
  }
  .contact__intro{ gap:.7rem; }
  .contact__badge{ width:2.5rem; height:2.5rem; }
  .contact__title{ font-size:1.24rem; }
  .contact__lead{ font-size:1rem; }
  .contact__list{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:.35rem 1.3rem;
    padding-left:0;
    border-left:0;
  }
  .contact__list svg{ width:1.25rem; height:1.25rem; }
  .contact__list a{ font-size:1.05rem; }
  .cta{ padding:.7rem 2.2rem; font-size:1.2rem; }

  .fineprint{ padding:.45rem var(--pad-x) .55rem; }
  .fineprint p{ font-size:.84rem; line-height:1.26; }
}

/* ultra narrow phones (folded devices) */
@media (max-width: 320px){
  .traits{ flex:50 1 0; }
  .trait__text{ line-height:1.16; }
  .contact{ flex:19 1 0; }
  .hero__logo, .hero__photo{ height: min(13.5vh, 32vw); }
  .fineprint p{ font-size:.72rem; line-height:1.2; }
  .trait__text{ font-size:.8rem; }
  .plate{ font-size:1.2rem; padding:.55rem .35rem; }
  .offer__pitch{ font-size:1.1rem; }
  .offer{ gap:.4rem; }
}

/* very short portrait screens (iPhone 4/SE 1st gen and similar) */
@media (orientation: portrait) and (max-height: 560px){
  html{ font-size: clamp(7.2px, min(2.9vw, 1.45vh), 15px); }
  .hero__logo, .hero__photo{ height: min(15vh, 34vw); }
  .hero__copy{ padding:.3rem var(--pad-x) .6rem; }
  .traits{ padding:.55rem var(--pad-x); }
  .offer{ gap:.6rem; }
  .fineprint{ padding:.45rem var(--pad-x) .55rem; }
}

/* very small phones (iPhone SE and similar) */
@media (max-width: 380px){
  .contact__list{ gap:.28rem .8rem; }
  .plate{ font-size:1.36rem; padding:.62rem .4rem; }
  .trait__icon{ width:1.75rem; height:1.75rem; }
  .trait__text{ font-size:.84rem; }
  .fineprint p{ font-size:.78rem; line-height:1.22; }
  .hero__logo, .hero__photo{ height: min(15.5vh, 36vw); }
}

/* short landscape phones — keep everything on one screen */
@media (orientation: landscape) and (max-height: 500px){
  .hero{ height: min(28vh, calc(100vw / 3.42)); }
  .hero__title{ font-size:2.5rem; }
  .hero__sub{ margin-top:.5rem; font-size:1.05rem; }
  .traits{ padding:.6rem var(--pad-x); }
  .trait{ gap:.35rem; padding:.15rem .6rem; }
  .trait__icon{ width:1.9rem; height:1.9rem; }
  .trait__name{ font-size:1.12rem; }
  .trait__text{ font-size:.95rem; line-height:1.24; min-height:0; }
  .offer{ gap:.5rem; }
  .plate{ padding:.6rem 1.4rem; }
  .offer__pitch{ font-size:1.3rem; }
  .fineprint p{ font-size:.96rem; }
}