/* =========================
   RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

/* =========================
   ROOT
========================= */

/* DEFAULT = DARK */

:root{
--bg:#060816;
--card:rgba(15,23,42,.72);
--text:#f8fafc;
--soft:#94a3b8;
--border:rgba(255,255,255,.08);
}

/* LIGHT MODE */

html.light-mode{
--bg:#f8fafc;
--card:rgba(255,255,255,.82);
--text:#0f172a;
--soft:#64748b;
--border:rgba(15,23,42,.08);
}

/* =========================
   BASE
========================= */

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
overflow-x:hidden;

transition:
background .3s ease,
color .3s ease;
}

a{
text-decoration:none;
color:inherit;
}

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

.container{
width:100%;
max-width:1280px;
margin:auto;
padding-inline:24px;
}

/* =========================
   HEADER
========================= */

.main-header{
position:fixed;
top:0;
left:0;
width:100%;

z-index:9999;

background:rgba(6,8,22,.82);

backdrop-filter:blur(12px);

border-bottom:1px solid var(--border);

transition:
background .3s ease,
border-color .3s ease;
}

html.light-mode .main-header{
background:rgba(255,255,255,.82);
}

.header-wrap{
height:74px;

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

.left-nav{
display:flex;
align-items:center;
gap:20px;
}

.logo{
font-size:28px;
font-weight:700;
letter-spacing:2px;
}

.desktop-nav{
display:flex;
gap:34px;
}

.desktop-nav a{
font-size:15px;
color:var(--soft);

transition:.3s ease;
}

.desktop-nav a:hover{
color:var(--text);
}

.right-nav{
display:flex;
align-items:center;
gap:18px;
}



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

.menu-btn{
display:none;

font-size:32px;
cursor:pointer;
}

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

.mobile-menu{
position:fixed;

top:0;
left:-100%;

width:100%;
height:100vh;

background:var(--bg);

z-index:999999;

padding:30px 24px;

overflow-y:auto;

transition:.4s ease;
}

.mobile-menu.active{
left:0;
}

.close-btn{
font-size:34px;

margin-bottom:40px;

cursor:pointer;
}

.mobile-nav{
display:grid;
grid-template-columns:1fr 1fr;

gap:18px;

margin-bottom:40px;
}

.mobile-nav a{
font-size:24px;
font-weight:600;
}

.mobile-contact{
margin-top:30px;
color:var(--soft);
}

.mobile-contact p{
margin-bottom:10px;
font-size:15px;
}

.mobile-social{
display:grid;
grid-template-columns:1fr 1fr;

gap:16px;

margin-top:40px;
}

.mobile-social a{
font-size:15px;
color:var(--soft);
}

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

.hero{
padding:180px 0 120px;
}

.hero-grid{
display:grid;
grid-template-columns:1.4fr .8fr;

gap:60px;
align-items:center;
}

.hero h1{
font-size:82px;
line-height:1.05;

margin-bottom:28px;
}

.hero p{
font-size:20px;
color:var(--soft);

margin-bottom:40px;
}

.hero-right{
display:flex;
flex-direction:column;
gap:24px;
}

.hero-card{
background:var(--card);

border:1px solid var(--border);

padding:34px;

border-radius:28px;
}

.hero-badge{
font-size:13px;

letter-spacing:2px;
text-transform:uppercase;

color:var(--soft);

margin-bottom:18px;
}

.hero-card h3{
font-size:48px;
margin-bottom:14px;
}

.hero-card p{
font-size:16px;
margin:0;
}

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

.btn{
padding:15px 26px;

border-radius:100px;

font-size:15px;
font-weight:600;

display:inline-block;

transition:.3s ease;
}

.btn-primary{
background:var(--text);
color:var(--bg);
}

.btn-primary:hover{
transform:translateY(-2px);
}

.btn-secondary{
border:1px solid var(--border);
}

/* =========================
   SECTION
========================= */

.section{
padding:100px 0;
}

.section-title{
font-size:42px;

margin-bottom:16px;

text-align:center;
}

.section-desc{
color:var(--soft);

margin-bottom:50px;

text-align:center;
}

/* =========================
   FEATURES
========================= */

.features{
display:grid;
grid-template-columns:repeat(3,1fr);

gap:24px;
}

.feature-card{
background:var(--card);

border:1px solid var(--border);

padding:34px;

border-radius:26px;
}

.feature-card h3{
font-size:24px;
margin-bottom:14px;
}

.feature-card p{
color:var(--soft);
}

/* =========================
   PRICING
========================= */

.pricing{
display:grid;
grid-template-columns:repeat(3,1fr);

gap:24px;
}

.price-card{
background:var(--card);

border:1px solid var(--border);

padding:36px;

border-radius:28px;
}

.price-card h3{
font-size:28px;
margin-bottom:14px;
}

.price{
font-size:52px;
font-weight:700;

margin-bottom:20px;
}

.price span{
font-size:16px;
color:var(--soft);
}

.price-card ul{
list-style:none;
margin-bottom:30px;
}

.price-card li{
margin-bottom:12px;
color:var(--soft);
}

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

.faq-item{
border-bottom:1px solid var(--border);
padding:24px 0;
}

.faq-question{
display:flex;
align-items:center;
justify-content:space-between;

cursor:pointer;
gap:20px;
}

.faq-icon{
width:26px;
height:26px;

position:relative;

flex-shrink:0;
}

.faq-icon::before,
.faq-icon::after{
content:"";

position:absolute;

top:50%;
left:50%;

width:18px;
height:2px;

background:var(--text);

transition:.3s ease;

transform:
translate(-50%,-50%);
}

.faq-icon::after{
transform:
translate(-50%,-50%)
rotate(90deg);
}

.faq-item.active .faq-icon::after{
transform:
translate(-50%,-50%)
rotate(0deg);

opacity:0;
}

.faq-answer{
max-height:0;

overflow:hidden;

color:var(--soft);

transition:.4s ease;
}

.faq-answer p{
padding-top:18px;
}

.faq-item.active .faq-answer{
max-height:300px;
}

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

.cta{
padding:120px 0;

background:var(--card);

text-align:center;
}

.cta h2{
font-size:56px;
margin-bottom:20px;
}

.cta p{
color:var(--soft);
margin-bottom:34px;
}

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

@media(max-width:768px){

.desktop-nav{
display:none;
}

.menu-btn{
display:block;
}

.logo{
font-size:22px;
}

.hero{
padding:140px 0 80px;
}

.hero-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:48px;
}

.hero p{
font-size:17px;
}

.section{
padding:80px 0;
}

.section-title{
font-size:34px;
text-align:center;
}

.features,
.pricing{
grid-template-columns:1fr;
}

.cta{
padding:90px 0;
}

.cta h2{
font-size:38px;
}

.mobile-nav{
grid-template-columns:1fr 1fr;
}

}



/* =========================
   THEME BUTTON
========================= */
.theme-btn{
position:relative;
width:46px;
height:46px;
border:none;
background:none;
color:var(--text);
cursor:pointer;
}

.theme-btn svg{
position:absolute;
inset:0;
margin:auto;

width:22px;
height:22px;

transition:.25s ease;
}

/* DEFAULT DARK */

.moon-icon{
opacity:1;
}

.sun-icon{
opacity:0;
}

/* LIGHT */

html.light-mode .moon-icon{
opacity:0;
}

html.light-mode .sun-icon{
opacity:1;
}