:root {
  --oe-blue:#000887;
  --oe-deep:#02044f;
  --oe-gold:#facc15;
  --oe-line:#dbe4ff;
  --oe-soft:#f5f8ff;
  --oe-text:#08104f;
  --oe-muted:#64748b;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
  color:var(--oe-text);
  background:
    radial-gradient(circle at 12% 10%,rgba(250,204,21,.16),transparent 28%),
    radial-gradient(circle at 88% 6%,rgba(0,8,135,.15),transparent 34%),
    linear-gradient(180deg,#fff 0%,#eef3ff 100%);
}
a { color:inherit; text-decoration:none; }
.pd-shell { max-width:1220px; margin:0 auto; padding:0 22px; }
.pd-hero {
  position:relative;
  overflow:hidden;
  padding:72px 0 56px;
  background:linear-gradient(135deg,#02044f 0%,#000887 58%,#243bff 100%);
  color:#fff;
}
.pd-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(90deg,#000,transparent 90%);
}
.pd-hero::after {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-110px;
  top:-140px;
  border-radius:50%;
  background:rgba(250,204,21,.16);
  filter:blur(10px);
}
.pd-hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.72fr);
  gap:34px;
  align-items:center;
}
.pd-back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.86);
  font-weight:900;
  font-size:13px;
}
.pd-kicker {
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(250,204,21,.15);
  border:1px solid rgba(250,204,21,.45);
  color:var(--oe-gold);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.pd-title {
  margin:18px 0 16px;
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(2.4rem,5.2vw,5.2rem);
  line-height:.94;
  letter-spacing:-.055em;
}
.pd-lead {
  max-width:720px;
  margin:0 0 24px;
  color:rgba(255,255,255,.74);
  font-size:1.06rem;
  line-height:1.75;
}
.pd-hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pd-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 22px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:1000;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pd-btn:hover { transform:translateY(-2px); }
.pd-btn-primary { background:linear-gradient(135deg,var(--oe-gold),#f59e0b); color:#120a00; box-shadow:0 16px 36px rgba(250,204,21,.28); }
.pd-btn-secondary { background:rgba(255,255,255,.11); color:#fff; border-color:rgba(255,255,255,.22); }
.pd-media {
  position:relative;
  min-height:360px;
  border-radius:34px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 34px 80px rgba(0,0,0,.25);
}
.pd-media img { width:100%; height:100%; min-height:360px; object-fit:cover; display:block; }
.pd-media-fallback { display:grid; place-items:center; min-height:360px; font-size:74px; font-weight:1000; color:var(--oe-gold); }
.pd-price-card {
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,.9);
  color:var(--oe-text);
  backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.pd-price { font-family:"Space Grotesk",sans-serif; font-size:32px; font-weight:1000; }
.pd-rating-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border-radius:999px;
  background:#fff8db;
  border:1px solid #fde68a;
  color:#92400e;
  font-weight:1000;
  white-space:nowrap;
}
.pd-section { padding:46px 0; }
.pd-panel {
  border:1px solid var(--oe-line);
  border-radius:34px;
  background:rgba(255,255,255,.82);
  box-shadow:0 24px 70px rgba(0,8,135,.08);
  padding:28px;
}
.pd-section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.pd-eyebrow { color:#8a5a00; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.pd-h2 { margin:7px 0 0; font-family:"Space Grotesk",sans-serif; font-size:clamp(1.8rem,3vw,3rem); line-height:1; letter-spacing:-.035em; }
.pd-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.pd-feature {
  min-height:170px;
  border:1px solid #dfe6ff;
  border-radius:26px;
  padding:18px;
  background:linear-gradient(145deg,#fff,#f7f9ff);
  position:relative;
  overflow:hidden;
}
.pd-feature::after {
  content:"";
  position:absolute;
  right:-28px;
  bottom:-28px;
  width:92px;
  height:92px;
  border-radius:28px;
  background:rgba(250,204,21,.16);
  transform:rotate(15deg);
}
.pd-feature-icon { width:48px; height:48px; border-radius:17px; display:grid; place-items:center; background:var(--oe-blue); color:var(--oe-gold); font-size:22px; margin-bottom:15px; }
.pd-feature h3 { margin:0 0 8px; font-size:18px; }
.pd-feature p { margin:0; color:var(--oe-muted); line-height:1.6; font-weight:700; }
.pd-two { display:grid; grid-template-columns:minmax(0,.95fr) minmax(320px,.55fr); gap:22px; align-items:start; }
.pd-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.pd-list li { display:flex; gap:12px; padding:14px; border-radius:18px; background:#f8faff; border:1px solid #e4eaff; color:#334155; font-weight:800; }
.pd-list li::before { content:""; width:10px; height:10px; margin-top:7px; border-radius:50%; background:var(--oe-gold); box-shadow:0 0 0 5px rgba(250,204,21,.18); flex:0 0 auto; }
.pd-share-row { display:flex; flex-wrap:wrap; gap:10px; }
.pd-share {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:15px;
  background:#fff;
  border:0;
  color:#fff;
  font-weight:1000;
  box-shadow:0 12px 24px rgba(0,8,135,.14);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pd-share:hover {
  transform:translateY(-2px) rotate(-2deg);
  filter:brightness(1.06);
  box-shadow:0 16px 30px rgba(0,8,135,.16);
}
.pd-share svg { width:22px; height:22px; fill:currentColor; display:block; }
.pd-share-wa { background:#25D366; }
.pd-share-ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.pd-share-li { background:#0A66C2; }
.pd-share-x { background:#111827; }
.pd-share-fb { background:#1877F2; }
.pd-share-copy { background:linear-gradient(135deg,var(--oe-blue),#253cff); color:var(--oe-gold); }
.pd-faq details { border:1px solid #dfe6ff; border-radius:20px; background:#fff; padding:16px 18px; }
.pd-faq details + details { margin-top:12px; }
.pd-faq summary { cursor:pointer; font-weight:1000; color:var(--oe-blue); }
.pd-faq p { color:var(--oe-muted); line-height:1.65; margin:12px 0 0; }
.pd-testimonials { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px; }
.pd-testimonial { flex:0 0 min(360px,85vw); scroll-snap-align:start; border:1px solid #dfe6ff; border-radius:24px; background:#fff; padding:18px; box-shadow:0 16px 38px rgba(0,8,135,.07); }
.pd-testimonial-stars { color:#d97706; font-weight:1000; margin-bottom:10px; }
.pd-testimonial-copy { color:#334155; line-height:1.65; font-weight:700; }
.pd-testimonial-name { margin-top:14px; color:var(--oe-blue); font-weight:1000; }
.pd-empty { min-height:420px; display:grid; place-items:center; text-align:center; padding:40px; }
.pd-empty h1 { font-family:"Space Grotesk",sans-serif; color:var(--oe-blue); }
@media (max-width:920px) {
  .pd-hero-grid,.pd-two { grid-template-columns:1fr; }
  .pd-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .pd-hero { padding:48px 0 38px; }
  .pd-shell { padding:0 14px; }
  .pd-feature-grid { grid-template-columns:1fr; }
  .pd-panel { padding:20px; border-radius:26px; }
  .pd-price-card { position:relative; left:auto; right:auto; bottom:auto; margin:14px; }
}
