:root{
--bg:#f4f6fb;
--card:#ffffff;
--text:#101828;
--muted:#667085;
--muted2:#98a2b3;
--line:#e4e7ec;
--line2:#d8dce5;
--accent:#6857ff;
--accent2:#7b6cff;
--accent-soft:#efedff;
--danger:#d92d20;
--green:#12b76a;
--dark:#111827;
--dark2:#182230;
--shadow:0 22px 70px rgba(16,24,40,.10);
--shadow-soft:0 10px 35px rgba(16,24,40,.07)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif
}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:wait}
a{color:inherit}
.container{width:min(1160px,calc(100% - 36px));margin:auto}

/* HEADER */
.site-header{
position:sticky;
top:0;
z-index:80;
background:rgba(255,255,255,.92);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(228,231,236,.9)
}
.header-inner{
min-height:76px;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px
}
.brand{
display:inline-flex;
align-items:center;
gap:11px;
text-decoration:none;
font-weight:950
}
.brand-mark{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:12px;
background:linear-gradient(135deg,var(--accent),#8a7eff);
box-shadow:0 8px 24px rgba(104,87,255,.24)
}
.brand-mark svg{
width:21px;
height:21px;
fill:none;
stroke:#fff;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.brand-text{
font-size:24px;
letter-spacing:-1.1px
}
.brand-text span{color:var(--accent)}
.desktop-nav{
display:flex;
align-items:center;
gap:6px
}
.desktop-nav a{
text-decoration:none;
font-size:14px;
font-weight:750;
color:#475467;
padding:9px 12px;
border-radius:10px;
transition:.18s
}
.desktop-nav a:hover,.desktop-nav a.active{
background:#f2f0ff;
color:var(--accent)
}
.header-actions{
display:flex;
align-items:center;
gap:12px
}
.secure-pill{
display:inline-flex;
align-items:center;
gap:8px;
font-size:12px;
font-weight:850;
color:#344054;
padding:8px 11px;
border:1px solid var(--line);
border-radius:999px;
background:#fff
}
.secure-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 0 4px rgba(18,183,106,.12)
}
.mobile-nav{display:none;position:relative}
.mobile-nav summary{
list-style:none;
width:42px;
height:42px;
border:1px solid var(--line);
border-radius:11px;
display:grid;
place-content:center;
gap:4px;
background:#fff;
cursor:pointer
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary span{
display:block;
width:18px;
height:2px;
background:#344054;
border-radius:2px
}
.mobile-menu{
position:absolute;
right:0;
top:50px;
width:210px;
padding:9px;
border:1px solid var(--line);
background:#fff;
border-radius:14px;
box-shadow:var(--shadow-soft)
}
.mobile-menu a{
display:block;
text-decoration:none;
padding:11px 12px;
border-radius:9px;
font-weight:750;
color:#475467
}
.mobile-menu a:hover{background:#f5f3ff;color:var(--accent)}

/* HERO */
.hero{
position:relative;
overflow:hidden;
padding:88px 0 66px;
background:
linear-gradient(180deg,#fafaff 0%,#f4f6fb 100%)
}
.glow{
position:absolute;
border-radius:50%;
pointer-events:none;
filter:blur(2px)
}
.glow-one{
width:520px;
height:520px;
top:-300px;
left:calc(50% - 260px);
background:rgba(104,87,255,.12)
}
.glow-two{
width:330px;
height:330px;
right:-160px;
top:100px;
background:rgba(18,183,106,.07)
}
.hero-inner{text-align:center;position:relative}
.eyebrow,.section-kicker{
display:inline-block;
font-size:11px;
font-weight:950;
letter-spacing:.13em;
color:var(--accent)
}
.eyebrow{
padding:8px 13px;
border-radius:999px;
background:var(--accent-soft);
letter-spacing:.04em
}
h1{
font-size:clamp(44px,6.4vw,72px);
letter-spacing:-3.4px;
line-height:1;
margin:22px auto 15px;
max-width:900px
}
h1 span{
display:block;
color:var(--accent)
}
.subtitle{
max-width:760px;
margin:0 auto 33px;
color:var(--muted);
font-size:18px;
line-height:1.7
}

/* EMAIL CARD */
.mail-card,.inbox-card{
background:var(--card);
border:1px solid var(--line);
border-radius:24px;
box-shadow:var(--shadow)
}
.mail-card{
max-width:960px;
margin:auto;
padding:27px;
text-align:left
}
.card-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:11px
}
.mail-label{
font-size:11px;
font-weight:950;
letter-spacing:.13em;
color:#667085
}
.mail-hint{
margin:4px 0 0;
font-size:12px;
color:var(--muted2)
}
.active-badge{
display:inline-flex;
align-items:center;
gap:7px;
font-size:12px;
font-weight:850;
color:#067647;
background:#ecfdf3;
border:1px solid #abefc6;
border-radius:999px;
padding:6px 10px
}
.address-row{display:flex;gap:12px}
.email-shell{
min-width:0;
flex:1;
display:flex;
align-items:center;
border:1px solid var(--line2);
background:#f9fafb;
border-radius:16px;
padding:0 16px;
box-shadow:inset 0 1px 0 #fff
}
.mail-icon{
width:24px;
height:24px;
display:grid;
place-items:center;
margin-right:10px
}
.mail-icon svg{
width:22px;
height:22px;
fill:none;
stroke:var(--accent);
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.email-shell input{
width:100%;
border:0;
outline:0;
background:transparent;
padding:18px 0;
font-size:21px;
font-weight:900;
color:var(--text)
}
.btn{
border-radius:13px;
padding:12px 17px;
border:1px solid var(--line);
font-weight:850;
transition:.16s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#fff;
border:0;
box-shadow:0 10px 25px rgba(104,87,255,.24)
}
.address-row .btn-primary{padding-inline:28px}
.btn-light{
background:#fff;
color:#344054
}
.btn-light:hover{
border-color:#cfc9ff;
color:var(--accent);
background:#faf9ff
}
.btn-danger{
background:#fff;
color:var(--danger)
}
.btn-danger:hover{
background:#fff4f3;
border-color:#fecdca
}
.action-row{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:14px
}
.mail-meta{
display:flex;
align-items:center;
gap:7px;
margin-top:16px;
font-size:13px;
color:var(--muted)
}
.live-dot{
width:8px;
height:8px;
background:var(--green);
border-radius:50%;
box-shadow:0 0 0 4px rgba(18,183,106,.10)
}
.divider{color:#c2c7d0}
.error-box{
margin-top:15px;
padding:12px 14px;
background:#fff1f2;
color:#b42318;
border:1px solid #fecdd3;
border-radius:11px;
font-size:14px
}

/* INBOX */
.inbox-section{padding:12px 0 82px}
.inbox-card{overflow:hidden}
.inbox-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:27px 28px 21px
}
.inbox-header h2{
font-size:30px;
letter-spacing:-1.2px;
margin:5px 0 3px
}
.inbox-header p{margin:0;color:var(--muted);font-size:14px}
.icon-button{
width:45px;
height:45px;
border-radius:13px;
border:1px solid var(--line);
background:#fff;
font-size:21px;
transition:.16s
}
.icon-button:hover{
border-color:#cfc9ff;
color:var(--accent);
background:#faf9ff
}
.column-head{
display:grid;
grid-template-columns:280px 1fr 135px;
gap:15px;
background:#f8f9fb;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:11px 28px;
color:#98a2b3;
font-size:10px;
letter-spacing:.13em;
font-weight:950
}
.message-list{min-height:310px}
.empty-state{
text-align:center;
padding:62px 20px 67px;
color:var(--muted)
}
.empty-icon{
width:68px;
height:68px;
border-radius:20px;
background:var(--accent-soft);
display:grid;
place-items:center;
margin:auto
}
.empty-icon svg{
width:29px;
height:29px;
fill:none;
stroke:var(--accent);
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round
}
.empty-state h3{
color:var(--text);
font-size:21px;
margin:17px 0 7px
}
.empty-state p{margin:0}
.empty-tip{
display:inline-block;
margin-top:15px;
font-size:12px;
color:#6941c6;
background:#f4f3ff;
padding:7px 10px;
border-radius:999px
}
.message-row{
display:grid;
grid-template-columns:280px 1fr 135px;
gap:15px;
align-items:center;
padding:17px 28px;
border-bottom:1px solid var(--line);
transition:.15s ease;
cursor:pointer
}
.message-row:hover{background:#fafaff}
.sender-cell{display:flex;align-items:center;min-width:0}
.avatar{
width:40px;
height:40px;
flex:0 0 auto;
border-radius:50%;
display:grid;
place-items:center;
background:var(--accent-soft);
color:var(--accent);
font-weight:950;
margin-right:11px
}
.sender-data{min-width:0}
.sender-data strong{
font-size:14px;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.subject-cell{min-width:0}
.subject-line{
font-weight:850;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.subject-cell p{
margin:5px 0 0;
color:var(--muted);
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.message-row time{
font-size:12px;
color:var(--muted);
text-align:right
}
.otp-chip{
border:0;
background:var(--accent-soft);
color:var(--accent);
padding:5px 8px;
border-radius:8px;
margin-left:6px;
font-size:11px;
font-weight:950;
vertical-align:middle
}

/* HOW IT WORKS */
.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:17px;
margin-top:28px
}
.steps article{
position:relative;
padding:25px;
background:#fff;
border:1px solid var(--line);
border-radius:19px;
box-shadow:0 8px 30px rgba(16,24,40,.04)
}
.step-number{
position:absolute;
right:18px;
top:17px;
font-size:11px;
font-weight:950;
color:#b0a8ff
}
.step-icon{
width:43px;
height:43px;
border-radius:12px;
display:grid;
place-items:center;
background:var(--accent-soft);
color:var(--accent);
font-weight:950
}
.steps h3{margin:15px 0 7px;font-size:18px}
.steps p{
margin:0;
color:var(--muted);
line-height:1.6;
font-size:14px
}

/* FAQ */
.faq-section{padding:70px 0 6px}
.faq-heading{text-align:center;max-width:680px;margin:0 auto 25px}
.faq-heading h2{
font-size:34px;
letter-spacing:-1.4px;
margin:7px 0
}
.faq-heading p{margin:0;color:var(--muted)}
.faq-grid{
max-width:900px;
margin:auto;
display:grid;
gap:11px
}
.faq-grid details{
background:#fff;
border:1px solid var(--line);
border-radius:15px;
padding:0 18px
}
.faq-grid summary{
cursor:pointer;
list-style:none;
padding:17px 4px;
font-weight:850
}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary::after{
content:"+";
float:right;
font-size:20px;
color:var(--accent)
}
.faq-grid details[open] summary::after{content:"−"}
.faq-grid details p{
margin:0;
padding:0 4px 18px;
color:var(--muted);
line-height:1.65
}

/* MODAL */
.modal{
position:fixed;
inset:0;
background:rgba(8,13,24,.66);
z-index:100;
display:grid;
place-items:center;
padding:18px
}
.modal[hidden]{display:none}
.modal-card{
width:min(880px,100%);
max-height:90vh;
overflow:auto;
background:#fff;
border-radius:22px;
padding:29px;
position:relative;
box-shadow:0 30px 100px #0004
}
.modal-close{
position:absolute;
right:14px;
top:10px;
border:0;
background:transparent;
font-size:31px;
color:#667085
}
.message-title h2{
font-size:29px;
margin:7px 40px 10px 0
}
.message-meta{
border-bottom:1px solid var(--line);
padding-bottom:14px;
color:var(--muted);
font-size:14px
}
.message-meta p{margin:5px 0}
.otp-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:var(--accent-soft);
border:1px solid #ded9ff;
border-radius:16px;
padding:18px;
margin:20px 0
}
.otp-box span{
display:block;
font-size:10px;
font-weight:950;
letter-spacing:.12em;
color:#766aab
}
.otp-box strong{
display:block;
font-size:31px;
letter-spacing:3px;
color:var(--accent);
margin-top:4px
}
.message-body{
padding-top:19px;
line-height:1.65;
overflow-wrap:anywhere
}
.message-body img{max-width:100%;height:auto}
.message-body pre{
white-space:pre-wrap;
word-wrap:break-word;
font-family:inherit
}

/* FOOTER */
.site-footer{
margin-top:15px;
background:linear-gradient(180deg,var(--dark2),var(--dark));
color:#d0d5dd
}
.footer-grid{
display:grid;
grid-template-columns:1.7fr .8fr .8fr 1.1fr;
gap:45px;
padding:58px 0 44px
}
.footer-logo .brand-text{color:#fff}
.footer-brand p{
max-width:410px;
margin:18px 0 0;
color:#98a2b3;
line-height:1.7;
font-size:14px
}
.footer-col{
display:flex;
flex-direction:column;
gap:10px
}
.footer-col h4,.footer-status h4{
margin:4px 0 6px;
font-size:13px;
color:#fff;
letter-spacing:.05em
}
.footer-col a{
text-decoration:none;
color:#98a2b3;
font-size:14px;
transition:.18s
}
.footer-col a:hover{color:#fff}
.status-card{
display:flex;
align-items:center;
gap:12px;
border:1px solid #344054;
background:#1d2939;
border-radius:14px;
padding:14px
}
.status-pulse{
width:10px;
height:10px;
border-radius:50%;
background:#32d583;
box-shadow:0 0 0 5px rgba(50,213,131,.12)
}
.status-card strong{
display:block;
color:#fff;
font-size:13px
}
.status-card small{
display:block;
margin-top:2px;
color:#98a2b3
}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:30px;
padding:20px 0 24px;
border-top:1px solid #344054
}
.footer-bottom p{
margin:0;
color:#7f8a9a;
font-size:12px;
line-height:1.6
}
.footer-bottom p:last-child{
max-width:620px;
text-align:right
}

/* RESPONSIVE */
@media(max-width:900px){
.desktop-nav{display:none}
.mobile-nav{display:block}
.footer-grid{
grid-template-columns:1.5fr 1fr 1fr;
gap:30px
}
.footer-status{grid-column:1/-1}
}

@media(max-width:760px){
.secure-pill{display:none}
.hero{padding:58px 0 48px}
h1{letter-spacing:-2.3px}
.subtitle{font-size:16px}
.mail-card{padding:18px}
.card-topline{align-items:flex-start}
.address-row{flex-direction:column}
.address-row .btn-primary{padding:14px}
.email-shell input{font-size:16px}
.column-head{display:none}
.message-row{
grid-template-columns:1fr 78px;
padding:17px
}
.sender-cell{grid-column:1}
.subject-cell{grid-column:1}
.message-row time{
grid-column:2;
grid-row:1/3
}
.steps{grid-template-columns:1fr}
.inbox-header{padding:21px}
.otp-box{
align-items:flex-start;
flex-direction:column
}
.footer-grid{
grid-template-columns:1fr 1fr
}
.footer-brand,.footer-status{grid-column:1/-1}
.footer-bottom{
flex-direction:column;
gap:8px
}
.footer-bottom p:last-child{text-align:left}
}

@media(max-width:520px){
.container{width:min(100% - 24px,1160px)}
.header-inner{min-height:68px}
.brand-mark{width:36px;height:36px}
.brand-text{font-size:21px}
.hero{padding-top:44px}
h1{font-size:42px}
.mail-meta{flex-wrap:wrap}
.action-row .btn{
flex:1 1 calc(50% - 6px)
}
.footer-grid{grid-template-columns:1fr}
.footer-col,.footer-brand,.footer-status{grid-column:1}
}