:root{
    --red:#e01c22;
    --blue:#1682ff;
    --white:#f4f6f8;
    --muted:#b9c0c8;
    --panel:#0b1015;
    --border:#333b45;
}

html{scroll-behavior:smooth;}
body.support-page{margin:0;background:#020406;color:var(--white);}
.support-shell{max-width:1920px;margin:0 auto;background:#020406;overflow:hidden;}

/* HERO */
.support-hero{position:relative;background:#000;overflow:hidden;border-bottom:1px solid #171d24;}
.support-hero-image{display:block;width:100%;height:auto;}
.hero-hit{position:absolute;z-index:5;border-radius:7px;}
.hero-hit:focus-visible{outline:3px solid white;box-shadow:0 0 0 5px rgba(22,130,255,.45);}
.hero-hit-support{left:7.4%;top:83.5%;width:13.1%;height:8.7%;}
.hero-hit-resources{left:21.7%;top:83.5%;width:15.8%;height:8.7%;}

/* CATEGORY STRIP */
.support-categories{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:7px;
    padding:9px 3.2% 12px;
    margin-top:-2px;
    background:linear-gradient(180deg,#05080b,#030507);
}
.support-card{
    min-width:0;
    min-height:172px;
    padding:14px 12px 12px;
    border:1px solid #3a424b;
    border-radius:9px;
    background:linear-gradient(180deg,#11171d 0%,#0a0f14 100%);
    text-align:center;
    color:#fff;
    text-decoration:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:.18s ease;
}
.support-card:hover{transform:translateY(-3px);background:#10171e;}
.support-card.red:hover{border-color:var(--red);box-shadow:0 0 20px rgba(224,28,34,.15);}
.support-card.blue:hover{border-color:var(--blue);box-shadow:0 0 20px rgba(22,130,255,.15);}
.card-icon{font-size:30px;line-height:1;margin-bottom:10px;font-weight:700;}
.support-card.red .card-icon{color:var(--red);}
.support-card.blue .card-icon{color:var(--blue);}
.support-card h2{margin:0 0 8px;font-size:15px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em;}
.support-card p{margin:0 auto 10px;max-width:185px;font-size:11.5px;line-height:1.32;color:#d4d8dc;}
.support-card span{display:inline-block;margin-top:auto;font-size:10px;font-weight:900;text-transform:uppercase;color:var(--blue);letter-spacing:.04em;}
.support-card.red span{color:#54a8ff;}

/* HOW SUPPORT WORKS */
.support-process{
    display:grid;
    grid-template-columns:330px 1fr;
    gap:26px;
    padding:16px 3.7%;
    background:linear-gradient(90deg,#080c10 0%,#0b1015 65%,#080c10 100%);
    border-top:1px solid #1f262d;
    border-bottom:1px solid #2f353c;
}
.process-intro span{display:block;color:var(--red);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;}
.process-intro h2{margin:0;color:#fff;font-size:27px;line-height:.98;text-transform:uppercase;letter-spacing:.01em;}
.process-intro p{margin:8px 0 0;color:#d0d5da;font-size:12px;line-height:1.35;max-width:315px;}
.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #343d46;border-radius:8px;overflow:hidden;}
.process-steps article{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:start;padding:14px 12px;border-right:1px solid #343d46;background:rgba(8,12,16,.78);min-width:0;}
.process-steps article:last-child{border-right:0;}
.process-steps strong{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:2px solid var(--blue);font-size:17px;color:#fff;}
.process-steps article:nth-child(even) strong{border-color:var(--red);}
.process-steps h3{margin:2px 0 3px;font-size:13px;text-transform:uppercase;letter-spacing:.02em;}
.process-steps p{margin:0;color:#c9cfd5;font-size:10.5px;line-height:1.28;}

/* YOU ARE NOT ALONE */
.not-alone{padding:10px 5% 15px;background:linear-gradient(90deg,#020508,#07101a 50%,#020508);border-bottom:1px solid #2e3842;}
.not-alone-title{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:7px;}
.not-alone-title::before,.not-alone-title::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--red));}
.not-alone-title::after{background:linear-gradient(90deg,var(--red),transparent);}
.not-alone-title span{color:var(--red);font-size:14px;}
.not-alone-title h2{margin:0;font-size:18px;text-transform:uppercase;letter-spacing:.19em;font-weight:900;white-space:nowrap;}
.not-alone-title h2 em{font-style:normal;color:var(--red);}
.not-alone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.not-alone-grid article{position:relative;padding:6px 18px 4px 26px;border-right:1px solid #39414a;min-height:72px;}
.not-alone-grid article:last-child{border-right:0;}
.quote-mark{position:absolute;left:0;top:0;color:var(--blue);font-size:34px;font-weight:900;line-height:1;}
.not-alone-grid p{margin:0 0 7px;color:#e1e4e7;font-size:11.5px;line-height:1.35;}
.not-alone-grid strong{font-size:10px;color:#2f91ff;letter-spacing:.03em;}

@media(max-width:1250px){
    .support-categories{grid-template-columns:repeat(4,1fr);}
    .support-process{grid-template-columns:1fr;}
}
@media(max-width:820px){
    .support-hero-image{width:150%;max-width:none;transform:translateX(-19%);}
    .hero-hit{display:none;}
    .support-categories{grid-template-columns:repeat(2,1fr);padding:10px;}
    .support-card{min-height:155px;}
    .process-steps{grid-template-columns:1fr 1fr;}
    .process-steps article:nth-child(2){border-right:0;}
    .process-steps article:nth-child(-n+2){border-bottom:1px solid #343d46;}
    .not-alone-grid{grid-template-columns:1fr;gap:8px;}
    .not-alone-grid article{border-right:0;border-bottom:1px solid #39414a;padding-bottom:12px;}
    .not-alone-grid article:last-child{border-bottom:0;}
}
@media(max-width:520px){
    .support-categories{grid-template-columns:1fr;}
    .process-steps{grid-template-columns:1fr;}
    .process-steps article{border-right:0;border-bottom:1px solid #343d46;}
    .process-steps article:last-child{border-bottom:0;}
    .not-alone-title h2{font-size:14px;letter-spacing:.1em;}
}