@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

#about-section{
scroll-margin-top:120px;
}

body{
background:black;
color:white;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

/* NAVBAR */

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

display:flex;
justify-content:space-between;
align-items:center;

padding:28px 80px;

background:linear-gradient(
90deg,
rgba(0,0,0,0.9) 0%,
rgba(80,80,80,0.55) 40%,
rgba(130,130,130,0.45) 65%,
rgba(220,220,220,0.30) 90%
);

backdrop-filter:blur(12px);

border-bottom:1px solid rgba(255,255,255,0.08);

z-index:1000;
}

/* LOGO */

.logo{
display:flex;
align-items:center;
gap:12px;
font-weight:600;
}

.logo-img{
width:26px;
}

/* NAV */

nav{
position:relative;
display:flex;
gap:42px;
}

nav a{

text-decoration:none;
color:rgba(255,255,255,0.9);
font-size:20px;
font-weight:500;

padding-bottom:8px;
}

/* MOVING UNDERLINE */

.nav-underline{

position:absolute;
bottom:0;

height:3px;
width:0;

background:white;

transition:left 0.35s ease, width 0.25s ease;

}

/* HERO */

.hero{

position:relative;

height:100vh;

display:flex;
justify-content:space-between;
align-items:center;

padding:160px 120px;
}

.bg{

position:absolute;
right:0;
top:0;

height:100%;
max-width:100%;

opacity:.55;

z-index:-1;

pointer-events:none;
}

.hero-left h1{

font-size:110px;
font-weight:300;

line-height:1.05;
}

.hero-left b{
font-weight:600;
}

.copyright{
margin-top:50px;
color:#d6d6d6;
}

/* LEARN BUTTON */

.hero-right{
position:relative;
width:40%;
}

.learn-btn{

position:absolute;

top:44%;
right:10%;

background:#e5e5e5;
color:black;

border:none;

padding:18px 38px;

border-radius:16px;

font-size:18px;
font-weight:500;

text-decoration:none;

cursor:pointer;
}

/* ABOUT */

.about-section{

min-height:100vh;

display:flex;
justify-content:space-between;
align-items:center;

padding:120px;
}

.about-section h2{
font-size:46px;
font-weight:400;
}

.about-section b{
font-weight:600;
}

.about-section p{
font-size:20px;
line-height:1.6;
color:#dcdcdc;
}

.divider{

width:420px;
height:2px;

background:white;

margin:15px 0 20px 0;
}

/* SUPPORT */

.support-hero{
position:relative;
height:100vh;
display:flex;
align-items:center;
gap:120px;
padding:160px 120px;
}

.support-left{
flex:0 0 480px;
}

.support-form{
display:flex;
flex-direction:column;
gap:16px;
}

.support-input{
width:100%;
padding:16px 18px;
border:1px solid rgba(255,255,255,0.18);
border-radius:16px;
background:rgba(255,255,255,0.08);
color:white;
font-size:16px;
outline:none;
}

.support-input::placeholder{
color:rgba(255,255,255,0.6);
}

textarea.support-input{
min-height:160px;
resize:vertical;
}

.support-submit-status{
min-height:24px;
color:#e8e8e8;
font-size:14px;
}

.support-identity-label{
font-size:15px;
color:rgba(255,255,255,0.72);
margin-top:6px;
}

.support-left h1{
font-size:95px;
font-weight:300;
line-height:1.05;
}

.breadcrumb{
margin-bottom:20px;
color:#ccc;
font-size:14px;
}

.support-title{
display:inline-block;
font-size:95px;
font-weight:300;
line-height:0.95;
letter-spacing:-1px;
}

.support-subtitle{
margin-top:10px;
font-size:26px;
color:#e6e6e6;
max-width:420px;
}

.support-text{
margin-top:18px;
font-size:20px;
color:#e6e6e6;
}

.support-right{
display:flex;
flex-direction:column;
gap:24px;
margin-left:auto;
margin-right:clamp(24px, 6vw, 120px);
}

.support-main{
background:#e5e5e5;
color:#111;

width:520px;
height:80px;

border:none;
border-radius:60px;

font-size:26px;
font-weight:500;

display:flex;
justify-content:space-between;
align-items:center;

padding:0 40px;

text-decoration:none; /* THIS fixes the blue link */
}

.support-input{
width:100%;
max-width:520px;

padding:20px 28px;

border:none;
outline:none;

border-radius:60px;

background:rgba(255,255,255,0.06);
color:white;

font-size:18px;
font-weight:400;

margin-top:20px;

/* smooth look */
backdrop-filter:blur(8px);
}

