/* =========================================================
   FORGE2D WEBSITE — CSS MAP
   Edit the variables below first for global colors and sizing.
   Then use the labeled sections to customize individual areas.
   ========================================================= */

/* 01. GLOBAL THEME / COLORS */
:root{--bg:#05070b;--panel:#0b1018;--line:#1d2a3a;--text:#f4f8ff;--muted:#9caabd;--blue:#087cff;--cyan:#00d9ff;--white:#fff;
  /* Main site spacing / sizing knobs */
  --nav-height:82px;
  --hero-padding-y:80px;
  --hero-padding-x:8vw;
  --section-padding:100px 8vw;
  --radius:16px;
}

/* 02. GLOBAL RESET / BASE */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% 0%,#09244a 0,#05070b 35%),var(--bg);color:var(--text);font:15px/1.6 Inter,Segoe UI,Arial,sans-serif}

/* 03. LINKS */
a{color:inherit;text-decoration:none}

/* 04. TOP NAVIGATION / HEADER */
.nav{height:var(--nav-height);display:flex;align-items:center;gap:30px;padding:10px 5vw;border-bottom:1px solid #142033;background:rgba(5,7,11,.84);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.brand{width:210px;height:64px;display:flex;align-items:center;overflow:visible;flex:none}.brand img{width:210px;height:64px;object-fit:contain;object-position:center;display:block}.nav nav{display:flex;gap:24px;margin-left:auto;color:#b9c6d8}.nav nav a:hover,footer a:hover{color:var(--cyan)}.nav-btn,.btn{border:1px solid #24425e;border-radius:9px;padding:10px 16px;display:inline-block}.nav-btn{background:#0c1624}.btn.primary{background:linear-gradient(135deg,var(--blue),var(--cyan));border:0;color:#03101b;font-weight:800}.btn.ghost{background:#0b111b}

/* 05. HERO SECTION */
.hero{min-height:800px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;padding:var(--hero-padding-y) var(--hero-padding-x);position:relative;overflow:visible}.hero-glow{position:absolute;z-index:0;pointer-events:none;width:600px;height:600px;border-radius:50%;right:8%;background:radial-gradient(circle,rgba(0,185,255,.2),transparent 65%);filter:blur(20px)}.eyebrow{font-size:12px;letter-spacing:.22em;color:#41cfff;font-weight:800}.hero-copy{position:relative;z-index:2}.hero h1{font-size:clamp(64px,10vw,140px);line-height:180px;margin:8px 0;transform:translateY(-10px);position:relative;z-index:2;background:linear-gradient(180deg,#fff,#9aa8b9);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;font-style:italic}.hero h1 b{color:var(--cyan);-webkit-text-fill-color:var(--cyan)}.lead{font-size:20px;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;margin:28px 0}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{border:1px solid #1d334a;border-radius:999px;padding:5px 10px;color:#9fb4cb;background:#09111b}.hero-branding{position:relative;z-index:1;width:100%;min-width:0;margin:auto;display:flex;align-items:baseline;justify-content:center;gap:14px;font-size:clamp(50px,5.6vw,88px);font-weight:900;font-style:italic;letter-spacing:1px;white-space:nowrap;overflow:visible;padding:0 10px;animation:brandFloat 4s ease-in-out infinite}.hero-branding span{background:linear-gradient(180deg,#fff,#9aa8b9);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-branding b{color:var(--cyan);text-shadow:0 0 28px rgba(0,217,255,.25)}@keyframes brandFloat{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(0,217,255,0))}50%{transform:translateY(-8px);filter:drop-shadow(0 12px 28px rgba(0,217,255,.16))}}

/* 06. CONTENT SECTIONS */
.section{padding:var(--section-padding);border-top:1px solid #111c2b}.section-head{max-width:760px;margin-bottom:40px}.section-head span{color:var(--cyan);font-weight:800}.section h2{font-size:48px;margin:5px 0 10px}.section-head p{color:var(--muted);font-size:18px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards article,.download-card{background:linear-gradient(145deg,#0b111b,#080c13);border:1px solid var(--line);border-radius:var(--radius);padding:28px}.cards i{font-style:normal;font-size:28px;color:var(--cyan)}.cards h3{font-size:22px}.cards p,.muted{color:var(--muted)}

/* 07. SCREENSHOTS */
.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.shot-grid figure{margin:0;background:#080d14;border:1px solid var(--line);border-radius:16px;padding:10px;overflow:hidden}.shot-grid img{width:100%;display:block;border-radius:10px}.shot-grid figcaption{padding:12px;color:#91a3b9}

/* 08. GITHUB / TERMINAL */
.github{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.terminal{border:1px solid #23405a;background:#05090e;border-radius:14px;padding:24px;color:#b4c6d9;font-family:Consolas,monospace;box-shadow:0 0 50px rgba(0,140,255,.08)}.terminal b{color:#fff}.terminal em{color:var(--cyan);font-style:normal}.terminal .ok{color:#54e7a3}

/* 09. FINAL CALL-TO-ACTION */
.cta{text-align:center;padding:110px 8vw;background:linear-gradient(180deg,#06101d,#08182a)}.cta h2{font-size:50px;margin:0}.cta p{color:var(--muted)}

/* 10. FOOTER */
footer{padding:28px 8vw;border-top:1px solid #142033;color:#7e8da0;display:flex;gap:25px;justify-content:space-between}

/* 11. DOCUMENTATION PAGE */
.docs{display:grid;grid-template-columns:220px 1fr;gap:60px;max-width:1100px;margin:auto;padding:80px 30px}.docs aside{display:flex;flex-direction:column;gap:12px;position:sticky;top:110px;height:max-content}.docs aside a{color:#93a5ba}.docs article{max-width:760px}.docs h1,.download h1{font-size:64px;margin:10px 0}.docs h2{font-size:32px;margin-top:60px}.docs pre{background:#05090e;border:1px solid var(--line);border-radius:12px;padding:20px;overflow:auto;color:#c8d5e5}

/* 12. DOWNLOAD PAGE */
.download{max-width:900px;margin:auto;padding:120px 30px;min-height:70vh}.download-card{margin:40px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.download-card h2{margin:0}.release-meta{margin:6px 0 0;font-size:13px}.release-notes{margin:8px 0 0;font-size:14px;max-width:520px}
.releases-section{margin-top:60px}.section-head.small{margin-bottom:16px}.section-head.small span{color:var(--cyan);font-weight:800;font-size:13px;letter-spacing:.15em}
.release-list{display:flex;flex-direction:column;gap:12px}.release-row{background:linear-gradient(145deg,#0b111b,#080c13);border:1px solid var(--line);border-radius:12px;padding:16px 20px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}.release-row-main{display:flex;align-items:baseline;gap:14px;flex:1 1 auto;min-width:200px}.release-version{font-weight:800;font-size:17px}.release-date,.release-size{font-size:13px}.release-row .release-notes{flex-basis:100%;order:3}.btn.small{padding:8px 14px;font-size:13px}

/* 13. QUICK EDIT GUIDE
   .brand / .brand img       = corner logo
   .nav / .nav nav           = header and navigation
   .hero                     = hero size, position, background
   .eyebrow                  = small cyan heading
   .hero h1                  = large Forge2D title
   .hero h1 b                = cyan "2D"
   .lead                     = hero description
   .actions / .btn           = hero buttons
   .chips                    = technology pills
   .hero-branding            = animated right-side Forge2D
   .hero-glow                = background glow
   .section                  = all major content sections
   .cards                    = feature cards
   .shot-grid                = screenshot layout
   .github / .terminal       = GitHub section
   .cta                      = bottom call-to-action
   .docs                     = documentation layout
   .download                 = download page
   .release-list / .release-row = auto-generated release list
   --------------------------------------------------------- */

/* 13. MOBILE / RESPONSIVE LAYOUT */
@media(max-width:850px){.nav nav{display:none}.hero,.github,.cards,.shot-grid,

/* 11. DOCUMENTATION PAGE */
.docs{grid-template-columns:1fr}

/* 05. HERO SECTION */
.hero{padding-top:50px}.hero-copy{transform:none}.hero-branding{font-size:64px}.docs aside{position:static}.download-card{gap:20px;flex-direction:column;align-items:flex-start}

/* 10. FOOTER */
footer{flex-wrap:wrap}}