:root{
  --bg:#050706;
  --bg2:#030403;
  --txt:#eafff2;
  --green:#00ff78;

  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --frameGlowDark: rgba(0, 120, 55, .22);
  --frameGlowSoft: rgba(0, 255, 120, .10);

  --pGlowIn: rgba(0, 255, 120, .14);
  --pGlowIn2: rgba(0, 110, 55, .20);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: linear-gradient(180deg, #000, #020302);
  color:var(--txt);
  overflow:hidden;
}

.scroll{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type: y mandatory;
  scroll-behavior:smooth;
}

.section{
  position:relative;
  height:100vh;
  min-height:380px;
  scroll-snap-align:start;
  overflow:hidden;
  border-bottom:1px solid rgba(0,255,120,.10);
}

/* ================= HOME ================= */
.section--home{
  background:#000;
  border-bottom:1px solid rgba(0,255,120,.06);
}

.hero-layout{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: minmax(20px, 3vw) 1fr minmax(20px, 3vw);
  gap: clamp(10px, 2vw, 18px);
  align-items:center;
  padding: clamp(16px, 2.2vw, 28px);
}

.hero-side{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.hero-vertical{
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .32em;
  font-weight: 900;
  font-size: clamp(20px, 2.3vw, 34px);
  color: rgba(0,255,120,.22);
  text-shadow:
    0 0 18px rgba(0,255,120,.08),
    0 0 1px rgba(0,0,0,.8);
  opacity: .95;
}

.hero-center{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-stack{
  position:relative;
  width: min(1320px, 88vw);
}

.hero-media{
  position:relative;
  width:100%;
  height: min(76vh, 720px);
  border-radius: 14px;
  overflow:hidden;
  background: #050806;

  /* ✅ REALLY THIN FRAME (single line only) */
  border: 1px solid rgba(255,255,255,.07);

  /* ✅ remove double-line inset, keep only soft glow */
  box-shadow:
    0 0 36px rgba(0,255,120,.04),
    0 22px 105px rgba(0,0,0,.72),
    0 0 28px rgba(0,255,120,.055) inset;
}

.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 40%, rgba(0,255,120,.09), transparent 62%),
    radial-gradient(900px 520px at 50% 40%, rgba(0,0,0,.08), rgba(0,0,0,.30));
  z-index:2;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter: contrast(1.06) saturate(1.02) brightness(.94);
  background: transparent;
  z-index:1;
}

.hero-film{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,120,.06) 0px,
    rgba(0,255,120,.06) 1px,
    transparent 2px,
    transparent 7px
  );
  opacity:.15;
}

