@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  --gg-cyan: #20dcff;
  --gg-magenta: #ff35d4;
  --gg-violet: #7c3aed;
  --gg-scroll-accent: #810fec;

  --gg-text: rgba(240,236,255,0.94);
  --gg-text-soft: rgba(225,217,255,0.78);
  --gg-muted: rgba(205,196,232,0.66);

  --gg-border: rgba(178,138,255,0.12);
  --gg-border-strong: rgba(148,87,240,0.575);

  --gg-card-top: rgba(255,255,255,0.055);
  --gg-card-bottom: rgba(255,255,255,0.018);
  --gg-card-base-1: rgba(18,18,28,0.84);
  --gg-card-base-2: rgba(12,12,20,0.88);

  --gg-shadow-soft: 0 10px 30px rgba(0,0,0,0.26);
  --gg-shadow-card: 0 14px 40px rgba(0,0,0,0.42);
  --gg-shadow-card-hover: 0 14px 40px rgba(117,38,182,0.42);

  --gg-radius: 28px;
  --gg-container: 1180px;
  --gg-header-h: 78px;

  --gg-section-gap: 92px;
  --gg-card-gap: 22px;

  --mx: 50vw;
  --my: 24vh;
}

/* =========================================
                SCROLLBAR
   ========================================= */

html{
  scrollbar-width: thin;
  scrollbar-color: var(--gg-scroll-accent) rgba(255,255,255,0.06);
}

::-webkit-scrollbar{
  width: 14px;
}

::-webkit-scrollbar-track{
  background:
    linear-gradient(180deg,
      rgba(7, 12, 28, 0.98) 0%,
      rgba(11, 10, 24, 0.98) 52%,
      rgba(22, 8, 28, 0.98) 100%);
  border-left: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    inset 12px 0 30px rgba(32,220,255,0.04),
    inset 0 -28px 42px rgba(255,53,212,0.07);
}

::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 2px solid rgba(10, 10, 18, 0.92);
  background:
    linear-gradient(180deg,
      var(--gg-cyan) 0%,
      #73b8ff 36%,
      #8d79ff 68%,
      var(--gg-magenta) 100%);
  box-shadow:
    0 0 16px rgba(32,220,255,0.18),
    0 0 26px rgba(255,53,212,0.12);
}

::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(180deg,
      #52e6ff 0%,
      #8fc8ff 34%,
      #9d89ff 68%,
      #ff5ce0 100%);
  box-shadow:
    0 0 18px rgba(32,220,255,0.24),
    0 0 30px rgba(255,53,212,0.16);
}

::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(180deg,
      #3ddfff 0%,
      #7ab8ff 34%,
      #886eff 68%,
      #f93bd6 100%);
}

::-webkit-scrollbar-corner{
  background: rgba(10, 10, 18, 0.96);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}

