/* GSB Product Designer coming-soon page. Layered on landing.css, same as messenger.css and dtf.css.
   Family palette on the dark landing ground; this product's own accent is teal to green
   (the icon gradient), used for the eyebrow, the CTA, the garment line work and the pillar icons.
   Mobile first, breakpoints 768 and 1024. Every class here is prefixed .pd-. */

.pd-page { --pd-teal: #14b8a6; --pd-green: #22c55e; --pd-teal-soft: #2dd4bf; --pd-green-soft: #4ade80;
  --pd-grad: linear-gradient(135deg, var(--pd-teal), var(--pd-green));
  --pd-grad-h: linear-gradient(90deg, var(--pd-teal-soft), var(--pd-green-soft));
  background: var(--dark-bg); color: var(--gray-200); }
.pd-page a:focus-visible { outline: 2px solid var(--pd-teal); outline-offset: 3px; border-radius: 6px; }

/* ---------- Nav ---------- */
.pd-nav { background: rgba(10,10,26,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.05); }
.pd-nav .nav-logo { color: #fff; min-width: 0; }
.pd-nav .nav-logo-icon.pd-nav-icon { background: none; border-radius: 9px; flex-shrink: 0; box-shadow: 0 6px 18px rgba(20,184,166,.28); }
.pd-nav .nav-logo-icon.pd-nav-icon svg { width: 36px; height: 36px; display: block; border-radius: 9px; }
.pd-nav-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Hero ---------- */
.pd-hero { padding: 110px 0 56px; isolation: isolate; min-height: 0; }
.hero.pd-hero .container { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; } /* (0,3,0) beats landing.css .hero .container */
.hero.pd-hero .container > * { min-width: 0; }
.pd-hero-glow { position: absolute; max-width: 100%; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.pd-hero-glow--a { width: 520px; height: 520px; right: -180px; top: 4%; background: radial-gradient(circle at 40% 40%, rgba(20,184,166,.5), rgba(34,197,94,.22) 45%, transparent 70%); animation: pdDrift 16s ease-in-out infinite; }
.pd-hero-glow--b { width: 420px; height: 420px; left: -160px; bottom: -120px; background: radial-gradient(circle, rgba(59,130,246,.35), transparent 68%); animation: pdDrift 20s ease-in-out infinite reverse; }
@keyframes pdDrift { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-26px, 22px, 0) scale(1.07); } }
.pd-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.pd-hero-copy { position: relative; z-index: 2; text-align: center; }
.pd-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(20,184,166,.1); border: 1px solid rgba(20,184,166,.3); color: var(--pd-teal-soft); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pd-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pd-grad); box-shadow: 0 0 0 0 rgba(45,212,191,.6); animation: pdPing 2.4s ease-out infinite; flex-shrink: 0; }
@keyframes pdPing { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,.5); } 70% { box-shadow: 0 0 0 9px rgba(45,212,191,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); } }
.pd-hero .hero-title { letter-spacing: -.02em; font-size: clamp(32px, 8vw, 46px); }
.pd-gradient-text { background: var(--pd-grad-h); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pd-hero .hero-subtitle { max-width: 56ch; margin-left: auto; margin-right: auto; margin-bottom: 30px; font-size: 18px; }
.pd-cta { background: var(--pd-grad); background-size: 200% 200%; box-shadow: 0 4px 18px rgba(20,184,166,.4); max-width: 100%; }
.pd-cta:hover { box-shadow: 0 8px 26px rgba(34,197,94,.45); }
.pd-hero-note { margin: 16px auto 0; max-width: 46ch; color: var(--gray-400); font-size: 14px; line-height: 1.6; }

/* staggered reveal on load */
.pd-reveal { animation: pdReveal .9s cubic-bezier(.2,.7,.2,1) both; }
.pd-reveal:nth-child(1) { animation-delay: .05s; }
.pd-reveal:nth-child(2) { animation-delay: .18s; }
.pd-reveal:nth-child(3) { animation-delay: .32s; }
.pd-reveal:nth-child(4) { animation-delay: .46s; }
@keyframes pdReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Hero visual: abstract garment, print zone, colorways ---------- */
.pd-hero-visual { position: relative; z-index: 2; display: flex; justify-content: center; animation: pdVisualIn 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pdVisualIn { from { opacity: 0; transform: translateY(36px) scale(.96); } to { opacity: 1; transform: none; } }
.pd-garment-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 340px; }
.pd-garment-wrap::before { content: ""; position: absolute; left: 50%; top: 42%; width: 110%; height: 80%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(20,184,166,.32), rgba(34,197,94,.12) 55%, transparent 100%); filter: blur(28px); z-index: 0; pointer-events: none; }
.pd-garment { position: relative; z-index: 1; width: 100%; max-width: 320px; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); animation: pdHover 8s ease-in-out infinite; }
@keyframes pdHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* the garment fill walks through the same colors as the swatch row */
.pd-garment-body { fill: #1e293b; animation: pdColor 21s linear infinite; }
@keyframes pdColor {
  0%, 11% { fill: #111318; } 14%, 25% { fill: #f4f1ea; } 28%, 39% { fill: #8d9299; } 42%, 53% { fill: #1e3a8a; }
  56%, 67% { fill: #b91c1c; } 70%, 81% { fill: #d6c39c; } 84%, 97% { fill: #166534; } 100% { fill: #111318; } }
.pd-garment-line { fill: none; stroke: url(#pd-line-grad); stroke-width: 2.2; stroke-linejoin: round; }
.pd-garment-collar, .pd-garment-seam { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-linecap: round; mix-blend-mode: overlay; }
.pd-zone { fill: rgba(255,255,255,.04); stroke: var(--pd-teal-soft); stroke-width: 1.4; stroke-dasharray: 5 6; animation: pdDash 2.4s linear infinite; }
@keyframes pdDash { to { stroke-dashoffset: -22; } }
.pd-zone-tick path { fill: none; stroke: var(--pd-green-soft); stroke-width: 1.6; stroke-linecap: round; }
.pd-art { filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.pd-swatches { position: relative; z-index: 1; list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.pd-swatches li { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.4); position: relative; }
.pd-swatches li::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--pd-teal-soft); opacity: 0; animation: pdSwatch 21s linear infinite; }
.pd-swatches li:nth-child(1)::after { animation-delay: 0s; }
.pd-swatches li:nth-child(2)::after { animation-delay: 3s; }
.pd-swatches li:nth-child(3)::after { animation-delay: 6s; }
.pd-swatches li:nth-child(4)::after { animation-delay: 9s; }
.pd-swatches li:nth-child(5)::after { animation-delay: 12s; }
.pd-swatches li:nth-child(6)::after { animation-delay: 15s; }
.pd-swatches li:nth-child(7)::after { animation-delay: 18s; }
@keyframes pdSwatch { 0%, 1% { opacity: 0; } 2%, 12% { opacity: 1; } 14%, 100% { opacity: 0; } }

/* ---------- Three decisions ---------- */
.pd-pillars { padding: 60px 0 70px; background: var(--dark-mid); }
.pd-pillars .section-title { color: #fff; }
.pd-pillars .section-subtitle { color: var(--gray-400); }
.pd-section-header { margin-bottom: 36px; }
.pd-pillar-grid { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.pd-pillar { position: relative; padding: 24px 22px; border-radius: var(--radius-lg); background: var(--dark-card); border: 1px solid var(--dark-card-border); overflow: hidden; }
.pd-pillar::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--pd-grad-h); opacity: .7; }
.pd-pillar-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.28); color: var(--pd-teal-soft); margin-bottom: 16px; }
.pd-pillar-ico svg { width: 22px; height: 22px; }
.pd-pillar h3 { color: #fff; font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
.pd-pillar p { color: var(--gray-400); font-size: 15px; line-height: 1.6; }
.pd-pillar-note { margin-top: 24px; text-align: center; color: var(--gray-400); font-size: 13px; }

/* ---------- Footer ---------- */
.pd-footer { padding: 40px 0; text-align: center; color: var(--gray-400); font-size: 14px; }
.pd-footer a { color: var(--gray-300); }
.pd-footer-copy { margin-top: 8px; }

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  .pd-hero { padding: 130px 0 70px; }
  .pd-pillar-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pd-pillar { padding: 28px 24px; }
  .pd-garment-wrap { max-width: 380px; }
  .pd-garment { max-width: 360px; }
}
@media (min-width: 1024px) {
  .pd-hero { padding: 150px 0 90px; }
  .hero.pd-hero .container { grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .pd-hero-copy { text-align: left; }
  .pd-hero .hero-title { font-size: clamp(38px, 4.4vw, 54px); }
  .pd-hero .hero-subtitle { margin-left: 0; margin-right: 0; }
  .pd-hero-note { margin-left: 0; }
  .pd-garment-wrap { max-width: 420px; }
  .pd-garment { max-width: 400px; }
}
@media (max-width: 480px) {
  .pd-nav .nav-logo { font-size: 16px; gap: 8px; }
  .pd-cta { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pd-reveal, .pd-hero-visual, .pd-hero-glow, .pd-eyebrow-dot, .pd-garment, .pd-garment-body, .pd-zone, .pd-swatches li::after, .pd-cta, .btn-primary, .gradient-text { animation: none !important; }
  .pd-garment-body { fill: #1e3a8a; }
}