:root{
    --bg:#0a0a0d; --bg2:#0d0d10; --card:#131316; --card2:#17171a;
    --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.14);
    --text:#f2f2f5; --text2:#c8c8d4; --text3:#9a9aa3;
    --pink:#ff2dcb; --pink2:#ff64d8;
    --gold:#e8c14d; --blue:#3d9bff; --green:#3ddc84; --purple:#b366ff; --orange:#ff9838;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    line-height:1.5; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  section{position:relative}

  /* ---------- nav ---------- */
  nav{
    position:sticky;top:0;z-index:100;
    background:rgba(10,10,13,0.85);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1180px}
  .brand{display:flex;align-items:center;gap:6px;font-weight:800;font-size:19px;white-space:nowrap;font-family:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
  .brand-icon{flex:none;display:block;border-radius:22%;}
  .brand span{color:#ef6136}
  .navlinks{display:flex;gap:30px;font-size:14.5px;color:var(--text2);font-weight:600}
  .navlinks a:hover{color:var(--text)}
  .navcta{
    background:var(--pink);
    color:#160012;font-weight:800;font-size:14px;padding:10px 20px;border-radius:8px;
    white-space:nowrap;
  }
  .navmobile{display:none}
  @media(max-width:860px){ .navlinks{display:none} }

  /* ---------- hero ---------- */
  .hero{padding:88px 0 60px;overflow:hidden}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;color:var(--pink);
    background:rgba(255,45,203,0.1);border:1px solid rgba(255,45,203,0.25);
    padding:7px 14px;border-radius:6px;margin-bottom:22px;
  }
  .hero h1{
    font-size:56px;line-height:1.08;font-weight:900;letter-spacing:-0.02em;
    max-width:820px;
  }
  .hero h1 .accent{color:var(--pink)}
  .hero p.lead{
    margin-top:22px;font-size:19px;color:var(--text2);max-width:640px;line-height:1.6;
  }
  .herobtns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 24px;border-radius:8px;font-weight:800;font-size:15px;
    border:1px solid transparent;cursor:pointer;
  }
  .btn-primary{background:var(--pink);color:#160012}
  .btn-primary:hover{background:var(--pink2)}
  .btn-ghost{background:transparent;border-color:var(--border2);color:var(--text)}
  .btn-ghost:hover{border-color:var(--pink)}

  .shotframe{
    margin-top:56px;border-radius:10px;border:1px solid var(--border2);
    background:var(--card2);
    overflow:hidden;
  }
  .shotbar{
    display:flex;align-items:center;padding:10px 14px;
    background:#0e0e11;border-bottom:1px solid var(--border);
  }
  .shotbar .d{display:none}
  .shotbar .url{
    font-size:12px;color:var(--text3);
    background:#151519;border:1px solid var(--border);padding:5px 12px;border-radius:5px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .shotframe img,.shotframe video{width:100%;display:block}
  .shotcap{text-align:center;font-size:13.5px;color:var(--text3);margin-top:14px}

  /* ---------- trusted strip ---------- */
  .trusted{padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .trusted .label{font-size:12.5px;font-weight:700;letter-spacing:0.08em;color:var(--text3);text-transform:uppercase;margin-bottom:18px;text-align:center}
  .trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px}
  .trustrow span{font-size:16px;font-weight:700;color:var(--text2)}

  /* ---------- section heading ---------- */
  .sechead{max-width:640px;margin:0 auto 48px;text-align:center}
  .sechead .tag{font-size:13px;font-weight:800;color:var(--pink);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px}
  .sechead h2{font-size:36px;font-weight:900;letter-spacing:-0.01em}
  .sechead p{margin-top:14px;color:var(--text2);font-size:16.5px;line-height:1.6}
  section.pad{padding:96px 0}
  section.pad.tight{padding:72px 0}

  /* ---------- platform features ---------- */
  .featgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  @media(max-width:900px){.featgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.featgrid{grid-template-columns:1fr}}
  .feat{
    background:var(--card2);
    border:1px solid var(--border);border-radius:10px;padding:26px 22px;
  }
  .feat .ic{width:28px;height:3px;border-radius:2px;margin-bottom:18px}
  .feat h3{font-size:16.5px;font-weight:800;margin-bottom:8px}
  .feat p{font-size:14.5px;color:var(--text3);line-height:1.55}

  /* ---------- signage flagship ---------- */
  .flagship{
    background:linear-gradient(180deg,#111114,#0b0b0e);
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  }
  .flagship .grid2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  @media(max-width:900px){.flagship .grid2{grid-template-columns:1fr;gap:36px}}
  .flagship .tag{font-size:13px;font-weight:800;color:var(--pink);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px}
  .flagship h2{font-size:34px;font-weight:900;letter-spacing:-0.01em;margin-bottom:16px}
  .flagship p.desc{color:var(--text2);font-size:16px;line-height:1.65;margin-bottom:26px}
  .checklist{display:grid;gap:12px}
  .checklist li{list-style:none;display:flex;gap:12px;font-size:15px;color:var(--text2)}
  .checklist li b{color:var(--text);font-weight:700}
  .checklist .tick{
    flex:none;width:20px;height:20px;border-radius:50%;background:rgba(255,45,203,0.15);
    color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;margin-top:1px;
  }
  .flagship .shotframe{margin-top:0}
  .gallerywrap{margin-top:64px}
  .galleryhead{text-align:center;max-width:560px;margin:0 auto 32px}
  .galleryhead h3{font-size:24px;font-weight:900;margin-bottom:10px}
  .galleryhead p{color:var(--text3);font-size:15px;line-height:1.6}
  .designgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:900px){.designgallery{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.designgallery{grid-template-columns:1fr}}
  .dgtile{
    position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border2);
    background:#0c0c0f;box-shadow:0 10px 30px rgba(0,0,0,0.35);
  }
  .dgtile img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
  .dgtile span{
    position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:13px;font-weight:700;
    background:linear-gradient(0deg,rgba(0,0,0,0.75),transparent);color:#fff;
  }

  /* ---------- apps grid ---------- */
  .appsgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  @media(max-width:820px){.appsgrid{grid-template-columns:1fr}}
  .appcard{
    background:var(--card2);border:1px solid var(--border);border-radius:16px;overflow:hidden;
    transition:border-color .2s;
  }
  .appcard:hover{border-color:var(--border2)}
  .appcard .thumb{border-bottom:1px solid var(--border);background:#0c0c0f;overflow:hidden}
  .appcard .thumb img{width:100%;display:block}
  .appcard .body{padding:22px 24px 24px}
  .appcard .apphead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .appcard .appic{width:8px;height:8px;border-radius:50%;flex:none}
  .appcard h3{font-size:18px;font-weight:800}
  .appcard p{font-size:14.5px;color:var(--text3);line-height:1.6}
  .pill{
    display:inline-block;font-size:11px;font-weight:800;color:var(--text3);
    background:#1a1a1e;border:1px solid var(--border);padding:3px 9px;border-radius:6px;margin-top:12px;margin-right:6px;
  }

  /* ---------- addons ---------- */
  .addonsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:900px){.addonsgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.addonsgrid{grid-template-columns:1fr}}
  .showremote-feature{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
    background:var(--card);border:1px solid var(--border);border-radius:20px;padding:44px;margin-bottom:28px;
  }
  @media(max-width:900px){.showremote-feature{grid-template-columns:1fr;gap:32px;padding:28px 22px}}
  .srtext h3{font-size:26px;font-weight:900;margin:14px 0 14px;letter-spacing:-0.01em}
  .srtext p{color:var(--text2);font-size:15.5px;line-height:1.65;margin-bottom:22px}
  .showremote-feature .shotframe{margin-top:0}
  .showremote-feature .checklist{margin-bottom:20px}
  .addon{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px 20px}
  .addon .badge{
    font-size:10.5px;font-weight:800;color:var(--gold);background:rgba(232,193,77,0.12);
    border:1px solid rgba(232,193,77,0.3);padding:3px 9px;border-radius:6px;display:inline-block;margin-bottom:12px;
  }
  .addon h3{font-size:15.5px;font-weight:800;margin-bottom:8px}
  .addon p{font-size:13.5px;color:var(--text3);line-height:1.55}

  /* ---------- coming soon ---------- */
  .comingsoon-feature{
    max-width:680px;margin:0 auto;text-align:center;
    background:var(--card);border:1px solid rgba(179,102,255,0.25);border-radius:20px;padding:44px;
  }
  .badge-soon{
    font-size:11px;font-weight:800;color:var(--purple);background:rgba(179,102,255,0.12);
    border:1px solid rgba(179,102,255,0.3);padding:4px 11px;border-radius:6px;display:inline-block;margin-bottom:16px;
    letter-spacing:0.04em;
  }
  .comingsoon-feature h3{font-size:28px;font-weight:900;letter-spacing:-0.01em;margin-bottom:14px}
  .comingsoon-feature p{color:var(--text2);font-size:15.5px;line-height:1.65;margin-bottom:22px}
  .comingsoon-feature .checklist{text-align:left;margin-bottom:26px}

  /* ---------- client spotlight ---------- */
  .spotlight{
    background:linear-gradient(180deg,#0e1310,#0a0a0d);
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  }
  .spotgrid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center}
  @media(max-width:900px){.spotgrid{grid-template-columns:1fr;gap:36px}}
  .spotgrid .shotframe{margin-top:0;max-width:400px}
  .spot-tag{font-size:13px;font-weight:800;color:var(--green);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px}
  .spotlight h2{font-size:32px;font-weight:900;margin-bottom:16px;letter-spacing:-0.01em}
  .spotlight p.desc{color:var(--text2);font-size:16px;line-height:1.7;margin-bottom:22px}
  .statrow{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}
  .statrow div b{display:block;font-size:26px;font-weight:900;color:var(--text)}
  .statrow div span{font-size:12.5px;color:var(--text3);font-weight:600}

  /* ---------- how it works ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step}
  @media(max-width:820px){.steps{grid-template-columns:1fr}}
  .step{position:relative;padding:30px 24px;background:var(--card2);border:1px solid var(--border);border-radius:10px}
  .step .num{
    width:32px;height:32px;border-radius:6px;background:var(--pink);
    color:#160012;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:15px;
  }
  .step h3{font-size:17px;font-weight:800;margin-bottom:8px}
  .step p{font-size:14.5px;color:var(--text3);line-height:1.6}

  /* ---------- pricing ---------- */
  .pricingbox{
    background:linear-gradient(135deg,rgba(255,45,203,0.09),rgba(255,45,203,0.02));
    border:1px solid rgba(255,45,203,0.25);border-radius:20px;padding:48px;text-align:center;
  }
  .pricingbox h2{font-size:30px;font-weight:900;margin-bottom:14px}
  .pricingbox p{color:var(--text2);font-size:16px;max-width:560px;margin:0 auto 28px;line-height:1.65}
  .pricefrom{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
  .pricefrom .amt{font-size:56px;font-weight:900;color:var(--pink);letter-spacing:-0.02em}
  .pricefrom .per{font-size:16px;font-weight:700;color:var(--text3)}
  .pricefrom-label{flex-basis:100%;font-size:13px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-top:2px}
  .pricepills{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:36px 0 30px}
  .pricepills span{
    font-size:13.5px;font-weight:700;color:var(--text2);background:var(--card2);
    border:1px solid var(--border);padding:8px 16px;border-radius:6px;
  }
  .pricegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
  @media(max-width:900px){.pricegrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.pricegrid{grid-template-columns:1fr}}
  .pricecard{
    background:var(--card2);border:1px solid var(--border);border-radius:10px;
    padding:22px 18px;text-align:center;
  }
  .pricecard.hero{
    background:rgba(255,45,203,0.07);
    border-color:rgba(255,45,203,0.3);
  }
  .pricecard .pname{font-size:14px;font-weight:700;color:var(--text2);margin-bottom:10px}
  .pricecard .pval{display:flex;align-items:baseline;justify-content:center;gap:4px}
  .pricecard .pn{font-size:26px;font-weight:900;color:var(--text)}
  .pricecard .pu{font-size:12.5px;font-weight:700;color:var(--text3)}
  .pricecard .pnote{font-size:11.5px;color:var(--text3);margin-top:8px;line-height:1.4}

  /* ---------- lead form ---------- */
  .leadForm{max-width:700px;margin:0 auto;background:var(--card2);border:1px solid var(--border);border-radius:18px;padding:40px}
  @media(max-width:600px){.leadForm{padding:28px 22px}}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .lfGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:560px){.lfGrid{grid-template-columns:1fr}}
  .lfField label, .lfLabelStandalone{display:block;font-size:13px;font-weight:700;color:var(--text2);margin-bottom:7px}
  .lfLabelStandalone{margin-top:24px}
  .leadForm input[type=text], .leadForm input[type=email], .leadForm input[type=tel], .leadForm input[type=password], .leadForm textarea{
    width:100%;padding:13px 14px;background:#0a0a0d;border:1px solid var(--border2);border-radius:9px;
    color:var(--text);font-size:15px;font-family:inherit;
  }
  .leadForm input:focus, .leadForm textarea:focus{outline:none;border-color:var(--pink)}
  .leadForm textarea{resize:vertical}
  .appCheckGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  @media(max-width:560px){.appCheckGrid{grid-template-columns:1fr}}
  .appCheck{
    display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text2);
    background:#0a0a0d;border:1px solid var(--border);border-radius:9px;padding:11px 14px;cursor:pointer;
  }
  .appCheck:has(input:checked){border-color:var(--pink);color:var(--text)}
  .appCheck input{accent-color:var(--pink);width:16px;height:16px}
  .lfMsg{font-size:14px;margin-top:14px;min-height:20px}
  .lfMsg.ok{color:#3ddc84}
  .lfMsg.err{color:#ff6b6b}
  .lfAlt{font-size:13.5px;color:var(--text3);margin-top:18px}
  .refBanner{
    max-width:700px;margin:0 auto 20px;background:rgba(255,45,203,0.1);border:1px solid rgba(255,45,203,0.3);
    border-radius:12px;padding:14px 18px;text-align:center;font-size:14.5px;color:var(--text2);
  }
  .refBanner b{color:var(--pink)}
  .referralBox{
    max-width:700px;margin:36px auto 0;display:flex;align-items:center;gap:18px;
    background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:22px 26px;
  }
  @media(max-width:560px){.referralBox{flex-direction:column;text-align:center}}
  .referralIcon{width:4px;align-self:stretch;background:var(--pink);border-radius:2px;flex:none}
  .referralBox h4{font-size:16px;font-weight:800;margin-bottom:5px}
  .referralBox p{font-size:13.5px;color:var(--text3);line-height:1.55}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--border);padding:44px 0}
  .footwrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
  footer img.logo{height:26px;opacity:0.85}
  footer .fright{font-size:13px;color:var(--text3);display:flex;gap:22px;flex-wrap:wrap}
  footer .fright a:hover{color:var(--text2)}

/* ---------- sub-pages (signage.html / gig-hub.html) ---------- */
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--text3);margin-bottom:20px}
.backlink:hover{color:var(--pink)}
.pagehero{padding:52px 0 20px}
.pagehero .tag{font-size:13px;font-weight:800;color:var(--pink);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px}
.pagehero h1{font-size:46px;line-height:1.1;font-weight:900;letter-spacing:-0.02em;max-width:780px}
.pagehero p.lead{margin-top:20px;font-size:17.5px;color:var(--text2);max-width:640px;line-height:1.6}
.twoshot{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
@media(max-width:820px){.twoshot{grid-template-columns:1fr}}
.twoshot .shotframe{margin-top:0}
.twoshot figcaption{margin-top:10px;font-size:13px;color:var(--text3);text-align:center}
.altrow{padding:64px 0}
.altrow .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.altrow{padding:44px 0}.altrow .wrap{grid-template-columns:1fr;gap:32px}}
.altrow.rev .imgcol{order:2}
@media(max-width:900px){.altrow.rev .imgcol{order:0}}
.altrow .tag{font-size:12.5px;font-weight:800;color:var(--pink);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px}
.altrow h2{font-size:28px;font-weight:900;letter-spacing:-0.01em;margin-bottom:14px}
.altrow p.desc{color:var(--text2);font-size:15.5px;line-height:1.65;margin-bottom:20px}
.altrow .shotframe{margin-top:0}
.divider{border-top:1px solid var(--border)}
.crosslink{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:28px 32px;margin:20px 0;
}
.crosslink h4{font-size:17px;font-weight:800;margin-bottom:6px}
.crosslink p{font-size:14px;color:var(--text3)}

/* ---------- simple final CTA (sub-pages) ---------- */
.finalcta{text-align:center;padding:100px 0}
.finalcta h2{font-size:38px;font-weight:900;letter-spacing:-0.01em;max-width:600px;margin:0 auto 18px}
.finalcta p{color:var(--text2);font-size:16.5px;max-width:520px;margin:0 auto 32px}