/* Shared styles for ProdHQ marketing/landing pages (studio, online-editor,
   mobile-tablet, pricing). Mirrors the visual language of the homepage
   (index.html) so these pages read as the same site. Keep in sync by hand
   if the homepage's palette/type scale changes. */
:root{
  --bg:#061018;
  --panel:#071621;
  --ink:#eefaff;
  --muted:#9bb4c2;
  --cyan:#08cef3;
  --line:rgba(8,206,243,.22);
  --glow:rgba(8,206,243,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(ellipse 70% 46% at 78% -6%, rgba(8,206,243,.16), transparent 58%),
    radial-gradient(ellipse 48% 36% at 8% 18%, rgba(8,206,243,.06), transparent 55%),
    linear-gradient(180deg, #0a1822 0%, var(--bg) 42%, #040b10 100%);
  font-family:"DM Sans",system-ui,sans-serif;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1160px, calc(100% - 48px)); margin:0 auto; position:relative; z-index:1}
.brandProd{color:#eefaff; font-weight:700; letter-spacing:-.03em}

/* NAV */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  background:rgba(6,16,24,.72);
  border-bottom:1px solid rgba(8,206,243,.1);
}
.nav{height:76px; display:flex; align-items:center; gap:12px}
.nav .mark{width:46px;height:46px;flex:0 0 auto}
.nav .word{display:inline-flex; align-items:center; font-family:"Outfit",sans-serif; font-size:22px; font-weight:700; letter-spacing:-.03em}
.nav .word .hqMark{height:1.02em; width:auto; display:block; margin-left:.06em; transform:translateY(.05em)}
.nav .word sup{font-size:.4em; margin-left:5px; color:var(--muted); font-weight:600}
.nav .links{margin-left:auto; display:flex; align-items:center; gap:22px; color:var(--muted); font-weight:600; font-size:14px}
.nav .links a:not(.btn):hover{color:var(--ink)}
.navLogin{color:var(--ink)!important}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 18px;
  border:1px solid var(--cyan); border-radius:4px;
  background:transparent; color:var(--cyan);
  font:600 13px/1 "DM Sans",sans-serif;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn:hover{background:rgba(8,206,243,.1); transform:translateY(-1px)}
.btn.primary{background:var(--cyan); color:#021019; border-color:var(--cyan)}
.btn.primary:hover{background:#3ad9f7; border-color:#3ad9f7}
.btn.ghost{border-color:rgba(8,206,243,.28); color:var(--ink); background:rgba(8,206,243,.06)}

/* PAGE HERO (simpler than homepage: no photo background animation) */
.pageHero{padding:64px 0 56px; border-bottom:1px solid rgba(8,206,243,.1)}
.pageHero .eyebrow{margin:0 0 12px}
.pageHero h1{
  margin:0 0 16px;
  font-family:"Outfit",sans-serif;
  font-size:clamp(32px, 5vw, 52px);
  font-weight:750;
  letter-spacing:-.035em;
  line-height:1.05;
  max-width:20ch;
}
.pageHero p{margin:0 0 26px; max-width:52ch; color:var(--muted); font-size:clamp(16px,1.4vw,18px); line-height:1.6; font-weight:500}
.heroActions{display:flex; flex-wrap:wrap; gap:12px}
nav[aria-label="Breadcrumb"]{margin:0 0 18px; font-size:13px; color:var(--muted); font-weight:600}
nav[aria-label="Breadcrumb"] a{color:var(--cyan)}
nav[aria-label="Breadcrumb"] span{margin:0 6px}

/* SECTIONS */
.band{padding:76px 0; border-top:1px solid rgba(8,206,243,.1)}
.eyebrow{margin:0 0 10px; color:var(--cyan); font:700 12px/1 "DM Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase}
.band h2{margin:0 0 12px; font-family:"Outfit",sans-serif; font-size:clamp(28px, 4vw, 40px); font-weight:750; letter-spacing:-.035em; line-height:1.08; max-width:20ch}
.lead{margin:0; max-width:56ch; color:var(--muted); font-size:17px; line-height:1.6; font-weight:500}
.copyBlock{margin-top:18px; max-width:68ch}
.copyBlock p{margin:0 0 16px; color:var(--muted); font-size:16px; line-height:1.7; font-weight:500}
.copyBlock strong{color:var(--ink)}

.showcase{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; margin-top:36px}
.showcase.reverse{grid-template-columns:.95fr 1.05fr}
.showcase.reverse .frame{order:2}
.showcase.reverse .copy{order:1}
.frame{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#0a1a24; box-shadow:0 28px 70px rgba(0,0,0,.35)}
.frame img{width:100%; height:auto; display:block}
.showcase.mobileShot{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.frame.device{
  width:min(100%, 34.5rem);
  justify-self:start;
  border-radius:18px;
  padding:7px;
  background:#031018;
  border-color:rgba(8,206,243,.4);
  box-shadow:0 22px 56px rgba(0,0,0,.42), inset 0 0 0 1px rgba(8,206,243,.1);
}
.frame.device img{border-radius:11px}
.copy .tag{display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--cyan); font:600 14px/1 "DM Sans",sans-serif}
.copy .tag img{width:22px;height:22px}
.copy h3{margin:0 0 12px; font-family:"Outfit",sans-serif; font-size:clamp(22px, 2.6vw, 30px); font-weight:700; letter-spacing:-.03em; line-height:1.15}
.copy p{margin:0 0 20px; max-width:42ch; color:var(--muted); font-size:16px; line-height:1.6; font-weight:500}

.rooms{margin-top:36px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.room{padding:22px 20px 20px; border:1px solid var(--line); border-radius:8px; background:rgba(4,14,22,.72)}
.room .roomId{color:var(--cyan); font:700 11px/1 "DM Sans",sans-serif; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px}
.room h3{margin:0 0 8px; font-family:"Outfit",sans-serif; font-size:20px; font-weight:700; letter-spacing:-.02em}
.room p{margin:0; color:var(--muted); font-size:14px; line-height:1.5; font-weight:500}

.proofs{margin-top:32px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.proof{padding:22px 20px; border-left:2px solid rgba(8,206,243,.55); background:linear-gradient(180deg, rgba(8,206,243,.08), transparent 78%)}
.proof h3{margin:0 0 8px; font-family:"Outfit",sans-serif; font-size:18px; font-weight:700; letter-spacing:-.02em}
.proof p{margin:0; color:var(--muted); font-size:14px; line-height:1.5; font-weight:500}

.faq{margin-top:24px; display:grid; gap:10px}
.faq details{border:1px solid var(--line); border-radius:8px; background:rgba(4,14,22,.72); padding:0 18px}
.faq summary{cursor:pointer; list-style:none; padding:16px 0; font-family:"Outfit",sans-serif; font-size:17px; font-weight:650; letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--cyan); font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 16px; color:var(--muted); font-size:15px; line-height:1.55; font-weight:500; max-width:62ch}

.crossLinks{margin-top:32px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.crossLink{display:block; padding:20px; border:1px solid var(--line); border-radius:8px; background:rgba(4,14,22,.72); transition:border-color .2s ease}
.crossLink:hover{border-color:rgba(8,206,243,.5)}
.crossLink .eyebrow{margin-bottom:6px}
.crossLink strong{display:block; font-family:"Outfit",sans-serif; font-size:18px; font-weight:700; margin-bottom:6px}
.crossLink span.desc{display:block; color:var(--muted); font-size:14px; line-height:1.5}

.pricingGrid{margin-top:32px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr); gap:16px; align-items:stretch}
.pricePlan{padding:26px 24px; border:1px solid var(--line); border-radius:8px; background:rgba(4,14,22,.72)}
.pricePlan.featured{border-color:rgba(8,206,243,.55); box-shadow:0 0 0 1px rgba(8,206,243,.18), 0 24px 50px rgba(0,0,0,.28); background:linear-gradient(165deg, rgba(8,206,243,.12), rgba(4,14,22,.86) 48%)}
.pricePlan .planEyebrow{color:var(--cyan); font:700 11px/1 "DM Sans",sans-serif; letter-spacing:.9px; text-transform:uppercase; margin-bottom:10px}
.pricePlan h3{margin:0 0 8px; font-family:"Outfit",sans-serif; font-size:26px; font-weight:700; letter-spacing:-.03em}
.pricePlan .planCopy{margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.5; font-weight:500; max-width:34ch}
.pricePlan .amountRow{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px}
.pricePlan .amount{min-width:140px; padding:12px 14px; border:1px solid rgba(8,206,243,.28); border-radius:6px; background:rgba(2,12,20,.55)}
.pricePlan .amount strong{display:block; font-family:"Outfit",sans-serif; font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1}
.pricePlan .amount span{display:block; margin-top:5px; color:var(--muted); font-size:12px; font-weight:600}
.pricePlan .planActions{display:flex; flex-wrap:wrap; gap:10px}
@media(max-width:900px){.pricingGrid{grid-template-columns:1fr}}

.footer{display:flex; align-items:center; gap:12px; padding:28px 0 48px; color:#7e97a6; font-size:13px; font-weight:500; border-top:1px solid rgba(8,206,243,.1)}
.footer .mark{width:30px;height:30px}
.footer .word{display:inline-flex; align-items:center; font-family:"Outfit",sans-serif; font-weight:700; color:#c5d8e2}
.footer .hqMark{height:1em; width:auto; margin:0 .04em; transform:translateY(.08em)}
.footer .end{margin-left:auto}
.footer a{color:var(--cyan);font-weight:600}

@media (max-width:1100px){.rooms,.proofs{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:960px){
  .wrap{width:min(100% - 32px, 1160px)}
  .nav .links a:not(.btn):not(.navLogin){display:none}
  .nav .links{gap:10px}
  .showcase,.showcase.reverse,.showcase.mobileShot,.rooms,.proofs,.crossLinks{grid-template-columns:1fr; gap:16px}
  .frame.device{width:100%}
  .showcase.reverse .frame,.showcase.reverse .copy{order:initial}
  .band{padding:56px 0}
  .footer{flex-wrap:wrap}
  .footer .end{margin-left:0; width:100%}
}