body{
  margin:0;
  font-family:"Inter", Arial, Helvetica, sans-serif;
  color:var(--gg-text);
  background:
    radial-gradient(circle at top left, rgba(32,220,255,0.055), transparent 24%),
    radial-gradient(circle at top right, rgba(255,53,212,0.05), transparent 26%),
    linear-gradient(180deg, #090910 0%, #06070b 48%, #05060a 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

.gg-shell{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}

.gg-bg-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.gg-bg,.gg-grid,.gg-noise,.gg-grid-riders,.gg-mouse-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.gg-bg{
  z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0)),
    linear-gradient(135deg, #07080c 0%, #090910 38%, #05060a 100%);
}

.gg-grid{
  z-index:2;
  inset:-10%;
  background-image:
    linear-gradient(rgba(176,142,255,0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,142,255,0.038) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image: radial-gradient(circle at center, black 42%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle at center, black 42%, transparent 88%);
  transform: perspective(1200px) rotateX(66deg) scale(1.4) translateY(18%);
  transform-origin:center center;
  opacity:.34;
}

.gg-noise{
  z-index:3;
  opacity:.028;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, #fff 0 1px, transparent 1px);
  background-size:180px 180px, 240px 240px, 210px 210px, 260px 260px;
  animation:noiseFloat 24s linear infinite;
}

.gg-grid-riders{
  z-index:4;
  inset:-12%;
  transform: perspective(1200px) rotateX(66deg) scale(1.4) translateY(18%);
  transform-origin:center center;
  opacity:.92;
}

.gg-mouse-glow{
  z-index:5;
  background:
    radial-gradient(circle 240px at var(--mx) var(--my), rgba(32,220,255,0.085), transparent 60%),
    radial-gradient(circle 320px at calc(var(--mx) + 120px) calc(var(--my) + 30px), rgba(255,53,212,0.045), transparent 68%);
  transition: opacity .25s ease;
}

.rider{
  position:absolute;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(155,95,255,0.96), rgba(227,194,255,0.96), transparent);
  box-shadow:
    0 0 18px rgba(155,95,255,0.40),
    0 0 34px rgba(124,58,237,0.20);
}

.rider-h{height:3px}
.rider-v{
  width:3px;
  background:linear-gradient(180deg, transparent, rgba(155,95,255,0.96), rgba(227,194,255,0.96), transparent);
}

.rider-h-1{width:240px;top:24%;animation:rideHorizontalA 14s linear infinite}
.rider-h-2{width:180px;top:58%;animation:rideHorizontalB 17s linear infinite}
.rider-h-3{width:130px;top:78%;animation:rideHorizontalC 11s linear infinite}
.rider-v-1{height:220px;left:30%;animation:rideVerticalA 16s linear infinite}
.rider-v-2{height:180px;left:64%;animation:rideVerticalB 13s linear infinite}
.rider-v-3{height:140px;left:84%;animation:rideVerticalC 10s linear infinite}

.gg-content{
  position:relative;
  z-index:2;
  width:min(var(--gg-container), calc(100% - 32px));
  margin:0 auto;
}

.site-header{
  position:fixed;
  top:0;
  z-index:30;
  width:100%;
  backdrop-filter:blur(20px);
  background:rgba(10,10,15,0.9);
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.nav-row{
  min-height:var(--gg-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:800;
}

.brand-icon{
  width:34px;
  height:34px;
  border-radius:8px;
  box-shadow:
    0 0 18px rgba(159,103,255,0.22),
    0 0 36px rgba(32,220,255,0.08);
}

.brand-name{
  font-family:"Sora", Arial, sans-serif;
  font-size:1.16rem;
  font-weight:800;
  letter-spacing:-0.04em;
  background:linear-gradient(90deg, var(--gg-cyan) 0%, #8f8cff 46%, var(--gg-magenta) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:22px;
}

.site-nav a{
  color:rgba(225,215,250,0.82);
  font-weight:600;
  transition:color .22s ease, text-shadow .22s ease;
}

.site-nav a:hover{
  color:rgba(255,255,255,0.96);
  text-shadow:0 0 18px rgba(155,92,255,0.20);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.gg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 22px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:-0.02em;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
  cursor:pointer;
  border:0;
}

.gg-btn:hover{transform:translateY(-2px)}

.gg-btn-primary{
  color:#071018;
  background:linear-gradient(135deg, var(--gg-cyan) 0%, #2fb7eb 30%, #8c88ff 68%, #8091f5 100%);
  box-shadow:
    0 16px 40px rgba(32,220,255,0.16),
    0 0 36px rgba(124,58,237,0.08),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

.gg-btn-secondary{
  color:rgba(241,236,255,0.94);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
  border:1px solid rgba(174,141,255,0.18);
  backdrop-filter:blur(12px);
}

.gg-kicker,.card-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  background:rgba(255,255,255,0.035);
  box-shadow:var(--gg-shadow-soft);
  color:rgba(240,236,255,0.96);
  font-size:.92rem;
  font-weight:600;
  backdrop-filter:blur(14px);
}

.gg-kicker::before,.card-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gg-cyan), var(--gg-magenta));
  box-shadow:0 0 16px rgba(32,220,255,0.7);
}

.gg-title,.section-title,.gg-panel-title,.gg-card h3{
  font-family:"Sora", Arial, sans-serif;
  letter-spacing:-0.055em;
}

.gg-title,.section-title{
  margin:18px 0 16px;
  line-height:.92;
  font-weight:800;
}

.gg-title .line{display:block}
.gg-title .line-1{
  background:linear-gradient(90deg, #f1ebff 0%, #daccff 34%, #b59cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gg-title .line-2{
  background:linear-gradient(90deg, var(--gg-cyan) 0%, #8795ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gg-title .line-3{
  background:linear-gradient(90deg, #8b70ff 0%, var(--gg-magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.gg-sub,.section-sub,.gg-panel-text,.gg-card p,.site-footer p,.category-text{
  color:var(--gg-muted);
  line-height:1.75;
}

.gg-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.hero-pills,
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.mini-chip{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.035);
  color:rgba(240,236,255,0.94);
  font-weight:700;
}

.gg-card{
  position:relative;
  padding:28px;
  border-radius:var(--gg-radius);
  border:1px solid var(--gg-border);
  backdrop-filter:blur(18px);
  background:
    linear-gradient(180deg, var(--gg-card-top), var(--gg-card-bottom)),
    linear-gradient(145deg, var(--gg-card-base-1), var(--gg-card-base-2));
  box-shadow:
    var(--gg-shadow-card),
    inset 0 1px 0 rgba(255,255,255,0.055);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}

.gg-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 18% 18%, rgba(124,58,237,0.12), transparent 38%),
    radial-gradient(circle at 84% 84%, rgba(255,53,212,0.10), transparent 46%);
  opacity:.72;
  pointer-events:none;
}

.gg-card::after{
  content:"";
  position:absolute;
  inset:-150% auto auto -40%;
  width:60%;
  height:320%;
  transform:rotate(24deg) translateX(-120%);
  background:linear-gradient(90deg, transparent, rgba(206,174,255,0.42), transparent);
  opacity:0;
  pointer-events:none;
}

.gg-card:hover{
  transform:translateY(-2px);
  border-color:var(--gg-border-strong);
  box-shadow:var(--gg-shadow-card-hover);
}

.gg-card:hover::after{
  opacity:1;
  animation:purpleOutlineSweep 1s linear forwards;
}

.gg-card-primary{
  border-color:rgba(32,220,255,0.22);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.42),
    0 0 0 1px rgba(32,220,255,0.06) inset,
    0 0 26px rgba(32,220,255,0.06);
}

.gg-card-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)),
    linear-gradient(145deg, rgba(15,15,24,0.80), rgba(10,10,18,0.86));
}

