/* ==========================================================
   39GO PUBLIC HOME V2.0.0
   Real HTML/CSS/JS landing page for 39go.net
   Public only; logged-in Social app stays untouched.
   ========================================================== */

:root{
  --g-bg:#f5f8f5;
  --g-surface:#ffffff;
  --g-surface-soft:#f4f8f4;
  --g-ink:#101713;
  --g-muted:#617068;
  --g-line:#dfe8e2;
  --g-green:#138a57;
  --g-green-dark:#0f6c45;
  --g-green-soft:#e7f5ed;
  --g-gray:#747d78;
  --g-red:#d94d4d;
  --g-shadow:0 24px 70px rgba(22,48,35,.12);
  --g-shadow-sm:0 10px 30px rgba(22,48,35,.09);
}

#go39PublicHomeV2{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:none;
  overflow:auto;
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(19,138,87,.08), transparent 68%),
    radial-gradient(700px 420px at -8% 105%, rgba(19,138,87,.06), transparent 72%),
    var(--g-bg);
  color:var(--g-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans Thai","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#go39PublicHomeV2.is-on{display:block}
#go39PublicHomeV2 *{box-sizing:border-box}

.g2-shell{
  width:min(1420px,calc(100% - 32px));
  min-height:100dvh;
  margin:auto;
  padding:18px 0 22px;
  display:flex;
  flex-direction:column;
}

.g2-nav{
  min-height:66px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:22px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--g-line);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(28,58,40,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.g2-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:max-content;
}
.g2-mark{
  width:44px;height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,#0d1711,#163c2a);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.02em;
}
.g2-brand-copy strong{
  display:block;
  font-size:18px;
  line-height:1.05;
  font-weight:850;
}
.g2-brand-copy span{
  display:block;
  margin-top:3px;
  color:#7b837e;
  font-size:9px;
  letter-spacing:.16em;
}

.g2-links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:22px;
}
.g2-links a{
  color:#3c4740;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}
.g2-top-login{
  min-height:40px;
  padding:0 18px;
  border-radius:999px;
  border:1.5px solid #cad8cf;
  background:#fff;
  color:var(--g-ink);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(23,62,42,.05);
}

.g2-hero{
  flex:1;
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);
  align-items:center;
  gap:34px;
  padding:28px 0 18px;
}

.g2-copy{
  padding:18px 4px 18px 12px;
}
.g2-kicker{
  color:var(--g-green);
  font-size:11px;
  letter-spacing:.22em;
  font-weight:900;
}
.g2-copy h1{
  margin:10px 0 18px;
  font-size:clamp(52px,4.7vw,72px);
  line-height:1.02;
  letter-spacing:-.048em;
  font-weight:880;
}
.g2-copy h1 em{
  display:block;
  color:var(--g-green-dark);
  font-style:normal;
}
.g2-copy p{
  max-width:610px;
  margin:0;
  color:var(--g-muted);
  font-size:17px;
  line-height:1.62;
}
.g2-pills{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:18px;
}
.g2-pill{
  padding:8px 11px;
  border:1px solid var(--g-line);
  border-radius:999px;
  background:#fff;
  color:#34453b;
  font-size:11px;
  font-weight:750;
}

.g2-login-card{
  max-width:630px;
  margin-top:22px;
  padding:15px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--g-line);
  box-shadow:var(--g-shadow-sm);
}
.g2-age{
  min-height:50px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:14px;
  background:#f7f9f7;
  color:#2f3933;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.g2-age input{
  width:22px;height:22px;
  flex:0 0 auto;
  accent-color:var(--g-green);
}
.g2-login-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.g2-login-btn{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  font-size:14px;
  font-weight:850;
  transition:transform .15s ease,opacity .15s ease;
}
.g2-login-btn[aria-disabled="true"]{
  opacity:.38;
  pointer-events:none;
  filter:saturate(.55);
}
.g2-login-btn:active{transform:scale(.985)}
.g2-google{
  background:#707a75;
  border:1.5px solid #707a75;
  color:#fff;
}
.g2-line{
  background:#06c755;
  border:1.5px solid #06c755;
  color:#fff;
}
.g2-g{
  width:27px;height:27px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;
  color:#4285f4;
  font-weight:900;
}
.g2-line-badge{
  min-width:45px;height:27px;
  display:grid;place-items:center;
  border-radius:7px;
  background:#fff;
  color:#06a94a;
  font-size:10px;
  font-weight:900;
}
.g2-policy{
  margin-top:10px;
  text-align:center;
  color:#7d8781;
  font-size:10px;
}
.g2-policy a{
  color:var(--g-green-dark);
}

