*, *::before, *::after { box-sizing: border-box; }

@font-face{
  font-family: "Enigma";
  src: url("/assets/fonts/Enigma.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* --- Navigation --- */
.menu-bar {
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    background: rgba(248, 249, 250, 0.9);
    backdrop-filter: blur(15px);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -5px;
    left: 0;
    background-color: var(--accent-color);
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}
.mobile-menu-toggle{
    display: none !important;
  }
.logo{
	  max-width: 90px;
  }
  .lang-link.is-active {
    font-weight: 800;
}
/* =========================================================
   MOBILE DRAWER MENU
   ========================================================= */

.mobile-menu-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mobile-menu-button,
.mobile-menu-backdrop,
.mobile-drawer{
  display: none;
}

@media (max-width: 1024px){

  /* desktop nav elrejtése mobilon */
  .menu-bar{
    display: none !important;
  }

  .mobile-menu-button{
    display: flex;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 30;

    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15,23,42,.18);
  }

  .mobile-menu-button span{
    width: 18px;
    height: 1.5px;
    background: #0f172a;
    border-radius: 999px;
    transition: transform .25s ease, opacity .25s ease, width .25s ease;
  }

  .mobile-menu-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 24;
    background: rgba(15,23,42,.28);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .mobile-drawer{
    display: flex;
    flex-direction: column;
    gap: 18px;

    position: fixed;
    top: 0;
    right: 0;
    z-index: 25;

    width: min(86vw, 360px);
    height: 100dvh;
    padding: 72px 18px 22px;

    background: linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(240,247,255,.66)
    );
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);

    border-left: 1px solid rgba(15,23,42,.08);
    box-shadow: -14px 0 40px rgba(15,23,42,.18);

    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
  }

  .mobile-drawer-header{
    font-family: "Orbitron", system-ui, sans-serif;
    font-size: .76rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #0f172a;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15,23,42,.08);
  }

  .mobile-drawer-links{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-drawer-links a{
    text-decoration: none;
    color: #0f172a;
    font-family: "Orbitron", system-ui, sans-serif;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;

    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.24);
    background: rgba(255,255,255,.55);
    transition: all .2s ease;
  }

  .mobile-drawer-links a:hover,
  .mobile-drawer-links a:active{
    background: rgba(255,255,255,.9);
    border-color: rgba(0,212,255,.35);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
  }

  .mobile-drawer-modules{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(15,23,42,.08);
  }

  .mobile-drawer-module{
    display: block;
    cursor: pointer;

    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(255,255,255,.5);

    color: #0f172a;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;

    transition: all .2s ease;
  }

  .mobile-drawer-module:hover,
  .mobile-drawer-module:active{
    background: rgba(255,255,255,.92);
    border-color: rgba(0,212,255,.35);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
  }

  /* open state */
  #mobile-menu-toggle:checked ~ .mobile-menu-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  #mobile-menu-toggle:checked ~ .mobile-drawer{
    transform: translateX(0);
  }

  #mobile-menu-toggle:checked ~ .mobile-menu-button span:nth-child(1){
    transform: translateY(6.5px) rotate(45deg);
  }

  #mobile-menu-toggle:checked ~ .mobile-menu-button span:nth-child(2){
    opacity: 0;
  }

  #mobile-menu-toggle:checked ~ .mobile-menu-button span:nth-child(3){
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* hogy ne lógjon alá a header */
  .hud-header{
    padding-right: 58px;
  }
}
/* === HERO COVER === */
.hero {
  width: 100%;
 min-height: calc(100vh - 88px);
  background-image: url("/images/A4C_index.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
}


/* Sötét overlay 
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
}*/

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 0 1rem;
  margin-top: clamp(2rem, 18vh, 20rem);
}

.hero h1 {
 font-family: "Enigma", sans-serif;
  font-size: clamp(2rem, 6vh, 20rem);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: black;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #ccc;
}

.hero-btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  transition: 0.3s ease;
}

.hero-btn:hover {
  background: #fff;
  color: #000;
}

/* Reszponzív tipográfia */
@media (max-width: 768px) {
  .hero h1 {
    clamp(40px, 20vw, 150px);
  }

  .hero p {
    font-size: 1rem;
  }

  .content-grid {
    padding: 2rem 1rem;
  }
}

