@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ===== VARIABLES ===== */
:root {
    --primary:       #2563EB;
    --primary-dark:  #1D4ED8;
    --primary-light: #EFF6FF;
    --secondary:     #0F172A;
    --bg:            #F8FAFC;
    --white:         #FFFFFF;
    --border:        #E2E8F0;
    --text-1:        #0F172A;
    --text-2:        #475569;
    --text-3:        #94A3B8;
    --success:       #22C55E;

    --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
    --shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
    --shadow-xl: 0 24px 64px rgba(15,23,42,.16), 0 8px 24px rgba(15,23,42,.08);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --ease: cubic-bezier(.4,0,.2,1);
    --dur:  .25s;
}

/* ===== RESET ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
    font-family:'Cairo',sans-serif;
    background:var(--bg);
    color:var(--text-1);
    line-height:1.7;
    direction:rtl;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img { max-width:100%; display:block; }
a  { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; }

/* ===== CONTAINER ===== */
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 28px;
}

/* ===== NAVBAR ===== */
.navbar {
    position:fixed;
    inset:0 0 auto 0;
    z-index:200;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(226,232,240,.7);
    transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.navbar.scrolled {
    background:rgba(255,255,255,.96);
    box-shadow:var(--shadow-md);
}
.nav-container {
    max-width:1200px;
    margin:0 auto;
    padding:0 28px;
    height:68px;
    display:flex;
    align-items:center;
    gap:24px;
}
.nav-logo {
    font-size:20px;
    font-weight:900;
    color:var(--text-1);
    white-space:nowrap;
    flex-shrink:0;
    letter-spacing:-.02em;
}
.nav-menu {
    display:flex;
    align-items:center;
    gap:2px;
    flex:1;
    justify-content:center;
}
.nav-link {
    color:var(--text-2);
    font-size:15.5px;
    font-weight:700;
    padding:8px 14px;
    border-radius:9px;
    transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover,
.nav-link.active {
    color:var(--primary);
    background:var(--primary-light);
}
.nav-cta {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 22px;
    background:var(--primary);
    color:var(--white);
    font-size:14px;
    font-weight:700;
    border-radius:999px;
    white-space:nowrap;
    flex-shrink:0;
    transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-cta:hover {
    background:var(--primary-dark);
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(37,99,235,.35);
}
.nav-toggle {
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    padding:6px;
    flex-shrink:0;
}
.nav-toggle span {
    display:block;
    width:22px;
    height:2px;
    background:var(--text-1);
    border-radius:2px;
    transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ===== HERO ===== */
.hero {
    min-height:100vh;
    padding:108px 0 80px;
    background:linear-gradient(145deg,#F8FAFC 0%,#EFF6FF 45%,#F8FAFC 100%);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
}
.hero-bg {
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}
.hero-circle {
    position:absolute;
    border-radius:50%;
}
.hero-circle-1 {
    width:600px;
    height:600px;
    background:radial-gradient(circle,rgba(37,99,235,.09) 0%,transparent 65%);
    top:-120px;
    left:-120px;
}
.hero-circle-2 {
    width:480px;
    height:480px;
    background:radial-gradient(circle,rgba(37,99,235,.07) 0%,transparent 65%);
    bottom:-60px;
    right:18%;
}
.hero-container {
    max-width:1200px;
    margin:0 auto;
    padding:0 28px;
    display:grid;
    grid-template-columns:1fr 430px;
    gap:64px;
    align-items:center;
    width:100%;
    position:relative;
    z-index:1;
}
.hero-content {
    display:flex;
    flex-direction:column;
    gap:32px;
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    background:var(--primary-light);
    color:var(--primary);
    font-size:14px;
    font-weight:700;
    border-radius:999px;
    width:fit-content;
    border:1px solid rgba(37,99,235,.2);
}
.badge-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary);
    flex-shrink:0;
    animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.6; transform:scale(.85); }
}
.hero-title {
    font-size:72px;
    font-weight:900;
    line-height:1.08;
    color:var(--secondary);
    letter-spacing:-.03em;
}
.hero-desc {
    font-size:18px;
    color:var(--text-2);
    line-height:1.85;
    max-width:500px;
}

/* Hero mini stats */
.hero-stats-mini {
    display:flex;
    align-items:center;
    gap:0;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    width:fit-content;
    overflow:hidden;
}
.hero-stat-mini {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px 22px;
    gap:3px;
}
.hero-mini-row {
    display:flex;
    align-items:baseline;
    gap:1px;
    line-height:1;
}
.hero-mini-num {
    font-size:30px;
    font-weight:900;
    color:var(--primary);
    line-height:1;
}
.hero-mini-suf {
    font-size:20px;
    font-weight:900;
    color:var(--primary);
}
.hero-mini-label {
    font-size:12px;
    color:var(--text-3);
    font-weight:600;
    white-space:nowrap;
}
.hero-stat-sep {
    width:1px;
    height:44px;
    background:var(--border);
    flex-shrink:0;
}

/* Buttons */
.hero-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 26px;
    border-radius:999px;
    font-size:15px;
    font-weight:700;
    font-family:'Cairo',sans-serif;
    border:none;
    transition:background var(--dur) var(--ease),
               color var(--dur) var(--ease),
               border-color var(--dur) var(--ease),
               transform var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
    white-space:nowrap;
}
.btn svg { flex-shrink:0; }
.btn-whatsapp {
    background:#25D366;
    color:var(--white);
    box-shadow:0 4px 16px rgba(37,211,102,.35);
    font-size:15px;
}
.btn-whatsapp:hover {
    background:#1ebe58;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(37,211,102,.45);
}
.btn-primary {
    background:var(--primary);
    color:var(--white);
    box-shadow:0 4px 14px rgba(37,99,235,.28);
}
.btn-primary:hover {
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(37,99,235,.38);
}
.btn-secondary {
    background:var(--white);
    color:var(--text-1);
    border:1.5px solid var(--border);
}
.btn-secondary:hover {
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}
.btn-outline {
    background:transparent;
    color:var(--text-2);
    border:1.5px solid var(--border);
}
.btn-outline:hover {
    border-color:var(--primary);
    color:var(--primary);
    background:var(--primary-light);
    transform:translateY(-1px);
}
.btn-white {
    background:var(--white);
    color:var(--primary);
    font-weight:800;
}
.btn-white:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0,0,0,.2);
}


