:root{
 --icn:#0066cc;
 --icn-dark:#004899;
 --icn-light:#eef6ff;
 --border:#dce7f5;
 --text:#111827;
 --muted:#6b7280;
 --navy:#0b1f3a;
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

body{
 font-family:Inter,Segoe UI,sans-serif;
 background:white;
 color:var(--text);
 line-height:1.6;
}

/* ---------- Header ---------- */
header{
 position:sticky;
 top:0;
 z-index:50;
 background:rgba(255,255,255,.92);
 backdrop-filter:blur(8px);
 border-bottom:1px solid var(--border);
}

.hwrap{
 max-width:1200px;
 margin:auto;
 padding:14px 24px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 flex-wrap:wrap;
}

.logo{
 font-size:1rem;
 color:var(--text);
}

.logo b{
 color:var(--icn);
 font-weight:900;
 letter-spacing:-.5px;
}

.logo span{
 color:var(--muted);
 font-size:.85rem;
 margin-left:6px;
}

nav{
 display:flex;
 gap:6px;
 flex-wrap:wrap;
}

nav a{
 font-size:.82rem;
 color:var(--muted);
 text-decoration:none;
 padding:6px 12px;
 border-radius:999px;
 transition:.2s;
}

nav a:hover{
 background:var(--icn-light);
 color:var(--icn);
}

/* ---------- Hero ---------- */
.hero{
 padding:90px 24px 60px;
 text-align:center;
 max-width:900px;
 margin:auto;
}

.eyebrow{
 display:inline-block;
 font-size:.78rem;
 font-weight:700;
 letter-spacing:.08em;
 text-transform:uppercase;
 color:var(--icn);
 background:var(--icn-light);
 padding:6px 14px;
 border-radius:999px;
 margin-bottom:22px;
}

.hero h1{
 font-size:3.4rem;
 font-weight:900;
 letter-spacing:-2px;
 line-height:1.1;
}

.hero h1 em{
 font-style:normal;
 background:linear-gradient(135deg,#0066cc,#5ca9ff);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

.hero .sub{
 margin-top:20px;
 color:var(--muted);
 font-size:1.15rem;
}

/* ---------- Phase flow strip ---------- */
.flow{
 max-width:1100px;
 margin:50px auto 0;
 padding:0 24px;
 display:flex;
 align-items:stretch;
 gap:10px;
 overflow-x:auto;
}

.flow .step{
 flex:1;
 min-width:150px;
 background:var(--icn-light);
 border:1px solid var(--border);
 border-radius:14px;
 padding:16px 14px;
 text-align:left;
}

.flow .step .n{
 font-size:.72rem;
 font-weight:800;
 color:var(--icn);
 letter-spacing:.05em;
}

.flow .step h4{
 font-size:.95rem;
 margin-top:4px;
 color:var(--icn-dark);
}

.flow .step p{
 font-size:.8rem;
 color:var(--muted);
 margin-top:4px;
}

/* ---------- Sections ---------- */
.phase{
 max-width:1100px;
 margin:0 auto;
 padding:70px 24px 0;
}

.phase-head{
 display:flex;
 align-items:baseline;
 gap:16px;
 border-bottom:2px solid var(--icn-light);
 padding-bottom:14px;
 margin-bottom:30px;
}

.phase-head .num{
 font-size:2.6rem;
 font-weight:900;
 color:var(--icn-light);
 line-height:1;
 -webkit-text-stroke:1px var(--border);
}

.phase-head .txt h2{
 font-size:1.7rem;
 color:var(--icn-dark);
}

.phase-head .txt p{
 color:var(--muted);
 margin-top:4px;
 font-size:.98rem;
}

/* card grid */
.grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:18px;
}

.feature{
 border:1px solid var(--border);
 border-radius:16px;
 padding:24px;
 transition:.2s;
}

.feature:hover{
 border-color:var(--icn);
 transform:translateY(-3px);
}

.feature h3{
 color:var(--icn-dark);
 font-size:1.1rem;
 margin-bottom:6px;
 display:flex;
 align-items:center;
 gap:10px;
}

.feature h3 .ico{
 width:34px;
 height:34px;
 flex:none;
 border-radius:9px;
 background:var(--icn-light);
 display:flex;
 align-items:center;
 justify-content:center;
 color:var(--icn);
 font-weight:800;
 font-size:.9rem;
}

.feature p{
 color:var(--muted);
 font-size:.92rem;
}

.feature .lead{
 color:var(--text);
 font-weight:600;
 margin-bottom:8px;
 font-size:.95rem;
}

/* outcome chips */
.chips{
 display:flex;
 gap:8px;
 flex-wrap:wrap;
 margin-top:16px;
}

.chips span{
 background:var(--icn-light);
 color:var(--icn);
 padding:5px 12px;
 border-radius:999px;
 font-size:.74rem;
 font-weight:600;
}

/* ---------- Routing / outcomes band ---------- */
.routing{
 background:var(--navy);
 color:#e7eef8;
 margin-top:80px;
 padding:70px 24px;
}

.routing-inner{
 max-width:1100px;
 margin:auto;
}

.routing h2{
 font-size:1.9rem;
 color:white;
 margin-bottom:6px;
}

.routing .sub{
 color:#9fb6d4;
 margin-bottom:36px;
 max-width:680px;
}

.routes{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:16px;
}

.route{
 background:rgba(255,255,255,.04);
 border:1px solid rgba(255,255,255,.12);
 border-radius:14px;
 padding:20px;
}

.route .tag{
 display:inline-block;
 font-size:.72rem;
 font-weight:700;
 letter-spacing:.05em;
 text-transform:uppercase;
 padding:4px 10px;
 border-radius:999px;
 margin-bottom:10px;
}

.route h4{
 color:white;
 font-size:1.05rem;
 margin-bottom:6px;
}

.route p{
 color:#9fb6d4;
 font-size:.88rem;
}

.tag.go{background:rgba(46,160,99,.18);color:#7ee0a3;}
.tag.soft{background:rgba(224,138,60,.18);color:#f3b878;}
.tag.hold{background:rgba(176,58,46,.2);color:#f0a097;}
.tag.priority{background:rgba(92,169,255,.18);color:#9fc8ff;}

/* ---------- Principles ---------- */
.principles{
 max-width:1100px;
 margin:80px auto 0;
 padding:0 24px;
}

.principles h2{
 font-size:1.9rem;
 color:var(--icn-dark);
 margin-bottom:8px;
}

.principles .sub{
 color:var(--muted);
 margin-bottom:34px;
 max-width:680px;
}

.plist{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:18px;
}

.principle{
 border-left:4px solid var(--icn);
 padding:6px 0 6px 20px;
}

.principle h3{
 color:var(--icn-dark);
 font-size:1.05rem;
 margin-bottom:6px;
}

.principle p{
 color:var(--muted);
 font-size:.92rem;
}

/* ---------- Footer ---------- */
footer{
 margin-top:90px;
 border-top:1px solid var(--border);
 padding:40px 24px;
 text-align:center;
 color:var(--muted);
 font-size:.85rem;
}

footer b{
 color:var(--icn);
}

@media(max-width:640px){
 .hero h1{font-size:2.3rem;}
 .phase-head .num{font-size:2rem;}
}