/* Logo centered on top */
.hero-logo{
  position:absolute;
  left:50%;
  top: calc(-1 * clamp(16px, 2.2vw, 26px));
  transform: translateX(-50%);
  width: clamp(84px, 10vw, 122px);
  height: clamp(56px, 7vw, 78px);
  border-radius: 14px;
  background: rgba(0,0,0,.88);
  border: 1px solid rgba(0,255,120,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 34px rgba(0,255,120,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}
.hero-logo img{
  max-width: 92%;
  max-height: 82%;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
}

/* bottom dot hint */
.home-hint{
  position:absolute;
  left:50%;
  bottom: clamp(18px, 4vh, 42px);
  transform: translateX(-50%);
  z-index:10;
}

.scroll-hint{
  width: 28px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,120,.30);
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(0,255,120,.06) inset;
  position:relative;
}
.scroll-dot{
  position:absolute;
  left:50%;
  top:12px;
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(0,255,120,.95);
  transform: translateX(-50%);
  animation: dot 1.4s ease-in-out infinite;
}
@keyframes dot{
  0%{ transform: translate(-50%, 0); opacity: .9; }
  60%{ transform: translate(-50%, 18px); opacity: .4; }
  100%{ transform: translate(-50%, 0); opacity: .9; }
}

/* ================= OTHER BACKGROUNDS ================= */
.bg{
  position:absolute;
  inset:-8%;
  transform: translate3d(0,0,0);
  will-change: transform;
  pointer-events:none;
}

.bg--grid{
  background:
    linear-gradient(to right, rgba(0,255,120,.10) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(to bottom, rgba(0,255,120,.10) 1px, transparent 1px) 0 0 / 80px 80px,
    radial-gradient(900px 700px at 50% 50%, rgba(0,255,120,.12), transparent 60%);
  filter: blur(.2px);
  opacity:.55;
}
.bg--glow{
  background:
    radial-gradient(900px 600px at 20% 25%, rgba(0,255,120,.18), transparent 62%),
    radial-gradient(800px 650px at 80% 65%, rgba(0,200,95,.14), transparent 62%),
    radial-gradient(500px 500px at 55% 55%, rgba(0,255,120,.10), transparent 65%);
  opacity:.9;
}
.bg--noise{
  background:
    radial-gradient(900px 700px at 35% 40%, rgba(0,255,120,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55));
  opacity:.95;
}

.overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.overlay--soft{
  background: radial-gradient(900px 600px at 50% 35%, rgba(0,0,0,.20), rgba(0,0,0,.72));
}
.overlay--strong{
  background: radial-gradient(900px 600px at 50% 35%, rgba(0,0,0,.15), rgba(0,0,0,.82));
}

/* ================= CONTENT / TYPO ================= */
.content{
  position:relative;
  z-index:5;
  max-width:1200px;
  margin:0 auto;
  padding: clamp(24px, 4vw, 64px);
}

.content--center{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
}

.title{
  margin:0;
  letter-spacing:.02em;
  font-weight:700;
  text-shadow: 0 0 28px rgba(0,255,120,.10);
}
.title--md{ font-size: clamp(34px, 4.5vw, 56px); }

.text{
  margin:0;
  max-width:820px;
  color:rgba(234,255,242,.72);
  font-size: clamp(16px, 2vw, 18px);
  line-height:1.6;
}
.center{ text-align:center; }

.chips{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.chip{
  padding:10px 14px;
  border:1px solid rgba(0,255,120,.20);
  border-radius:999px;
  color:rgba(234,255,242,.85);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(0,255,120,.06) inset;
}

/* ================= PORTFOLIO ================= */
.portfolio-content{ max-width: 1400px; }

.portfolio-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.portfolio-title{ font-size: clamp(34px, 4.2vw, 58px); }

.portfolio-sub{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(234,255,242,.58);
  font-size: 13px;
  letter-spacing:.02em;
}
.psub-dot{
  width:5px; height:5px; border-radius:99px;
  background: rgba(0,255,120,.55);
  box-shadow: 0 0 18px rgba(0,255,120,.25);
}

.portfolio-shell{
  position:relative;
  border-radius: 20px;
  padding: 14px 56px;
  border: 1px solid rgba(0,255,120,.12);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 55px rgba(0,255,120,.05) inset;
  overflow:hidden;
}

.portfolio-rail{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 8px;
  -webkit-overflow-scrolling: touch;
  padding: 8px 6px 10px;
  scrollbar-width: none;
  cursor: grab;
}
.portfolio-rail::-webkit-scrollbar{ display:none; }
.portfolio-rail.is-dragging{ cursor: grabbing; }

.pcard{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(320px, 30vw, 420px);
  height: clamp(460px, 66vh, 620px);

  border-radius: 18px;
  position:relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(0,0,0,.78);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 48px var(--pGlowIn2) inset,
    0 0 30px var(--pGlowIn) inset,
    0 16px 46px rgba(0,0,0,.55);
  overflow:hidden;
  transform: translateY(6px);
  transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease;
}
.pcard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  pointer-events:none;
  background: radial-gradient(520px 280px at 30% 22%, rgba(0,255,120,.16), transparent 60%);
  opacity:.32;
  mix-blend-mode: screen;
}
.pcard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,120,.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 60px rgba(0,120,55,.26) inset,
    0 0 36px rgba(0,255,120,.18) inset,
    0 22px 60px rgba(0,0,0,.62);
}

.pcard-photo{
  position:absolute;
  inset: 12px 12px 54px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.72);
  background:
    radial-gradient(600px 320px at 30% 22%, rgba(0,255,120,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.10));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 34px rgba(0,255,120,.07) inset;
  overflow:hidden;
}
.pcard-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: contrast(1.04) saturate(1.08);
}

.pcard-bottom{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.pcard-title{
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(234,255,242,.92);
  font-size: 15px;
}
.pcard-chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,120,.18);
  background: rgba(0,0,0,.22);
  color: rgba(0,255,120,.85);
  font-weight:800;
  font-size: 11px;
}

