/* Product Strategy page — "blueprint" theme: blue + gold on ivory, navy band, four card accents */
.page{--navy:#102255;--ivory:#FFFCF8;--gold:#D6A24A;--gold-soft:#FFF4DF;--mauve:#8D679D;--mauve-soft:#F5EEF8;--sage:#577A6D;--sage-soft:#EEF6F2;--pale:#EEF3FF;--pale2:#F6F8FF;padding:0}
.page .wrap{max-width:1180px}
.page h1{text-transform:none;font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.04;margin:.15em 0 .4em}
.page h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:0 0 .45em;line-height:1.1}
.page h3{font-size:1.25rem}
.page p{color:var(--slate)}
.hl{color:var(--blue);background:linear-gradient(transparent 80%,rgba(214,162,74,.38) 80%,rgba(214,162,74,.38) 94%,transparent 94%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:underline 1.4s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes underline{to{background-size:100% 100%}}

/* labels with gold line */
.tag{display:inline-flex;align-items:center;gap:10px;color:var(--blue-700);font:700 .78rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.tag::before{content:"";width:28px;height:3px;border-radius:9px;background:var(--gold)}
.head{max-width:780px;margin:0 auto 40px;text-align:center}
.head .tag{justify-content:center}

.ps-sec{padding:92px 0;position:relative}
.tint{background:var(--pale2)}
.ps-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.narrow{max-width:860px}
.small{font-size:.9rem}

/* accent system */
.acc-blue{--a:var(--blue);--s:var(--pale)}
.acc-gold{--a:#A9792D;--s:var(--gold-soft)}
.acc-mauve{--a:var(--mauve);--s:var(--mauve-soft)}
.acc-sage{--a:var(--sage);--s:var(--sage-soft)}

/* HERO */
.ps-hero{position:relative;overflow:hidden;padding:56px 0 96px;background:radial-gradient(circle at 92% 6%,rgba(58,106,253,.12),transparent 30%),radial-gradient(circle at 6% 94%,rgba(214,162,74,.13),transparent 26%),linear-gradient(135deg,#fff 0%,var(--ivory) 52%,#F2F6FF 100%)}
.ps-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;position:relative;z-index:1}
.ps-hero .crumbs{margin-bottom:22px}
.lead{font-size:1.2rem;color:#3d4a5a!important;font-weight:500}
.motto{display:inline-block;margin:6px 0 4px;padding:12px 16px;border-left:4px solid var(--gold);background:#fff;border-radius:10px;color:var(--navy)!important;font:700 .82rem/1.5 var(--body);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 24px rgba(16,34,85,.06)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0;animation:drift 16s ease-in-out infinite alternate}
.b1{width:260px;height:260px;right:-60px;top:40px;background:radial-gradient(circle,rgba(58,106,253,.18),transparent 70%)}
.b2{width:200px;height:200px;left:-50px;bottom:-40px;background:radial-gradient(circle,rgba(214,162,74,.22),transparent 70%);animation-duration:20s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-30px,24px)}}

/* blueprint figure */
.blueprint{position:relative;margin:0;padding:34px 30px 26px;border-radius:28px;border:1px solid #D7E1F6;background-color:#F7F9FF;background-image:linear-gradient(rgba(58,106,253,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(58,106,253,.07) 1px,transparent 1px);background-size:24px 24px;box-shadow:0 22px 60px rgba(16,34,85,.10)}
.bp-node{position:relative;display:flex;align-items:center;gap:14px;padding:17px 18px;margin-top:38px;border-radius:16px;background:#fff;border:1px solid #DDE5F2;color:var(--ink);font:600 1rem/1.4 var(--body);box-shadow:0 6px 18px rgba(16,34,85,.05);opacity:0;transform:translateY(10px);animation:nodeIn .6s cubic-bezier(.2,.8,.2,1) forwards}
.bp-node:first-child{margin-top:0}
.bp-node i{flex:none;width:18px;height:18px;border-radius:6px;background:var(--a,var(--blue))}
.n1{--a:var(--blue);animation-delay:.2s}.n2{--a:var(--gold);animation-delay:.7s}.n3{--a:var(--mauve);animation-delay:1.2s}.n4{--a:var(--sage);animation-delay:1.7s}
/* connector line + travelling dot */
.bp-node+.bp-node::before{content:"";position:absolute;left:26px;top:-39px;width:2px;height:38px;background:repeating-linear-gradient(to bottom,var(--gold) 0 5px,transparent 5px 10px);transform-origin:top;transform:scaleY(0);animation:lineIn .4s ease forwards;animation-delay:inherit}
.bp-node+.bp-node::after{content:"";position:absolute;left:22px;top:-40px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(214,162,74,.18);animation:travel 2.6s ease-in-out infinite;animation-delay:2.4s;opacity:0}
@keyframes nodeIn{to{opacity:1;transform:none}}
@keyframes lineIn{to{transform:scaleY(1)}}
@keyframes travel{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(34px)}}
.blueprint figcaption{margin-top:20px;text-align:center;color:var(--blue-700);font:700 .72rem/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase}

/* WHY */
.note-dark{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--navy);color:#fff!important;font-weight:600}
.questions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.questions li{position:relative;padding:15px 16px 15px 40px;border-radius:14px;background:var(--ivory);border:1px solid #EDE5D7;color:#3f4b57;font-size:.95rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.questions li::before{content:"?";position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#fff;font:700 .72rem/18px var(--body);text-align:center}
.questions li:hover{transform:translateY(-3px) rotate(-.4deg);border-color:var(--gold);box-shadow:0 10px 24px rgba(214,162,74,.15)}

/* CARDS */
.card{position:relative;overflow:hidden;padding:28px;border-radius:22px;background:#fff;border:1px solid #E1E7F2;box-shadow:0 10px 28px rgba(16,34,85,.05);transition:transform .3s,box-shadow .3s}
.card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-56px;top:-56px;background:var(--s);transition:transform .5s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,34,85,.10)}
.card:hover::after{transform:scale(1.35)}
.card>*{position:relative;z-index:1}
.card h3{color:var(--a);margin:.1em 0 .4em}
.card ul{margin:8px 0 0;padding-left:18px;color:var(--slate)}
.card li{margin:4px 0;font-size:.95rem}.card li::marker{color:var(--a)}
.kicker{color:var(--a);font:700 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:16px 0;padding:0;counter-reset:c}
.chips li{counter-increment:c;padding:7px 12px;border-radius:999px;background:var(--s);color:#3f4b57;font-size:.82rem;font-weight:600}
.chips li::before{content:counter(c) " ";color:var(--a);font-weight:800}

/* UNDERSTAND -> DEFINE */
.arch-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.arch-col{display:grid;gap:10px}
.col-title{text-align:center;color:var(--navy);margin-bottom:4px}
.mini{position:relative;padding:15px 18px 15px 22px;border-radius:14px;background:#fff;border:1px solid #E1E7F2;transition:transform .25s}
.mini::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:9px;background:var(--a)}
.mini:hover{transform:translateX(4px)}
.mini strong{display:block;color:var(--a);font-family:var(--head);font-weight:500;font-size:1.05rem;letter-spacing:.02em}
.mini span{color:var(--slate);font-size:.9rem}
.arch-arrow span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--gold);font-size:1.8rem;box-shadow:0 0 0 10px rgba(16,34,85,.06);animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 18px rgba(16,34,85,.02)}}

/* MVP LADDER */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ladder li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;background:#fff;border:1px solid #DCE5F5;font-weight:600;color:var(--navy);transition:transform .25s,border-color .25s}
.ladder li:nth-child(1){margin-right:50%}.ladder li:nth-child(2){margin-right:40%}.ladder li:nth-child(3){margin-right:30%}.ladder li:nth-child(4){margin-right:20%}.ladder li:nth-child(5){margin-right:10%}
.ladder li span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--pale);color:var(--blue-700);font-size:.85rem}
.ladder li:nth-child(-n+2) span{background:var(--gold);color:#fff}
.ladder li:hover{transform:translateX(6px);border-color:var(--blue)}

/* JOURNEY (navy band) */
.ps-journey{background:radial-gradient(circle at 85% 10%,rgba(214,162,74,.16),transparent 30%),linear-gradient(135deg,#0E1D4A,#173D80);color:#fff;overflow:hidden}
.ps-journey h2{color:#fff}.ps-journey .head p{color:#D2DCF3}
.ps-journey .tag{color:#F0D18F}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;position:relative}
.steps::before{content:"";position:absolute;left:4%;right:4%;top:22px;height:2px;background:rgba(255,255,255,.14)}
.steps::after{content:"";position:absolute;left:4%;top:22px;height:2px;width:92%;background:linear-gradient(90deg,var(--gold),#8CA8FF);transform-origin:left;transform:scaleX(var(--progress,0));transition:transform .5s}
.step{position:relative;padding:44px 14px 20px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .4s,border-color .4s,transform .4s}
.step b{position:absolute;top:10px;left:14px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2A3F78;color:#C9D5FF;font-size:.72rem;transition:background .4s,color .4s}
.step strong{display:block;color:#fff;font-size:.95rem;line-height:1.35}
.step span{display:block;margin-top:6px;color:#C3CEE8;font-size:.82rem;line-height:1.5}
.step.lit{background:rgba(255,255,255,.12);border-color:rgba(240,209,143,.45);transform:translateY(-4px)}
.step.lit b{background:var(--gold);color:var(--navy)}
.journey-note{max-width:860px;margin:28px auto 0;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.07);border-left:4px solid var(--gold);color:#DCE4F6!important;font-size:.95rem}

/* PANELS */
.panel{padding:32px;border-radius:24px;background:#fff;border:1px solid #DCE5F5;box-shadow:0 10px 28px rgba(16,34,85,.05)}
.h2-sm{font-size:clamp(1.5rem,2.6vw,2rem)!important}

/* VENTURES */
.venture{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:22px;background:#fff;border:1px solid #E1E7F2;border-top:4px solid var(--a);color:var(--ink);text-decoration:none;transition:transform .3s,box-shadow .3s}
.venture:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(16,34,85,.12);color:var(--ink)}
.stage{align-self:flex-start;padding:5px 10px;border-radius:999px;background:var(--s);color:var(--a);font:700 .72rem/1.3 var(--body);letter-spacing:.04em}
.venture h3{margin:.5em 0 .3em;color:var(--navy)}
.venture p{flex:1;font-size:.95rem}
.go{color:var(--a);font-weight:700;font-size:.92rem}
.who{margin-top:34px;padding:26px 28px;border-radius:22px;background:var(--ivory);border:1px solid #EDE5D7}
.who h3{margin:0 0 12px;color:var(--navy)}
.who ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.who li{padding:8px 13px;border-radius:999px;background:#fff;border:1px solid #EDE5D7;font-size:.9rem;color:#3f4b57}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid #DDE6FF;border-radius:16px;padding:0 20px;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--blue);box-shadow:0 10px 24px rgba(58,106,253,.08)}
.faq summary{list-style:none;cursor:pointer;padding:18px 30px 18px 0;position:relative;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.5rem;color:var(--blue);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px}

/* CTA */
.ps-cta{padding:0 0 80px}
.cta-panel{position:relative;overflow:hidden;padding:64px 34px;border-radius:30px;text-align:center;background:linear-gradient(135deg,#2450D8,#102255)}
.cta-panel::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-140px;top:-180px;border:1px solid rgba(214,162,74,.35);animation:drift 14s ease-in-out infinite alternate}
.cta-panel::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;left:-70px;bottom:-100px;background:rgba(214,162,74,.12)}
.cta-panel>*{position:relative;z-index:1}
.cta-panel .tag{color:#F0D18F;justify-content:center}
.cta-panel h2{color:#fff;max-width:760px;margin:0 auto .4em}
.cta-panel p{color:#DDE6FA;max-width:620px;margin:0 auto 24px}
.btn-light{background:#fff;color:var(--blue-700);border-color:#fff}
.btn-light:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy)}

/* scroll reveal (only when JS has run) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:1000px){
  .ps-hero-grid,.ps-split{grid-template-columns:1fr;gap:40px}
  .grid4{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps::before,.steps::after{display:none}
  .arch-flow{grid-template-columns:1fr}
  .arch-arrow{justify-self:center;transform:rotate(90deg)}
}
@media(max-width:640px){
  .ps-sec{padding:64px 0}
  .ps-hero{padding:32px 0 64px}
  .grid2,.grid3,.grid4,.questions{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .ladder li:nth-child(n){margin-right:0}
  .actions .btn{flex:1 1 100%;text-align:center}
  .cta-panel{padding:48px 22px}
}
@media(prefers-reduced-motion:reduce){
  .page *,.page *::before,.page *::after{animation:none!important;transition:none!important}
  .bp-node{opacity:1;transform:none}.bp-node+.bp-node::before{transform:none}
  .js .rv{opacity:1;transform:none}
  .steps::after{transform:scaleX(1)}
  .hl{background-size:100% 100%}
}