/* ==========================================
   CALCULATOR360 PRO
   STYLE.CSS
========================================== */

:root{

--primary:#6C63FF;
--primary-dark:#5548ff;

--secondary:#00C2A8;

--bg:#0f1117;
--surface:#171923;
--surface-2:#1d2130;

--border:rgba(255,255,255,.08);

--text:#ffffff;
--text-light:#b7bfd1;

--danger:#ff5a5a;
--success:#22c55e;
--warning:#f59e0b;

--radius:18px;

--shadow:
0 10px 40px rgba(0,0,0,.30);

--container:1280px;

}

/* ==========================================
   LIGHT MODE
========================================== */

.light-theme{

--bg:#f5f7fb;
--surface:#ffffff;
--surface-2:#f3f5fb;

--border:#e5e7eb;

--text:#121826;
--text-light:#667085;

}

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

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

html{
scroll-behavior:smooth;
}

body{

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

background:var(--bg);

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}

/* ==========================================
   CONTAINER
========================================== */

.container{

width:100%;

max-width:var(--container);

margin:auto;

padding-left:24px;
padding-right:24px;

}

/* ==========================================
   NAVBAR
========================================== */

.navbar{

position:sticky;

top:0;

z-index:1000;

background:
rgba(15,17,23,.80);

backdrop-filter:blur(18px);

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

}

.nav-container{

display:flex;

align-items:center;

justify-content:space-between;

height:75px;

}

.logo{

font-size:1.4rem;

font-weight:800;

color:white;

text-decoration:none;

display:flex;

align-items:center;

gap:8px;

}

.logo span{

color:var(--primary);

font-size:1.7rem;

}

.desktop-nav{

display:flex;

gap:28px;

}

.desktop-nav a{

text-decoration:none;

color:var(--text-light);

font-weight:500;

transition:.25s;

}

.desktop-nav a:hover{

color:white;

}

.nav-actions{

display:flex;

align-items:center;

gap:12px;

}

.theme-btn{

width:42px;

height:42px;

border:none;

border-radius:12px;

background:var(--surface);

color:var(--text);

cursor:pointer;

font-size:1rem;

}

.mobile-menu-btn{

display:none;

width:42px;

height:42px;

border:none;

border-radius:12px;

background:var(--surface);

color:var(--text);

font-size:1rem;

cursor:pointer;

}

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

.hero{

padding-top:90px;
padding-bottom:90px;

}

.hero-content{

text-align:center;

max-width:850px;

margin:auto;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:999px;

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

border:
1px solid rgba(108,99,255,.20);

font-size:.85rem;

margin-bottom:24px;

}

.hero h1{

font-size:4rem;

line-height:1.1;

font-weight:800;

margin-bottom:24px;

}

.hero p{

font-size:1.15rem;

color:var(--text-light);

max-width:700px;

margin:auto;

margin-bottom:40px;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:16px;

margin-bottom:50px;

flex-wrap:wrap;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:14px;

text-decoration:none;

font-weight:600;

transition:.25s;

cursor:pointer;

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}

.btn-secondary{

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

background:var(--surface);

color:white;

}

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

.hero-stats{

display:grid;

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

gap:18px;

}

.stat-card{

background:var(--surface);

padding:22px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

}

.stat-card h3{

font-size:1.8rem;

margin-bottom:6px;

color:var(--primary);

}

.stat-card p{

font-size:.9rem;

margin:0;

}

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

section{

padding-top:80px;
padding-bottom:80px;

}

.section-title{

font-size:2.4rem;

font-weight:800;

margin-bottom:40px;

text-align:center;

}

/* ==========================================
   TOOL GRID
========================================== */

.tool-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:24px;

}

.tool-card{

background:var(--surface);

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

padding:28px;

border-radius:var(--radius);

text-decoration:none;

color:white;

transition:.3s;

box-shadow:var(--shadow);

}

.tool-card:hover{

transform:translateY(-5px);

border-color:var(--primary);

}

.tool-icon{

width:60px;
height:60px;

display:flex;
align-items:center;
justify-content:center;

font-size:1.6rem;

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

border-radius:16px;

margin-bottom:18px;

}

.tool-card h3{

font-size:1.2rem;

margin-bottom:10px;

}

.tool-card p{

color:var(--text-light);

font-size:.95rem;

}

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

.calculator-section{

margin-top:40px;

}

.calculator-grid{

display:grid;

grid-template-columns:
1fr 400px;

gap:30px;

}

.calculator-card{

background:var(--surface);

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

border-radius:24px;

padding:24px;

box-shadow:var(--shadow);

}

/* ==========================================
   INPUTS
========================================== */

input,
select{

width:100%;

padding:14px 16px;

background:var(--surface-2);

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

border-radius:14px;

outline:none;

color:var(--text);

font-size:1rem;

}

input:focus,
select:focus{

border-color:var(--primary);

}

/* ==========================================
   BUTTONS
========================================== */

button{

font-family:inherit;

}

.calc-btn{

width:100%;

padding:16px;

border:none;

border-radius:14px;

background:var(--primary);

color:white;

font-weight:600;

cursor:pointer;

transition:.25s;

}

.calc-btn:hover{

background:var(--primary-dark);

}

/* ==========================================
   RESULT CARD
========================================== */

.result-card{

margin-top:20px;

padding:18px;

background:
rgba(108,99,255,.08);

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

border-radius:14px;

}

.result-label{

font-size:.85rem;

color:var(--text-light);

margin-bottom:6px;

}

.result-value{

font-size:1.8rem;

font-weight:700;

color:var(--primary);

}

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

footer{

padding:50px 0;

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

text-align:center;

color:var(--text-light);

}

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

@media(max-width:992px){

.hero h1{

font-size:3rem;

}

.calculator-grid{

grid-template-columns:1fr;

}

.hero-stats{

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

}

}

@media(max-width:768px){

.desktop-nav{

display:none;

}

.mobile-menu-btn{

display:block;

}

.hero{

padding-top:60px;
padding-bottom:60px;

}

.hero h1{

font-size:2.2rem;

}

.hero p{

font-size:1rem;

}

.section-title{

font-size:1.8rem;

}

.hero-stats{

grid-template-columns:1fr;

}

.container{

padding-left:16px;
padding-right:16px;

}

}

@media(max-width:480px){

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

}