.pnav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 72px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.78);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 28px rgba(0,255,120,.08) inset;
  cursor:pointer;
  z-index:5;
  opacity:.92;
}
.pnav:hover{ filter: brightness(1.06); opacity: 1; }
.pnav--left{ left: 10px; }
.pnav--right{ right: 10px; }
.pnav-ic{
  display:block;
  font-size: 28px;
  line-height: 1;
  color: rgba(234,255,242,.92);
  transform: translateY(-1px);
}

.portfolio-hint{
  margin-top: 10px;
  color: rgba(234,255,242,.45);
  font-size: 12px;
}

/* ================= LIGHTBOX ================= */
.lightbox{ position:fixed; inset:0; z-index:999; display:none; }
.lightbox.is-open{ display:block; }

.lightbox-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
}

.lightbox-ui{
  position:absolute;
  inset: clamp(12px, 2vw, 22px);
  border-radius: 22px;
  border: 1px solid rgba(0,255,120,.18);
  background: rgba(0,0,0,.32);
  box-shadow:
    0 0 90px rgba(0,255,120,.10) inset,
    0 30px 120px rgba(0,0,0,.65);
  overflow:hidden;
}

.lightbox-top{
  position:absolute; left:18px; right:18px; top:14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; z-index:6;
}
.ltitle{ font-weight:900; letter-spacing:.02em; color:rgba(234,255,242,.92); }
.lcount{ color:rgba(234,255,242,.55); font-size:12px; }

.lightbox-stage{
  position:absolute;
  inset: 56px 18px 88px 18px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.70);
  overflow:hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 60px rgba(0,255,120,.08) inset, 0 0 0 1px rgba(255,255,255,.03) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  --lbBg: none;
}
.lightbox-stage::before{
  content:"";
  position:absolute;
  inset:-28px;
  background-image: var(--lbBg);
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(.58) saturate(1.12);
  transform: scale(1.12);
  opacity: .95;
}
.lightbox-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 40%, rgba(0,255,120,.10), transparent 62%),
    radial-gradient(900px 520px at 50% 40%, rgba(0,0,0,.12), rgba(0,0,0,.55));
  pointer-events:none;
}

.lightbox-img{
  position:relative;
  z-index:2;

  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;

  object-fit: contain;
}

.lightbox-debug{
  position:absolute; left:12px; right:12px; bottom:12px;
  z-index:7;
  font-size: 12px;
  color: rgba(234,255,242,.72);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,255,120,.16);
  border-radius: 12px;
  padding: 10px 12px;
  backdrop-filter: blur(8px);
  display:none;
}
.lightbox-stage.has-error .lightbox-debug{ display:block; }

.lightbox-strip{
  position:absolute;
  left: 18px; right: 18px; bottom: 14px;
  height: 60px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 8px 6px;
  scrollbar-width:none;
  z-index:6;
}
.lightbox-strip::-webkit-scrollbar{ display:none; }

.thumb{
  flex:0 0 auto;
  width: 96px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.75);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 32px rgba(0,255,120,.08) inset;
  opacity:.85;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.is-active{
  opacity:1;
  border-color: rgba(0,255,120,.20);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 38px rgba(0,255,120,.16) inset;
}

.lbtn{
  position:absolute;
  z-index:7;
  border:none;
  cursor:pointer;
  color: rgba(234,255,242,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,0,0,.75);
  box-shadow: 0 0 40px rgba(0,255,120,.10) inset;
  backdrop-filter: blur(10px);
}
.lbtn:hover{ filter: brightness(1.06); }

.lbtn--close{
  right: 14px; top: 12px;
  width: 42px; height: 42px;
  border-radius: 14px;
  font-size: 26px;
  line-height: 1;
}
.lbtn--prev, .lbtn--next{
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 92px;
  border-radius: 16px;
  font-size: 40px;
  line-height: 1;
}
.lbtn--prev{ left: 14px; }
.lbtn--next{ right: 14px; }

/* Contacts */
.contact-box{
  width:min(720px, 92vw);
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(0,255,120,.18);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding:14px 16px;
}
.contact-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid rgba(0,255,120,.10);
}
.contact-row:last-child{ border-bottom:none; }
.label{ color:rgba(234,255,242,.70); }
.value{ color:rgba(234,255,242,.92); text-decoration:none; }
.value:hover{ color: var(--green); }