@media (max-width: 480px) {
  .report-box {
    background-size: cover; /* kicsi kijelzőn jobban kitölti */
    padding: 1rem;
  }

  .report-content {
    max-width: 100%; /* ilyenkor engedjük teljes szélességre */
  }
}
body {
  font-family: "Roboto Mono", monospace;
  font-size: clamp(16px, 1.1vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  background-color: #eaeeef;
}
h1, h2, h3, h4, h5, h6,
.heading {
  font-family: "Orbitron", monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1, h2, h3 {
  text-transform: uppercase;
}
strong, b {
  font-weight: 600;
}
.site-shell {
    width: min(100% - 40px, 1400px);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/***************************************
***************************************
***************************************
SCREEN-2
***************************************
***************************************
*******************************  */
#screen-2 {
  position: relative;
  min-height: 100vh;
  background: url("/images/indexbg2.svg") center/cover no-repeat;
  overflow: hidden;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 2rem;
  width: 100%;
  min-height: 100vh;
  align-items: start;
}

/* DESKTOP */
.col-left,
.col-center,
.col-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#canvas1 {
  width: 100%;
  height: 50vh;
  display: block;
  transform: none;
}

.future-image {
  padding-top: 5vw;
}

.future-img {
  width: 100%;
  height: auto;
  display: block;
}
.logo-img{
  width: 95%;
  height: auto;
  display: block;
	padding-top: clamp(100px, 10vw, 300px);
    padding-bottom: clamp(50px, 6vw, 300px);
	padding-left:1vw;
  opacity: .7;
}

.message1 {
  position: relative;
  display: block;
  padding: 200px 22px;
  background: url("/images/message.svg") center / contain no-repeat;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.girl-wrap {
  position: relative;
  z-index: 2;
}

.girl-img {
  display: block;
  width: 90%;
  height: auto;
  position: relative;
  transform: translateY(100px);
}

/* ======================
   CONTENT / fekete dobozok
   ====================== */
.panel2{
  position: relative;
  display: inline-block;
  border: 1vw solid transparent;
  border-image: url("/images/panel2.svg") 1 fill stretch;

  padding: 44px 22px 22px; 
}

.panel2 .text{
  position: relative;
  color: #111;
  line-height: 1.2;
  padding: 1.6vw;
}
.panel3{

  position: relative;
  display: block;
  padding: 18px 22px;
  border: 26px solid transparent;
  border-image: url("/images/box3.svg") 1 fill stretch;
  max-width: 520px;
  padding: 44px 44px 44px; 
}

.panel3 .text{
  position: relative;
  color: #111;
  line-height: 1.2;
  padding: 40px;
}
.panel4{

  position: relative;
  display: block;
  padding: 18px 22px;
  border: 26px solid transparent;
  border-image: url("/images/box4.svg") 1 fill stretch;
   max-width: 800px;
  width: 100%;
  padding: 44px 44px 44px; 
}

.panel4 .text{
  position: relative;
  color: #111;
  line-height: 1.2;
  padding: 40px;
}
.panel5{
 
  position: relative;
  display: block;
  padding: 18px 22px;
  border: 26px solid transparent;
  border-image: url("/images/box5.svg") 1 fill stretch;
  width: 90%;
  max-width: none;
  padding: 44px 44px 44px; 
  transform: translateY(-100px); 
}

/*.panel5 .text{
  position: relative;
  color: #111;
  line-height: 1.2;
   z-index: 3; 
  padding-right: clamp(260px, 32vw, 560px); 
  padding-left: 5vw;
  padding-top: 10vh;
  padding-bottom: 1vh;
}  */
.panel5 .text2 {
    position: relative;
    color: #111;
    line-height: 1.2;
    z-index: 3;
    padding-right: 5rem;
    padding-left: 5vw;
    padding-bottom: 5rem;
	padding-top: 10vh;
}
.message1{
  position: relative;
  display: block;
  padding: 200px 22px;
  background: url("/images/message.svg") center / contain no-repeat;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.girl-wrap{
  position: relative;
  z-index: 2;
}
.girl-img{
  display: block;
  width: 90%;
  height: auto;
  position: relative;
  transform: translateY(100px);
  
}

/***************************************
TABLET <= 1100px
***************************************/
@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: 1.5rem;
    align-items: start;
  }

  /* A külső oszlop-wrappert "eltüntetjük" layout szinten */
  .col-left,
  .col-center,
  .col-right {
    display: contents;
  }

  /* 1. sor */
  .girl {
    grid-column: 1;
    grid-row: 1;
  }

  .future-image {
    grid-column: 2;
    grid-row: 1;
    padding-top: 10vh;
    align-self: start;
  }
  .future-img {
  
  display: none;
}
.logo-img {
    width: 100%;
    padding-top: 0px;
}
  /* 2. sor */
  .about {
    grid-column: 1;
    grid-row: 2;
  }

  .mission {
    grid-column: 2;
    grid-row: 2;
  }

  /* 3. sor */
  .message {
    grid-column: 1;
    grid-row: 3;
  }

  .girl-wrap {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
  }

  #canvas1 {
    height: 50vh;
  }

  .girl-img {
    width: 85%;
    transform: none;
    margin-left: auto;
  }

  .panel5 .text2 {
    padding-right: clamp(10px, 20px, 80px);
  }
}


