/* ===================== GENERATORS — Flat Style (no shadows) ===================== */
*{box-sizing:border-box}
.gnx{
  /* Screenshot-like palette: deep navy + light navy card + sky-blue accents */
  --ink:#EAF2FF;
  --ink-soft:#9DB4C9;
  --bg:#0A111B;
  --paper:#0D1522;
  --line:rgba(142,212,255,.12);
  --brand:#2EA9FF;
  --brand-2:#8ED4FF;

  --radius:16px;
  --shadow:none;              /* <<< disable all shadows here */

  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
}
.gnx-wrap{width:min(1180px,92vw);margin:0 auto;padding:clamp(32px,4vw,56px) 0}

/* Headings */
.hd{margin-bottom:12px}
.hd h2{margin:0 0 6px;font-size:clamp(24px,3.2vw,40px);font-weight:800}
.hd p{margin:0;color:var(--ink-soft)}
.hd.center{text-align:center}
.hd.left{text-align:left}

/* Buttons (flat) */
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; }
.btn.pri{background:linear-gradient(180deg,#49BCFF 0%, #1597FF 100%);color:#fff;border:0;box-shadow:var(--shadow)}
.btn.pri:hover{filter:brightness(1.05)}
.btn.pri:focus-visible{outline:2px solid rgba(46,169,255,.35);outline-offset:2px}
.btn.ghost{color:var(--brand-2);border:1px solid var(--brand-2);background:transparent;box-shadow:var(--shadow)}
.btn.ghost:hover{background:rgba(116,192,255,.10)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

/* Chips (flat pills) */
.chipbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.chip{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:rgba(255,255,255,.03)}
.chip:hover{color:var(--brand-2);border-color:rgba(46,169,255,.35)}

/* ------------------ HERO ------------------ */
.gnx-hero{
  background:
    radial-gradient(1200px 340px at 22% 0%, rgba(46,169,255,.12), transparent 60%),
    linear-gradient(180deg,#0A111B 0%, #0A1220 85%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3.4vw,42px);align-items:center}
.tag{display:inline-block;background:rgba(142,212,255,.18);color:#E6F6FF;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.gnx-hero h1{margin:10px 0 6px;font-size:clamp(28px,4.8vw,54px);font-weight:900;letter-spacing:-.01em}
.gnx-hero p{margin:0 0 12px;color:var(--ink-soft);max-width:62ch}
.hero-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.hero-media{background:var(--img) center/cover no-repeat;aspect-ratio:16/10}
.hero-card__body{padding:16px}
.hero-card__body p{color:var(--ink-soft)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ------------------ OVERVIEW ------------------ */
.gnx-overview .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.link{display:inline-block;margin-top:8px;color:var(--brand-2);text-decoration:none}
.link:hover{text-decoration:underline}
.check{margin:0;padding:0;list-style:none}
.check li{position:relative;padding-left:22px;color:var(--ink-soft);margin:6px 0}
.check li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:conic-gradient(#49BCFF 0 75%, #22324A 0)}
@media (max-width:1100px){.gnx-overview .card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gnx-overview .card-grid{grid-template-columns:1fr}}

/* ------------------ INSTALL ------------------ */
.split{display:grid;gap:clamp(18px,3.2vw,40px);align-items:center}
.photo{background:var(--img) center/cover no-repeat;border:1px solid var(--line);border-radius:20px;aspect-ratio:16/10;box-shadow:var(--shadow)}
.rail .hd h2{margin:0 0 6px}
.steps{list-style:none;margin:10px 0 14px;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:2px;background:rgba(116,192,255,.28)}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;margin:8px 0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#0C1421}
.dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#49BCFF,#1597FF);color:#03101e;font-weight:900}
.steps h4{margin:0 0 2px}
.steps p{margin:0;color:var(--ink-soft)}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ------------------ REPLACEMENT ------------------ */
.note-img{background:var(--img) center/cover no-repeat;border:1px solid var(--line);border-radius:20px;aspect-ratio:4/3;box-shadow:var(--shadow)}
.note{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px}
.note h2{margin:0 0 8px;font-size:clamp(22px,3.2vw,38px);font-weight:800}
.note p{margin:0 0 8px;color:var(--ink-soft)}
.list{margin:0 0 12px 18px}

/* ------------------ CARE ------------------ */
.twin{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:820px){.twin{grid-template-columns:1fr}}

/* ------------------ COMMERCIAL ------------------ */
.banner{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(18px,3.2vw,40px);align-items:center}
.b-img{background:var(--img) center/cover no-repeat;border:1px solid var(--line);border-radius:20px;aspect-ratio:16/9;box-shadow:var(--shadow)}
.b-copy h2{margin:0 0 8px;font-size:clamp(22px,3.2vw,38px);font-weight:800}
.b-copy p{margin:0 0 10px;color:var(--ink-soft)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.pills span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#0C1421}
@media (max-width:900px){.banner{grid-template-columns:1fr}}

/* ------------------ SIZER ------------------ */
.gnx-sizer .sizer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.gnx-sizer .sizer-cards article{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px}
.gnx-sizer .sizer-cards p{margin:0;color:var(--ink-soft)}
.kw{background:rgba(116,192,255,.14);color:#E6F6FF;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}
@media (max-width:900px){.gnx-sizer .sizer-cards{grid-template-columns:1fr}}

.compare{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:12px 14px;border-top:1px solid var(--line);text-align:left}
.compare thead th{background:rgba(116,192,255,.08);border-top:0}

.cta-soft{margin-top:16px;display:flex;gap:14px;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px}
.cta-soft p{margin:0}
@media (max-width:640px){.cta-soft{flex-direction:column;align-items:stretch}}