.form{
  width:min(720px, 92vw);
  margin-top:16px;
  display:grid;
  gap:10px;
}
.input{
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(0,255,120,.18);
  background: rgba(0,0,0,.30);
  color:var(--txt);
  outline:none;
  font-size:15px;
}
.input:focus{
  border-color: rgba(0,255,120,.40);
  box-shadow: 0 0 0 4px rgba(0,255,120,.10);
}
.input--area{ min-height:120px; resize:vertical; }
.btn{
  padding:14px 16px;
  border:none;
  border-radius:14px;
  background: linear-gradient(90deg, rgba(0,255,120,.95), rgba(0,200,95,.92));
  color:#021107;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 18px 50px rgba(0,255,120,.16);
}
.btn:hover{ filter: brightness(1.04); }
.note{ color:rgba(234,255,242,.55); font-size:12px; }

@media (max-width: 980px){
  .pcard{ width: min(78vw, 420px); }
  .hero-vertical{ font-size: clamp(18px, 3vw, 28px); }
}

@media (max-width: 820px){
  .section{ min-height:640px; }
  .hero-layout{ grid-template-columns: 52px 1fr 52px; }
  .hero-stack{ width: min(92vw, 720px); }
  .hero-media{ height: min(70vh, 560px); }
  .hero-vertical{ letter-spacing: .22em; }

  .portfolio-shell{ padding: 12px 44px; }
  .pnav{ width: 32px; height: 66px; }
  .pnav-ic{ font-size: 26px; }

  .lbtn--prev, .lbtn--next{ width: 44px; height: 76px; }
}


/* ===== Perfect Home CONTACT (standalone) ===== */
.ph-contact{
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vh, 72px) 18px;
  position: relative;
}

.ph-contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(closest-side at 35% 35%, rgba(0,255,120,.18), transparent 60%),
    radial-gradient(closest-side at 70% 65%, rgba(0,255,120,.10), transparent 58%);
  pointer-events:none;
}

.ph-contact__inner{
  width: min(980px, 92vw);
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(18px, 3vw, 34px);
  justify-items: center;
  text-align: center;
}

.ph-contact__title{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: clamp(44px, 7vw, 96px);
  color: rgba(255,255,255,.92);
}

.ph-contact__cards{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ph-contact__card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 24px;
  min-height: 170px;

  border-radius: 22px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(0,255,120,.22);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  text-decoration: none !important;
  color: rgba(255,255,255,.92) !important;

  transition: transform .22s ease, border-color .22s ease, filter .22s ease;
}

.ph-contact__card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,255,120,.42);
  filter: brightness(1.02);
}

.ph-contact__card:active{
  transform: translateY(-1px) scale(.99);
}

.ph-contact__label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.ph-contact__value{
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 800;
  word-break: break-word;
  text-shadow: 0 0 24px rgba(0,255,120,.10);
}

/* mobile */
@media (max-width: 720px){
  .ph-contact__cards{ grid-template-columns: 1fr; }
  .ph-contact__card{ min-height: 150px; }
}




/* ===== MOBILE FIX: Section 1 + 2 ===== */
@media (max-width: 720px){

  /* правильна висота екрана на мобільних (адресний рядок) */
  .scroll{ height: 100svh; }
  .section{ height: 100svh; min-height: 100svh; }

  /* -------- HOME -------- */
  .hero-layout{
    grid-template-columns: 1fr;      /* було 3 колонки */
    gap: 12px;
    padding: 14px;
  }
  .hero-side{ display:none; }        /* ховаємо вертикальні PERFECT/HOUSES */

  .hero-stack{ width: 92vw; }
  .hero-media{
    height: min(64svh, 520px);       /* щоб влізало по висоті */
    border-radius: 18px;
  }

  .hero-logo{
    top: 10px;                       /* логотип не вилітає за межі */
    width: 96px;
    height: 66px;
  }

  .home-hint{ bottom: 14px; }

  /* -------- ABOUT (ImageMapPro) -------- */
  .section--about .content{
    padding: 18px 14px;
  }

  /* робимо контейнер карти нормальної ширини */
  #image-map-pro{
    width: min(520px, 92vw);
    margin: 0 auto;
  }

  /* найчастіше ImageMapPro всередині має img/canvas — змушуємо їх бути responsive */
  #image-map-pro img,
  #image-map-pro canvas,
  #image-map-pro svg{
    max-width: 100% !important;
    height: auto !important;
  }
}