/* Hero visual */
.hero-visual {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.hero-img-card {
    width:100%;
    max-width:360px;
    aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden;
    box-shadow:var(--shadow-xl), 0 0 0 6px var(--white), 0 0 0 8px rgba(37,99,235,.18);
}
.hero-img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 8%;
    display:block;
    transition:transform .6s var(--ease);
}
.hero-img-card:hover .hero-img { transform:scale(1.05); }
.hero-float-badge {
    position:absolute;
    bottom:-16px;
    left:16px;
    background:var(--white);
    border:1.5px solid var(--border);
    border-radius:var(--radius-md);
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:var(--shadow-lg);
}
.float-emoji { font-size:28px; flex-shrink:0; }
.hero-float-badge strong {
    display:block;
    font-size:14px;
    font-weight:800;
    color:var(--text-1);
}
.hero-float-badge small {
    font-size:12px;
    color:var(--text-3);
}

/* ===== SECTIONS ===== */
.section       { padding:80px 0; }
.section-white { background:var(--white); }
.section-muted { background:var(--bg); }

.section-header-wrap {
    text-align:center;
    margin-bottom:56px;
}
.section-label {
    display:inline-block;
    color:var(--primary);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.14em;
    padding:5px 16px;
    background:var(--primary-light);
    border-radius:999px;
    margin-bottom:12px;
}
.section-title {
    font-size:38px;
    font-weight:900;
    color:var(--secondary);
    line-height:1.2;
    letter-spacing:-.01em;
}

/* ===== FA ICON BASE ===== */
.fa-solid, .fa-regular, .fa-brands {
    line-height: inherit;
}

