@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url('assets/fonts/Poppins-400.woff2') format('woff2');
}
@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:500;
    font-display:block;
    src:url('assets/fonts/Poppins-500.woff2') format('woff2');
}
@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:600;
    font-display:block;
    src:url('assets/fonts/Poppins-600.woff2') format('woff2');
}
@font-face{
    font-family:'DM Mono';
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url('assets/fonts/DMMono-400.woff2') format('woff2');
}

:root{
    --ink:#202124;
    --muted:#5f6368;
    --line:#ececec;
    --accent:#d21502;
    --bg:#ffffff;
    --panel:#f7f7f7;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{max-width:100%;overflow-x:hidden;}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Poppins', sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

main{
    flex:1;
    width:100%;
    max-width:1220px;
    margin:0 auto;
    padding:64px 48px 80px;
}

/* Home statement */
.statement-main{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    min-height:100vh;
    min-height:100dvh;
    gap:26px;
}
.dot-figure{
    margin:0;
    width:100%;
    max-width:min(480px, 82vw);
}
.dot-image{
    display:block;
    width:100%;
    height:auto;
    max-height:56vh;
    object-fit:cover;
    border-radius:14px;
}
.dot-credit{
    margin-top:7px;
    font-size:0.5rem;
    letter-spacing:0.4px;
    color:#c9c9c9;
    opacity:0.75;
}
.statement{
    font-family:'DM Mono', monospace;
    font-weight:400;
    font-size:clamp(0.72rem, 1.7vw, 1.05rem);
    letter-spacing:0.58em;
    text-transform:uppercase;
    color:var(--ink);
    line-height:1.6;
    padding-left:0.58em;
    max-width:100%;
    overflow-wrap:break-word;
}

/* Footer */
.site-footer{
    background:var(--panel);
    border-top:1px solid var(--line);
    padding:10px 48px 12px;
}
.footer-top{
    max-width:1220px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
}
.footer-top .logo-link{position:relative;display:inline-block;}
.footer-top .logo-link::after{
    content:"\2122";
    position:absolute;
    left:94%;
    top:19%;
    transform:translate(-45%, -88%);
    font-size:0.5rem;
    font-weight:400;
    color:var(--ink);
    line-height:1;
}
.footer-logo{height:48px;width:auto;display:block;max-width:100%;}
.footer-nav{display:flex;gap:34px;align-items:center;}
.footer-nav a,
.footer-nav .footer-nav-trigger{
    color:var(--ink);
    text-decoration:none;
    font-size:0.8rem;
    font-weight:500;
    transition:color 0.2s ease;
}
.footer-nav a:hover{color:var(--accent);}

/* Companies hover popover */
.footer-companies{position:relative;}
.footer-nav-trigger{cursor:pointer;outline:none;}
.footer-companies:hover .footer-nav-trigger,
.footer-companies:focus-within .footer-nav-trigger{color:var(--accent);}
.companies-popover{
    position:absolute;
    bottom:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(6px);
    display:flex;
    flex-direction:column;
    gap:10px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 18px;
    box-shadow:0 14px 40px -16px rgba(0,0,0,0.22);
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index:20;
}
.footer-companies:hover .companies-popover,
.footer-companies:focus-within .companies-popover{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}
.companies-popover a{
    font-size:0.9rem;
    font-weight:500;
    color:var(--ink);
    text-decoration:none;
    transition:color 0.2s ease;
}
.companies-popover a.brand-reddot:hover{color:#d21502;}
.companies-popover a.brand-scalevirtual:hover{color:#1a5ad7;}
.footer-legal{
    max-width:1220px;
    margin:8px auto 0;
    padding-top:8px;
    border-top:1px solid var(--line);
    font-size:0.46rem;
    line-height:1.6;
    color:var(--muted);
}

/* Companies page */
.page-head{margin-bottom:56px;max-width:720px;}
.page-title{
    font-size:2.4rem;
    font-weight:500;
    letter-spacing:-0.02em;
}
.company-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.company-list a{
    font-size:1.1rem;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--ink);
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:color 0.2s ease, border-color 0.2s ease;
}
.company-list a:hover{
    color:var(--accent);
    border-bottom-color:var(--accent);
}
.company-list a.brand-reddot:hover{
    color:#d21502;
    border-bottom-color:#d21502;
}
.company-list a.brand-scalevirtual:hover{
    color:#1a5ad7;
    border-bottom-color:#1a5ad7;
}

/* Contact page */
.contact-wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 24px;
}
.contact-label{
    font-size:0.78rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted);
    margin-bottom:18px;
}
.contact-email{
    font-size:clamp(0.95rem,2.6vw,1.5rem);
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--ink);
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:border-color 0.2s ease,color 0.2s ease;
    max-width:100%;
    overflow-wrap:break-word;
}
.contact-email:hover{color:var(--accent);border-bottom-color:var(--accent);}

@media (max-width:820px){
    main{padding:44px 22px 60px;}
    .page-title{font-size:1.9rem;}
    .site-footer{padding:10px 22px 12px;}
    .footer-nav{gap:24px;}
    .footer-logo{height:38px;}
    .footer-legal{font-size:0.44rem;}
    .footer-top .logo-link::after{font-size:0.42rem;}
}