/* csgonetpromocode.com — design system */

:root{
  --bg:#040b24; --surface:#071233; --surface2:#0b173d;
  --border:#102458; --border2:#18336f;
  --accent:#00c8ff; --accent-dark:#0097d1; --accent-light:#59deff;
  --accent-tint:rgba(0,200,255,0.10); --accent-glow:rgba(0,200,255,0.38);
  --accent-2:#ff7a1a; --accent-2-dark:#d85f0b; --accent-2-light:#ff9b4d;
  --accent-2-tint:rgba(255,122,26,0.10); --accent-2-glow:rgba(255,122,26,0.30);
  --text:#eef4ff; --text-2:#a8b3d9; --muted:#6d789f;
  --text-on-accent:#041128;
  --code-bg:#06112d; --code-text:#59deff; --code-border:rgba(0,200,255,0.25);
  --success:#8dff1f; --success-bg:rgba(141,255,31,0.12);
  --warning:#ffb347; --danger:#ff5a5f;
  --radius:8px; --radius-lg:16px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400; line-height:1.7; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent-light); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Inter',sans-serif; font-weight:700; line-height:1.25; margin:0 0 .6em}
h1{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.3em}
li{margin-bottom:.4em}
.gnp-wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.gnp-section{padding:64px 0}
.gnp-section:nth-of-type(even){background:var(--surface)}
.gnp-eyebrow{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-light); background:var(--accent-tint); border:1px solid var(--code-border); border-radius:999px; padding:5px 14px; margin-bottom:14px}
.gnp-lede{color:var(--text-2); font-size:1.05rem; max-width:760px}

/* header */
.gnp-header{position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:.5px solid var(--border); transition:background .25s ease, backdrop-filter .25s ease}
.gnp-header.is-scrolled{background:rgba(4,11,36,.85); backdrop-filter:blur(10px)}
.gnp-header-inner{max-width:var(--maxw); margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:20px}
.gnp-logo img{height:32px; width:auto}
.gnp-nav{display:flex; gap:22px; margin-left:12px; flex:1}
.gnp-nav a{color:var(--text-2); font-size:.95rem; font-weight:500}
.gnp-nav a:hover,.gnp-nav a.is-active{color:var(--accent-light); text-decoration:none}
.gnp-langswitch{display:flex; gap:4px; font-size:.85rem; font-weight:600}
.gnp-langswitch a{color:var(--muted); padding:4px 8px; border-radius:6px}
.gnp-langswitch a.is-active{color:var(--accent); background:var(--accent-tint)}
.gnp-header-cta{white-space:nowrap}
.gnp-burger{display:none; background:none; border:none; color:var(--text); font-size:1.6rem; cursor:pointer}

/* buttons */
.gnp-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--radius); padding:13px 26px; font-family:inherit; font-weight:700; font-size:.98rem; cursor:pointer; transition:box-shadow .2s ease, filter .2s ease}
.gnp-btn-primary{background:linear-gradient(135deg,#00c8ff,#0097d1); color:var(--text-on-accent)}
.gnp-btn-primary:hover{filter:brightness(1.1); box-shadow:0 8px 28px var(--accent-glow); text-decoration:none}
.gnp-btn-secondary{background:linear-gradient(135deg,#ff7a1a,#d85f0b); color:#fff}
.gnp-btn-secondary:hover{filter:brightness(1.1); box-shadow:0 8px 28px var(--accent-2-glow); text-decoration:none}
.gnp-btn-outline{background:transparent; color:var(--text); border:1px solid var(--border2)}
.gnp-btn-outline:hover{border-color:var(--accent); color:var(--accent-light); text-decoration:none}
.gnp-btn-sm{padding:9px 16px; font-size:.85rem}

/* hero */
.gnp-hero{position:relative; padding:56px 0 48px; overflow:hidden}
.gnp-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.gnp-hero-art{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:radial-gradient(circle at 30% 20%,rgba(0,200,255,.18),transparent 55%),radial-gradient(circle at 80% 80%,rgba(255,122,26,.12),transparent 50%),var(--surface2)}
.gnp-hero-art img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.gnp-hero h1{margin-bottom:.5em}
.gnp-hero-sub{color:var(--text-2); font-size:1.1rem; margin-bottom:1.6em}
.gnp-hero-ctas{display:flex; gap:14px; flex-wrap:wrap}

/* promo widget */
.gnp-code-widget{background:var(--code-bg); border:1px solid var(--code-border); border-radius:var(--radius-lg); padding:22px 24px; margin:28px 0}
.gnp-code-widget-top{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--success); font-weight:600; margin-bottom:14px}
.gnp-code-row{display:flex; gap:12px; flex-wrap:wrap; align-items:stretch}
.gnp-code-box{flex:1; min-width:180px; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:14px 18px}
.gnp-code-text{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.4rem; color:var(--code-text); letter-spacing:.05em}
.gnp-copy-btn{min-width:150px}
.gnp-code-caption{margin-top:12px; color:var(--text-2); font-size:.9rem}

/* tables */
.gnp-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg)}
table.gnp-table{width:100%; border-collapse:collapse; min-width:560px}
table.gnp-table caption{text-align:left; padding:14px 18px; font-weight:700; background:var(--surface2); color:var(--text)}
table.gnp-table th,table.gnp-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--border); font-size:.95rem}
table.gnp-table th{background:var(--surface2); color:var(--text-2); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em}
table.gnp-table tr:last-child td{border-bottom:none}
table.gnp-table code{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--code-text); background:var(--accent-tint); padding:3px 8px; border-radius:5px}
.gnp-status-ok{color:var(--success); font-weight:600}

