/* ===================================
   SrankTech Page Styles
   =================================== */
:root {
  --color-bg:      #03020a;
  --color-surface: rgba(255,255,255,0.03);
  --color-border:  rgba(255,255,255,0.07);
  --color-text:    rgba(255,255,255,0.85);
  --color-muted:   rgba(255,255,255,0.4);
  --color-purple:  #818cf8;
  --color-pink:    #c084fc;
  --color-rose:    #fb7185;
  --color-orange:  #fb923c;
  --color-teal:    #2dd4bf;
  --gradient-main: linear-gradient(135deg,#818cf8,#c084fc);
  --gradient-full: linear-gradient(135deg,#818cf8,#c084fc,#fb7185,#fb923c);
  --font-display:  'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;
}
* { box-sizing: border-box; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); margin: 0; }

/* Navbar */
#mainNav { background: rgba(3,2,10,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); padding: 14px 0; }
#mainNav .nav-link { color: var(--color-muted); font-size: 13px; letter-spacing: 0.05em; transition: color 0.2s; }
#mainNav .nav-link:hover { color: #fff; }
#mainNav .navbar-brand { font-family: var(--font-display); font-size: 22px; font-weight: 800; }

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-purple); border-radius: 4px; }

/* Utilities */
.gradient-text { background: var(--gradient-full); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 14px; }
.section-title { font-family: var(--font-display); font-weight: 800; color: #fff; line-height: 1.1; }
.card-surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; transition: border-color 0.3s; }
.card-surface:hover { border-color: rgba(129,140,248,0.3); }

/* Page-specific styles below */
:root{
    --bg:#4848a9;
    --card:#0f0f1c;
    --border:rgba(255,255,255,.08);
    --text:#fff;
    --muted:rgba(255,255,255,.6);
    --primary:#818cf8;
    --secondary:#c084fc;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    overflow-x:hidden;
}

.about-hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    text-align:center;
    padding:120px 0;
}

.hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.hero-glow-1{
    width:450px;
    height:450px;
    background:#6366f1;
    top:-120px;
    right:-100px;
    opacity:.2;
}

.hero-glow-2{
    width:400px;
    height:400px;
    background:#c084fc;
    left:-100px;
    bottom:-100px;
    opacity:.15;
}

.hero-tag{
    display:inline-block;
    padding:10px 18px;
    border:1px solid var(--border);
    border-radius:50px;
    margin-bottom:25px;
    font-size:12px;
    letter-spacing:.2em;
}

.about-hero h1{
    font-family:'Syne',sans-serif;
    font-size:clamp(3rem,7vw,6rem);
    font-weight:800;
    line-height:.95;
}

.about-hero h1 span{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.about-hero p{
    max-width:750px;
    margin:30px auto;
    color:var(--muted);
    font-size:18px;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.btn-primary-custom{
    padding:14px 28px;
    border-radius:50px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
}

.btn-outline-custom{
    padding:14px 28px;
    border-radius:50px;
    border:1px solid var(--border);
    text-decoration:none;
    color:#fff;
}

.stats-section{
    padding:40px 0 100px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.stat-card{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    padding:30px;
    border-radius:24px;
    text-align:center;
}

.stat-card h2{
    color:var(--primary);
    font-size:3rem;
    font-family:'Syne';
}

.who-we-are,
.core-values{
    padding:80px 0;
    border-top: 1px dotted white;
}

.section-label{
    color:var(--primary);
    letter-spacing:.2em;
    font-size:12px;
}

.section-title{
    font-family:'Syne';
    font-size:3rem;
    margin:20px 0;
}

.section-text{
    color:var(--muted);
}

.about-grid,
.values-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.about-card,
.value-card{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    padding:30px;
    border-radius:24px;
    transition:.3s;
}

.about-card:hover,
.value-card:hover{
    transform:translateY(-8px);
    border-color:var(--primary);
}

.about-card i{
    font-size:30px;
    color:var(--primary);
    margin-bottom:20px;
}

.section-center{
    text-align:center;
    margin-bottom:60px;
}

@media(max-width:991px){

    .stats-grid,
    .about-grid,
    .values-grid{
        grid-template-columns:1fr;
    }

    .section-title{
        font-size:2.2rem;
    }
}