/*!
====================================================
JTG CORE NEBULA
Version : 2.0 Clean CSS
Module  : Landing Page Core
Owner   : Jalatogel
====================================================
*/

/* ==================================================
   01. DESIGN TOKEN
================================================== */

:root{
  --jtg-bg:#03070d;
  --jtg-bg-2:#06111f;
  --jtg-surface:rgba(255,255,255,.055);
  --jtg-surface-strong:rgba(255,255,255,.095);
  --jtg-blue:#2196ff;
  --jtg-blue-deep:#0b5fd3;
  --jtg-cyan:#74e6ff;
  --jtg-text:#f7fbff;
  --jtg-muted:#b9c7d8;
  --jtg-border:rgba(116,230,255,.25);
  --jtg-border-soft:rgba(116,230,255,.15);
  --jtg-shadow:0 30px 90px rgba(0,0,0,.42);
  --jtg-shadow-soft:0 18px 45px rgba(0,0,0,.24);
  --jtg-radius-sm:12px;
  --jtg-radius-md:18px;
  --jtg-radius-lg:28px;
  --jtg-shell:min(1160px,calc(100% - 32px));
}

/* ==================================================
   02. RESET
================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body.jtg{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--jtg-text);
  background:
    radial-gradient(circle at 20% 0%,rgba(33,150,255,.28),transparent 30rem),
    radial-gradient(circle at 100% 10%,rgba(116,230,255,.12),transparent 24rem),
    linear-gradient(180deg,var(--jtg-bg-2),var(--jtg-bg) 46%,#020306);
  padding-bottom:0;
}

body.jtg::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}

body.jtg::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0%,rgba(0,0,0,.48) 100%);
}

img{max-width:100%;display:block;}
a{color:inherit;}

.jtg-skip{
  position:absolute;
  top:-100px;
  left:16px;
  z-index:100;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  color:#000;
}
.jtg-skip:focus{top:16px;}

/* ==================================================
   03. HEADER
================================================== */

.jtg-header{
  width:var(--jtg-shell);
  min-height:76px;
  margin:18px auto 0;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  position:sticky;
  top:16px;
  z-index:10;
  border:1px solid var(--jtg-border);
  border-radius:999px;
  background:rgba(3,7,13,.64);
  backdrop-filter:blur(18px);
  box-shadow:var(--jtg-shadow-soft);
}

.jtg-logo img{height:50px;width:auto;object-fit:contain;}
.jtg-nav{display:flex;gap:8px;}

.jtg-nav a{
  padding:10px 14px;
  border-radius:999px;
  color:var(--jtg-muted);
  text-decoration:none;
  font-size:14px;
  font-weight:850;
}

.jtg-nav a:hover{background:rgba(116,230,255,.1);color:var(--jtg-cyan);}

/* ==================================================
   04. HERO / STAGE
================================================== */

.jtg-stage{
  width:var(--jtg-shell);
  min-height:calc(100vh - 150px);
  margin:34px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,560px);
  gap:28px;
  align-items:stretch;
  position:relative;
  z-index:1;
}

.jtg-stage-copy{
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--jtg-border);
  border-radius:var(--jtg-radius-lg);
  background:linear-gradient(180deg,var(--jtg-surface-strong),rgba(255,255,255,.032));
  box-shadow:var(--jtg-shadow);
}

.jtg-badge,.jtg-kicker{
  width:max-content;
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--jtg-border);
  border-radius:999px;
  background:rgba(116,230,255,.09);
  color:var(--jtg-cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.jtg-stage h1{
  max-width:720px;
  margin:18px 0 14px;
  font-size:clamp(42px,6vw,78px);
  line-height:.95;
  letter-spacing:-.06em;
}

.jtg-stage p{
  max-width:660px;
  margin:0;
  color:var(--jtg-muted);
  font-size:18px;
  line-height:1.75;
}

.jtg-stage-media{
  margin:0;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--jtg-border);
  border-radius:34px;
  background:linear-gradient(180deg,rgba(116,230,255,.14),rgba(255,255,255,.04));
  box-shadow:var(--jtg-shadow);
}

.jtg-stage-media img{
  width:100%;
  height:auto;
  max-height:680px;
  object-fit:contain;
  aspect-ratio:auto;
  border-radius:25px;
}

/* ==================================================
   05. BUTTON / ACTION
================================================== */

.jtg-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

