:root{--accent:#c8ef66}

/* Shared Ozfer network in the compact header */
.site-header{gap:1rem}
.site-header nav{gap:1rem}
.header-socials{display:flex;align-items:center;gap:3px;flex:none}
.header-socials a{width:1.72rem;height:1.72rem;display:grid;place-items:center;border:1px solid var(--line);transition:background .18s,color .18s,border-color .18s}
.header-socials a:hover{background:var(--black);color:#fff;border-color:var(--black)}
.header-socials svg{width:.82rem;height:.82rem;fill:currentColor}
.hero-label{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.7rem}
.hero-label .eyebrow{margin:0}
.hero-label>a{font:500 .66rem "IBM Plex Mono",monospace;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:.12rem}
.hero h1 em{text-decoration-color:var(--accent)}
.button-primary:hover,.header-cta:hover{background:var(--accent);color:var(--black)}
.trust-strip{background:var(--accent)}

/* From domain name to a complete Ozfer brand */
.ecosystem{background:var(--black);color:#fff;border-top:1px solid var(--black);border-bottom:1px solid var(--black)}
.ecosystem-head,.showcase-head{display:grid;grid-template-columns:.48fr 1.52fr;gap:5vw;margin-bottom:3.2rem}
.ecosystem-head h2,.showcase-head h2{font-size:clamp(2.45rem,4.8vw,5.2rem);line-height:.94;letter-spacing:-.06em;margin:0}
.ecosystem-head h2 em{font-style:normal;color:var(--accent)}
.ecosystem-head>div:last-child>p,.showcase-head>div:last-child>p{max-width:42rem;margin:1.35rem 0 0;color:#bdbdb8;font-size:.92rem}
.section-note{margin:.7rem 0 0;color:var(--mid);font:400 .72rem/1.45 "IBM Plex Mono",monospace}
.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #fff;border-left:1px solid #fff}
.package-card{min-height:26rem;background:var(--white);color:var(--black);border-right:1px solid #fff;border-bottom:1px solid #fff;padding:1.4rem;display:flex;flex-direction:column}
.package-card.package-accent{background:var(--accent)}
.package-card.package-fast{background:var(--accent)}
.package-top{display:flex;justify-content:space-between;gap:1rem;font:500 .66rem "IBM Plex Mono",monospace}
.package-top strong{font-weight:500;text-align:right}
.package-price{display:flex;align-items:baseline;gap:.45rem;margin-top:2rem;font-family:"IBM Plex Mono",monospace}
.package-price b{font:600 clamp(2.15rem,3.3vw,3.65rem)/1 "Space Grotesk",Arial,sans-serif;letter-spacing:-.06em}
.package-price small{font-size:.56rem;letter-spacing:.04em}
.package-card h3{font-size:clamp(1.65rem,2.3vw,2.65rem);line-height:.96;letter-spacing:-.055em;margin:1.35rem 0 .8rem}
.package-card p{font-size:.9rem;color:var(--graphite);max-width:25rem}
.package-link{align-self:flex-start;margin:.3rem 0 1.1rem;border-bottom:1px solid currentColor;font:600 .66rem "IBM Plex Mono",monospace;text-transform:uppercase}
.package-card ul{list-style:none;padding:1rem 0 0;margin:auto 0 0;border-top:1px solid var(--line)}
.package-card li{padding:.42rem 0;font:500 .72rem "IBM Plex Mono",monospace;text-transform:uppercase}
.package-card li+li{border-top:1px solid var(--soft)}
.package-note{margin:1rem 0 0;max-width:68rem;color:#c8c8c3;font:400 .68rem/1.55 "IBM Plex Mono",monospace}
.ecosystem-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.3rem 0 0}
.ecosystem-cta p{margin:0;color:#c8c8c3;font-size:.85rem}
.ecosystem-cta a,.portfolio-link{display:inline-flex;background:var(--accent);color:var(--black);padding:.72rem .9rem;font-weight:600;font-size:.8rem}

/* A small, clearly labelled selection from the main portfolio */
.showcase{background:#ededE8;border-bottom:1px solid var(--black)}
.showcase-head>div:last-child>p{color:var(--mid)}
.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--black);border-left:1px solid var(--black)}
.showcase-card{min-height:22rem;border-right:1px solid var(--black);border-bottom:1px solid var(--black);padding:1.35rem;display:flex;flex-direction:column;transition:background .18s,color .18s}
.showcase-card:hover{background:var(--black);color:#fff}
.showcase-card>span{font:400 .66rem "IBM Plex Mono",monospace;color:var(--mid);margin-top:1.1rem}
.showcase-card h3{font-size:clamp(1.75rem,2.8vw,3.1rem);line-height:.96;letter-spacing:-.055em;margin:3.5rem 0 .65rem}
.showcase-card p{color:var(--mid);font-size:.82rem;margin:0}
.showcase-card strong{margin-top:auto;padding-top:1.5rem;font:500 .7rem "IBM Plex Mono",monospace;text-transform:uppercase}
.project-mark{width:3.6rem;height:3.6rem;display:grid;place-items:center;font-weight:700;letter-spacing:-.04em}
.mark-tb{background:#e7f0e7;color:#102d20}.mark-rj{background:#c8ef66;color:#111}.mark-ton{background:#2d6cdf;color:#fff}
.portfolio-link{margin-top:1.25rem;background:var(--black);color:#fff}
.portfolio-link:hover,.ecosystem-cta a:hover{background:#fff;color:var(--black)}

.statement h2{max-width:64rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.footer-links a{color:var(--black);border-bottom:1px solid var(--line)}
footer{grid-template-columns:1fr 1.2fr 1fr auto}

@media(max-width:1250px){
  .site-header nav{display:none}
  .package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  .ecosystem-head,.showcase-head{grid-template-columns:1fr;gap:2rem}
  .package-grid,.showcase-grid{grid-template-columns:1fr}
  .package-card{min-height:21rem}
  .showcase-card{min-height:17rem}
  .ecosystem-cta{align-items:flex-start;flex-direction:column}
  footer{grid-template-columns:1fr 1fr}
  footer p:last-child{grid-column:1/-1}
}

@media(max-width:720px){
  .site-header{padding-inline:.75rem;gap:.5rem}
  .brand strong{display:none}
  .header-socials{gap:2px;margin-left:auto}
  .header-socials a{width:1.48rem;height:1.48rem}
  .header-socials svg{width:.72rem;height:.72rem}
  .header-cta{font-size:.66rem;padding:.48rem .5rem}
  .header-cta span{display:none}
  .hero-label{align-items:flex-start;flex-direction:column;gap:.65rem}
  .ecosystem-head,.showcase-head{margin-bottom:2.3rem}
  .ecosystem-head h2,.showcase-head h2{font-size:2.75rem}
  .package-card{min-height:19rem;padding:1.2rem}
  .package-card h3{margin-top:1.15rem}
  .showcase-card{min-height:15.5rem;padding:1.15rem}
  .showcase-card h3{margin-top:2.4rem}
  .ecosystem-cta a,.portfolio-link{width:100%;justify-content:center;text-align:center}
  footer{grid-template-columns:1fr}
  footer p:last-child{grid-column:auto}
}

@media(max-width:390px){
  .site-header{padding-inline:.55rem}
  .header-socials a{width:1.35rem;height:1.35rem}
  .header-socials svg{width:.66rem;height:.66rem}
}

.package-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.package-card{grid-column:span 2}
.package-fast,.package-complete{grid-column:span 3}
.package-complete{background:#e6ebde}
@media(max-width:900px){.package-grid{grid-template-columns:1fr}.package-card,.package-fast,.package-complete{grid-column:auto}}