.support-input:focus{
background:rgba(255,255,255,0.1);
}

/* placeholder styling */
.support-input::placeholder{
color:rgba(255,255,255,0.5);
}

.support-btn{
background:#e5e5e5;
color:#111;

width:520px;
height:70px;

border-radius:60px;

font-size:24px;

display:flex;
align-items:center;
justify-content:center;

transition:transform 0.25s ease, box-shadow 0.25s ease;
cursor:pointer;
}

.support-btn:hover{
transform:translateY(-6px);
box-shadow:
0 10px 30px rgba(255,255,255,0.25),
0 0 12px rgba(255,255,255,0.35);
}

/* SUPPORT BUTTON HOVER EFFECT */

.support-btn{

background:#e5e5e5;
color:#111;

width:520px;
height:70px;

border-radius:60px;

font-size:24px;

display:flex;
align-items:center;
justify-content:center;

text-decoration:none;

transition:transform 0.25s ease, box-shadow 0.25s ease;

}

/* Hover animation */

.support-btn:hover{

transform:translateY(-6px);

box-shadow:
0 10px 30px rgba(255,255,255,0.25),
0 0 12px rgba(255,255,255,0.35);

}

/* REDIRECT PAGE */

.redirect-hero{

position:relative;

height:100vh;

display:flex;
align-items:center;

padding:160px 120px;

}

.redirect-left h1{

font-size:100px;
font-weight:300;

line-height:1.05;
}

.redirect-text{

margin-top:20px;

font-size:20px;

color:#e6e6e6;
}

.redirect-text a{
color:white;
text-decoration:none;
}

/* SUPPORT PORTAL */

.support-portal{
min-height:100vh;
padding:122px 58px 52px 58px;
position:relative;
overflow:hidden;
}

.support-portal::after{
content:"";
position:absolute;
right:-12vw;
bottom:-12vh;
width:44vw;
height:72vh;
background:rgba(255,255,255,0.06);
border-radius:48% 0 0 0;
pointer-events:none;
}

.support-portal-screen{
position:relative;
z-index:1;
min-height:calc(100vh - 214px);
display:flex;
align-items:center;
justify-content:center;
gap:45px;
}

.support-portal-center{
flex-direction:column;
text-align:center;
width:100%;
max-width:900px;
margin:0 auto;
}

.support-portal-split,
.support-portal-dashboard,
.support-portal-detail{
justify-content:space-between;
align-items:flex-start;
}

.support-portal-copy{
max-width:720px;
}

.support-portal-copy-center{
max-width:810px;
width:100%;
margin:0 auto;
}

.support-portal-kicker{
font-size:15px;
letter-spacing:0.16em;
text-transform:uppercase;
color:rgba(255,255,255,0.58);
margin-bottom:14px;
}

.support-portal-mark img{
width:76px;
height:auto;
margin:0 auto 8px auto;
}

.support-portal-title{
font-size:59px;
font-weight:300;
line-height:1.02;
letter-spacing:-2px;
}

.support-portal-title-large{
font-size:80px;
}

.support-portal-title-dashboard{
font-size:52px;
letter-spacing:-1.5px;
}

.support-portal-subtext,
.support-portal-description,
.support-portal-footnote,
.support-portal-legal{
color:rgba(255,255,255,0.78);
}

.support-portal-subtext,
.support-portal-description{
margin-top:23px;
font-size:23px;
line-height:1.25;
max-width:590px;
margin-left:auto;
margin-right:auto;
}

.support-portal-actions{
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
margin-top:34px;
width:100%;
max-width:720px;
margin-left:auto;
margin-right:auto;
}

.support-portal-actions-stack{
align-items:flex-start;
}

.support-portal-primary,
.support-portal-secondary{
width:min(100%, 720px);
min-height:88px;
padding:20px 34px;
border:none;
border-radius:999px;
background:#f4f4f4;
color:#111;
font-size:31px;
font-weight:500;
cursor:pointer;
transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.support-portal-secondary{
background:#f4f4f4;
}

.support-portal-primary:hover,
.support-portal-secondary:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(255,255,255,0.12);
}

.support-portal-primary:disabled,
.support-portal-secondary:disabled{
opacity:0.5;
cursor:not-allowed;
transform:none;
box-shadow:none;
}

.support-portal-link{
border:none;
background:none;
color:white;
font-size:26px;
text-decoration:underline;
cursor:pointer;
}

.support-portal-link-muted{
font-size:18px;
color:rgba(255,255,255,0.72);
text-decoration:none;
}

