/* Shared styles for product detail pages */
body { margin: 0; }

.product-hero { background: var(--hcoms-ink); color: white; padding: 80px 32px 120px; position: relative; overflow: hidden; }
.product-hero::before { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.6; }
.product-hero::after { content:''; position:absolute; top:-100px; right:-100px; width:600px; height:600px; border-radius:50%; background: radial-gradient(circle, rgba(0,173,239,0.3) 0%, transparent 65%); filter: blur(40px); }
.product-hero.light { background: var(--hcoms-grey-50); color: var(--hcoms-ink); border-bottom: 1px solid var(--hcoms-grey-200); }
.product-hero.light::before { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); }
.product-hero.light::after { background: radial-gradient(circle, rgba(0,173,239,0.18) 0%, transparent 65%); }
.product-hero .inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.product-hero .crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.product-hero.light .crumbs { color: var(--hcoms-grey-500); }
.product-hero .crumbs a { color: rgba(255,255,255,0.7); text-decoration: none; }
.product-hero.light .crumbs a { color: var(--hcoms-grey-700); }
.product-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 7vw, 96px); letter-spacing: -0.045em; line-height: 0.95; margin: 24px 0 0; }
.product-hero h1 em { color: var(--hcoms-blue); font-style: normal; }
.product-hero .sub { font-size: 21px; color: rgba(255,255,255,0.7); line-height: 1.5; max-width: 720px; margin: 32px 0 40px; }
.product-hero.light .sub { color: var(--hcoms-grey-700); }
.product-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.product-hero .btn-primary { background: var(--hcoms-blue); color: white; }
.product-hero .btn-secondary { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.3); }
.product-hero.light .btn-secondary { color: var(--hcoms-ink); border-color: var(--hcoms-grey-300); background: white; }
.product-hero .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; padding-top: 64px; margin-top: 64px; border-top: 1px solid rgba(255,255,255,0.1); }
.product-hero.light .stats { border-top-color: var(--hcoms-grey-200); }
.product-hero .stat .num { font-family: var(--font-display); font-weight: 800; font-size: 56px; letter-spacing: -0.04em; color: var(--hcoms-blue); line-height: 1.0; }
.product-hero .stat .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 10px; }
.product-hero.light .stat .lbl { color: var(--hcoms-grey-500); }

.section { max-width: 1240px; margin: 0 auto; padding: 100px 32px; }
.section-head { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding-bottom: 28px; margin-bottom: 48px; border-bottom: 1px solid var(--hcoms-grey-200); }
.section-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hcoms-blue); }
.section-num .tick { color: var(--hcoms-grey-500); margin-right: 8px; }
.section-head h2 { font-family: var(--font-display); font-size: 48px; font-weight: 700; letter-spacing: -0.035em; margin: 0; line-height: 1.05; }
.section-head .sub { font-size: 16px; color: var(--hcoms-grey-700); line-height: 1.55; max-width: 580px; margin-top: 14px; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar { padding: 32px; background: white; border: 1px solid var(--hcoms-grey-200); border-radius: 12px; }
.pillar .icn { font-family: var(--font-mono); font-size: 24px; color: var(--hcoms-blue); }
.pillar h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin: 12px 0 8px; }
.pillar p { font-size: 14px; color: var(--hcoms-grey-700); line-height: 1.55; margin: 0; }

.quote-band { background: var(--hcoms-grey-50); padding: 100px 32px; border-top: 1px solid var(--hcoms-grey-200); border-bottom: 1px solid var(--hcoms-grey-200); }
.quote-band .inner { max-width: 1000px; margin: 0 auto; }
.quote-band blockquote { font-family: 'Fraunces', serif; font-weight: 500; font-size: 36px; letter-spacing: -0.025em; line-height: 1.25; margin: 0; color: var(--hcoms-ink); }
.quote-band blockquote em { color: var(--hcoms-blue); font-style: italic; font-weight: 400; }
.quote-band cite { display: block; margin-top: 32px; font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hcoms-grey-500); }

.cta-band { background: var(--hcoms-ink); color: white; padding: 100px 32px; }
.cta-band.blue { background: var(--hcoms-blue); }
.cta-band .inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: 56px; letter-spacing: -0.04em; line-height: 1.0; margin: 0; }
.cta-band .actions { display: flex; flex-direction: column; gap: 12px; }
.cta-band .btn-primary { background: var(--hcoms-ink); color: white; }
.cta-band:not(.blue) .btn-primary { background: var(--hcoms-blue); }
.cta-band .btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.4); }

/* Screenshot gallery — used on products-* and dms-overview pages */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.shot-card { background: white; border: 1px solid var(--hcoms-grey-200); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.shot-card .shot-img { background: var(--hcoms-grey-50); border-bottom: 1px solid var(--hcoms-grey-200); aspect-ratio: 16/10; overflow: hidden; }
.shot-card .shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.shot-card figcaption { padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--hcoms-grey-700); }
.shot-card figcaption strong { display: block; color: var(--hcoms-ink); font-weight: 600; margin-bottom: 2px; font-family: var(--font-display); font-size: 14px; letter-spacing: -0.01em; }
@media (max-width: 800px) { .shots { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .shots { grid-template-columns: 1fr; } }

.domains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dom { padding: 20px; background: white; border: 1px solid var(--hcoms-grey-200); border-radius: 10px; }
.dom .ico { color: var(--hcoms-blue); width: 24px; height: 24px; display: block; margin-bottom: 14px; }
.dom .ico svg { width: 100%; height: 100%; display: block; }
.dom .n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--hcoms-blue); }
.dom .t { font-size: 14px; font-weight: 600; color: var(--hcoms-ink); margin-top: 6px; }
.dom .s { font-size: 12px; color: var(--hcoms-grey-500); margin-top: 4px; line-height: 1.5; }

@media (max-width: 800px) { .domains { grid-template-columns: 1fr 1fr; } .pillars, .cta-band .inner, .product-hero .stats { grid-template-columns: 1fr; } .section-head { grid-template-columns: 1fr; } }