/* badge */
.gnp-badge{display:inline-flex; align-items:center; gap:6px; background:var(--accent-tint); color:var(--accent-light); border-radius:999px; padding:5px 12px; font-size:.82rem; font-weight:600}

/* cards / grids */
.gnp-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.gnp-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.gnp-card{background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px}
.gnp-card h3{color:var(--text); margin-bottom:.4em}
.gnp-card p{color:var(--text-2); margin-bottom:0; font-size:.95rem}
.gnp-card .gnp-card-icon{width:40px; height:40px; border-radius:10px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--accent-light); font-weight:700}

/* callout */
.gnp-callout{border-left:3px solid var(--accent); background:var(--accent-tint); border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px; margin:24px 0}
.gnp-callout.gnp-callout-warn{border-color:var(--warning); background:rgba(255,179,71,.1)}
.gnp-callout p{margin:0; color:var(--text)}

/* steps / timeline */
.gnp-steps{list-style:none; padding:0; margin:0; counter-reset:gnp-step}
.gnp-steps li{counter-increment:gnp-step; display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--border)}
.gnp-steps li:last-child{border-bottom:none}
.gnp-steps li::before{content:counter(gnp-step); flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent-tint); color:var(--accent-light); font-weight:700; display:flex; align-items:center; justify-content:center}
.gnp-steps h4{margin:0 0 4px; font-size:1rem}
.gnp-steps p{margin:0; color:var(--text-2); font-size:.93rem}

/* FAQ accordion */
.gnp-faq-item{border-bottom:1px solid var(--border)}
.gnp-faq-item summary{cursor:pointer; padding:18px 4px; font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.gnp-faq-item summary::-webkit-details-marker{display:none}
.gnp-faq-item summary::after{content:'+'; font-size:1.4rem; color:var(--accent-light); flex:none; transition:transform .2s ease}
.gnp-faq-item[open] summary::after{transform:rotate(45deg)}
.gnp-faq-item p{padding:0 4px 18px; color:var(--text-2); margin:0}

/* updated line */
.gnp-updated{color:var(--muted); font-size:.88rem; margin-top:8px}

/* footer */
.gnp-footer{background:var(--bg); border-top:1px solid var(--border); padding:44px 0 26px; color:var(--muted); font-size:.88rem}
.gnp-footer-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:24px}
.gnp-footer-links a{color:var(--text-2); margin-right:18px}
.gnp-footer-disclaimer{max-width:820px; line-height:1.6; margin-bottom:16px}
.gnp-footer-warning{display:flex; align-items:center; gap:10px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-bottom:20px; color:var(--text-2); font-size:.86rem}
.gnp-org-logos{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:20px; opacity:.85}
.gnp-org-logos span{border:1px solid var(--border2); border-radius:6px; padding:6px 12px; font-size:.78rem; color:var(--text-2)}
.gnp-footer-bottom{border-top:1px solid var(--border); padding-top:18px; font-size:.8rem}

/* scroll to top */
.gnp-totop{position:fixed; right:20px; bottom:20px; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#00c8ff,#0097d1); color:var(--text-on-accent); border:none; display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease; z-index:90; box-shadow:0 6px 20px rgba(0,0,0,.35)}
.gnp-totop.is-visible{opacity:1; pointer-events:auto; transform:translateY(0)}
.gnp-totop:hover{filter:brightness(1.1)}

/* legal pages */
.gnp-legal h2{margin-top:1.6em}
.gnp-legal p,.gnp-legal li{color:var(--text-2)}

@media (max-width:860px){
  .gnp-nav,.gnp-langswitch{display:none}
  .gnp-burger{display:block}
  .gnp-header.is-open .gnp-nav{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border); padding:16px 20px; gap:14px}
  .gnp-header.is-open .gnp-langswitch{display:flex; padding:0 20px 16px}
  .gnp-hero-grid{grid-template-columns:1fr}
  .gnp-hero-art{order:-1; max-height:220px}
  .gnp-grid-2,.gnp-grid-3{grid-template-columns:1fr}
  .gnp-btn{width:100%}
  .gnp-hero-ctas{flex-direction:column}
  .gnp-code-row{flex-direction:column}
  .gnp-footer-top{flex-direction:column}
}