.support-portal-separator{
font-size:28px;
color:white;
}

.support-portal-footnote{
font-size:15px;
line-height:1.35;
text-align:center;
max-width:340px;
}

.support-portal-side{
width:min(42vw, 590px);
display:flex;
justify-content:center;
align-items:center;
padding-top:20px;
}

.support-portal-avatar{
width:400px;
height:400px;
border-radius:999px;
border:10px solid rgba(255,255,255,0.28);
display:grid;
place-items:center;
background:rgba(0,0,0,0.22);
overflow:hidden;
font-size:90px;
font-weight:600;
}

.support-portal-avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.support-portal-avatar-small{
width:100px;
height:100px;
border-width:4px;
font-size:32px;
flex-shrink:0;
}

.support-portal-dashboard-main{
width:min(58%, 810px);
}

.support-portal-dashboard-head{
display:flex;
align-items:flex-start;
gap:20px;
margin-bottom:22px;
}

.support-portal-back{
border:none;
background:none;
color:white;
font-size:92px;
line-height:1;
cursor:pointer;
padding:0;
}

.support-portal-section-label{
font-size:42px;
margin:28px 0 28px 8px;
}

.support-portal-report-list{
display:flex;
flex-direction:column;
gap:18px;
max-height:72vh;
overflow:auto;
padding-right:12px;
}

.support-portal-report-list-compact{
max-height:66vh;
}

.support-portal-report-card,
.support-portal-detail-pill,
.support-portal-detail-status,
.support-portal-notes-card,
.support-portal-empty{
border-radius:999px;
background:rgba(47,42,42,0.96);
border:1px solid rgba(255,255,255,0.08);
}

.support-portal-report-card{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:22px;
padding:18px 26px 18px 18px;
color:white;
border:none;
text-align:left;
cursor:pointer;
}

.support-portal-report-index,
.support-portal-status-indicator{
width:86px;
height:86px;
border-radius:999px;
display:grid;
place-items:center;
background:#f5f5f5;
color:#111;
font-size:36px;
box-shadow:0 0 0 10px rgba(255,255,255,0.16);
flex-shrink:0;
}

.support-portal-status-indicator{
background:#08c164;
}

.support-portal-status-archived{
background:#bdbdbd;
}

.support-portal-report-copy{
font-size:34px;
line-height:1.15;
}

.support-portal-report-arrow{
font-size:64px;
line-height:1;
}

.support-portal-sidebar{
width:min(36%, 640px);
display:flex;
flex-direction:column;
gap:26px;
padding-top:16px;
}

.support-portal-filter{
width:100%;
font-size:34px;
min-height:94px;
}

.support-portal-empty{
padding:24px 28px;
border-radius:28px;
font-size:22px;
color:rgba(255,255,255,0.72);
}

.support-portal-detail-main{
width:min(56%, 980px);
}

.support-portal-detail-side{
width:min(38%, 680px);
display:flex;
flex-direction:column;
gap:28px;
padding-top:12px;
}

.support-portal-detail-header{
display:flex;
align-items:center;
gap:18px;
margin-bottom:34px;
}

.support-portal-detail-pill,
.support-portal-detail-status{
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:22px;
padding:18px 24px 18px 18px;
border-radius:999px;
}

.support-portal-detail-pill strong,
.support-portal-detail-status strong{
font-size:34px;
font-weight:400;
line-height:1.15;
}

.support-portal-detail-submitted{
font-size:32px;
margin:12px 0 22px;
}

.support-portal-detail-rule{
width:min(100%, 680px);
height:4px;
background:rgba(255,255,255,0.85);
margin-bottom:34px;
}

.support-portal-detail-copy h2{
font-size:76px;
font-weight:300;
line-height:1.04;
letter-spacing:-1.8px;
margin-bottom:20px;
}

.support-portal-detail-copy p{
font-size:28px;
line-height:1.35;
}

.support-portal-detail-note{
margin-top:26px;
}

.support-portal-notes-card{
margin-top:18px;
padding:28px 28px 30px;
border-radius:34px;
min-height:270px;
font-size:28px;
line-height:1.35;
white-space:pre-wrap;
}

.support-portal-meta{
display:flex;
flex-direction:column;
gap:18px;
font-size:26px;
line-height:1.3;
text-align:right;
}

.support-portal-footnote-side{
text-align:right;
max-width:none;
}

.support-portal-legal{
margin-top:42px;
font-size:18px;
}

/* ========================= */
/* MOBILE RESPONSIVE DESIGN */
/* ========================= */

