/* ========================================
   BETTERSIDE BLOG
   PREMIUM STYLE
======================================== */

:root{

--primary:#0057FF;
--primary-dark:#003DB5;

--bg:#F4F7FB;

--white:#FFFFFF;

--text:#1F2937;

--muted:#667085;

--border:#E8EEF5;

--shadow:0 30px 80px rgba(15,30,60,.08);

--radius:22px;

}

/* ========================= */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Inter",sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.8;

}

/* ========================= */

img{

max-width:100%;

display:block;

}

/* ========================= */

a{

text-decoration:none;

color:inherit;

}

/* ========================= */

.progress{

position:fixed;

left:0;

top:0;

height:4px;

width:0;

background:linear-gradient(90deg,#0057ff,#4DA8FF);

z-index:9999;

}

/* ========================= */

.hero{

height:92vh;

min-height:760px;

background:

linear-gradient(rgba(7,20,45,.55),

rgba(7,20,45,.60)),

url(images/hero.jpg)

center center/cover;

display:flex;

align-items:flex-end;

position:relative;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,

rgba(255,255,255,.12),

transparent 45%);

}

.hero-content{

position:relative;

z-index:2;

max-width:1280px;

margin:auto;

width:100%;

padding:80px 50px;

color:white;

}

/* ========================= */

.back-button{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 24px;

border-radius:999px;

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

backdrop-filter:blur(16px);

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

font-weight:600;

transition:.35s;

margin-bottom:45px;

}

.back-button:hover{

background:white;

color:var(--primary);

transform:translateX(-6px);

}

.logo{

height:46px;

margin-bottom:30px;

}

.hero-badge{

display:inline-block;

padding:9px 18px;

border-radius:999px;

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

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:22px;

}

.hero h1{

font-family:"DM Serif Display",serif;

font-size:clamp(3rem,6vw,5.5rem);

line-height:1.08;

max-width:820px;

margin-bottom:25px;

}

.hero p{

max-width:700px;

font-size:19px;

line-height:2;

color:#dfe7ff;

}

/* ========================= */

.hero-meta{

display:flex;

gap:60px;

margin-top:55px;

}

.hero-meta span{

display:block;

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#9cb7ff;

margin-bottom:6px;

}

.hero-meta strong{

font-size:18px;

font-weight:600;

}

/* ========================= */

.blog-wrapper{

max-width:1500px;

margin:-120px auto 100px;

padding:0 35px;

position:relative;

z-index:20;

}

.blog-card{

background:white;

border-radius:32px;

box-shadow:var(--shadow);

overflow:hidden;

}

/* ========================= */

.blog-layout{

display:grid;

grid-template-columns:260px minmax(0,1fr) 320px;

gap:60px;

padding:60px;

}

/* ========================= */

.toc{

position:sticky;

top:120px;

height:max-content;

}

.toc h3{

font-size:24px;

margin-bottom:25px;

color:#102B55;

}

.toc nav{

display:flex;

flex-direction:column;

gap:10px;

}

.toc a{

padding:14px 18px;

border-radius:14px;

color:#667085;

font-weight:500;

transition:.3s;

}

.toc a:hover{

background:#EEF5FF;

color:var(--primary);

padding-left:28px;

}

/* ========================= */

.article{

width:100%;

}

.cover-image{

width:100%;

height:560px;

object-fit:cover;

border-radius:24px;

margin-bottom:60px;

}

.eyebrow,

.section-label{

display:inline-block;

padding:8px 16px;

background:#EEF5FF;

border-radius:999px;

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#0057FF;

margin-bottom:22px;

}

.article section{

margin:90px 0;

}

.article h2{

font-family:"DM Serif Display",serif;

font-size:3rem;

line-height:1.15;

margin-bottom:24px;

color:#102B55;

}

.article p{

font-size:18px;

color:#667085;

line-height:2;

margin-bottom:22px;

}

.article ul{

padding-left:24px;

margin:25px 0;

}

.article li{

margin:16px 0;

font-size:17px;

color:#667085;

}
/* ========================================
   IMAGE BLOCKS
======================================== */

.image-block{

margin:70px 0;

overflow:hidden;

border-radius:28px;

position:relative;

}

.image-block.large img{

height:620px;

}

.image-block img{

width:100%;

height:460px;

object-fit:cover;

transition:1s;

display:block;

}

.image-block:hover img{

transform:scale(1.06);

}

.caption{

position:absolute;

left:25px;

bottom:25px;

padding:10px 18px;

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

backdrop-filter:blur(14px);

border-radius:999px;

font-size:14px;

font-weight:600;

color:#102B55;

}

/* ========================================
   BENEFITS
======================================== */

.benefit-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px;

margin-top:50px;

}