/***************************************
MOBILE (<= 640px)
***************************************/
@media (max-width: 720px){
.site-shell {
    width: min(100%);
}
  /* Screen-2 legyen “átvezető” szakasz, hogy legyen ideje a belső scrollnak */
  #screen-2{
    position: relative;
    /* ez ad “pályát” a sticky-nek: 100vh + extra hely.
       állítsd nagyobbra/kisebbre, ha kell */
    padding: 0;
    overflow: visible;
  }

  /* Sticky konténer: csak screen-2 alatt marad megállva */
  #screen-2 .frame-wrap{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden; /* semmi ne lógjon ki a teljes keret területéről */
  }

  /* Keret: NEM fixed, csak abszolút a sticky konténeren belül */
  #screen-2 .mobile-frame{
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: url("/images/mobile.svg") center/contain no-repeat;
  }

  /* Ablak: szintén abszolút, a keret “kivágásának” megfelelően */
  #screen-2 .mobile-window{
    position: absolute;
    z-index: 40;
    left: 12vw;
    right: 12vw;
    top: 14vh;
    bottom: 17vh;
    overflow: hidden;      /* vágás */
    border-radius: 10px;   /* opcionális */
  }

  /* A belső scroll terület */
  #screen-2 .mobile-scroll{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2.5vh 2.5vw;
  }

  /* Mobilon a dashboard-grid legyen blokk */
  #screen-2 .dashboard-grid{
    display: block;
    width: 100%;
    min-height: auto;
    padding: 0;
    margin: 0;
  }

  #screen-2 .col.left,
  #screen-2 .col.center,
  #screen-2 .col.right,
  #screen-2 .whatwe{
    width: 100%;
    margin: 0 0 22px 0;
  }

  /* Mobilon vedd le a panelek keretét (ahogy nálad is van) */
  #screen-2 .panel2, 
  #screen-2 .panel3, 
  #screen-2 .panel4, 
  #screen-2 .panel5{
    border: 0 !important;
    border-image: none !important;
    background: transparent !important;
    padding: 0 !important;
    transform: none !important;
  }
  #screen-2 .panel2 .text,
  #screen-2 .panel3 .text,
  #screen-2 .panel4 .text,
  #screen-2 .panel5 .text{
    padding: 0 !important;
    max-width: none !important;
  }
  .panel5 .text2 {
  padding: 0 }
  /* opcionális: scrollbar elrejtés */
  #screen-2 .mobile-scroll::-webkit-scrollbar{ width: 0; height: 0; }
}
@media (max-width: 640px){
 #screen-2 .mobile-window{
    position: absolute;
    z-index: 40;
    left: 8vw;
    right: 8vw;
    top: 14vh;
    bottom: 17vh;
    overflow: hidden;      /* vágás */
    border-radius: 10px;   /* opcionális */
  }
}

/* ======================
   CONTENT / Szürke kártyák
   ====================== */


/*********************************************
*********************************************
*********************************************
SCREEN-3  
*********************************************
*********************************************
*********************************************/


 #screen-3{
/* kártyák */
      --card-w: 150px;
      --card-h: 200px;
      --cards-count: 5;
      /* pálya sugara */
      --radius: clamp(50px, 60vw, 400px);
      /* dőlés (0deg = teljesen körnek látszik) */
     /* --tilt: -15deg;*/
      /* forgás ideje */
      --spin-seconds: 35s;
	   min-height: 100vh;
  background: url("/images/bg4.png") center/100% 100% no-repeat;
  position: relative;
  overflow: hidden;
  display: flex;
    }