@media (max-width:768px){

body{
padding-top:78px;
}

.navbar{
padding:12px 16px;
min-height:78px;
background:linear-gradient(
90deg,
rgba(0,0,0,0.92) 0%,
rgba(45,45,45,0.70) 55%,
rgba(110,110,110,0.45) 100%
);
}

nav{
gap:16px;
flex-wrap:wrap;
justify-content:flex-end;
max-width:70%;
}

nav a{
font-size:16px;
padding-bottom:4px;
line-height:1.2;
}

.logo{
gap:8px;
font-size:14px;
}

.logo-img{
width:22px;
}

.hero{
flex-direction:column;
align-items:flex-start;
justify-content:flex-end;
gap:28px;
padding:40px 24px 48px 24px;
min-height:100vh;
height:auto;
}

.bg{
width:100%;
height:100%;
object-fit:cover;
opacity:.38;
}

.hero-left{
max-width:560px;
}

.hero-left h1{
font-size:64px;
line-height:1.04;
letter-spacing:-1px;
}

.hero-right{
width:100%;
position:static;
margin-top:0;
}

.learn-btn{
position:relative;
top:auto;
right:auto;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:14px 24px;
font-size:16px;
border-radius:14px;
box-shadow:0 12px 34px rgba(255,255,255,0.12);
}

.about-section{
flex-direction:column;
align-items:flex-start;
padding:72px 24px;
gap:34px;
}

.about-left,
.about-right{
width:100%;
max-width:620px;
padding:22px 20px;
border-radius:20px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(6px);
}

.about-section h2{
font-size:34px;
}

.about-section p{
font-size:17px;
line-height:1.5;
}

.divider{
width:100%;
max-width:420px;
}

.support-hero{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:22px;
padding:32px 24px 48px 24px;
min-height:100vh;
height:auto;
}

.support-left{
flex:1 1 auto;
width:100%;
max-width:none;
padding:22px 18px;
border-radius:20px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(6px);
box-shadow:0 20px 50px rgba(0,0,0,0.24);
}

.support-left h1{
font-size:54px;
font-weight:300;
line-height:1.05;
max-width:none;
}

.breadcrumb{
font-size:13px;
letter-spacing:0.04em;
text-transform:uppercase;
color:rgba(255,255,255,0.62);
}

.support-text{
font-size:17px;
line-height:1.45;
}

.support-right{
display:flex;
flex-direction:column;
width:100%;
gap:16px;
margin-left:0;
margin-right:0;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.07);
box-shadow:0 18px 44px rgba(0,0,0,0.2);
}

.support-main,
.support-btn{
width:100%;
max-width:none;
min-height:60px;
height:auto;
font-size:18px;
padding:16px 20px;
border:none;
border-radius:18px;
font-weight:500;
line-height:1.25;
text-align:center;
}

.support-main{
justify-content:space-between;
}

.support-input{
width:100%;
max-width:none;
font-size:16px;
padding:15px 16px;
margin-top:14px;
border-radius:18px;
}

textarea.support-input{
min-height:130px;
border-radius:20px;
resize:vertical;
}

.support-title{
display:inline-block;   /* THIS is the magic */
font-size:54px;
font-weight:300;
line-height:0.98;
letter-spacing:-1px;
}

.support-subtitle{
margin-top:10px;
font-size:22px;
color:#e6e6e6;
max-width:none;
}

.redirect-hero{
padding:32px 24px 48px 24px;
height:auto;
}

.redirect-left{
width:100%;
max-width:620px;
padding:22px 20px;
border-radius:20px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 20px 50px rgba(0,0,0,0.24);
}

.redirect-left h1{
font-size:52px;
}

.redirect-text{
font-size:17px;
}

.support-portal{
padding:32px 24px 48px 24px;
}

.support-portal::after{
width:96vw;
height:52vh;
right:-30vw;
bottom:-12vh;
border-radius:42% 0 0 0;
}

.support-portal-screen,
.support-portal-split,
.support-portal-dashboard,
.support-portal-detail{
min-height:auto;
flex-direction:column;
align-items:flex-start;
gap:24px;
}

.support-portal-copy,
.support-portal-dashboard-main,
.support-portal-sidebar,
.support-portal-detail-main,
.support-portal-detail-side,
.support-portal-side{
width:100%;
max-width:none;
}

.support-portal-mark img{
width:64px;
margin-bottom:0;
}

.support-portal-title{
font-size:54px;
letter-spacing:-1px;
}

.support-portal-title-large{
font-size:60px;
}

.support-portal-title-dashboard{
font-size:48px;
}