.g2-visual{
  position:relative;
  min-height:650px;
  overflow:hidden;
  border-radius:34px;
  background:#dbe7df;
  box-shadow:var(--g-shadow);
  border:1px solid rgba(255,255,255,.9);
}
.g2-photo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(14,39,25,.02),rgba(14,39,25,.12)),
    url('/assets/39go-public-home/hero-owner.png?v=2.0.0') center/cover no-repeat;
}
.g2-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(19,138,87,.05),transparent 36%);
  pointer-events:none;
}

.g2-nearby-badge{
  position:absolute;
  z-index:3;
  top:20px;
  left:20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.93);
  color:#22312a;
  font-size:12px;
  font-weight:850;
  box-shadow:0 8px 22px rgba(17,45,30,.11);
  backdrop-filter:blur(15px);
}
.g2-nearby-badge i{
  width:9px;height:9px;
  border-radius:50%;
  background:#19b969;
  box-shadow:0 0 0 6px rgba(25,185,105,.13);
}

.g2-privacy-stack{
  position:absolute;
  z-index:3;
  right:20px;
  top:20px;
  width:210px;
  display:grid;
  gap:9px;
}
.g2-privacy{
  min-height:54px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:17px;
  background:rgba(35,86,58,.70);
  color:#fff;
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(13px);
  box-shadow:0 8px 24px rgba(15,43,28,.15);
}
.g2-privacy .icon{
  width:30px;height:30px;
  flex:0 0 30px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  font-size:15px;
}
.g2-privacy b{
  display:block;
  font-size:12px;
}
.g2-privacy span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.82);
  font-size:9px;
}

.g2-safe-card{
  position:absolute;
  z-index:3;
  left:22px;
  right:22px;
  bottom:22px;
  min-height:230px;
  padding:18px 20px;
  display:grid;
  grid-template-columns:1fr 230px;
  gap:18px;
  align-items:center;
  border-radius:26px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 20px 44px rgba(17,45,30,.17);
  backdrop-filter:blur(18px);
}
.g2-safe-copy h2{
  margin:0 0 8px;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.g2-safe-copy p{
  margin:0;
  color:#69746d;
  font-size:12px;
  line-height:1.5;
}
.g2-online{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--g-green-soft);
  color:#365d47;
  font-size:10px;
  font-weight:800;
}
.g2-online i{
  width:9px;height:9px;
  border-radius:50%;
  background:#19b969;
}

.g2-radar{
  position:relative;
  width:210px;height:210px;
  margin:auto;
  border-radius:50%;
  background:
    radial-gradient(circle at center,#10ae61 0 7px,#fff 8px 12px,transparent 13px),
    repeating-radial-gradient(circle at center,transparent 0 31px,rgba(34,82,56,.17) 32px 33px),
    linear-gradient(180deg,#f9fdf9,#eaf4ec);
  border:1px solid #cdddcf;
  overflow:hidden;
  box-shadow:inset 0 0 36px rgba(31,111,73,.05);
}
.g2-radar::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:46%;height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(19,138,87,.68),transparent);
  animation:g2Sweep 5s linear infinite;
}
@keyframes g2Sweep{to{transform:rotate(360deg)}}
.g2-radar::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(26,75,50,.08) 49.9% 50.1%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,rgba(26,75,50,.08) 49.9% 50.1%,transparent 50.2%);
}
.g2-avatar{
  position:absolute;
  z-index:2;
  width:40px;height:40px;
  border-radius:50%;
  border:3px solid #fff;
  background:linear-gradient(145deg,#e0b07b,#608170);
  box-shadow:0 5px 14px rgba(0,0,0,.16);
}
.g2-a1{left:22px;top:58px}
.g2-a2{right:20px;top:22px}
.g2-a3{right:15px;bottom:30px}
.g2-a4{left:54px;bottom:12px}

.g2-footer{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#8b918c;
  font-size:10px;
  border-top:1px solid rgba(39,67,50,.07);
}
.g2-footerlinks{
  display:flex;
  gap:14px;
}
.g2-footer a{
  color:#69716b;
  text-decoration:none;
}

/* Only hide the old public UI while this page is active. */
body.g2-public-active #go39HomeShell,
body.g2-public-active #go39LoginTopPanel,
body.g2-public-active #go39PolicyFooter{
  display:none!important;
}