/* Section label icons */
.section-label .fa-solid,
.section-label .fa-regular {
    font-size: 11px;
    opacity: .75;
    margin-left: 4px;
}

/* Hero float badge FA icon */
.float-fa-icon {
    font-size: 26px;
    color: var(--primary);
    flex-shrink: 0;
}

/* ===== ABOUT ===== */
.about-header {
    text-align:center;
    max-width:720px;
    margin:0 auto 48px;
}
.about-intro {
    font-size:19px;
    color:var(--text-2);
    font-weight:500;
    line-height:1.9;
    margin-top:16px;
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.feature-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 20px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    transition:border-color var(--dur) var(--ease),
               background var(--dur) var(--ease),
               transform var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
}
.feature-item:hover {
    border-color:var(--primary);
    background:var(--primary-light);
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}
.feature-icon-wrap {
    width:44px;
    height:44px;
    border-radius:12px;
    background:var(--primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:18px;
    color:var(--primary);
    transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature-item:hover .feature-icon-wrap {
    background:var(--primary);
    color:var(--white);
    transform:scale(1.08);
}
.feature-label { font-size:15px; font-weight:700; color:var(--text-1); line-height:1.3; }
.feature-sub   { font-size:13px; color:var(--text-3); font-weight:500; margin-top:2px; }

/* ===== STATS ===== */
.section-stats {
    background:var(--secondary);
    padding:56px 0;
}
.stats-row {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:1px;
    background:rgba(255,255,255,.08);
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}
.stat-item {
    padding:36px 20px;
    text-align:center;
    background:rgba(255,255,255,.03);
    transition:background var(--dur) var(--ease);
    display:flex;
    flex-direction:column;
    align-items:center;
}
.stat-item:hover { background:rgba(255,255,255,.07); }
.stat-icon {
    font-size:22px;
    color:rgba(255,255,255,.35);
    margin-bottom:8px;
    transition:color var(--dur) var(--ease);
}
.stat-item:hover .stat-icon { color:rgba(255,255,255,.65); }
.stat-number-wrap {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:2px;
}
.stat-num {
    font-size:42px;
    font-weight:900;
    color:var(--white);
    line-height:1;
}
.stat-suffix {
    font-size:28px;
    font-weight:900;
    color:rgba(255,255,255,.7);
    line-height:1;
}
.stat-label {
    font-size:13px;
    color:rgba(255,255,255,.5);
    font-weight:600;
    margin-top:8px;
    letter-spacing:.02em;
}

/* ===== TIMELINE ===== */
.timeline {
    position:relative;
    padding-right:36px;
}
.timeline::before {
    content:'';
    position:absolute;
    right:0;
    top:12px;
    bottom:12px;
    width:2px;
    background:linear-gradient(to bottom,var(--primary) 0%,var(--border) 100%);
    border-radius:2px;
}
.tl-item {
    position:relative;
    padding-right:36px;
    margin-bottom:28px;
}
.tl-item:last-child { margin-bottom:0; }
.tl-dot {
    position:absolute;
    right:-8px;
    top:22px;
    width:16px;
    height:16px;
    background:var(--primary);
    border:3px solid var(--white);
    border-radius:50%;
    box-shadow:0 0 0 3px var(--primary);
    z-index:1;
}
.tl-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px 28px;
    box-shadow:var(--shadow-sm);
    transition:border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.tl-card:hover {
    border-color:var(--primary);
    box-shadow:var(--shadow-md);
    transform:translateX(-4px);
}
.tl-date {
    display:inline-block;
    font-size:13px;
    font-weight:700;
    color:var(--primary);
    background:var(--primary-light);
    padding:4px 13px;
    border-radius:999px;
    margin-bottom:10px;
}
.tl-title-row {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.tl-icon {
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--primary-light);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:var(--primary);
    flex-shrink:0;
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tl-card:hover .tl-icon {
    background:var(--primary);
    color:var(--white);
}
.tl-title {
    font-size:18px;
    font-weight:800;
    color:var(--text-1);
    margin:0;
}
.tl-desc {
    font-size:15px;
    color:var(--text-2);
    line-height:1.75;
}

/* ===== SKILLS ===== */
.skills-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}
.skill-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:10px 20px;
    background:var(--white);
    border:1.5px solid var(--border);
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    color:var(--text-2);
    transition:border-color var(--dur) var(--ease),
               color var(--dur) var(--ease),
               background var(--dur) var(--ease),
               transform var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
    cursor:default;
}
.skill-chip .fa-solid { font-size:12px; opacity:.7; }
.skill-chip:hover {
    border-color:var(--primary);
    color:var(--primary);
    background:var(--primary-light);
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(37,99,235,.14);
}
.skill-chip:hover .fa-solid { opacity:1; }

/* ===== CARD GRIDS ===== */
.cards-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.cards-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* Qualification cards */
.qual-card {
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:22px 24px;
    box-shadow:var(--shadow-sm);
    transition:border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.qual-card:hover {
    border-color:var(--primary);
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
}
.qual-icon-wrap {
    width:48px;
    height:48px;
    border-radius:14px;
    background:var(--primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:var(--primary);
    flex-shrink:0;
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.qual-card:hover .qual-icon-wrap {
    background:var(--primary);
    color:var(--white);
    transform:scale(1.06);
}
.qual-body h3 {
    font-size:16px;
    font-weight:700;
    color:var(--text-1);
    line-height:1.45;
    margin-bottom:6px;
}
.qual-body p { font-size:14px; color:var(--text-3); font-weight:500; }

/* Certificate cards */
.cert-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px 20px;
    text-align:center;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    transition:border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.cert-card:hover {
    border-color:var(--primary);
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}
.cert-icon {
    width:64px;
    height:64px;
    border-radius:18px;
    background:var(--primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:var(--primary);
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cert-card:hover .cert-icon {
    background:var(--primary);
    color:var(--white);
    transform:scale(1.08) rotate(-4deg);
}
.cert-card h3 { font-size:15px; font-weight:700; color:var(--text-1); line-height:1.4; }
.cert-card p  { font-size:13px; color:var(--text-3); font-weight:500; }

/* Course cards */
.course-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.course-card:hover {
    border-color:var(--primary);
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
}
.course-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.course-ico {
    width:44px;
    height:44px;
    border-radius:12px;
    background:var(--primary-light);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:var(--primary);
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.course-card:hover .course-ico {
    background:var(--primary);
    color:var(--white);
    transform:scale(1.08);
}
.course-year-badge {
    display:inline-block;
    padding:4px 13px;
    background:var(--primary-light);
    color:var(--primary);
    font-size:12px;
    font-weight:800;
    border-radius:999px;
}
.course-card h3 {
    font-size:16px;
    font-weight:700;
    color:var(--text-1);
    line-height:1.45;
}
.course-org { font-size:14px; color:var(--text-2); font-weight:500; }

/* Research cards */
.research-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.research-card:hover {
    border-color:var(--primary);
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
}
.research-badge {
    display:inline-block;
    padding:4px 13px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    width:fit-content;
}
.research-badge-blue   { background:#EFF6FF; color:#2563EB; }
.research-badge-green  { background:#F0FDF4; color:#16A34A; }
.research-badge-orange { background:#FFF7ED; color:#EA580C; }
.research-card-icon {
    width:40px;
    height:40px;
    border-radius:11px;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:var(--text-3);
    margin-bottom:4px;
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.research-card:hover .research-card-icon {
    background:var(--primary-light);
    color:var(--primary);
}
.research-card h3 {
    font-size:17px;
    font-weight:700;
    color:var(--text-1);
    line-height:1.5;
}
.research-card p { font-size:14px; color:var(--text-2); }
.research-year  { font-size:13px; color:var(--text-3); font-weight:600; margin-top:auto; }

/* Literary banner */
.literary-banner {
    margin-top:28px;
    display:flex;
    align-items:center;
    gap:20px;
    padding:22px 28px;
    background:var(--white);
    border:1px solid var(--border);
    border-right:4px solid var(--primary);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    transition:box-shadow var(--dur) var(--ease);
}
.literary-banner:hover { box-shadow:var(--shadow-md); }
.literary-icon {
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--primary-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:var(--primary);
    flex-shrink:0;
}
.literary-banner h3 { font-size:17px; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.literary-banner p  { font-size:15px; color:var(--text-2); }

/* ===== ACADEMIC BLOCK ===== */
.academic-block { display:flex; flex-direction:column; }
.academic-sub-heading {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:800;
    color:var(--primary);
    background:var(--primary-light);
    padding:8px 20px;
    border-radius:999px;
    margin:44px 0 20px;
    border:1px solid rgba(37,99,235,.18);
    width:fit-content;
}
.academic-sub-heading:first-child { margin-top:0; }
.academic-sub-heading .fa-solid { font-size:13px; opacity:.8; }

/* ===== CTA ===== */
.section-cta {
    background:linear-gradient(135deg,#1E3A8A 0%,#2563EB 55%,#3B82F6 100%);
    padding:96px 0;
}
.cta-grid {
    display:grid;
    grid-template-columns:1fr 400px;
    gap:80px;
    align-items:center;
}
.cta-title {
    font-size:38px;
    font-weight:900;
    color:var(--white);
    line-height:1.3;
    margin-bottom:14px;
    letter-spacing:-.01em;
}
.cta-desc {
    font-size:17px;
    color:rgba(255,255,255,.8);
    line-height:1.85;
    margin-bottom:28px;
}
.cta-right { display:flex; flex-direction:column; gap:12px; }
.contact-info-card {
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 20px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--radius-md);
    backdrop-filter:blur(8px);
    transition:background var(--dur) var(--ease);
}
.contact-info-card:hover { background:rgba(255,255,255,.16); }
.contact-info-icon {
    width:40px;
    height:40px;
    border-radius:10px;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:rgba(255,255,255,.9);
    flex-shrink:0;
}
.contact-info-label {
    font-size:12px;
    color:rgba(255,255,255,.55);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:2px;
}
.contact-info-val { font-size:15px; color:var(--white); font-weight:600; }
.contact-info-link { transition:color var(--dur) var(--ease); }
.contact-info-link:hover { color:rgba(255,255,255,.75); }

/* ===== FOOTER ===== */
.footer {
    background:var(--secondary);
    padding:0;
}
.footer-name {
    font-size:20px;
    font-weight:800;
    color:var(--white);
    margin-bottom:6px;
}
.footer-tagline {
    font-size:14px;
    color:rgba(255,255,255,.45);
    line-height:1.5;
}
.footer-top-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:40px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    flex-wrap:wrap;
}
.footer-links-inline {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.footer-links-inline a {
    font-size:14px;
    color:rgba(255,255,255,.5);
    padding:6px 14px;
    border-radius:999px;
    transition:color var(--dur) var(--ease),
               background var(--dur) var(--ease);
}
.footer-links-inline a:hover {
    color:var(--white);
    background:rgba(255,255,255,.08);
}
.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 0;
    gap:16px;
    flex-wrap:wrap;
}
.footer-bottom p { font-size:13px; color:rgba(255,255,255,.3); }
.footer-dev-credit {
    font-size:13px;
    color:rgba(255,255,255,.3);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.footer-dev-credit a {
    color:rgba(255,255,255,.5);
    transition:color var(--dur) var(--ease);
}
.footer-dev-credit a:hover { color:var(--white); }
.dev-socials {
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.dev-socials a {
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:rgba(255,255,255,.45);
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dev-socials a:hover {
    background:rgba(255,255,255,.18);
    color:var(--white);
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.visible {
    opacity:1;
    transform:translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px) {
    .hero-container {
        grid-template-columns:1fr 360px;
        gap:48px;
    }
    .hero-title { font-size:52px; }
    .stats-row  { grid-template-columns:repeat(3,1fr); }
    .cards-grid-4 { grid-template-columns:repeat(2,1fr); }
    .cta-grid { grid-template-columns:1fr; gap:40px; }
}

@media (max-width:900px) {
    .hero-container {
        grid-template-columns:1fr 320px;
        gap:36px;
    }
    .hero-title { font-size:46px; }
}

@media (max-width:860px) {
    .feature-grid  { grid-template-columns:repeat(2,1fr); }
    .cards-grid-3  { grid-template-columns:repeat(2,1fr); }
    .stats-row     { grid-template-columns:repeat(2,1fr); }
    .cta-title     { font-size:26px; }
    .section-title { font-size:28px; }
}

@media (max-width:768px) {
    .nav-menu {
        display:none;
        position:fixed;
        top:68px;
        inset-inline:0;
        background:var(--white);
        flex-direction:column;
        align-items:stretch;
        padding:12px 16px 16px;
        border-bottom:1px solid var(--border);
        box-shadow:var(--shadow-lg);
        gap:2px;
        z-index:199;
    }
    .nav-menu.open { display:flex; }
    .nav-menu .nav-link {
        font-size:16px;
        font-weight:700;
        padding:12px 16px;
        border-radius:var(--radius-md);
        text-align:right;
    }
    .nav-cta    { display:none; }
    .nav-toggle { display:flex; margin-inline-start:auto; }

    .hero { padding:100px 0 64px; align-items:flex-start; }
    .hero-container {
        grid-template-columns:1fr;
        gap:36px;
        text-align:center;
    }
    .hero-badge   { margin:0 auto; }
    .hero-actions { margin:0 auto; justify-content:center; flex-wrap:nowrap; }
    .hero-actions .btn-whatsapp .btn-text,
    .hero-actions .btn-secondary .btn-text { display:none; }
    .hero-actions .btn-whatsapp,
    .hero-actions .btn-secondary { padding:13px 16px; }
    .hero-title   { font-size:36px; }
    .hero-visual  { order:-1; padding-bottom:64px; }
    .hero-img-card {
        max-width:240px;
        box-shadow:var(--shadow-lg), 0 0 0 5px var(--white), 0 0 0 7px rgba(37,99,235,.18);
    }
    .hero-float-badge {
        left:50%;
        transform:translateX(-50%);
        bottom:-14px;
        white-space:normal;
        max-width:220px;
        text-align:center;
        padding:10px 14px;
    }

    .feature-grid  { grid-template-columns:1fr; }
    .cards-grid-2,
    .cards-grid-3  { grid-template-columns:1fr; }

    .section { padding:64px 0; }
    .section-header-wrap { margin-bottom:40px; }

    .footer-top-row { flex-direction:column; align-items:flex-start; gap:20px; padding:32px 0; }
    .footer-links-inline { gap:4px; }
    .footer-bottom { flex-direction:column; gap:6px; text-align:center; align-items:center; }
}

@media (max-width:480px) {
    .container { padding:0 16px; }

    .hero { padding:96px 0 48px; }
    .hero-title   { font-size:30px; }
    .hero-visual  { padding-bottom:0; }
    .hero-img-card { max-width:190px; }
    .hero-float-badge { display:none; }

    .section-title { font-size:23px; }
    .about-intro   { font-size:14px; }

    .stats-row     { grid-template-columns:repeat(2,1fr); }
    .stat-num      { font-size:30px; }
    .stat-suffix   { font-size:20px; }
    .stat-item     { padding:22px 10px; }
    .stat-icon     { font-size:18px; }
    .stat-label    { font-size:11px; }

    .cards-grid-4  { grid-template-columns:repeat(2,1fr); }
    .section { padding:44px 0; }
    .cta-title { font-size:21px; }
    .cta-desc  { font-size:15px; }
    .btn { padding:11px 16px; font-size:13px; }
    .hero-actions { gap:8px; }
    .section-header-wrap { margin-bottom:32px; }
    .tl-card { padding:18px 20px; }
    .skill-chip { padding:8px 14px; font-size:14px; }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .reveal { opacity:1; transform:none; }
}

/* ===== PRINT ===== */
@media print {
    .navbar,.hero-float-badge,.hero-actions,.nav-cta { display:none; }
    .hero { min-height:auto; padding:32px 0; }
    * { background:white !important; color:black !important; box-shadow:none !important; }
}