.support-portal-subtext,
.support-portal-description{
margin-top:16px;
font-size:20px;
max-width:none;
}

.support-portal-actions{
width:100%;
align-items:stretch;
margin-top:28px;
gap:16px;
}

.support-portal-primary,
.support-portal-secondary{
width:100%;
min-height:72px;
padding:18px 22px;
font-size:22px;
}

.support-portal-link{
font-size:20px;
align-self:center;
}

.support-portal-link-muted{
font-size:18px;
}

.support-portal-separator{
font-size:22px;
align-self:center;
}

.support-portal-footnote{
font-size:15px;
max-width:none;
}

.support-portal-side{
justify-content:flex-start;
padding-top:0;
}

.support-portal-avatar{
width:180px;
height:180px;
border-width:6px;
font-size:54px;
}

.support-portal-avatar-small{
width:74px;
height:74px;
font-size:26px;
}

.support-portal-dashboard-head{
gap:14px;
margin-bottom:14px;
flex-wrap:wrap;
}

.support-portal-back{
font-size:54px;
}

.support-portal-section-label{
font-size:28px;
margin:16px 0 18px 0;
}

.support-portal-report-list,
.support-portal-report-list-compact{
max-height:none;
padding-right:0;
}

.support-portal-report-card{
gap:14px;
padding:14px 16px 14px 14px;
}

.support-portal-report-index,
.support-portal-status-indicator{
width:56px;
height:56px;
font-size:22px;
box-shadow:0 0 0 7px rgba(255,255,255,0.14);
}

.support-portal-report-copy,
.support-portal-detail-pill strong,
.support-portal-detail-status strong{
font-size:22px;
}

.support-portal-report-arrow{
font-size:40px;
}

.support-portal-sidebar{
gap:18px;
padding-top:0;
}

.support-portal-filter{
min-height:68px;
font-size:24px;
}

.support-portal-empty{
padding:18px 18px;
font-size:16px;
border-radius:20px;
}

.support-portal-detail-header{
gap:12px;
margin-bottom:18px;
}

.support-portal-detail-pill,
.support-portal-detail-status{
gap:14px;
padding:14px 16px 14px 14px;
}

.support-portal-detail-submitted{
font-size:18px;
margin:0 0 12px;
}

.support-portal-detail-rule{
margin-bottom:18px;
}

.support-portal-detail-copy h2{
font-size:44px;
margin-bottom:12px;
}

.support-portal-detail-copy p,
.support-portal-meta{
font-size:18px;
}

.support-portal-meta{
gap:10px;
text-align:left;
}

.support-portal-notes-card{
margin-top:14px;
padding:18px;
min-height:180px;
font-size:18px;
border-radius:24px;
}

.support-portal-footnote-side{
text-align:left;
}

.support-portal-legal{
margin-top:26px;
font-size:14px;
}

}

@media (max-width:420px){

body{
padding-top:74px;
}

.navbar{
padding:10px 12px;
min-height:74px;
}

.hero-left h1{
font-size:52px;
}

.support-title,
.support-left h1{
font-size:48px;
}

.support-subtitle{
font-size:20px;
}

.hero{
padding:24px 16px 36px 16px;
gap:20px;
}

.about-section,
.support-hero,
.redirect-hero{
padding-left:16px;
padding-right:16px;
}

nav{
max-width:100%;
justify-content:flex-start;
gap:12px;
}

nav a{
font-size:15px;
}

.about-left,
.about-right,
.support-left,
.support-right,
.redirect-left{
padding:18px 16px;
border-radius:16px;
}

.support-main,
.support-btn{
height:56px;
font-size:17px;
min-height:56px;
padding:14px 16px;
}

.support-input{
padding:14px 14px;
}

.support-portal{
padding-left:16px;
padding-right:16px;
}

.support-portal-title{
font-size:44px;
}

.support-portal-title-large{
font-size:48px;
}

.support-portal-title-dashboard{
font-size:38px;
}

.support-portal-subtext,
.support-portal-description{
font-size:18px;
}

.support-portal-primary,
.support-portal-secondary{
font-size:20px;
padding:16px 18px;
min-height:66px;
}

.support-portal-link{
font-size:18px;
}

.support-portal-avatar{
width:150px;
height:150px;
font-size:44px;
}

.support-portal-report-copy,
.support-portal-detail-pill strong,
.support-portal-detail-status strong{
font-size:18px;
}

.support-portal-detail-copy h2{
font-size:36px;
}

.support-portal-detail-copy p,
.support-portal-meta,
.support-portal-notes-card{
font-size:16px;
}

}