.site-container {
  width: min(100% - 48px, var(--container-width));
  margin-inline: auto;
}

.site-main {
  min-height: 45vh;
}

.phase-placeholder {
  padding-block: var(--space-20);
  background: var(--color-background);
}

.phase-placeholder__inner {
  width: min(100% - 48px, var(--container-width));
  margin-inline: auto;
}

.phase-placeholder h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(2rem, 5vw, 3rem);
}

.phase-placeholder p {
  max-width: 720px;
  color: var(--color-neutral);
}


/* ===== PHASE 4: PAGE BUILD ===== */
.page-hero { padding: 72px 0; background: linear-gradient(135deg, #f7f9fc 0%, #eef4fb 100%); border-bottom: 1px solid var(--color-border); }
.page-hero__grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:64px; align-items:center; }
.page-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--color-secondary); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.page-hero h1 { max-width:850px; font-size:clamp(2.4rem,5vw,4.6rem); letter-spacing:-.035em; }
.page-hero__lead { max-width:760px; margin-top:20px; color:var(--color-neutral); font-size:var(--text-lg); }
.page-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.page-section { padding:72px 0; }
.page-section--soft { background:var(--color-background); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.section-heading h2 { font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.025em; }
.section-heading p { max-width:700px; color:var(--color-neutral); }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; padding:22px 0; color:var(--color-neutral); font-size:var(--text-sm); }
.breadcrumb a:hover { color:var(--color-secondary); }
.breadcrumb span:not(:last-child)::after { content:'/'; margin-left:8px; color:#cbd5e1; }
.hero-showcase { position:relative; min-height:360px; border:1px solid var(--color-border); border-radius:24px; background:var(--color-white); box-shadow:var(--shadow-md); overflow:hidden; }
.hero-showcase::before { content:''; position:absolute; width:280px; height:280px; border-radius:50%; right:-80px; top:-100px; background:rgba(29,88,184,.08); }
.hero-showcase__card { position:absolute; min-width:190px; padding:22px; border:1px solid var(--color-border); border-radius:16px; background:#fff; box-shadow:0 18px 42px rgba(15,37,63,.12); font-family:var(--font-heading); font-weight:800; }
.hero-showcase__card small { display:block; margin-top:5px; color:var(--color-neutral); font-family:var(--font-body); font-weight:500; }
.hero-showcase__card--one { left:34px; top:42px; transform:rotate(-4deg); }
.hero-showcase__card--two { right:34px; top:132px; transform:rotate(3deg); }
.hero-showcase__card--three { left:78px; bottom:34px; transform:rotate(-1deg); }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.info-card, .service-card, .portfolio-card { border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-white); overflow:hidden; }
.info-card { padding:24px; }
.info-card h3, .service-card h3, .portfolio-card h3 { margin-bottom:8px; font-size:var(--text-xl); }
.info-card p, .service-card p, .portfolio-card p { color:var(--color-neutral); font-size:var(--text-sm); }
.category-card { display:flex; min-height:170px; flex-direction:column; justify-content:space-between; padding:24px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-white); transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.category-card:hover { transform:translateY(-3px); border-color:#b9c7db; box-shadow:var(--shadow-md); }
.category-card__icon { display:grid; width:48px; height:48px; place-items:center; border-radius:12px; background:rgba(29,88,184,.08); color:var(--color-secondary); font-family:var(--font-heading); font-weight:800; }
.category-card__title { margin-top:24px; font-family:var(--font-heading); font-size:var(--text-lg); font-weight:800; }
.category-card__link { margin-top:10px; color:var(--color-secondary); font-size:var(--text-sm); font-weight:700; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.product-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:#fff; transition:transform 160ms ease, box-shadow 160ms ease; }
.product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.product-card__media { display:grid; min-height:210px; place-items:center; padding:24px; background:linear-gradient(145deg,#f7f9fc,#eef3f9); color:#93a4b8; font-family:var(--font-heading); font-weight:800; text-align:center; }
.product-card__body { display:flex; flex:1; flex-direction:column; padding:22px; }
.product-card__title { font-size:var(--text-lg); }
.product-card__description { margin-top:8px; color:var(--color-neutral); font-size:var(--text-sm); }
.product-card__bottom { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:auto; padding-top:20px; }
.product-card__price-label { color:var(--color-neutral); font-size:var(--text-xs); }
.product-card__price { display:block; color:var(--color-primary); font-family:var(--font-heading); font-size:var(--text-lg); font-weight:800; }
.text-link { color:var(--color-secondary); font-size:var(--text-sm); font-weight:800; }
.feature-list { display:grid; gap:14px; }
.feature-list li { position:relative; padding-left:28px; color:#334155; }
.feature-list li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--color-secondary); font-weight:800; }
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.process-step { position:relative; padding:24px; border-top:3px solid var(--color-gold); background:#fff; }
.process-step__number { display:block; margin-bottom:12px; color:var(--color-secondary); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:800; }
.cta-band { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:40px; border-radius:22px; background:var(--color-primary); color:#fff; }
.cta-band h2 { font-size:clamp(1.7rem,3vw,2.35rem); }
.cta-band p { max-width:700px; margin-top:8px; color:rgba(255,255,255,.72); }
.service-card { display:flex; min-height:230px; flex-direction:column; padding:26px; }
.service-card .text-link { margin-top:auto; padding-top:24px; }
.portfolio-card__visual { display:grid; min-height:220px; place-items:center; background:linear-gradient(145deg,#eef4fb,#f8fafc); color:#8799ad; font-family:var(--font-heading); font-weight:800; }
.portfolio-card__body { padding:20px; }
.content-shell { max-width:920px; }
.content-shell h2 { margin:42px 0 14px; font-size:var(--text-2xl); }
.content-shell h3 { margin:28px 0 10px; }
.content-shell p + p { margin-top:14px; }
.content-shell p, .content-shell li { color:#475569; }
.content-shell ul { display:grid; gap:10px; }
.table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.data-table { width:100%; border-collapse:collapse; background:#fff; }
.data-table th, .data-table td { padding:14px 16px; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:top; }
.data-table th { background:#f8fafc; color:var(--color-primary); font-size:var(--text-sm); }
.data-table tr:last-child td { border-bottom:0; }
.faq-list { display:grid; gap:12px; }
.faq-item { border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; }
.faq-item summary { cursor:pointer; padding:18px 20px; font-family:var(--font-heading); font-weight:700; }
.faq-item p { padding:0 20px 18px; color:var(--color-neutral); }
.price-card { display:flex; flex-direction:column; padding:26px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:#fff; }
.price-card__name { font-family:var(--font-heading); font-size:var(--text-lg); font-weight:800; }
.price-card__price { margin:12px 0; font-family:var(--font-heading); font-size:2.2rem; font-weight:800; color:var(--color-primary); }
.price-card__period { color:var(--color-neutral); font-size:var(--text-sm); }
.price-card .feature-list { margin-top:18px; }
.price-card .btn { margin-top:auto; padding-top:.7rem; }
.empty-note { padding:22px; border:1px dashed var(--color-border-strong); border-radius:var(--radius-md); color:var(--color-neutral); background:#fff; }
@media (max-width:1100px) { .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-grid,.grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .page-hero__grid { grid-template-columns:1fr; gap:36px; } .hero-showcase { min-height:300px; } }
@media (max-width:767px) { .page-hero { padding:52px 0; } .page-section { padding:52px 0; } .grid-4,.grid-3,.grid-2,.product-grid,.process-grid { grid-template-columns:1fr; } .section-heading,.cta-band { align-items:flex-start; flex-direction:column; } .cta-band { padding:28px; } .hero-showcase { min-height:280px; } .hero-showcase__card { min-width:160px; padding:18px; } .hero-showcase__card--one { left:18px; top:28px; } .hero-showcase__card--two { right:18px; top:105px; } .hero-showcase__card--three { left:42px; bottom:24px; } }