@media (max-width: 1050px){
		#screen-3{
			background: url("/images/bg3.png") center/100% 100% no-repeat;
		}
	}
	
@media (max-width: 600px){
  #screen-3{
    --radius: 220px;
  }
}
#screen-3 .screen3-title{
  position: absolute;
  top: 5%;
  left: 5%;
  margin: 0;
  padding: 10px;

  z-index: 5; 
  pointer-events: none; 

  font-size: clamp(14px, 16px, 20px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #000;
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(10px);
  border-radius: 16px;
} 
    /* Wrapper: perspektíva */
 #screen-3 .wrapper{
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
      perspective: 1000px;
      perspective-origin: 50% 50%;
    }

    /* Stage: csak középre tesz + megdönt */
#screen-3 .stage{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      transform-style: preserve-3d;
      transform: translate(-50%, -50%) rotateX(var(--tilt));
    }

    /* Inner: csak ez forog */
#screen-3 .inner{
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      transform-style: preserve-3d;
      will-change: transform;
      animation: spin var(--spin-seconds) linear infinite;
}

@keyframes spin{
      to{ transform: rotateY(360deg); }
    }
#screen-3 .center-object{
  position: absolute;
  top: 50%;
  left: 50%;
   padding-top:20vh;
  transform:
    translate(-50%, -50%);
  transform-style: preserve-3d;
  pointer-events: none; /* ne zavarja a kattintást */
}

/* SVG méretezése */
#screen-3 .center-object img{
  width: clamp(220px, 20w, 450px);
  height: clamp(220px, 60vh, 750px);
  display: block;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.35));
}
    /* stabil 3D elhelyezés */
#screen-3 .card{
      position: absolute;
      top: 50%;
      left: 50%;
	 
      width: var(--card-w);
      height: var(--card-h);
      transform-style: preserve-3d;
     /* backface-visibility: hidden;  ne legyen tükrözött szöveg hátul 
      -webkit-backface-visibility: hidden;*/
      text-decoration: none;
      color: #000000;

      background: rgba(204, 204, 204, 0.08);
      border: 2px solid rgba(0,0,0,0.4);
      border-radius: 14px;

      display: flex;
      align-items: center;
      justify-content: center;

      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      transition: transform 0.3s, background 0.3s;

      /* ⬇️ EZ A LÉNYEG: középről indulsz, és fix sugárra tolod */
      transform:
        translate(-50%, -50%)
        rotateY(calc((360deg / var(--cards-count)) * var(--i)))
        translateZ(var(--radius));
    }

    /* Hover: a te hoveröd */
#screen-3 .card:hover{
      background: rgba(255,255,255,0.5);
     /*  transform:
        rotateY(calc((360deg / var(--cards-count)) * var(--i)))
        translateZ(calc(var(--radius) + 20px))
        translate(-50%, -50%)
        scale(1.05); */
    }

    /* Opcionális: kicsit szebb olvasás */
#screen-3 .card .label{
      font-weight: 600;
      letter-spacing: 0.2px;
      padding: 10px 12px;
      text-align: center;
      user-select: none;
	  font-size: clamp(14px, 1vw, 17px);
    }

    /* --- MODAL (kattintás) --- */
#screen-3 .modal{
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(255,255,255,0.55);
      z-index: 999;
    }

#screen-3 .modal:target{
      display: grid;
    }

#screen-3 .modal__panel{
      width: clamp(120px, 92vw, 800px);
    max-height: 92vh;
      border-radius: 16px;
      background: rgba(255,255,255,0.40);
      border: 1px solid rgba(0,0,0,0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 18px 60px rgba(0,0,0,0.35);
      overflow: hidden;
    }
@media (max-width: 600px){
    html, body {
  overflow-x: hidden;
}
    #screen-3 .modal__panel{
        overflow-y: auto;
      -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
    }
    
 #screen-3 .modal__body{   
        font-size: 13px;
 }
 #screen-3 .screen3-title {
     font-size: 13px;
     padding-left:10px;
 }
     
}
#screen-3 .modal__head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(52,211,227,0.48);
    }

#screen-3 .modal__title{
      font-weight: 700;
      margin: 0;
      font-size: 16px;
    }