.jtg-action{
  min-width:150px;
  height:52px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none;
  font-weight:950;
  letter-spacing:.04em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.jtg-action:hover{transform:translateY(-2px);}

.jtg-action-primary{
  color:#04101d;
  background:linear-gradient(180deg,#9df1ff,var(--jtg-blue));
  box-shadow:0 18px 40px rgba(33,150,255,.28);
}

.jtg-action-ghost{
  color:var(--jtg-text);
  border:1px solid var(--jtg-border);
  background:rgba(255,255,255,.065);
}

/* ==================================================
   06. PROOF / QUICK STATS
================================================== */

.jtg-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;}

.jtg-proof div{
  padding:14px;
  border:1px solid rgba(116,230,255,.16);
  border-radius:var(--jtg-radius-md);
  background:rgba(255,255,255,.04);
}

.jtg-proof strong{display:block;color:var(--jtg-cyan);font-size:18px;}
.jtg-proof span{display:block;color:var(--jtg-muted);font-size:12px;font-weight:800;}

/* ==================================================
   07. STRIP / CHIPS
================================================== */

.jtg-strip{
  width:min(980px,calc(100% - 32px));
  margin:22px auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  position:relative;
  z-index:1;
}

.jtg-strip span,.jtg-chipset span{
  padding:10px 14px;
  border:1px solid rgba(116,230,255,.18);
  border-radius:999px;
  color:var(--jtg-muted);
  background:rgba(255,255,255,.04);
  font-size:13px;
  font-weight:850;
}

.jtg-chipset{display:flex;flex-wrap:wrap;gap:10px;}

/* ==================================================
   08. SECTION
================================================== */

.jtg-section{
  width:min(1080px,calc(100% - 32px));
  margin:86px auto 0;
  position:relative;
  z-index:1;
}

.jtg-section-title{margin-bottom:24px;}

.jtg-section h2{
  max-width:820px;
  margin:12px 0 0;
  font-size:clamp(30px,4.2vw,50px);
  line-height:1.05;
  letter-spacing:-.045em;
}

/* ==================================================
   09. GRID / PANEL / CARD
================================================== */

.jtg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.jtg-panel,.jtg-info,.jtg-faq{
  border:1px solid var(--jtg-border);
  border-radius:var(--jtg-radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}

.jtg-panel{padding:24px;}

.jtg-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border:1px solid rgba(116,230,255,.2);
  border-radius:14px;
  background:rgba(116,230,255,.1);
}

.jtg-panel h3{margin:0 0 10px;font-size:22px;}
.jtg-panel p{margin:0;color:var(--jtg-muted);line-height:1.7;}
.jtg-review strong{color:var(--jtg-cyan);letter-spacing:.12em;}
.jtg-review span{display:block;margin-top:14px;font-weight:900;}

/* ==================================================
   10. INFO TABLE
================================================== */

.jtg-info{max-width:760px;margin:auto;padding:26px;}
.jtg-info h2{margin:0 0 18px;}

.jtg-info-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.1);
}

.jtg-info-row span{color:var(--jtg-muted);}
.jtg-info-row strong{color:var(--jtg-cyan);}

/* ==================================================
   11. ARTICLE COPY
================================================== */

.jtg-copy{max-width:860px;color:var(--jtg-muted);}
.jtg-copy h2{color:var(--jtg-text);}
.jtg-copy p{font-size:17px;line-height:1.85;}

/* ==================================================
   12. FAQ
================================================== */

.jtg-faq{margin:12px 0;padding:0;overflow:hidden;}
.jtg-faq summary{cursor:pointer;list-style:none;padding:19px 22px;font-weight:950;}
.jtg-faq summary::-webkit-details-marker{display:none;}
.jtg-faq p{margin:0;padding:0 22px 20px;color:var(--jtg-muted);line-height:1.7;}

/* ==================================================
   13. FOOTER
================================================== */

.jtg-footer{
  width:var(--jtg-shell);
  margin:90px auto 24px;
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
  z-index:1;
  border:1px solid var(--jtg-border);
  border-radius:var(--jtg-radius-lg);
  background:rgba(255,255,255,.04);
  color:var(--jtg-muted);
}

.jtg-signature{color:var(--jtg-cyan);font-weight:950;}

/* ==================================================
   14. MOBILE FLOATING CTA
================================================== */

.jtg-mobile-cta{display:none;}

/* ==================================================
   15. RESPONSIVE
================================================== */

@media (max-width:900px){
  .jtg-header{position:relative;top:auto;border-radius:26px;flex-direction:column;}
  .jtg-nav{width:100%;justify-content:center;flex-wrap:wrap;}
  .jtg-stage{grid-template-columns:1fr;min-height:auto;}
  .jtg-stage-copy{padding:30px;}
  .jtg-stage-media img{max-height:none;}
  .jtg-grid{grid-template-columns:1fr;}
  .jtg-footer{flex-direction:column;text-align:center;}
}

@media (max-width:560px){
  body.jtg{padding-bottom:76px;}
  .jtg-header,.jtg-stage,.jtg-section,.jtg-footer{width:calc(100% - 24px);}
  .jtg-nav a{font-size:12px;padding:9px 10px;}
  .jtg-stage h1{font-size:42px;}
  .jtg-stage p{font-size:16px;}
  .jtg-action{width:100%;}
  .jtg-proof{grid-template-columns:1fr;}
  .jtg-info-row{flex-direction:column;gap:4px;}

  .jtg-mobile-cta{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:30;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:10px;
    border:1px solid var(--jtg-border);
    border-radius:999px;
    background:rgba(3,7,13,.86);
    backdrop-filter:blur(18px);
  }

  .jtg-mobile-cta a{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    text-decoration:none;
    font-weight:950;
  }

  .jtg-mobile-cta a:first-child{background:rgba(255,255,255,.08);}
  .jtg-mobile-cta a:last-child{color:#04101d;background:linear-gradient(180deg,#9df1ff,var(--jtg-blue));}
}