/* =========================================
   LIGHTLYTIC PRIVACY STYLE
   ========================================= */

:root{
--privacy-bg:#303030;
--privacy-bg-dark:#292929;
--privacy-card:#414141;
--privacy-orange:#ff6b00;
--privacy-orange-light:#ff9d2e;
--privacy-text:#ffffff;
--privacy-muted:#d0d0d0;
--privacy-border:rgba(255,255,255,.18);
}


*{
box-sizing:border-box;
}


/* =========================================
   HERO
   ========================================= */

.hero{
text-align:center;
padding:150px 25px 100px;

background:
radial-gradient(circle at 50% 0%,rgba(255,107,0,.5),transparent 35%),
linear-gradient(180deg,#414141,#303030);

border-radius:0 0 45px 45px;

box-shadow:
0 30px 90px rgba(255,107,0,.22);
}


.hero h1{
max-width:950px;
margin:0 auto 25px;
font-size:clamp(36px,5vw,62px);
line-height:1.1;
font-weight:900;
}


.sub-header{
color:var(--privacy-muted);
font-size:18px;
}



/* =========================================
   PRIVACY SECTIONS
   ========================================= */

.privacy-section{

max-width:1200px;

margin:80px auto;

padding:40px;

background:
linear-gradient(145deg,#454545,#353535);

border:1px solid rgba(255,107,0,.35);

border-radius:26px;

box-shadow:
0 25px 70px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.08);

transition:.35s;
}


.privacy-section:hover{

border-color:#ff9d2e;

box-shadow:
0 35px 90px rgba(255,107,0,.25),
0 25px 70px rgba(0,0,0,.5);

}



.privacy-section h2{

font-size:28px;

font-weight:900;

color:#fff;

margin-bottom:20px;

}



.number{

color:var(--privacy-orange);

margin-right:8px;

}



.privacy-section p{

color:var(--privacy-muted);

line-height:1.75;

font-size:16px;

}



/* =========================================
   DIVIDER
   ========================================= */

.privacy-divider{

height:1px;

background:
rgba(255,107,0,.35);

margin:20px 0;

}



/* =========================================
   TEXT SUBSECTIONS
   ========================================= */

.privacy-subsection{

margin-top:35px;

}



.privacy-subsection h3{

font-size:20px;

color:#fff;

margin-bottom:12px;

}



/* =========================================
   COMPANY INFO
   ========================================= */

.company-title{

font-size:24px;

font-weight:900;

color:#fff!important;

}



.info-box-text{

margin-bottom:20px;

}



/* =========================================
   FORM CARD
   ========================================= */

.compliance-form-card{

max-width:1200px;

margin:50px auto;

padding:40px;

background:
linear-gradient(145deg,#454545,#353535);

border-radius:26px;

border:1px solid rgba(255,107,0,.45);

box-shadow:
0 30px 80px rgba(0,0,0,.45);

}



.compliance-form-card h3{

font-size:28px;

font-weight:900;

margin-bottom:15px;

}



.form-subtext{

color:#d0d0d0;

line-height:1.7;

margin-bottom:30px;

}



/* =========================================
   FORM ELEMENTS
   ========================================= */

.compliance-form-group,
.privacy-form-group{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:20px;

}



.compliance-form-group label,
.privacy-form-group label{

color:#fff;

font-weight:700;

}



.compliance-input,
.compliance-select,
.compliance-textarea{

width:100%;

padding:14px 16px;

background:#292929;

color:#fff;

border-radius:12px;

border:1px solid rgba(255,255,255,.18);

font-size:16px;

outline:none;

transition:.3s;

}



.compliance-textarea{

resize:none;

min-height:140px;

}



.compliance-input:focus,
.compliance-select:focus,
.compliance-textarea:focus{

border-color:#ff6b00;

box-shadow:
0 0 35px rgba(255,107,0,.4);

}



/* =========================================
   CHECKBOX
   ========================================= */

.compliance-checkbox-label{

display:flex;

align-items:center;

gap:12px;

padding:15px;

margin-top:15px;

background:rgba(255,255,255,.07);

border-radius:14px;

border:1px solid rgba(255,255,255,.15);

cursor:pointer;

color:#eee;

}



.compliance-checkbox-hidden{

appearance:none;

width:22px;

height:22px;

border-radius:7px;

border:2px solid #ff6b00;

background:#222;

cursor:pointer;

display:grid;

place-content:center;

}



.compliance-checkbox-hidden:checked{

background:
linear-gradient(135deg,#ff9d2e,#ff6b00);

}



.compliance-custom-checkbox{

display:none;

}



/* =========================================
   BUTTON
   ========================================= */

.compliance-submit-btn{

margin-top:25px;

width:100%;

padding:15px 25px;

border:0;

border-radius:14px;

font-size:16px;

font-weight:900;

cursor:pointer;

color:#111;

background:
linear-gradient(135deg,#ff9d2e,#ff6b00);

box-shadow:
0 15px 50px rgba(255,107,0,.5);

transition:.3s;

}



.compliance-submit-btn:hover{

transform:translateY(-4px);

box-shadow:
0 30px 90px rgba(255,107,0,.8);

}



/* =========================================
   SUCCESS
   ========================================= */

.compliance-success-box{

max-width:1200px;

margin:40px auto;

padding:30px;

background:
linear-gradient(145deg,#454545,#353535);

border-radius:22px;

border:1px solid rgba(255,107,0,.4);

}



.success-title{

font-size:22px;

font-weight:900;

color:#ff9d2e;

}



.success-desc{

color:#d0d0d0;

line-height:1.7;

}



.hidden{

display:none!important;

}



/* =========================================
   MOBILE
   ========================================= */

@media(max-width:900px){

.privacy-section,
.compliance-form-card,
.compliance-success-box{

margin-left:20px;

margin-right:20px;

padding:30px 25px;

}


.hero{

padding:110px 20px 70px;

}


.privacy-section h2{

font-size:23px;

}

}