.gg-card-hero{
  box-shadow:
    0 18px 48px rgba(0,0,0,0.42),
    0 0 0 1px rgba(155,95,255,0.08) inset,
    0 0 28px rgba(124,58,237,0.06);
}

.gg-panel-title,.gg-card h3{
  position:relative;
  z-index:1;
  margin:16px 0 10px;
  font-size:clamp(1.18rem, 2.6vw, 2rem);
  line-height:1.04;
  color:rgba(239,234,255,0.97);
}

.gg-card p,.gg-panel-text,.card-chip,.card-link,.mini-chip,.hero-highlight-grid{
  position:relative;
  z-index:1;
}

.section-gap{
  padding:30px 0 var(--gg-section-gap);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:32px;
}

.section-title{
  font-size:clamp(2rem, 3.5vw, 3rem);
  margin-bottom:10px;
  background:linear-gradient(90deg, #ffffff 0%, #dacbff 28%, #9d82ff 58%, #ff82e7 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-sub{
  max-width:64ch;
  margin:0;
}

.section-link{
  color:var(--gg-cyan);
  font-weight:800;
  white-space:nowrap;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--gg-card-gap);
}

.stack-grid{
  display:grid;
  gap:var(--gg-card-gap);
}

.tool-card{
  height: 100%;
  display:flex;
  flex-direction:column;
}

.too-card p{
  flex-grow: 1;
}

.card-link{
  margin-top:auto;
  padding-top:18px;
  color:var(--gg-cyan);
  font-weight:800;
}

.category-card{
  padding:24px 28px;
}

.category-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.category-text{
  margin:14px 0 0;
}

.two-col{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .95fr);
  gap:30px;
  align-items:start;
}

