:root{
  --navy:#062d63;
  --navy2:#073b78;
  --blue:#0876e8;
  --cyan:#12bce8;
  --ink:#08265a;
  --muted:#5d6d83;
  --line:#dce9f5;
  --panel:#f4f9fe;
  --white:#fff;
  --shadow:0 22px 60px rgba(5,54,112,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1220px,calc(100% - 40px));margin:auto}

.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.98);border-bottom:1px solid #e6eef6;backdrop-filter:blur(10px)}
.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:72px;height:72px;border-radius:50%;object-fit:cover}
.brand-legal{font-weight:800;color:#0870dc;text-transform:uppercase;font-size:.82rem;line-height:1.14;letter-spacing:.01em}
.back-link{font-weight:800;color:var(--navy);padding:12px 16px;border-radius:8px;border:1px solid var(--line);background:#fff}
.back-link:hover{border-color:#a9cff3;color:var(--blue)}

.webmail-main{min-height:calc(100vh - 164px)}
.webmail-hero{position:relative;overflow:hidden;background:linear-gradient(130deg,#052958 0%,#073b78 58%,#0a5ba6 100%);color:#fff;padding:96px 0}
.webmail-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 35%,rgba(18,188,232,.08));pointer-events:none}
.hero-glow{position:absolute;border-radius:50%;filter:blur(6px);opacity:.25;pointer-events:none}
.hero-glow-one{width:460px;height:460px;background:#12bce8;right:-150px;top:-140px}
.hero-glow-two{width:320px;height:320px;background:#0876e8;left:-120px;bottom:-160px}
.webmail-layout{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .8fr;gap:70px;align-items:center}
.webmail-copy{max-width:650px}
.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:#bdefff;font-size:.82rem;margin:0 0 14px}
.webmail-copy h1{font-size:clamp(3rem,6vw,5.7rem);line-height:.95;margin:0 0 24px;text-transform:uppercase;letter-spacing:-.035em}
.webmail-copy .lead{font-size:1.25rem;max-width:620px;color:#eaf6ff;margin:0 0 28px}
.status-line{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:10px 14px;border-radius:999px;color:#eefaff;font-weight:700;font-size:.9rem}
.status-dot{width:9px;height:9px;border-radius:50%;background:#40d993;box-shadow:0 0 0 5px rgba(64,217,147,.12)}

.access-card{background:#fff;color:var(--ink);padding:40px;border-radius:20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.42)}
.logo-wrap{display:flex;justify-content:center;margin-bottom:18px}
.card-logo{width:122px;height:122px;border-radius:50%;object-fit:cover;box-shadow:0 10px 24px rgba(8,118,232,.15)}
.access-card h2{text-align:center;font-size:2rem;margin:0 0 12px;color:var(--navy)}
.access-card p{text-align:center;color:#50647e;margin:0 auto 24px;max-width:430px}
.mail-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:var(--blue);color:#fff;padding:16px 22px;border-radius:10px;font-weight:800;box-shadow:0 12px 26px rgba(8,118,232,.26);transition:.2s ease}
.mail-button:hover{transform:translateY(-2px);background:#066bd2}
.mail-icon{font-size:1.1rem}
.helper{font-size:.82rem!important;margin:16px auto 0!important;color:#6d7d90!important}

.info-strip{background:#f6fbff;border-top:1px solid #e4eef7;border-bottom:1px solid #e4eef7;padding:32px 0}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.info-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e0ebf5;padding:20px;border-radius:12px}
.info-icon{display:grid;place-items:center;min-width:42px;height:42px;border-radius:10px;background:#eaf5ff;color:var(--blue);font-size:1.2rem}
.info-item strong{display:block;color:var(--navy);margin-bottom:4px}
.info-item span:last-child{display:block;color:#64758a;font-size:.9rem}

.site-footer{background:#031e43;color:#d5e8f9;padding:22px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:.88rem}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:700}
.footer-brand img{width:48px;height:48px;border-radius:50%;object-fit:cover}

@media (max-width:900px){
  .webmail-layout{grid-template-columns:1fr;gap:38px}
  .webmail-copy{text-align:center;margin:auto}
  .status-line{justify-content:center}
  .info-grid{grid-template-columns:1fr}
  .webmail-hero{padding:70px 0}
}
@media (max-width:560px){
  .container{width:min(100% - 24px,1220px)}
  .header-inner{min-height:76px}
  .brand-logo{width:58px;height:58px}
  .brand-legal{font-size:.66rem}
  .back-link{font-size:.86rem;padding:10px 12px}
  .webmail-copy h1{font-size:2.75rem}
  .webmail-copy .lead{font-size:1.05rem}
  .access-card{padding:28px 20px}
  .card-logo{width:104px;height:104px}
}