/* GridUnlock — self-contained component styling (Elementor edition). */
@font-face { font-family:"Inter"; src:url("../fonts/inter-variable.woff2") format("woff2"); font-weight:300 700; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/space-grotesk-variable.woff2") format("woff2"); font-weight:400 700; font-display:swap; }

:root{
  --gu-base:#0A0C0E; --gu-surface:#14181C; --gu-surface-2:#1E242A;
  --gu-accent:#3BF06B; --gu-accent-hover:#2FD65C; --gu-data:#35C7E0; --gu-legacy:#E0A23A;
  --gu-text:#F2F5F7; --gu-muted:#9AA6AE; --gu-border:#2A3138;
  --gu-font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gu-font-head:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Dark base for Hello Elementor / blank themes */
body.gridunlock, body.gridunlock-dark { background:var(--gu-base); color:var(--gu-text); font-family:var(--gu-font-body); }
body.gridunlock a { color:var(--gu-accent); }
body.gridunlock h1, body.gridunlock h2, body.gridunlock h3, body.gridunlock h4 { font-family:var(--gu-font-head); color:var(--gu-text); }

/* Component styling is class-scoped so it also works inside Elementor pages on light themes */
.gu-badge{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; line-height:1; }
.gu-badge--primary{ background:var(--gu-accent); color:var(--gu-base); }
.gu-badge--value{ background:transparent; color:var(--gu-data); box-shadow:inset 0 0 0 1px var(--gu-data); }
.gu-badge--coming{ background:transparent; color:var(--gu-muted); box-shadow:inset 0 0 0 1px var(--gu-border); }

.gu-hero{ background:radial-gradient(120% 100% at 80% 0%, rgba(59,240,107,.10), transparent 55%), var(--gu-base); border-bottom:1px solid var(--gu-border); color:var(--gu-text); }
.gu-hero__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:center; max-width:1200px; margin:0 auto; padding:clamp(3rem,6vw,6rem) 1.5rem; }
.gu-hero h1{ font-family:var(--gu-font-head); font-size:clamp(2.5rem,6vw,4rem); line-height:1.05; margin:.4rem 0; color:var(--gu-text); }
.gu-hero__strap{ color:var(--gu-muted); font-size:1.15rem; margin:.75rem 0 1.5rem; max-width:46ch; }
.gu-hero__img img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--gu-border); }
.gu-figs{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:2rem; }
.gu-fig__val{ font-family:var(--gu-font-head); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; color:var(--gu-text); font-variant-numeric:tabular-nums; line-height:1; }
.gu-fig__val span{ color:var(--gu-accent); font-size:.6em; margin-left:.15em; }
.gu-fig__label{ color:var(--gu-muted); font-size:.85rem; margin-top:.35rem; }
@media (max-width:820px){ .gu-hero__inner{ grid-template-columns:1fr; } .gu-hero__img{ order:-1; } }

