/* CSS Variables & Reset */
:root {
    --bg-color: #0a0a0a;
    --text-main: #e5e5e5;
    --text-muted: #a3a3a3;
    --accent: #3b82f6;
    /* Blue accent */
    --accent-glow: rgba(59, 130, 246, 0.2);
    --border: #262626;
    --card-bg: #171717;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --container-width: 1100px;
    --spacing-section: 120px;
    --spacing-md: 2rem;
    --transition: all 0.3s ease;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.logo {
    font-family: var(--font-heading);
    color: #fff;
    font-weight: 600;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: var(--spacing-section) 0;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
    background: linear-gradient(90deg, #fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: #fff;
    color: #000;
    border: 1px solid #fff;
}

.btn-primary:hover {
    background-color: transparent;
    color: #fff;
}

.btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: #fff;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

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

.btn-outline:hover {
    border-color: #fff;
}


/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: var(--transition);
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
}

.custom-i {
    position: relative;
    display: inline-block;
}

/* Hide the original dot of the 'i' by clipping the top */
/* Ideally we use a font that makes this easy, or we just put a block over it. 
   Since we can't easily clip one letter in a standard font without getting complex, 
   a simpler trick is to use a transparent color for the 'i' and overlay the stem and the new dot. 
   BUT, for simplicity and robustness with standard fonts: 
   We will render the 'i' without the dot if possible, or just place the triangle OVER the dot if it covers it.
   Let's try placing the triangle on top of the existing dot position. */

.custom-i::after {
    content: '';
    position: absolute;
    top: 5px;
    /* Adjust based on font size */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid var(--accent);
    /* Blue triangle */
}

/* To hide the real dot, we can try to mask it or just use an 'ı' (dotless i) and add the dot. */
/* Using dotless i char in HTML might be safer if font supports it. Let's stick to overlay first. */

/* BETTER APPROACH: Use the 'ı' character in HTML or CSS content? 
   Let's replace the 'i' in HTML with a dotless 'ı' logic via CSS is hard.
   Let's just use the dotless i character in the HTML replacement next time if this looks bad.
   For now, let's try to cover it. Only background color can cover it, but background is gradient/image sometimes.
   
   Actually, let's change the color of the dot? No.
   
   Let's try to just overlay the blue triangle. If the black dot shows behind, we might need to use dotless i.
*/

/* Revised approach for cleaner 'i' modification: */
.custom-i {
    font-style: normal;
}


.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a:not(.btn) {
    color: var(--text-muted);
}

.nav-links a:not(.btn):hover {
    color: #fff;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0a0a0a 70%);
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.hero-sub {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Who Needs This */
.who-for .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 2.5rem;
    border-radius: 12px;
    transition: var(--transition);
}

.who-for .card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.who-for h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.who-for p {
    color: var(--text-muted);
}

/* Services */
.service-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 3rem;
    border-radius: 12px;
}

.service-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.service-subtitle {
    color: var(--accent);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.check-list li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-muted);
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--text-main);
}

/* Timeline/Model */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    padding-left: 60px;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    z-index: 2;
}

.timeline-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 12px;
}

.timeline-time {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.timeline-content ul {
    margin-top: 1rem;
    padding-left: 1rem;
    list-style-type: disc;
    color: var(--text-muted);
}

/* proof */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    text-align: center;
}

.proof-item {
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.proof-number {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.proof-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Pricing */
.price-card {
    border: 1px solid var(--border);
    padding: 3rem;
    border-radius: 12px;
    background: var(--card-bg);
    position: relative;
}

.price-card.featured {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.05);
}

.price-card .duration {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin: 1rem 0;
}

.price-card h3 {
    color: var(--text-muted);
    font-size: 1rem;
    text-transform: uppercase;
}

.price-card hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

.best-for {
    font-style: italic;
    color: #fff;
}

/* Bio */
/* Services Centering */
.flex-centered-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.flex-centered-grid .service-box {
    flex: 1 1 300px;
    max-width: 350px;
}

/* Bio Horizontal */
.bio-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.bio-list li {
    font-size: 1.1rem;
    margin-bottom: 0;
    position: relative;
    padding-left: 0;
}

/* Experience List */
.experience-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.experience-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 12px;
    transition: var(--transition);
}

.experience-item:hover {
    border-color: var(--accent);
    transform: translateX(5px);
}

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.exp-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.exp-category {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 500;
}

.experience-item .check-list {
    margin-top: 0;
}


/* Footer */
.footer {
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--border);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.footer-left h3 {
    margin-bottom: 1rem;
}

.footer-left p {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}

.footer-bottom {
    text-align: center;
    color: #555;
    font-size: 0.9rem;
}


/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards;
}

.delay-1 {
    animation-delay: 0.2s;
    transition-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
    transition-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
    transition-delay: 0.6s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* Mobile */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
    }

    /* Mobile menu simplified for now */
    .experience-list .exp-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .bio-list {
        flex-direction: column;
        gap: 1rem;
    }
}