:root{
  --forest:#1F3A2E;
  --forest-deep:#152A21;
  --cream:#F5EFE1;
  --paper:#FBF8F1;
  --apricot:#E8935A;
  --cherry:#9B2242;
  --steel:#4A6B8A;
  --olive:#7C8A5C;
  --charcoal:#211D19;
  --line-light: rgba(245,239,225,0.18);
  --beef-red:#B3402E;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{
  margin:0; font-family:'Inter',sans-serif; color:var(--cream);
  background:var(--forest-deep); min-height:100vh; overflow-x:hidden;
}

/* ---------- BACKGROUND ---------- */
.hero-bg{ position:fixed; inset:0; z-index:0; }
.hero-photo{ width:100%; height:100%; object-fit:cover; object-position:center 38%; filter:saturate(1.05) contrast(1.04); }
.hero-scrim{
  position:fixed; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 900px 700px at 50% 38%, rgba(21,42,33,0.14) 0%, rgba(15,20,17,0.42) 55%, rgba(10,14,12,0.68) 100%);
}
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- LAYOUT ---------- */
.gate{
  position:relative; z-index:3;
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:64px 24px 40px; text-align:center;
}

/* ---------- 3D LOGO POPUP ---------- */
.hero-row{
  display:flex; align-items:center; justify-content:flex-start; gap:32px;
  margin-bottom:8px; flex-wrap:wrap; width:100%; max-width:880px;
  align-self:center;
}
.brand-mark{
  perspective:900px;
  margin-bottom:0; flex-shrink:0;
}
.hero-title-block{ text-align:left; max-width:600px; }
/* ---------- 3D LOGO SPHERE ---------- */
.logo-sphere{
  position:relative; width:210px; height:210px; border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 32% 26%, #ffffff 0%, #f1f3f5 26%, #dde3e7 48%, #b9c2c8 72%, #8b959c 100%);
  box-shadow:
    0 0 0 6px #FFFFFF,
    0 0 0 7px rgba(0,0,0,0.08),
    inset -22px -22px 46px rgba(0,0,0,0.28),
    inset 14px 14px 28px rgba(255,255,255,0.7),
    0 14px 10px rgba(0,0,0,0.28),
    0 30px 44px rgba(0,0,0,0.38),
    0 2px 4px rgba(0,0,0,0.2);
  transform:rotateX(6deg);
  transition:transform .3s ease;
}
.sphere-shine{
  position:absolute; top:9%; left:16%; width:42%; height:26%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 72%);
  filter:blur(1px); pointer-events:none; z-index:3;
}
.badge-logo{
  position:absolute; top:6%; left:50%; width:196px; height:auto;
  transform:translateX(-50%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.sphere-text{
  position:absolute; left:50%; top:58%; width:150px; height:78px;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; text-align:center;
  z-index:4; pointer-events:none;
}
.sphere-text .line{
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:11px;
  letter-spacing:0.06em; line-height:1.35; color:#163D78;
  opacity:0; text-shadow:0 0 0 rgba(22,61,120,0);
  transition:opacity 0.7s ease, text-shadow 0.7s ease;
}
.sphere-text .line.lit{
  opacity:1; text-shadow:0 0 10px rgba(22,61,120,0.5), 0 0 2px rgba(22,61,120,0.3);
}
.brand-mark:hover .logo-sphere{
  transform:rotateX(2deg) scale(1.03);
}

/* ---------- GATE HEAD ---------- */
.hero-title-block .eyebrow{
  display:block; font-family:'JetBrains Mono',monospace; font-size:12.5px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--apricot); margin-bottom:14px;
}
.hero-title-block h1{
  font-family:'Fraunces',serif; font-weight:700; font-size:clamp(26px,3.6vw,40px);
  line-height:1.1; margin:0 0 20px; color:var(--cream);
}

/* ---------- COUNTRY CHIPS (flag popups) ---------- */
.country-row{
  display:flex; align-items:center; justify-content:flex-start; gap:14px; flex-wrap:wrap;
}
.country-chip{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(40,32,26,0.4);
  border:1px solid rgba(245,239,225,0.22);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-radius:30px; padding:8px 16px 8px 8px;
  box-shadow:0 10px 20px rgba(0,0,0,0.22);
  transition:transform .2s ease, border-color .2s ease;
}
.country-chip:hover{ transform:translateY(-2px); border-color:rgba(245,239,225,0.4); }
.flag-pop{
  position:relative; display:inline-flex; width:34px; height:34px; border-radius:50%; overflow:hidden;
  align-items:center; justify-content:center; background:#fff;
  box-shadow:
    0 0 0 2px #fff,
    0 3px 3px rgba(0,0,0,0.15),
    0 6px 14px rgba(0,0,0,0.32),
    inset -6px -6px 12px rgba(0,0,0,0.22),
    inset 4px 4px 8px rgba(255,255,255,0.5);
  flex-shrink:0;
}
.flag-pop svg{ width:150%; height:150%; }
.flag-pop::after{
  content:""; position:absolute; top:12%; left:18%; width:38%; height:24%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 75%);
  pointer-events:none;
}
.country-name{
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.03em;
  color:var(--cream); font-weight:500;
}
.to-world{
  display:block; margin:26px 0 44px; text-align:center;
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:19px; color:var(--apricot); letter-spacing:0.01em;
}