.gu-pillars{ max-width:1200px; margin:0 auto; padding:clamp(2.5rem,5vw,4.5rem) 1.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.gu-pillar{ background:var(--gu-surface); border:1px solid var(--gu-border); border-radius:12px; padding:1.5rem; }
.gu-pillar h3{ font-family:var(--gu-font-head); font-size:1.05rem; margin:.4rem 0 .5rem; color:var(--gu-text); }
.gu-pillar p{ color:var(--gu-muted); font-size:.92rem; margin:0; }
.gu-pillar__icon{ width:34px; height:34px; border-radius:8px; background:rgba(59,240,107,.12); display:flex; align-items:center; justify-content:center; color:var(--gu-accent); }
@media (max-width:960px){ .gu-pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .gu-pillars{ grid-template-columns:1fr; } }

.gu-spec{ max-width:1000px; margin:0 auto; padding:clamp(2.5rem,5vw,4.5rem) 1.5rem; }
.gu-spec h2{ font-family:var(--gu-font-head); margin-bottom:1.25rem; color:var(--gu-text); }
.gu-spec table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.gu-spec__group td{ background:var(--gu-surface-2); color:var(--gu-accent); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.75rem; padding:.6rem .9rem; text-align:left; }
.gu-spec tbody td{ border-bottom:1px solid var(--gu-border); padding:.7rem .9rem; vertical-align:top; }
.gu-spec td.gu-spec__label{ color:var(--gu-muted); width:45%; }
.gu-spec td.gu-spec__val{ color:var(--gu-text); font-weight:500; }

.gu-flow{ max-width:1100px; margin:0 auto; padding:clamp(2.5rem,5vw,4.5rem) 1.5rem; }
.gu-flow h2{ font-family:var(--gu-font-head); color:var(--gu-text); }
.gu-flow svg{ width:100%; height:auto; }
.gu-flow__legend{ display:flex; gap:1.5rem; margin-top:1rem; color:var(--gu-muted); font-size:.85rem; flex-wrap:wrap; }
.gu-flow__key{ display:inline-flex; align-items:center; gap:.4rem; }
.gu-flow__dot{ width:10px; height:10px; border-radius:50%; }

.gu-downloads{ max-width:1100px; margin:0 auto; padding:clamp(2.5rem,5vw,4.5rem) 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.gu-dl-col{ background:var(--gu-surface); border:1px solid var(--gu-border); border-radius:12px; padding:1.5rem; }
.gu-dl-col h3{ font-family:var(--gu-font-head); font-size:1rem; margin:0 0 1rem; color:var(--gu-text); }
.gu-dl{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--gu-border); }
.gu-dl:last-child{ border-bottom:0; }
.gu-dl__name{ color:var(--gu-text); font-size:.92rem; }
.gu-dl__meta{ color:var(--gu-muted); font-size:.78rem; }
.gu-dl a.gu-dl__link{ color:var(--gu-accent); font-weight:600; font-size:.85rem; white-space:nowrap; }
.gu-dl--locked .gu-dl__name::before{ content:"🔒"; margin-right:.4rem; filter:grayscale(1); opacity:.7; }
.gu-dl__cta{ margin-top:1rem; }
.gu-dl__cta a{ display:inline-block; background:var(--gu-accent); color:var(--gu-base); font-weight:600; padding:.6rem 1rem; border-radius:6px; font-size:.85rem; }
@media (max-width:760px){ .gu-downloads{ grid-template-columns:1fr; } }

.gu-product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:1200px; margin:0 auto; padding:1.5rem; }
@media (max-width:900px){ .gu-product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .gu-product-grid{ grid-template-columns:1fr; } }
.gu-card{ background:var(--gu-surface); border:1px solid var(--gu-border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; height:100%; transition:border-color .15s ease, transform .15s ease; }
.gu-card:hover{ border-color:var(--gu-accent); transform:translateY(-2px); }
.gu-card__media{ display:block; aspect-ratio:16/10; background:var(--gu-surface-2); overflow:hidden; }
.gu-card__media img{ width:100%; height:100%; object-fit:cover; }
.gu-card__body{ padding:1.25rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.gu-card__title{ font-family:var(--gu-font-head); font-size:1.2rem; font-weight:700; color:var(--gu-text); margin:.2rem 0 0; }
.gu-card__title a{ color:inherit; text-decoration:none; }
.gu-card__desc{ color:var(--gu-muted); font-size:.9rem; margin:0; }
.gu-card__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; }
.gu-chip{ font-size:.72rem; color:var(--gu-data); background:rgba(53,199,224,.1); padding:.22rem .5rem; border-radius:6px; }
.gu-card__foot{ padding:0 1.25rem 1.25rem; }
.gu-card__foot a{ display:inline-block; color:var(--gu-accent); font-weight:600; font-size:.9rem; text-decoration:none; }

.gu-empty{ color:var(--gu-muted); border:1px dashed var(--gu-border); border-radius:8px; padding:1rem; font-size:.9rem; max-width:1000px; margin:1rem auto; }