.benefit-card{

background:#ffffff;

padding:35px;

border-radius:24px;

box-shadow:0 18px 45px rgba(10,30,60,.08);

transition:.4s;

}

.benefit-card:hover{

transform:translateY(-10px);

box-shadow:0 28px 60px rgba(10,30,60,.15);

}

.benefit-icon{

width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

background:linear-gradient(135deg,#0057FF,#2C82FF);

border-radius:50%;

margin-bottom:25px;

color:#fff;

}

.benefit-card h3{

font-size:22px;

margin-bottom:15px;

color:#102B55;

}

.benefit-card p{

font-size:15px;

margin:0;

line-height:1.8;

}

/* ========================================
   INVESTMENT
======================================== */

.investment-card{

margin:80px 0;

padding:55px;

border-radius:28px;

background:

linear-gradient(135deg,#071A3A,#0057FF);

color:#fff;

overflow:hidden;

position:relative;

}

.investment-card::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:320px;

height:320px;

border-radius:50%;

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

}

.investment-content{

position:relative;

z-index:2;

max-width:720px;

}

.investment-card span{

display:inline-block;

margin-bottom:18px;

letter-spacing:2px;

font-size:12px;

text-transform:uppercase;

color:#A8C6FF;

}

.investment-card h2{

color:white;

margin-bottom:20px;

}

.investment-card p{

color:#d9e6ff;

margin:0;

}

/* ========================================
   CONNECTIVITY
======================================== */

.connect-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-top:50px;

}

.connect-card{

padding:30px;

background:#F8FAFD;

border-radius:22px;

transition:.35s;

}

.connect-card:hover{

background:white;

transform:translateY(-8px);

box-shadow:0 22px 50px rgba(0,0,0,.08);

}

.connect-card h3{

font-size:22px;

margin-bottom:12px;

color:#102B55;

}

.connect-card p{

margin:0;

font-size:15px;

line-height:1.8;

}

/* ========================================
   AMENITIES
======================================== */

.amenities-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:26px;

margin-top:50px;

}

.amenity-card{

padding:35px;

background:#fff;

border-radius:22px;

box-shadow:0 15px 35px rgba(15,30,60,.07);

transition:.35s;

}

.amenity-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(15,30,60,.12);

}

.amenity-icon{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

border-radius:50%;

background:#EEF5FF;

color:#0057FF;

margin-bottom:22px;

}

.amenity-card h3{

margin-bottom:12px;

font-size:20px;

color:#102B55;

}

.amenity-card p{

margin:0;

font-size:15px;

}

/* ========================================
   QUOTE
======================================== */