#screen-3 .modal__close{
      text-decoration: none;
      color: #000;
      font-weight: 700;
      padding: 6px 10px;
      border-radius: 10px;
      background: rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.12);
    }

#screen-3 .modal__close:hover{
      background: rgba(0,0,0,0.1);
    }

#screen-3 .modal__body{
      padding: 16px;
      line-height: 1.45;
      color: #111;
    }

    /* Ha valaki csökkentett animációt kér */
    @media (prefers-reduced-motion: reduce){
      .inner{ animation: none; }
    }
/* RESPONSIVE */

@media (max-width: 1200px) {
  .content {
    width: calc(100dvw - 200px);
    max-width: calc(100dvw - 200px);
  }
  .hContainer {
    width: 18em;
  }
}


















/********************************************
**********************************************
CONTACT SECTION
**********************************************
********************************************/
.contact-section{

    min-height: 100vh;
	display: flex;
	align-items: center;    
    justify-content: center;
/*background-image: url(images/bg4.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;*/
  overflow: hidden;
}*/

.contact-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.16;
  pointer-events: none;
}

.contact-shell{
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  margin-bottom: 6rem;
  margin-top: 6rem;
}

.contact-panel{
  position: relative;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, #0a0d12, #0a0d1294);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.contact-panel::before{
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  pointer-events: none;
}

.contact-panel::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  transform: translateX(-100%);
  animation: contactSweep 9s linear infinite;
  pointer-events: none;
  opacity: 0.45;
}

@keyframes contactSweep{
  100%{ transform: translateX(100%); }
}

.contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-block{
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-block:first-child{
  border-right: 1px solid rgba(255,255,255,0.08);
}

.contact-block::after{
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-top: 2px solid rgba(255,255,255,0.22);
  border-right: 2px solid rgba(255,255,255,0.22);
  pointer-events: none;
}

.contact-label{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.contact-block h3{
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.contact-text{
  max-width: 42ch;
  margin: 0 0 2rem;
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.72);
}

.contact-block-link{
  text-decoration: none;
}

.contact-linkline{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  min-height: 48px;
  padding: 0 1rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.contact-linkline:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
}

.contact-linkline::after{
  content: "→";
  display: inline-block;
  transform: translateY(-1px);
}

/* details / summary */
.reveal-mail{
  margin-top: auto;
  width: fit-content;
}

.reveal-mail summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.reveal-mail summary::-webkit-details-marker{
  display: none;
}

.reveal-mail summary:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
}

.reveal-mail[open] summary{
  margin-bottom: 1rem;
}

.contact-value{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.06rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.6;
  word-break: break-word;
}

/*********************************************
**********************************************
FOOTER
**********************************************
*********************************************/
.site-footer{
  position: relative;
  padding: 0 1.25rem 2rem;
  background: linear-gradient(180deg, #0a0d12 0%, #05070a 100%);
  overflow: hidden;
}

.footer-shell{
  width: min(1200px, 100%);
  margin: 0 auto;
}

.footer-panel{
  position: relative;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  background:
    linear-gradient(180deg, #0a0d12, #0a0d1294);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.footer-panel::before{
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  pointer-events: none;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3rem);
}

.footer-brand h3,
.footer-links h3,
.footer-meta h3{
  margin: 0 0 1rem;
  color: #fff;
}

.footer-brand p,
.footer-meta p{
  margin: 0;
  max-width: 42ch;
  color: rgba(255,255,255,0.68);
  line-height: 1.8;
  font-size: 0.95rem;
}

.footer-label{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
}

.footer-links ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li + li{
  margin-top: 0.75rem;
}

.footer-links a{
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.footer-links a:hover{
  color: #fff;
  letter-spacing: 0.12em;
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(2rem, 4vw, 3rem) 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*********************************************
RESPONSIVE
*********************************************/
@media (max-width: 940px){
  .contact-grid{
    grid-template-columns: 1fr;
  }

  .contact-block:first-child{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .footer-grid{
    grid-template-columns: 1fr;
  }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px){
  .contact-section{
    padding-top: 3rem;
  }

  .contact-block{
    min-height: auto;
    padding: 1.5rem;
  }

  .contact-panel::before,
  .footer-panel::before{
    inset: 10px;
  }

  .footer-grid{
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .footer-bottom{
    padding: 1rem 1.5rem 1.2rem;
    font-size: 0.72rem;
  }
}