/* DevRight Creative + Consulting: coming soon.
   Tokens follow devrightmedia.com (dark, softer green, Roboto Condensed + PT Sans). */
@font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/roboto-condensed-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/roboto-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/roboto-condensed-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pt-sans-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#0d0d0d; --card:#141414; --card2:#1a1a1a; --border:#262626;
  --fg:#f2f2f2; --muted:#9a9a9a;
  --green:hsl(140 44% 57%); --green-d:hsl(140 44% 48%); --on-green:#0d0d0d;
  --head:"Roboto Condensed","Arial Narrow",sans-serif;
  --body:"PT Sans",system-ui,sans-serif;
  --r:.5rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1120px,100% - 2rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--on-green);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

h1,h2,h3{font-family:var(--head);margin:0;line-height:1.05;letter-spacing:.005em;text-transform:uppercase}
h1{font-weight:900;font-size:clamp(2.6rem,7.5vw,5.6rem)}
h2{font-weight:900;font-size:clamp(1.9rem,4.6vw,3.1rem);margin-bottom:.8rem}
h2.small{font-size:1.15rem;color:var(--muted);letter-spacing:.12em}
h3{font-weight:700;font-size:1.3rem;letter-spacing:.02em}
.g{color:var(--green)}

.top{position:sticky;top:0;z-index:5;background:rgba(13,13,13,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}
.brand img{width:auto;height:46px}
.pill{display:inline-flex;align-items:center;gap:.5rem;font:700 .8rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--green);color:var(--green);padding:.5rem .85rem;border-radius:999px}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.hero{padding:clamp(3.5rem,10vw,8rem) 0 clamp(3rem,7vw,6rem);background:radial-gradient(900px 420px at 80% -10%,hsl(140 44% 57% / .13),transparent 70%),var(--bg)}
.eyebrow{font:700 .85rem/1 var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin:0 0 1rem}
.lede{max-width:46rem;font-size:1.2rem;color:#d6d6d6;margin:1.5rem 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.btn{display:inline-block;font:700 1rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--green);color:var(--on-green);padding:1.05rem 1.6rem;border-radius:var(--r);border:1px solid var(--green);transition:background .15s,transform .15s}
.btn:hover{background:var(--green-d);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:#3a3a3a}
.btn.ghost:hover{border-color:var(--green);color:var(--green);background:transparent}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.spark{margin:2.4rem 0 0;font:900 1.1rem/1 var(--head);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.sec{padding:clamp(3rem,7vw,5.5rem) 0}
.sec.alt{background:var(--card);border-block:1px solid var(--border)}
.sub{max-width:46rem;color:#cfcfcf;margin:0 0 2.2rem}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--green);transform:translateY(-3px)}
.card.feat{grid-column:1/-1;background:linear-gradient(135deg,hsl(140 44% 57% / .12),var(--card) 55%);border-color:hsl(140 44% 57% / .5)}
.num{display:block;font:900 .95rem/1 var(--head);letter-spacing:.18em;color:var(--green);margin-bottom:.8rem}
.card h3{margin-bottom:.55rem}
.card p{margin:0;color:#c9c9c9;font-size:1rem}
.card.feat p{max-width:44rem}
.tag{display:inline-block;margin-top:1rem;font:700 .72rem/1 var(--head);letter-spacing:.16em;text-transform:uppercase;background:var(--green);color:var(--on-green);padding:.4rem .6rem;border-radius:4px}

.pkgs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pkg{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:1.6rem}
.pkg.hot{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.pkg .tag{position:absolute;top:-.7rem;right:1rem;margin:0}
.pkg h3{font-size:1.8rem;margin-bottom:.4rem}
.plat{margin:0 0 .8rem;color:var(--green);font-weight:700}
.cad{margin:0 0 .5rem;color:#d0d0d0}
.vol{margin:0;font:700 .95rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.addon{margin:1.8rem 0 .4rem;max-width:50rem;color:#d6d6d6}
.note{margin:0;color:var(--muted);font-size:.95rem}

.more{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.more li{border-top:2px solid var(--green);padding-top:1rem}
.more h3{margin-bottom:.4rem}
.more p{margin:0;color:#c9c9c9;font-size:1rem}

.contact address{font-style:normal;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.4rem}
.phone{font:900 clamp(2rem,6vw,3.4rem)/1 var(--head);color:var(--green);text-decoration:none;letter-spacing:.02em}
.phone:hover{text-decoration:underline}
.contact address span{color:#d0d0d0}

.fam{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.fam li{border:1px solid var(--border);border-radius:var(--r);padding:.65rem 1.1rem;font:700 .95rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:#cfcfcf}
.fam a{text-decoration:none}
.fam a:hover{color:var(--green)}

.foot{border-top:1px solid var(--border);padding:2rem 0 2.6rem;color:var(--muted)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem}
.foot p{margin:0}
.foot-in p:first-child{font:700 1rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:#cfcfcf}
.fine{font-size:.9rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:520px){.brand img{height:38px}.pill{font-size:.7rem;padding:.45rem .7rem}}