.quote{

padding:60px;

border-radius:30px;

background:

linear-gradient(135deg,#071A3A,#0057FF);

text-align:center;

color:white;

margin:80px 0;

}

.quote p{

font-family:"DM Serif Display",serif;

font-size:2.2rem;

line-height:1.6;

max-width:820px;

margin:auto;

color:#fff;

}

.quote span{

display:block;

margin-top:25px;

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

color:#BCD3FF;

}
/*========================================
SIDEBAR
========================================*/

.sidebar{

position:sticky;

top:120px;

height:max-content;

}

.sidebar-card{

background:#fff;

padding:30px;

border-radius:24px;

margin-bottom:25px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

transition:.35s;

}

.sidebar-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.sidebar-card h3{

font-size:24px;

margin-bottom:20px;

font-family:"DM Serif Display",serif;

color:#102B55;

}

.sidebar-card ul{

list-style:none;

padding:0;

margin:0;

}

.sidebar-card li{

padding:14px 0;

border-bottom:1px solid #EEF3F8;

color:#667085;

font-size:15px;

}

.sidebar-card li:last-child{

border:none;

}

.sidebar-btn{

display:block;

margin-top:25px;

padding:15px;

text-align:center;

border-radius:999px;

background:#0057FF;

color:white;

font-weight:600;

transition:.3s;

}

.sidebar-btn:hover{

background:#003EB3;

transform:translateY(-3px);

}

.socials{

display:flex;

flex-direction:column;

gap:12px;

margin-top:20px;

}

.socials a{

display:flex;

justify-content:center;

align-items:center;

height:48px;

border-radius:14px;

background:#F5F8FC;

font-weight:600;

transition:.3s;

}

.socials a:hover{

background:#0057FF;

color:#fff;

}

/*========================================
FAQ
========================================*/

details{

margin:18px 0;

border:1px solid #E6EDF5;

border-radius:18px;

overflow:hidden;

background:white;

transition:.35s;

}

details:hover{

box-shadow:0 12px 35px rgba(0,0,0,.06);

}

summary{

padding:22px 28px;

cursor:pointer;

font-size:18px;

font-weight:600;

list-style:none;

position:relative;

}

summary::-webkit-details-marker{

display:none;

}

summary::after{

content:"+";

position:absolute;

right:25px;

font-size:28px;

transition:.3s;

}

details[open] summary::after{

content:"−";

}

details p{

padding:0 28px 24px;

margin:0;

}

/*========================================
CTA
========================================*/

.cta{

margin-top:80px;

padding:70px;

border-radius:32px;

background:

linear-gradient(135deg,#071A3A,#0057FF);

text-align:center;

overflow:hidden;

position:relative;

}

.cta::before{

content:"";

position:absolute;

width:380px;

height:380px;

border-radius:50%;

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

right:-120px;

top:-150px;

}

.cta h2{

position:relative;

color:white;

font-size:3rem;

margin-bottom:20px;

}

.cta p{

position:relative;

max-width:650px;

margin:auto;

color:#D9E6FF;

}

.cta-btn{

position:relative;

display:inline-block;

margin-top:40px;

padding:18px 40px;

background:white;

color:#0057FF;

border-radius:999px;

font-weight:700;

transition:.35s;

}

.cta-btn:hover{

transform:translateY(-5px);

}

/*========================================
FOOTER
========================================*/

footer{

margin-top:120px;

background:#06152F;

color:white;

}

.footer-container{

max-width:1400px;

margin:auto;

padding:80px 40px;

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

}

.footer-logo{

height:50px;

margin-bottom:25px;

}

.footer-container h4{

margin-bottom:20px;

font-size:20px;

}

.footer-container a{

display:block;

margin-bottom:14px;

color:#BFD0EE;

transition:.3s;

}

.footer-container a:hover{

color:white;

padding-left:8px;

}

.footer-container p{

color:#BFD0EE;

}

.copyright{

padding:30px;

text-align:center;

border-top:1px solid rgba(255,255,255,.08);

color:#AFC0E0;

font-size:14px;

}/* ========================================
   RESPONSIVE DESIGN
======================================== */

@media (max-width:1400px){

.blog-layout{

grid-template-columns:220px 1fr 280px;

gap:40px;

}

}

@media (max-width:1200px){

.blog-layout{

grid-template-columns:1fr;

}

.toc{

display:none;

}

.sidebar{

position:relative;

top:auto;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.sidebar-card{

margin-bottom:0;

}

.footer-container{

grid-template-columns:repeat(2,1fr);

}

.hero{

min-height:650px;

}

.cover-image{

height:450px;

}

}

@media (max-width:900px){

.hero{

min-height:600px;

}

.hero-content{

padding:40px 25px;

}

.hero h1{

font-size:3rem;

}

.hero p{

font-size:16px;

}

.hero-meta{

flex-direction:column;

gap:20px;

}

.blog-wrapper{

margin-top:-80px;

padding:0 15px;

}

.blog-layout{

padding:30px;

}

.benefit-grid,

.connect-grid,

.amenities-grid{

grid-template-columns:1fr;

}

.sidebar{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

}

}

@media (max-width:600px){

.hero{

min-height:520px;

}

.hero h1{

font-size:2.3rem;

}

.back-button{

padding:12px 18px;

font-size:14px;

}

.hero-badge{

font-size:10px;

letter-spacing:1px;

}

.cover-image{

height:250px;

}

.image-block img{

height:220px;

}

.image-block.large img{

height:280px;

}

.article h2{

font-size:2rem;

}

.quote{

padding:35px 25px;

}

.quote p{

font-size:1.6rem;

}

.cta{

padding:45px 25px;

}

.cta h2{

font-size:2rem;

}

.blog-layout{

padding:20px;

}

}

/* ========================================
   ANIMATIONS
======================================== */

.fade-up{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.image-block{

cursor:pointer;

}

.image-block img{

will-change:transform;

}

.benefit-card,
.connect-card,
.amenity-card,
.sidebar-card{

will-change:transform;

}

/* ========================================
   ACTIVE TOC
======================================== */

.toc a.active{

background:#0057FF;

color:#fff;

padding-left:24px;

box-shadow:0 12px 30px rgba(0,87,255,.25);

}

/* ========================================
   GLASS EFFECTS
======================================== */

.back-button{

box-shadow:0 8px 25px rgba(0,0,0,.12);

}

.hero-badge{

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

/* ========================================
   SMOOTH HOVER
======================================== */

.cover-image{

transition:.8s;

}

.cover-image:hover{

transform:scale(1.02);

}

button,
a{

transition:.3s ease;

}

/* ========================================
   SELECTION
======================================== */

::selection{

background:#0057FF;

color:#fff;

}

/* ========================================
   SMOOTH SHADOW
======================================== */

.blog-card{

transition:.4s;

}

.blog-card:hover{

box-shadow:

0 50px 120px rgba(0,0,0,.10);

}