/* --- Page scope --- */
.wwm { --bg:#0b0b0f; --fg:#f5f7fb; --muted:#c6c9d5; --brand:#f9532d; --card:#141420; --line:#232538; }

html, body.wwm { height:100% }
body.wwm { margin:0; background:var(--bg); color:var(--fg);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; line-height:1.5;
}

.wwm a { color:var(--fg); text-decoration:none }
.wwm .container { max-width:1100px; margin:0 auto; padding:24px }

/* header – override global header rules from index.css */
.wwm header { position: sticky; top:0; backdrop-filter:saturate(140%) blur(6px);
    background:rgba(11,11,15,.7); border-bottom:1px solid var(--line); z-index:20; width:auto; box-shadow:none;
}
.wwm .nav { display:flex; align-items:center; justify-content:space-between; gap:12px }
.wwm .brand { font-weight:700; font-size:1.125rem }
.wwm .nav a.button { background:var(--brand); color:#fff; padding:.6rem 1rem; border-radius:14px; font-weight:600 }
.wwm .nav a.outline { background:transparent; border:1px solid var(--line) }

/* hero */
.wwm .hero { padding:64px 0 32px; display:grid; gap:18px }
.wwm .hero h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0; animation: wwm-top 600ms ease both }
.wwm .hero p { color:var(--muted); max-width:70ch; margin:0 }
.wwm .badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.wwm .badge { border:1px solid var(--line); border-radius:999px; padding:6px 10px; color:var(--muted); font-size:.85rem }

/* grid & cards – scoped so global .card styles don’t leak here */
.wwm .grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.wwm .card { grid-column:span 12; background:var(--card); border:1px solid var(--line);
    border-radius:18px; padding:18px; transition: transform .18s ease, box-shadow .25s ease;
}
.wwm .card h3 { margin:.2rem 0 .6rem; font-size:1.2rem }
.wwm .card:hover { transform: translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.25) }

@media (min-width:720px){
    .wwm .card.sm-6{grid-column:span 6}
    .wwm .card.sm-4{grid-column:span 4}
    .wwm .card.sm-8{grid-column:span 8}
}

.wwm .muted { color:var(--muted) }
.wwm .list { display:grid; gap:8px; margin:10px 0 0; padding:0; list-style:none }
.wwm .list li { display:flex; gap:8px }
.wwm .check { color:#6ee7a8 }
.wwm .price { font-weight:800; font-size:1.4rem }
.wwm .cta { display:flex; flex-wrap:wrap; gap:10px }
.wwm button, .wwm .button { background:var(--brand); color:#fff; border:none; padding:.8rem 1.1rem; border-radius:14px; font-weight:700; cursor:pointer }
.wwm .outline { background:transparent; border:1px solid var(--line) }

.wwm .footer { border-top:1px solid var(--line); margin-top:40px; padding:24px 0; color:var(--muted) }
.wwm .kicker { letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-size:.8rem }
.wwm .pill { display:inline-block; background:rgba(249,83,45,.15); border:1px solid rgba(249,83,45,.35); color:#ffd1c5; padding:4px 10px; border-radius:999px; font-weight:600 }
.wwm .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace }

/* form */
.wwm form { display:grid; gap:12px }
.wwm input, .wwm textarea { background:#0f0f16; border:1px solid var(--line); border-radius:12px; color:var(--fg); padding:.8rem 1rem; font:inherit }
.wwm textarea { min-height:120px }
.wwm .note { font-size:.9rem; color:var(--muted) }

/* skip link */
.wwm .skip-link{ position:absolute; left:-9999px }
.wwm .skip-link:focus{ left:12px; top:12px; background:#fff; color:#000; padding:8px 12px; border-radius:8px; z-index:999 }
/* Compact, gradient-border tiles like your first screenshot */
#services.services-tiles .grid{
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    justify-content:center;
}

#services.services-tiles .card{
    width: 320px;              /* ~3 per row on desktop */
    min-height: 200px;
    padding: 22px;
    text-align:center;
    border-radius: 14px;
    border: 2px solid transparent;
    background:
            linear-gradient(#0f0f16, #0f0f16) padding-box,
            linear-gradient(135deg, #4ea3ff, #ff4d5a) border-box; /* blue→pink */
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .25s ease;
}

#services.services-tiles .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0,0,0,.35);
}

#services.services-tiles .card h3{
    margin: 6px 0 10px;
    font-size: 1.15rem;
}

#services.services-tiles .card .muted{
    color:#c6c9d5;
}

#services.services-tiles .card .list{
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

#services.services-tiles .card .list li{
    display:block;             /* no left flex alignment */
}

#services.services-tiles .card .check{
    color:#6ee7a8;             /* green tick like screenshot */
}

/* Responsive: 2 per row on tablets, 1 on phones */
@media (max-width: 900px){ #services.services-tiles .card{ width: 320px; } }
@media (max-width: 680px){ #services.services-tiles .card{ width: 100%; } }


/* local keyframes (renamed to avoid collisions with index.css) */
@keyframes wwm-left { from{ transform:translateX(-100px); opacity:0 } to{ transform:translateX(0); opacity:1 } }
@keyframes wwm-top  { from{ transform:translateY(-100px); opacity:0 } to{ transform:translateY(0); opacity:1 } }