*                   {
    box-sizing:     border-box;
}
html                {
    background:     #fff9fb;
}
body                {
    margin:         0;
    color:          #18121f;
    font-family:    "Trebuchet MS", Arial, sans-serif;
    background:
        radial-gradient(circle at 10% 12%, rgba(255, 43, 129, .28) 0 80px, transparent 82px),
        radial-gradient(circle at 92% 18%, rgba(39, 164, 255, .26) 0 110px, transparent 112px),
        radial-gradient(circle at 78% 88%, rgba(65, 225, 139, .25) 0 95px, transparent 97px),
        linear-gradient(90deg, rgba(255, 43, 129, .11) 0 25%, transparent 25% 50%, rgba(39, 164, 255, .11) 50% 75%, transparent 75%),
        linear-gradient(180deg, #fff9fb 0%, #f6fbff 45%, #fffdf7 100%);
    background-size: 44px 44px, auto;
}
body::before       {
    content:        "";
    position:       fixed;
    inset:          0;
    pointer-events: none;
    opacity:        .18;
    background-image:
        linear-gradient(45deg, #ff2b81 25%, transparent 25%),
        linear-gradient(-45deg, #27a4ff 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ffe45c 75%),
        linear-gradient(-45deg, transparent 75%, #41e18b 75%);
    background-position: 0 0, 0 13px, 13px -13px, -13px 0;
    background-size: 26px 26px;
    mix-blend-mode: multiply;
}
body::after        {
    content:        "";
    position:       fixed;
    left:           0;
    right:          0;
    bottom:         0;
    height:         10px;
    z-index:        5;
    pointer-events: none;
    background:     linear-gradient(90deg, #ff2b81, #8a39ff, #27a4ff, #41e18b, #ffe45c, #ff2b81);
}
#head              {
    position:       relative;
    z-index:        1;
    padding:        28px 18px 10px;
}
#head img          {
    filter:         drop-shadow(0 14px 0 rgba(255,43,129,.12)) drop-shadow(18px 0 0 rgba(39,164,255,.10));
}
#head p            {
    margin:         12px auto 0;
    max-width:      720px;
    color:          #18121f;
    font-weight:    800;
    line-height:    1.05;
    text-transform: uppercase;
}
main.home          {
    position:       relative;
    z-index:        1;
    width:          100%;
    max-width:      1120px;
    margin:         0 auto;
    padding:        12px 18px 42px;
}
.home-hero         {
    position:       relative;
    overflow:       hidden;
    display:        grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap:            28px;
    align-items:    stretch;
    min-height:     470px;
    padding:        34px;
    border:         3px solid #18121f;
    background:
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.63)),
        repeating-linear-gradient(90deg, #ff2b81 0 18px, #8a39ff 18px 36px, #27a4ff 36px 54px, #41e18b 54px 72px, #ffe45c 72px 90px);
    box-shadow:     12px 12px 0 #18121f, -8px -8px 0 #ff2b81;
}
.home-hero::before {
    content:        "desire lines";
    position:       absolute;
    top:            18px;
    right:          -54px;
    width:          260px;
    padding:        9px 0;
    border:         2px solid #18121f;
    color:          #18121f;
    background:     #41e18b;
    font-size:      .86rem;
    font-weight:    900;
    text-align:     center;
    text-transform: uppercase;
    transform:      rotate(34deg);
}
.home-hero::after  {
    content:        "";
    position:       absolute;
    inset:          auto 22px 22px auto;
    width:          138px;
    height:         138px;
    border:         3px solid #18121f;
    background:
        linear-gradient(45deg, transparent 42%, #18121f 42% 48%, transparent 48% 52%, #18121f 52% 58%, transparent 58%),
        conic-gradient(from 20deg, #ff2b81, #8a39ff, #27a4ff, #41e18b, #ffe45c, #ff2b81);
    transform:      rotate(10deg);
    opacity:        .9;
}
.home-hero__copy   {
    position:       relative;
    z-index:        1;
    align-self:     center;
}
.eyebrow           {
    display:        inline-block;
    margin:         0 0 14px;
    padding:        6px 10px;
    color:          #18121f;
    background:     #ffe45c;
    border:         2px solid #18121f;
    border-radius:  8px;
    font-size:      .78rem;
    font-weight:    900;
    letter-spacing: 0;
    text-transform: uppercase;
}
h1,
h2,
h3,
p                   {
    overflow-wrap:  anywhere;
}
h1                  {
    max-width:      820px;
    margin:         0;
    font-size:      clamp(2.8rem, 6.5vw, 6.3rem);
    line-height:    .86;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow:    4px 4px 0 rgba(255,43,129,.22), -3px -3px 0 rgba(39,164,255,.18);
}
.lede              {
    max-width:      720px;
    margin:         24px 0 0;
    font-size:      1.34rem;
    line-height:    1.5;
    font-weight:    700;
}
.home-actions      {
    display:        flex;
    flex-wrap:      wrap;
    gap:            12px;
    margin-top:     28px;
}
.button            {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    min-height:     48px;
    padding:        12px 18px;
    border:         2px solid #18121f;
    border-radius:  8px;
    color:          #18121f;
    font-weight:    900;
    text-decoration:none;
    box-shadow:     5px 5px 0 #18121f;
    transition:     transform .16s ease, box-shadow .16s ease;
}
.button:hover,
.button:focus      {
    transform:      translate(3px, 3px);
    box-shadow:     2px 2px 0 #18121f;
}
.button--primary   {
    background:     linear-gradient(90deg, #ff2b81, #8a39ff);
    color:          #fff;
}
.button--ghost     {
    background:     #fff;
}
.home-hero__signal {
    position:       relative;
    z-index:        1;
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            12px;
    align-content:  center;
}
.home-hero__signal span {
    display:        flex;
    align-items:    center;
    justify-content:center;
    aspect-ratio:   1 / 1;
    border:         3px solid #18121f;
    border-radius:  8px;
    color:          #18121f;
    font-size:      1.3rem;
    font-weight:    900;
    line-height:    .95;
    padding:        10px;
    text-align:     center;
    text-transform: uppercase;
    transform:      rotate(-4deg);
    box-shadow:     5px 5px 0 #18121f;
}
.home-hero__signal span:nth-child(1) {
    background:     #27a4ff;
}
.home-hero__signal span:nth-child(2) {
    background:     #ffe45c;
    transform:      rotate(5deg);
}
.home-hero__signal span:nth-child(3) {
    background:     #41e18b;
    transform:      rotate(3deg);
}
.home-hero__signal span:nth-child(4) {
    background:     #8a39ff;
    color:          #fff;
    transform:      rotate(-6deg);
}
.home-strip        {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    justify-content:center;
    margin:         42px 0;
}
.home-strip span   {
    padding:        8px 12px;
    border:         2px solid #18121f;
    border-radius:  999px;
    background:     #fff;
    font-weight:    900;
    text-transform: uppercase;
}
.manifesto         {
    margin:         38px auto 20px;
    max-width:      980px;
    padding:        22px;
    border:         3px solid #18121f;
    border-radius:  8px;
    color:          #fff;
    background:     #18121f;
    box-shadow:     8px 8px 0 #ff2b81;
}
.manifesto p       {
    margin:         0;
    font-size:      clamp(1.55rem, 3.1vw, 3rem);
    font-weight:    900;
    line-height:    1;
    text-transform: uppercase;
}
.manifesto p::selection,
h1::selection,
h2::selection       {
    color:          #18121f;
    background:     #ffe45c;
}
.home-grid         {
    display:        grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap:            28px;
    align-items:    start;
    margin:         0 0 38px;
}
.home-grid h2,
.contact-panel h2  {
    margin:         0;
    font-size:      clamp(2rem, 4vw, 3.75rem);
    line-height:    .98;
    letter-spacing: 0;
}
.feature-list      {
    display:        grid;
    gap:            14px;
}
.feature-list article {
    position:       relative;
    padding:        20px;
    border:         3px solid #18121f;
    border-radius:  8px;
    background:     #fff;
    box-shadow:     6px 6px 0 #18121f;
}
.feature-list article::before {
    content:        "";
    position:       absolute;
    top:            14px;
    right:          14px;
    width:          18px;
    height:         18px;
    border:         2px solid #18121f;
    background:     #ff2b81;
    transform:      rotate(45deg);
}
.feature-list article:nth-child(1) {
    border-top-color: #ff2b81;
}
.feature-list article:nth-child(2) {
    border-top-color: #27a4ff;
}
.feature-list article:nth-child(3) {
    border-top-color: #41e18b;
}
.feature-list h3   {
    margin:         0 0 8px;
    text-align:     left;
    font-size:      1.35rem;
}
.feature-list p    {
    margin:         0;
    font-size:      1.05rem;
    line-height:    1.45;
}
.voltage           {
    display:        grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:            10px;
    margin:         0 0 38px;
}
.voltage span      {
    min-height:     120px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    padding:        14px;
    border:         3px solid #18121f;
    border-radius:  8px;
    color:          #18121f;
    font-size:      1.15rem;
    font-weight:    900;
    line-height:    .95;
    text-align:     center;
    text-transform: uppercase;
    box-shadow:     5px 5px 0 #18121f;
}
.voltage span:nth-child(1) {
    background:     #ffe45c;
}
.voltage span:nth-child(2) {
    background:     #27a4ff;
}
.voltage span:nth-child(3) {
    background:     #ff2b81;
    color:          #fff;
}
.voltage span:nth-child(4) {
    background:     #41e18b;
}
.contact-panel     {
    display:        flex;
    gap:            24px;
    align-items:    center;
    justify-content:space-between;
    padding:        26px;
    border:         3px solid #18121f;
    border-radius:  8px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.68)),
        repeating-linear-gradient(-45deg, #ff2b81 0 20px, #8a39ff 20px 40px, #27a4ff 40px 60px, #41e18b 60px 80px, #ffe45c 80px 100px);
    box-shadow:     8px 8px 0 #18121f, -6px -6px 0 #27a4ff;
}
body > hr          {
    position:       relative;
    z-index:        1;
    height:         3px;
    border:         0;
    background:     linear-gradient(90deg, #ff2b81, #8a39ff, #27a4ff, #41e18b, #ffe45c);
}
body > div[style*="text-align:center"] {
    position:       relative;
    z-index:        1;
}
body > div[style*="text-align:center"] a {
    display:        inline-block;
    margin:         4px;
}
body > div[style*="text-align:center"] img {
    filter:         drop-shadow(3px 3px 0 rgba(24,18,31,.22));
}
body > p[style*="text-align:center"] {
    position:       relative;
    z-index:        1;
    margin-bottom:  28px;
    color:          #3b3344;
}
@media (max-width: 760px) {
    #head            {
        padding-top:  18px;
    }
    #head p          {
        font-size:    1.7rem !important;
    }
    main.home        {
        padding:      10px 14px 34px;
    }
    .home-hero,
    .home-grid       {
        grid-template-columns: 1fr;
    }
    .home-hero       {
        min-height:   0;
        padding:      22px;
        box-shadow:   6px 6px 0 #18121f;
    }
    .home-hero::before {
        right:        -78px;
        top:          14px;
        font-size:    .7rem;
    }
    .home-hero::after {
        width:        74px;
        height:       74px;
        right:        16px;
        bottom:       16px;
    }
    h1               {
        font-size:    3rem;
    }
    .lede            {
        font-size:    1.08rem;
    }
    .home-hero__signal {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .home-hero__signal span {
        aspect-ratio: 1 / .82;
        font-size:    .68rem;
        padding:      6px;
    }
    .manifesto       {
        margin-top:   30px;
        padding:      18px;
        box-shadow:   6px 6px 0 #ff2b81;
    }
    .voltage         {
        grid-template-columns: 1fr 1fr;
    }
    .voltage span    {
        min-height:   92px;
        font-size:    .95rem;
    }
    .contact-panel   {
        align-items:  stretch;
        flex-direction: column;
        padding:      20px;
        box-shadow:   6px 6px 0 #18121f;
    }
    .button          {
        width:        100%;
    }
}