.link-grid .link-card{
  min-height:100%;
}

.link-card a{
  display:block;
  margin-top:10px;
  color:var(--gg-text-soft);
  font-weight:600;
}

.link-card a:hover{
  color:var(--gg-cyan);
}

.site-footer{
  padding:34px 0 40px;
  border-top:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(7,7,13,0), rgba(7,7,13,.50));
}

.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:22px;
}

.footer-row p{
  margin:10px 0 0;
  max-width:50ch;
}

.footer-meta{
  color:rgba(219,210,241,0.62);
  white-space:nowrap;
}

.hero-load{
  opacity:0;
  will-change:transform, opacity, filter;
  animation-fill-mode:forwards;
}

.hero-load-copy{
  transform:translateY(36px) scale(.985);
  filter:blur(14px);
  animation:heroCopyIn 1s cubic-bezier(.18,.82,.24,1) .08s forwards;
}

.hero-load-panel{
  transform:translateX(46px) rotateY(-8deg) scale(.96);
  transform-origin:center left;
  filter:blur(16px);
  animation:heroPanelIn 1.05s cubic-bezier(.16,.84,.24,1) .24s forwards;
}

.scroll-reveal{
  opacity:0;
  transition:opacity .8s ease, filter .8s ease, transform .8s cubic-bezier(.2,.78,.2,1);
  will-change:opacity, filter, transform;
}

.reveal-fade{
  transform:translateY(28px);
  filter:blur(10px);
}

.reveal-left{
  transform:translateX(-34px);
  filter:blur(10px);
}

.reveal-card{
  transform:translateY(42px) scale(.965);
  filter:blur(12px);
}

.scroll-reveal.in-view{
  opacity:1;
  transform:none;
  filter:blur(0);
}

.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}

@keyframes heroCopyIn{
  0%{opacity:0;transform:translateY(36px) scale(.985);filter:blur(14px)}
  65%{opacity:1;transform:translateY(-4px) scale(1.002);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes heroPanelIn{
  0%{opacity:0;transform:translateX(46px) rotateY(-8deg) scale(.96);filter:blur(16px)}
  70%{opacity:1;transform:translateX(-4px) rotateY(0deg) scale(1.01);filter:blur(0)}
  100%{opacity:1;transform:translateX(0) rotateY(0deg) scale(1);filter:blur(0)}
}

@keyframes purpleOutlineSweep{
  from{transform:rotate(24deg) translateX(-120%)}
  to{transform:rotate(24deg) translateX(300%)}
}

@keyframes rideHorizontalA{0%{left:-20%}100%{left:100%}}
@keyframes rideHorizontalB{0%{left:100%}100%{left:-26%}}
@keyframes rideHorizontalC{0%{left:-12%}100%{left:100%}}
@keyframes rideVerticalA{0%{top:-26%}100%{top:100%}}
@keyframes rideVerticalB{0%{top:100%}100%{top:-26%}}
@keyframes rideVerticalC{0%{top:-18%}100%{top:100%}}
@keyframes noiseFloat{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-10px,12px,0)}
  100%{transform:translate3d(0,0,0)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .gg-noise,.rider,.hero-load,.scroll-reveal,.gg-card:hover::after{
    animation:none !important;
    transition:none !important;
  }
  .hero-load,.scroll-reveal{
    opacity:1;
    transform:none;
    filter:none;
  }
  .gg-mouse-glow{display:none}
}

@media (max-width: 980px){
  .card-grid,
  .two-col{
    grid-template-columns:1fr;
  }

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

  .category-top,
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 760px){
  .gg-content{
    width:min(100% - 20px, var(--gg-container));
  }

  .nav-row{
    min-height:auto;
    padding:18px 0;
    flex-direction:column;
    align-items:flex-start;
  }

  .site-nav,
  .nav-actions{
    flex-wrap:wrap;
    gap:14px;
  }

  .gg-card{
    padding:22px;
  }

  .card-grid,
  .hero-highlight-grid{
    grid-template-columns:1fr;
  }

  .gg-grid{
    background-size:46px 46px;
  }

  .gg-btn{
    width:100%;
  }

  .gg-actions,
  .nav-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
}