/* ---------- GATE CARDS (glass popups) ---------- */
.gate-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  max-width:840px; width:100%;
}
.gate-card{
  position:relative; overflow:hidden;
  background:rgba(40,32,26,0.38);
  border:1px solid rgba(245,239,225,0.22);
  border-top-color:rgba(246,200,138,0.4);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-radius:12px;
  padding:34px 28px 30px;
  text-align:left; text-decoration:none; color:var(--cream);
  box-shadow:0 24px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(246,200,138,0.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; gap:10px;
}
.gate-card:hover{
  transform:translateY(-5px);
  box-shadow:0 30px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(246,200,138,0.2);
  border-color:rgba(245,239,225,0.36);
}
.card-glow{
  position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  filter:blur(50px); opacity:0.35; z-index:0; pointer-events:none;
}
.gate-card.fruits .card-glow{ background:var(--apricot); }
.gate-card.beef .card-glow{ background:var(--beef-red); }
.card-eyebrow{
  position:relative; z-index:1;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(245,239,225,0.55);
}
.gate-card h2{
  position:relative; z-index:1;
  font-family:'Fraunces',serif; font-weight:700; font-size:28px; margin:0;
  color:var(--cream);
}
.gate-card.fruits h2 em{ font-style:italic; color:var(--apricot); }
.gate-card.beef h2 em{ font-style:italic; color:#E8836C; }
.card-sub{
  position:relative; z-index:1;
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.05em;
  color:rgba(245,239,225,0.65); margin:0; flex-grow:1;
}
.card-cta{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--cream); font-weight:500;
}
.card-cta svg{ width:16px; height:16px; transition:transform .2s ease; }
.gate-card:hover .card-cta svg{ transform:translateX(4px); }

/* ---------- OFFICES ---------- */
.gate-offices{
  margin-top:52px; display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  max-width:820px;
}
.gate-office{ display:flex; flex-direction:column; gap:4px; text-align:center; }
.gate-office strong{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--apricot);
}
.gate-office span{ font-size:13px; color:rgba(245,239,225,0.75); line-height:1.4; }
@media (max-width:640px){ .gate-offices{ gap:22px; } }

/* ---------- FOOTER ---------- */
.gate-footer{
  margin-top:24px; font-size:12.5px; color:rgba(245,239,225,0.5);
  font-family:'JetBrains Mono',monospace;
}
.gate-footer .sep{ margin:0 8px; }

.install-btn{
  margin-top:22px;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,239,225,0.08); color:var(--cream);
  border:1px solid rgba(245,239,225,0.28); border-radius:30px;
  padding:11px 22px; font-family:'JetBrains Mono',monospace; font-size:13px;
  letter-spacing:0.04em; cursor:pointer; transition:all .2s ease;
  backdrop-filter:blur(10px);
}
.install-btn svg{ width:16px; height:16px; }
.install-btn:hover{ background:rgba(245,239,225,0.16); border-color:var(--apricot); transform:translateY(-1px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:720px){
  .gate-cards{ grid-template-columns:1fr; }
  .hero-row{ flex-direction:column; gap:16px; align-items:center; }
  .hero-title-block{ text-align:center; }
  .country-row{ justify-content:center; }
  .logo-sphere{ width:160px; height:160px; }
  .badge-logo{ width:149px; }
  .sphere-text{ width:114px; height:60px; top:56%; }
  .sphere-text .line{ font-size:9px; }
}