/* WasteMaid Landing Page - standalone responsive CSS */
:root{
    --bg:#eef3f8;
    --surface:#ffffff;
    --surface-soft:#f7f9fc;
    --ink:#0f172a;
    --text:#334155;
    --muted:#64748b;
	--accent:#6600ff;
    --line:#dbe4ef;
    --primary:#1f6fff;
    --primary-2:#0b50d8;
    --navy:#041634;
    --navy-2:#081f4b;
    --success:#1d4ed8;
    --shadow:0 12px 36px rgba(15,23,42,.08);
    --radius:24px;
    --radius-sm:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}

.wm-container{width:min(1180px, calc(100% - 40px)); margin:0 auto}

.wm-header{
    position:relative; top:0; z-index:30;
    backdrop-filter:saturate(140%) blur(14px);
    background:rgba(4,22,52,.74);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.wm-header__inner{
    display:flex; align-items:center; justify-content:space-between;
    min-height:74px;
}
.wm-logo{display:inline-flex; align-items:center; gap:12px; color:#fff; font-weight:800; letter-spacing:-.02em}
.wm-logo__mark{
    width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg,#4b8dff,#0d4bd3); color:#fff; font-size:18px; box-shadow:0 6px 18px rgba(31,111,255,.35);
}
.wm-logo__text{font-size:20px}
.wm-topnav{display:flex; gap:28px; color:rgba(255,255,255,.82); font-size:15px}
.wm-topnav a:hover{color:#fff}

.wm-hero{
    position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 15% 20%, rgba(52,116,255,.28), transparent 28%),
      radial-gradient(circle at 80% 78%, rgba(31,111,255,.18), transparent 18%),
      linear-gradient(135deg, #031127 0%, #081d45 42%, #031127 100%);
    color:#fff;
    padding:72px 20px 78px;
}
.wm-hero__grid{
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px, .9fr);
    gap:38px; align-items:center;
}
.wm-hero__copy h1{
    font-size:clamp(40px, 6vw, 54px);
    line-height:1.3; margin:18px 0 20px; letter-spacing:-.045em;
}
.wm-hero__copy p{
    max-width:680px; color:rgba(255,255,255,.88); font-size:18px; margin:0 0 28px;
}
.wm-pill{
    display:inline-flex; align-items:center; padding:10px 16px; border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
    font-weight:900; font-size:20px; color:#ffe804;
}
.wm-hero__actions{display:flex; gap:14px; flex-wrap:wrap}

.wm-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:56px; padding:0 24px; border-radius:18px; font-size:16px; font-weight:800;
    transition:.22s ease; border:1px solid transparent;
}
.wm-btn--primary{
    color:#fff; background:linear-gradient(180deg, var(--primary), var(--primary-2));
    box-shadow:0 14px 28px rgba(31,111,255,.28);
}
.wm-btn--primary:hover{transform:translateY(-1px)}
.wm-btn--ghost{
    color:#fff; background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.22);
}
.wm-btn--ghost:hover{background:rgba(255,255,255,.08)}
.wm-btn--full{width:100%}
.wm-btn--footer{min-height:52px}

.wm-hero__card{
    position:relative;
    padding:28px 28px 26px;
    border-radius:30px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(132,177,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 20px 60px rgba(5,15,35,.35);
}
.wm-ribbon{
    position:absolute; top:0; right:0; padding:10px 16px;
    border-radius:0 30px 0 20px;
    background:linear-gradient(135deg, #4f8cff, #0f5fff);
    font-size:13px; font-weight:800;
}
.wm-card-icon{
    width:62px; height:62px; border-radius:20px;
    display:grid; place-items:center; margin-bottom:14px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.wm-card-icon svg{width:28px; height:28px; stroke:#8cb6ff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.wm-hero__card h2{margin:0 0 6px; font-size:34px; line-height:1.15; letter-spacing:-.03em}
.wm-hero__card-sub{margin:0 0 14px; color:rgba(255,255,255,.66); font-size:14px}
.wm-checklist{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.wm-checklist li{display:flex; align-items:flex-start; gap:12px; font-size:18px; font-weight:700}
.wm-check{
    width:22px; height:22px; flex:0 0 22px; border-radius:999px;
    margin-top:2px; background:linear-gradient(180deg, #2c82ff, #1457dc);
    position:relative; box-shadow:0 6px 12px rgba(31,111,255,.28);
}
.wm-check:before{
    content:""; position:absolute; inset:0;
    margin:auto; width:9px; height:5px;
    border-left:2px solid #fff; border-bottom:2px solid #fff;
    transform:rotate(-45deg); top:-1px;
}

.wm-hero__glow{position:absolute; border-radius:999px; filter:blur(12px); pointer-events:none}
.wm-hero__glow--one{width:320px;height:320px;right:-80px;bottom:-120px;background:radial-gradient(circle, rgba(31,111,255,.26), transparent 68%)}
.wm-hero__glow--two{width:420px;height:420px;left:-140px;top:-140px;background:radial-gradient(circle, rgba(31,111,255,.18), transparent 70%)}

.wm-section{padding:96px 0}
.wm-section--dark{padding-top:30px}
.wm-section--soft{background:linear-gradient(180deg,#f8fbff 0%, #eff5fb 100%)}
.wm-section-head{max-width:860px; margin:0 auto 42px; text-align:center}
.wm-kicker{
    display:inline-block; margin-bottom:10px; font-size:13px; font-weight:800;
    letter-spacing:.14em; color:var(--primary); text-transform:uppercase;
}
.wm-kicker--light{color:#88b1ff}
.wm-section-head h2{
    margin:0 0 12px; font-size:clamp(30px, 4vw, 52px); line-height:1.16; letter-spacing:-.04em;
}
.wm-section-head p{margin:0; font-weight:800; font-size:22px; color:var(--accent)}
.wm-section-head p span{margin:0; font-weight:800; font-size:20px; color:var(--muted)}

.wm-card-grid{display:grid; gap:22px}
.wm-card-grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.wm-card-grid--6{grid-template-columns:repeat(3, minmax(0,1fr))}
.wm-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 24px;
    box-shadow:var(--shadow);
}

.wm-benefit-card{
    min-height:196px;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wm-benefit-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 34px rgba(16, 42, 88, .10);
}
.wm-benefit-card .wm-icon-circle{
    background:rgba(255,255,255,.55);
}
.wm-benefit-card h3{
    margin-top:16px;
    font-size:22px;
    line-height:1.25;
}
.wm-benefit-card p{
    font-size:15px;
    line-height:1.6;
}
.wm-benefit-card--1{background:linear-gradient(180deg,#fff6f8 0%,#fffafb 100%); border-color:#ffd7df;}
.wm-benefit-card--1 h3{color:#b72c52;}
.wm-benefit-card--1 p{color:#89606a;}
.wm-benefit-card--1 .wm-icon-circle{border-color:#f0c8d3;}
.wm-benefit-card--1 .wm-icon-circle svg{stroke:#d14f68;}

.wm-benefit-card--2{background:linear-gradient(180deg,#f5f8ff 0%,#fbfcff 100%); border-color:#d9e7ff;}
.wm-benefit-card--2 h3{color:#2c59c6;}
.wm-benefit-card--2 p{color:#6678a0;}
.wm-benefit-card--2 .wm-icon-circle{border-color:#cfdcff;}
.wm-benefit-card--2 .wm-icon-circle svg{stroke:#4f79de;}

.wm-benefit-card--3{background:linear-gradient(180deg,#f6fbff 0%,#fbfeff 100%); border-color:#d5ebf5;}
.wm-benefit-card--3 h3{color:#2675a6;}
.wm-benefit-card--3 p{color:#5e7f92;}
.wm-benefit-card--3 .wm-icon-circle{border-color:#c7e2ee;}
.wm-benefit-card--3 .wm-icon-circle svg{stroke:#3991c4;}

.wm-benefit-card--4{background:linear-gradient(180deg,#fff8f2 0%,#fffdf9 100%); border-color:#f6dfc7;}
.wm-benefit-card--4 h3{color:#bc6a1d;}
.wm-benefit-card--4 p{color:#8b765f;}
.wm-benefit-card--4 .wm-icon-circle{border-color:#f1d6b6;}
.wm-benefit-card--4 .wm-icon-circle svg{stroke:#d68a3b;}

.wm-benefit-card--5{background:linear-gradient(180deg,#f6fbf8 0%,#fbfffd 100%); border-color:#d4eadf;}
.wm-benefit-card--5 h3{color:#2a8261;}
.wm-benefit-card--5 p{color:#63806f;}
.wm-benefit-card--5 .wm-icon-circle{border-color:#cae2d5;}
.wm-benefit-card--5 .wm-icon-circle svg{stroke:#44a17c;}

.wm-benefit-card--6{background:linear-gradient(180deg,#faf7ff 0%,#fdfcff 100%); border-color:#e1d8f6;}
.wm-benefit-card--6 h3{color:#7652bb;}
.wm-benefit-card--6 p{color:#776f92;}
.wm-benefit-card--6 .wm-icon-circle{border-color:#ddd2f4;}
.wm-benefit-card--6 .wm-icon-circle svg{stroke:#8e70d2;}
.wm-card h3{margin:16px 0 10px; font-size:27px; line-height:1.22; letter-spacing:-.03em}
.wm-card p{margin:0; color:var(--muted); font-size:16px}
.wm-card--compact{text-align:center; padding:24px 18px}
.wm-card--compact h3{font-size:23px; margin-top:14px}
.wm-card--compact p{font-size:15px}
.wm-card--step{position:relative; text-align:center; padding-bottom:84px}
.wm-step-label{
    position:absolute; left:24px; right:24px; bottom:22px;
    min-height:46px; display:grid; place-items:center;
    background:linear-gradient(180deg, var(--primary), var(--primary-2));
    color:#fff; border-radius:14px; font-weight:800; letter-spacing:.05em;
}
.wm-icon-circle{
    width:74px; height:74px; border-radius:999px;
    display:grid; place-items:center; margin:0 auto;
    border:1.5px solid rgba(31,111,255,.25);
    background:linear-gradient(180deg,#f9fbff,#eff5ff);
}
.wm-icon-circle--small{width:58px; height:58px}
.wm-icon-circle svg{
    width:30px; height:30px; stroke:var(--primary); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

.wm-compare{
    position:relative;
    margin-top:28px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:88px;
    align-items:stretch;
}
.wm-compare__card{
    position:relative; z-index:1;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:30px;
    padding:28px; box-shadow:var(--shadow);
}
.wm-compare__card h3{margin:14px 0 12px; font-size:28px; letter-spacing:-.03em}
.wm-compare__card ul{margin:0; padding-left:20px; color:var(--text); font-size:17px}
.wm-compare__card li+li{margin-top:8px}
.wm-compare__card--before{
    background:linear-gradient(180deg,#fff6f8 0%, #fffafb 100%);
    border-color:#ffd7df;
}
.wm-compare__card--before h3{padding-left:30px; color:#ad2347}
.wm-compare__card--before ul{padding-left:30px; color:#7a4a55}
.wm-compare__card--after{
    background:linear-gradient(180deg,#f4f8ff 0%, #f8fbff 100%);
    border-color:#d9e7ff;
}
.wm-compare__card--after h3{padding-left:30px; font-size:30px; font-weight:800; color:#1e4fcf}
.wm-compare__card--after ul{padding-left:30px; color:#405a8d}
.wm-tag{
    display:inline-flex; align-items:center; min-height:34px; margin-left:30px; padding:0 12px;
    border-radius:999px; font-weight:800; font-size:13px;
}
.wm-tag--before{background:#ffeef1; color:#d14f68}
.wm-tag--after{background:#edf3ff; color:#2866e8}
.wm-compare__arrow{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:190px;
    display:grid;
    place-items:center;
    z-index:3;
    pointer-events:none;
}
.wm-compare__arrow img{
    width:172px; max-width:100%; height:auto;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 16px 26px rgba(31,111,255,.16));
}

.wm-membership{
    border-radius:32px;
    background:linear-gradient(135deg, #041634 0%, #082153 100%);
    color:#fff; padding:34px; box-shadow:0 20px 50px rgba(3,17,39,.24);
    display:grid; grid-template-columns:108px 1fr; gap:24px;
}
.wm-membership__badge{
    width:96px; height:96px; border-radius:28px;
    display:grid; place-items:center;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.wm-membership__badge svg{width:48px;height:48px;stroke:#8cb6ff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wm-membership h2{margin:0 0 10px; font-size:42px; line-height:1.14; letter-spacing:-.04em}
.wm-membership p{margin:0 0 18px; color:rgba(255,255,255,.82); font-size:17px}
.wm-mini-points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.wm-mini-point{
    display:flex; align-items:flex-start; gap:12px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12); color:#fff; font-size:15px;
}

.wm-footnote{text-align:center; color:var(--muted); margin:18px 0 0; font-size:14px}

.wm-faq-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.wm-faq{
    background:var(--surface); border:1px solid var(--line); border-radius:22px;
    overflow:hidden; box-shadow:var(--shadow)
}
.wm-faq__button{
    border:0; background:none; width:100%; cursor:pointer;
    padding:22px 22px; display:grid; grid-template-columns:42px 1fr 24px; gap:14px; align-items:center; text-align:left;
}
.wm-faq__q{
    width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
    color:var(--primary); background:#edf3ff; font-weight:900;
}
.wm-faq__title{font-size:21px; font-weight:800; line-height:1.3; letter-spacing:-.02em}
.wm-faq__toggle{font-size:28px; line-height:1; color:var(--primary)}
.wm-faq__answer{
    max-height:0; overflow:hidden; transition:max-height .24s ease;
    padding:0 22px;
}
.wm-faq__answer p{margin:0 0 20px; color:var(--muted); font-size:16px}
.wm-faq.is-open .wm-faq__answer{max-height:180px}
.wm-faq.is-open .wm-faq__toggle{transform:rotate(45deg)}

.wm-apply{
    padding:28px 0 96px;
}
.wm-apply__wrap{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(340px, 500px);
    gap:28px; align-items:start;
    padding:34px; border-radius:32px; box-shadow:var(--shadow);
    background:linear-gradient(135deg, #041634 0%, #0a2358 100%);
    color:#fff;
}
.wm-apply__copy h2{margin:0 0 12px; font-size:42px; line-height:1.16; letter-spacing:-.04em}
.wm-apply__copy p{margin:0; color:rgba(255,255,255,.82); font-size:17px}
.wm-form{
    padding:24px; border-radius:26px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)
}
.wm-form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
.wm-form__full{grid-column:1/-1}
.wm-form label{display:block; font-size:14px; font-weight:700}
.wm-form input,.wm-form textarea{
    width:100%; margin-top:8px; border-radius:14px; border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08); min-height:50px; padding:0 14px; color:#fff;
}
.wm-form textarea{padding:14px; min-height:120px; resize:vertical}
.wm-form input::placeholder,.wm-form textarea::placeholder{color:rgba(255,255,255,.46)}
.wm-checkline{display:flex!important; align-items:center; gap:10px; font-weight:500!important; margin-bottom:16px}
.wm-checkline input{width:18px!important; min-height:18px!important; margin:0!important}

.wm-footer{
    background:#041634; color:#fff; padding:28px 0; border-top:1px solid rgba(255,255,255,.08)
}
.wm-footer__inner{display:grid; grid-template-columns:1fr auto auto; gap:20px; align-items:center}
.wm-footer__brand p{margin:10px 0 0; color:rgba(255,255,255,.68); font-size:14px}
.wm-footer__links{display:flex; gap:18px; color:rgba(255,255,255,.8); font-size:14px}
.wm-logo--footer .wm-logo__mark{width:30px; height:30px; font-size:16px}

@media (max-width: 1180px){
    .wm-card-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 960px){
    .wm-topnav{display:none}
    .wm-card-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
    .wm-hero__grid,
    .wm-apply__wrap,
    .wm-membership{grid-template-columns:1fr}
    .wm-card-grid--3,
    .wm-faq-grid,
    .wm-mini-points,
    .wm-form__row{grid-template-columns:1fr}
    .wm-compare{
        grid-template-columns:1fr;
        gap:0;
        position:relative;
        padding:0;
    }
    .wm-compare__card--before{margin-bottom:108px}
    .wm-compare__card--after{margin-top:108px}
    .wm-compare__arrow{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        width:160px;
        z-index:4;
    }
    .wm-compare__arrow img{
        width:160px;
        max-width:none;
    }
    .wm-membership__badge{width:84px;height:84px}
    .wm-footer__inner{grid-template-columns:1fr; justify-items:start}
}
@media (max-width: 640px){
    .wm-container{width:min(100% - 28px, 1180px)}
    .wm-hero{padding:56px 0 62px}
    .wm-hero__copy h1{font-size:38px}
    .wm-hero__copy p,
    .wm-section-head p,
    .wm-card p,
    .wm-membership p,
    .wm-apply__copy p{font-size:15px}
    .wm-hero__card h2,
    .wm-section-head h2,
    .wm-membership h2,
    .wm-apply__copy h2{font-size:30px}
    .wm-card-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
    .wm-btn{width:100%}
    .wm-hero__actions{display:grid; grid-template-columns:1fr}
    .wm-card h3,.wm-faq__title,.wm-compare__card h3{font-size:22px}
    .wm-section{padding:72px 0}
    .wm-apply{padding-bottom:72px}

    .wm-compare__card{
        padding:24px 20px;
        border-radius:26px;
    }
    .wm-compare__card--after{
        padding-left:20px;
    }
    .wm-compare__card--before{margin-bottom:92px}
    .wm-compare__card--after{margin-top:92px}
    .wm-compare__arrow{
        width:150px;
    }
    .wm-compare__arrow img{
        width:150px;
    }
}
@media (max-width: 480px){
    .wm-card-grid--6{grid-template-columns:1fr}
}