:root{
    --navy:#07111F;
    --blue:#2477FF;
    --cyan:#19D3FF;
    --bg:#050A12;
    --white:#FFFFFF;
    --text2:#AAB6C5;
    --grad: linear-gradient(90deg,var(--blue),var(--cyan));
    --card-bg: #0B1626;
    --card-border: rgba(255,255,255,0.06);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--white);
    font-family:'Inter',sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
  ::selection{background:var(--cyan); color:var(--navy);}

  /* Glow / texture helpers */
  .glow-panel{
    position:relative;
    background:
      radial-gradient(120% 160% at 15% -20%, rgba(36,119,255,0.45), transparent 55%),
      radial-gradient(90% 140% at 100% 0%, rgba(25,211,255,0.3), transparent 50%),
      linear-gradient(rgba(5,10,18,0.55), rgba(5,10,18,0.75)),
      url('../images/hero-banner.jpg') center/cover no-repeat;
    overflow:hidden;
  }
  .brand-mark img, .footer-mark img{display:block; width:100%; height:100%; object-fit:contain;}
  .brand-mark{padding:0; overflow:hidden;}
  .grid-lines{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:radial-gradient(80% 80% at 50% 30%, black, transparent 90%);
    pointer-events:none;
  }

  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(5,10,18,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--card-border);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
  .brand{font-size:19px; letter-spacing:0.02em; display:flex; align-items:center; gap:10px;}
  .brand-mark{
    width:34px; height:34px; border-radius:8px;
    background:var(--grad);
    display:flex; align-items:center; justify-content:center;
    font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; color:var(--navy);
    box-shadow:0 0 22px rgba(25,211,255,0.45);
  }
  nav ul{display:flex; gap:30px; list-style:none;}
  nav a{font-size:13.5px; font-weight:600; letter-spacing:0.04em; color:var(--text2); transition:color .2s;}
  nav a:hover{color:var(--white);}
  .nav-actions{display:flex; align-items:center; gap:18px;}
  .icon-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--card-border); display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); cursor:pointer;}
  .cta-btn{
    padding:11px 22px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:0.03em;
    background:var(--grad); color:var(--navy); border:none; cursor:pointer; white-space:nowrap;
  }
  .ghost-btn{
    padding:10px 21px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:0.03em;
    background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.18); cursor:pointer;
  }
  .hamburger{display:none;}

  /* Hero */
  .hero{padding:96px 0 110px; position:relative;}
  .hero .wrap{position:relative; z-index:2;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:700; letter-spacing:0.12em; color:var(--cyan);
    border:1px solid rgba(25,211,255,0.35); padding:7px 14px; border-radius:999px;
    background:rgba(25,211,255,0.06); margin-bottom:26px;
  }
  .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
  .hero h1{font-size:clamp(34px,5.2vw,60px); line-height:1.08; max-width:820px; margin-bottom:22px;}
  .hero p{font-size:17px; color:var(--text2); max-width:560px; margin-bottom:38px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:64px;}
  .tagline{font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.1em; color:var(--text2);}
  .hero-stats{display:flex; gap:48px; flex-wrap:wrap; border-top:1px solid var(--card-border); padding-top:32px; max-width:640px;}
  .stat b{display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat span{font-size:12.5px; color:var(--text2);}

  /* section shell */
  section{padding:78px 0;}
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; gap:20px; flex-wrap:wrap;}
  .section-eyebrow{font-size:12px; font-weight:700; letter-spacing:0.14em; color:var(--cyan); margin-bottom:10px; display:block;}
  .section-head h2{font-size:clamp(22px,3vw,30px);}
  .see-all{font-size:13px; font-weight:700; color:var(--white); border-bottom:1px solid var(--cyan); padding-bottom:2px; white-space:nowrap;}

  /* Trending games */
  .game-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .game-card{
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden;
    transition:transform .25s, border-color .25s;
  }
  .game-card:hover{transform:translateY(-4px); border-color:rgba(25,211,255,0.4);}
  .thumb{
    aspect-ratio:4/3; position:relative;
    display:flex; align-items:flex-end; padding:14px;
  }
  .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55));}
  .thumb-tag{position:relative; z-index:1; font-size:11px; font-weight:700; letter-spacing:0.06em; padding:5px 10px; border-radius:6px; background:rgba(5,10,18,0.65); border:1px solid rgba(255,255,255,0.15);}
  .thumb, .news-thumb, .review-thumb{background-size:cover; background-position:center;}
  .g1{background-image:url('../images/games/game-1.jpg');}
  .g2{background-image:url('../images/games/game-2.jpg');}
  .g3{background-image:url('../images/games/game-3.jpg');}
  .g4{background-image:url('../images/games/game-4.jpg');}
  .n1{background-image:url('../images/news/news-1.jpg');}
  .n2{background-image:url('../images/news/news-2.jpg');}
  .n3{background-image:url('../images/news/news-3.jpg');}
  .r1{background-image:url('../images/reviews/review-1.jpg');}
  .r2{background-image:url('../images/reviews/review-2.jpg');}
  .game-info{padding:16px;}
  .game-cat{font-size:11px; font-weight:700; letter-spacing:0.06em; color:var(--cyan); margin-bottom:6px; display:block;}
  .game-info h3{font-size:16px; font-weight:700; font-family:'Inter',sans-serif; margin-bottom:6px;}
  .game-info p{font-size:12.5px; color:var(--text2); margin-bottom:12px;}
  .game-meta{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--text2);}
  .detail-link{color:var(--white); font-weight:700;}

  /* News / cards generic */
  .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .news-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; overflow:hidden;}
  .news-thumb{aspect-ratio:16/9;}
  .news-body{padding:18px;}
  .cat-pill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:0.05em; color:var(--navy); background:var(--grad); padding:4px 10px; border-radius:5px; margin-bottom:12px;}
  .news-body h3{font-size:16.5px; margin-bottom:8px; line-height:1.35;}
  .news-body p{font-size:13px; color:var(--text2); margin-bottom:16px;}
  .news-foot{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text2); border-top:1px solid var(--card-border); padding-top:12px;}

  /* Editor's choice */
  .editor-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px;}
  .editor-card{position:relative; border-radius:16px; overflow:hidden; min-height:340px; display:flex; align-items:flex-end; padding:26px; border:1px solid var(--card-border);}
  .editor-card::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,10,18,0.92), rgba(5,10,18,0.2));}
  .editor-card > *{position:relative; z-index:1;}
  .editor-card h3{font-size:19px; margin-bottom:8px; max-width:280px;}
  .editor-card span{font-size:12px; color:var(--cyan); font-weight:700;}
  .editor-card{background-size:cover; background-position:center;}
  .ed1{background-image:url('../images/editor/editor-1.jpg');}
  .ed2{background-image:url('../images/editor/editor-2.jpg');}
  .ed3{background-image:url('../images/editor/editor-3.jpg');}

  /* Reviews */
  .review-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  .review-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:22px; display:flex; gap:18px;}
  .review-thumb{width:120px; min-width:120px; aspect-ratio:1/1; border-radius:10px;}
  .score-badge{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--grad); color:var(--navy); font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; margin-bottom:10px;}
  .review-card h3{font-size:15.5px; margin-bottom:10px;}
  .rev-bars{display:flex; gap:6px; margin-top:6px;}
  .rev-bars span{font-size:10.5px; color:var(--text2); background:rgba(255,255,255,0.05); padding:3px 8px; border-radius:5px;}

  /* Guides / tech */
  .strip-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
  .strip-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:18px; transition:border-color .2s;}
  .strip-card:hover{border-color:rgba(25,211,255,0.4);}
  .strip-card .num{font-size:11px; color:var(--cyan); font-weight:700; margin-bottom:10px; display:block;}
  .strip-card h3{font-size:13.5px; font-weight:700; font-family:'Inter',sans-serif; line-height:1.4;}

  .tech-alt{background:var(--navy);}
  .tech-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
  .tech-chip{border:1px solid var(--card-border); border-radius:10px; padding:16px; text-align:center; font-size:13px; font-weight:600; background:rgba(255,255,255,0.02);}

  /* community */
  .community{
    border-radius:20px; padding:56px; text-align:center;
    background:
      radial-gradient(120% 160% at 50% 0%, rgba(36,119,255,0.25), transparent 60%),
      var(--card-bg);
    border:1px solid var(--card-border);
  }
  .community h2{font-size:clamp(22px,3vw,30px); margin-bottom:14px;}
  .community p{color:var(--text2); max-width:560px; margin:0 auto 30px;}
  .community-feats{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
  .feat-pill{font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); color:var(--text2);}

  /* newsletter */
  .newsletter{background:var(--navy); border-radius:20px; padding:56px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
  .newsletter h2{font-size:clamp(20px,2.6vw,27px); margin-bottom:10px;}
  .newsletter p{color:var(--text2); font-size:13.5px; max-width:380px;}
  .nl-form{display:flex; gap:10px; flex-wrap:wrap;}
  .nl-form input{
    padding:13px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.03); color:var(--white); font-size:13.5px; width:280px; max-width:100%;
  }
  .nl-form input::placeholder{color:var(--text2);}
  .nl-fine{font-size:11px; color:var(--text2); margin-top:10px;}

  /* footer */
  footer{border-top:1px solid var(--card-border); padding:64px 0 32px;}
  .footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:48px;}
  .footer-grid h4{font-size:12px; letter-spacing:0.08em; color:var(--text2); margin-bottom:18px; font-family:'Inter',sans-serif; font-weight:700;}
  .footer-grid ul{list-style:none;}
  .footer-grid li{margin-bottom:11px;}
  .footer-grid a{font-size:13.5px; color:var(--text2); transition:color .2s;}
  .footer-grid a:hover{color:var(--white);}
  .footer-about p{font-size:13.5px; color:var(--text2); max-width:340px; margin-top:14px;}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--card-border); font-size:12px; color:var(--text2); flex-wrap:wrap; gap:12px;}
  .legal-row{display:flex; gap:20px; flex-wrap:wrap;}

  @media (max-width:980px){
    .game-grid{grid-template-columns:repeat(2,1fr);}
    .news-grid{grid-template-columns:repeat(2,1fr);}
    .editor-grid{grid-template-columns:1fr; }
    .review-grid{grid-template-columns:1fr;}
    .strip-grid{grid-template-columns:repeat(2,1fr);}
    .tech-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    nav{display:none;}
    .nav-actions .ghost-btn{display:none;}
  }
  @media (max-width:600px){
    .game-grid{grid-template-columns:1fr 1fr;}
    .hero{padding:64px 0 70px;}
    .footer-grid{grid-template-columns:1fr;}
    .newsletter{flex-direction:column; align-items:flex-start;}
  }