/* styles.css
Home page styling (dark navy + teal). Drop this file next to index.html.
Then add in :
*/
:root{
--bg: #0B1220;
--bg-2:#0F172A;
--bg-3:#162238;
--text:#EAF0FF;
--text-dim:#9AA7C1;
--text-dark:#0B1220;
--card:#FFFFFF;
--border: rgba(255,255,255,.10);
--accent:#14B8A6;
--accent-2:#0D9488;
--shadow: 0 18px 48px rgba(0,0,0,.35);
--radius: 22px;
--max: 1120px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
/* Generic */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, select{ font: inherit; }
section{ position: relative; }
.container{
max-width: var(--max);
margin: 0 auto;
padding: 0 20px;
}
/* ================= HEADER ================= */
header{
position: sticky;
top: 0;
z-index: 50;
background: rgba(15,23,42,.82);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
header .nav{
max-width: var(--max);
margin: 0 auto;
padding: 12px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 14px;
}
header .logo{
display:flex;
align-items:center;
gap:10px;
}
header .logo img{
width: 46px;
height: 46px;
object-fit: cover;
border-radius: 14px;
border: 1px solid rgba(20,184,166,.25);
background: rgba(20,184,166,.10);
}
/* Nav links */
header nav{
display:flex;
align-items:center;
gap: 18px;
}
header nav a{
color: var(--text-dim);
font-weight: 650;
font-size: 14px;
padding: 10px 6px;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
header nav a:hover{
color: var(--text);
border-bottom-color: rgba(20,184,166,.45);
}
/* Language selector */
header select{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: rgba(255,255,255,.08);
color: #EAF0FF;
border: 1px solid rgba(255,255,255,.15);
border-radius: 12px;
padding: 10px 36px 10px 14px;
font-weight: 700;
font-size: 14px;
outline: none;
cursor: pointer;
/* arrow */
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27white%27%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5z%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
header select option{
background: #ffffff;
color: #0B1220;
}
/* ================= HERO ================= */
.hero{
background:
radial-gradient(900px 420px at 80% 20%, rgba(20,184,166,.18), transparent 55%),
radial-gradient(650px 380px at 10% 70%, rgba(99,102,241,.12), transparent 55%),
linear-gradient(180deg, var(--bg-2), var(--bg));
border-bottom: 1px solid var(--border);
overflow:hidden;
}
.hero-bg{
/* your graph image */
position:absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .28; /* adjust if your graph is too strong */
filter: blur(0px);
pointer-events:none;
user-select:none;
}
.hero-content{
max-width: 820px;
margin: 0 auto;
padding: 80px 20px 60px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
}
.hero-text h1{
margin: 0 0 18px;
font-size: 52px;
line-height: 1.1;
letter-spacing: -1px;
font-weight: 900;
}
.hero-text p{
margin: 0 0 26px;
color: var(--text-dim);
font-size: 18px;
}
/* Right side hero “image” placeholder */
.hero-image{
min-height: 360px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255,255,255,.06);
box-shadow: var(--shadow);
}
/* Scroll indicator */
.scroll-indicator{
display:flex;
justify-content:center;
padding: 12px 0 26px;
color: rgba(234,240,255,.80);
position: relative;
z-index: 1;
font-size: 20px;
}
.scroll-indicator::before{
content:"";
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,.04);
display:block;
position:absolute;
transform: translateY(-6px);
z-index:-1;
}
/* ================= ABOUT ================= */
.about{
max-width: var(--max);
margin: 0 auto;
padding: 54px 20px;
}
.about h2{
margin: 0 0 12px;
font-size: 34px;
letter-spacing: -0.4px;
font-weight: 900;
}
.about p{
margin: 0;
color: var(--text-dim);
max-width: 72ch;
font-size: 16px;
}
/* ================= RESULTS ================= */
.results{
max-width: var(--max);
margin: 0 auto;
padding: 16px 20px 56px;
}
.results-card{
background: rgba(255,255,255,.06);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow);
}
.results-card h3{
margin: 0 0 14px;
font-size: 20px;
font-weight: 900;
}
.results-card img{
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
width: 100%;
max-height: 520px;
object-fit: cover;
}
/* ================= CTA ================= */
.cta{
padding: 54px 20px 70px;
display:flex;
justify-content:center;
border-top: 1px solid rgba(255,255,255,.06);
background: linear-gradient(180deg, rgba(15,23,42,.45), rgba(11,18,32,0));
}
/* ================= FOOTER ================= */
footer{
max-width: var(--max);
margin: 0 auto;
padding: 26px 20px 40px;
color: var(--text-dim);
border-top: 1px solid rgba(255,255,255,.06);
}
footer p{
margin: 0 0 10px;
font-weight: 750;
color: rgba(234,240,255,.88);
}
.socials {
display: flex;
gap: 16px;
align-items: center;
margin-top: 10px;
}
.socials img {
width: 32px;
height: 32px;
object-fit: contain;
cursor: pointer;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.socials img:hover {
transform: scale(1.1);
opacity: 0.85;
}
.section-light{
background: #F6F8FC;
color: #0B1220;
padding: 56px 0;
}
.section-dark{
background: #2E3440;
color: #EAF0FF;
padding: 56px 0;
}
.center{ text-align:center; }
.inline-link{ color: var(--accent); font-weight: 750; }
.inline-link:hover{ text-decoration: underline; }
.page-band{
background: #3A3F46;
color: #EAF0FF;
padding: 74px 0 64px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.page-title{
margin: 0;
text-align: center;
font-size: 48px;
font-weight: 900;
letter-spacing: -0.8px;
}
.packages{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;
margin-top: 10px;
}
.package-card{
background: #FFFFFF;
border: 1px solid rgba(12,18,32,.10);
border-radius: 18px;
padding: 22px 22px;
box-shadow: 0 10px 28px rgba(12,18,32,.12);
}
.package-card h3{
margin: 0 0 12px;
font-size: 18px;
font-weight: 900;
display:flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
}
.price{ color: rgba(11,18,32,.72); font-weight: 850; }
.package-card ul{
margin: 0;
padding-left: 18px;
color: rgba(11,18,32,.78);
font-size: 14px;
line-height: 1.65;
}
.package-card li{ margin: 8px 0; }
.package-card .or{
text-align:center;
margin: 16px 0;
font-weight: 900;
color: rgba(11,18,32,.55);
}
.package-card.featured{
transform: translateY(-10px);
border-color: rgba(20,184,166,.45);
box-shadow: 0 18px 44px rgba(12,18,32,.18);
}
.package-card .sublist{
list-style: none;
padding-left: 0;
}
.package-card .sublist ul{
margin-top: 10px;
padding-left: 18px;
}
.packages-note{
margin: 22px auto 20px;
max-width: 70ch;
text-align: center;
color: rgba(11,18,32,.70);
font-style: italic;
font-size: 13px;
}
.btn-wide{
width: 100%;
padding: 18px 18px;
font-size: 16px;
}
/* Button (works for and