@media(max-width:1050px){
  .g2-hero{
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  .g2-copy h1{font-size:50px}
  .g2-visual{min-height:600px}
  .g2-privacy-stack{width:190px}
  .g2-safe-card{grid-template-columns:1fr 190px}
  .g2-radar{width:180px;height:180px}
}

/* Mobile: actual app-like landing, no giant heading and no content falling out */
@media(max-width:760px){
  .g2-shell{
    width:100%;
    padding:0;
  }
  .g2-nav{
    min-height:58px;
    padding:0 14px;
    border-radius:0;
    border-left:0;
    border-right:0;
    border-top:0;
  }
  .g2-links{display:none}
  .g2-brand-copy span{display:none}
  .g2-mark{
    width:39px;height:39px;
    border-radius:11px;
  }
  .g2-brand-copy strong{font-size:16px}
  .g2-top-login{
    min-height:36px;
    padding:0 13px;
    font-size:12px;
  }

  .g2-hero{
    display:flex;
    flex-direction:column;
    min-height:auto;
    gap:0;
    padding:0;
  }
  .g2-visual{
    order:0;
    width:100%;
    min-height:300px;
    height:38dvh;
    border-radius:0;
    border:0;
    box-shadow:none;
  }
  .g2-photo{
    background-position:center 28%;
  }
  .g2-nearby-badge{
    top:12px;left:12px;
    padding:8px 10px;
    font-size:10px;
  }
  .g2-privacy-stack{
    display:none;
  }
  .g2-safe-card{
    left:12px;
    right:12px;
    bottom:12px;
    min-height:108px;
    padding:11px 12px;
    grid-template-columns:1fr 86px;
    gap:8px;
    border-radius:18px;
  }
  .g2-safe-copy h2{
    font-size:15px;
    margin-bottom:4px;
  }
  .g2-safe-copy p{
    font-size:10px;
    line-height:1.35;
  }
  .g2-online{display:none}
  .g2-radar{
    width:80px;height:80px;
  }
  .g2-avatar{
    width:16px;height:16px;
    border-width:2px;
  }
  .g2-a1{left:8px;top:22px}
  .g2-a2{right:8px;top:8px}
  .g2-a3{right:5px;bottom:10px}
  .g2-a4{left:22px;bottom:5px}

  .g2-copy{
    order:1;
    width:100%;
    padding:18px 16px 16px;
  }
  .g2-kicker{font-size:9px}
  .g2-copy h1{
    margin:6px 0 10px;
    font-size:34px;
    line-height:1.06;
    letter-spacing:-.03em;
  }
  .g2-copy h1 em{
    display:inline;
  }
  .g2-copy p{
    font-size:14px;
    line-height:1.45;
  }
  .g2-pills{display:none}
  .g2-login-card{
    margin-top:12px;
    padding:10px;
    border-radius:17px;
  }
  .g2-age{
    min-height:42px;
    font-size:12px;
  }
  .g2-login-actions{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:7px;
  }
  .g2-login-btn{
    min-height:48px;
    font-size:14px;
  }
  .g2-policy{font-size:9px}
  .g2-footer{
    min-height:38px;
    padding:0 14px;
  }
}

@media(max-height:700px) and (max-width:760px){
  .g2-visual{
    height:31dvh;
    min-height:210px;
  }
  .g2-safe-card{display:none}
  .g2-copy{padding-top:12px}
  .g2-copy h1{font-size:30px}
  .g2-copy p{font-size:13px}
  .g2-footer{display:none}
}

@media(prefers-reduced-motion:reduce){
  .g2-radar::before{animation:none!important}
}