:root{--bg:#10131a;--bg-soft:#151a23;--panel:#1a202b;--line:#2a3240;--text:#f4f6f9;--muted:#a5afbf;--accent:#e0912f;--accent-hover:#f0a746;--radius:18px}




*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Naskh Arabic",system-ui,sans-serif;line-height:1.7}
[dir=rtl] body,[dir=rtl] input,[dir=rtl] textarea,[dir=rtl] select{font-family:"Noto Naskh Arabic",Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.accent{color:var(--accent)}
.site-nav{background:rgba(16,19,26,.94);border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(16px)}
.navbar-brand{letter-spacing:-.04em}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:7px;border-radius:10px;background:var(--accent);color:#17130d;font-size:.8rem;font-weight:900;letter-spacing:-.04em}
.nav-link{color:#c4cad4!important;font-size:.93rem}
.nav-link:hover{color:var(--accent)!important}
.language-select{background-color:#171c25;color:#f4f6f9;border-color:#343d4b;min-width:104px}
.hero-section{position:relative;overflow:hidden;padding:105px 0 100px;background:radial-gradient(ellipse at 85% 30%,rgba(224,145,47,.13),transparent 34%),linear-gradient(180deg,#10131a,#121720)}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.status-dot{width:8px;height:8px;border-radius:50%;background:#69d39a;box-shadow:0 0 0 5px rgba(105,211,154,.1)}
.hero-title{margin:20px 0;font-size:clamp(3rem,7vw,5.8rem);font-weight:800;line-height:1.08;letter-spacing:-.065em}
.hero-lead{max-width:630px;color:#aeb7c5;font-size:1.16rem;line-height:1.9}
.btn{border-radius:10px;font-weight:700}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#17130d}
.btn-accent:hover,.btn-accent:focus{background:var(--accent-hover);border-color:var(--accent-hover);color:#17130d}
.btn-outline-light{border-color:#424b5b}
.tech-line{display:flex;flex-wrap:wrap;gap:9px}
.tech-line span,.tag-list span{border:1px solid #303947;background:#171c25;border-radius:7px;padding:5px 9px;color:#c2cbd8;font-size:.76rem}
.hero-card{position:relative;min-height:440px;border:1px solid #303947;border-radius:26px;background:linear-gradient(145deg,#202734,#151a23);overflow:hidden;display:flex;align-items:end;padding:28px;box-shadow:0 25px 80px #0004}
.hero-card-glow{position:absolute;width:310px;height:310px;right:-60px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(224,145,47,.32),transparent 68%)}
.profile-placeholder{position:absolute;top:70px;left:50%;transform:translateX(-50%);width:190px;height:190px;display:grid;place-items:center;border-radius:50%;border:1px solid #6a4c2a;background:linear-gradient(135deg,#272e3b,#11151c);box-shadow:0 0 0 14px #ffffff05,0 0 60px #e0912f18}
.profile-placeholder span{font-size:4rem;font-weight:800;letter-spacing:-.1em;color:var(--accent)}
.hero-card-caption{position:relative;z-index:1}
.caption-label{font-size:.7rem;color:var(--accent);font-weight:800;letter-spacing:.13em}
.hero-card-caption h3{font-size:1.8rem;font-weight:800;margin:8px 0}
.hero-card-caption p{margin:0;color:var(--muted)}
.floating-tag{position:absolute;z-index:2;padding:9px 13px;background:#252c38;border:1px solid #3a4351;border-radius:11px;font-size:.85rem;box-shadow:0 10px 30px #0004}
.floating-tag i{color:var(--accent);margin-right:6px}
.tag-one{right:18px;top:115px}.tag-two{left:18px;top:250px}
.section-pad{padding:90px 0}
.section-muted{background:var(--bg-soft);border-top:1px solid #ffffff06;border-bottom:1px solid #ffffff06}
.section-heading{margin-bottom:35px}
.section-heading h2,.contact-section h2{margin:12px 0;font-size:clamp(2rem,4vw,3.15rem);font-weight:800;letter-spacing:-.045em;line-height:1.2}
.section-copy{color:var(--muted);font-size:1.05rem;line-height:1.95}
.info-panel,.service-card,.project-card,.post-card,.contact-form,.admin-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.info-panel{padding:12px 22px}
.info-row{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border:0}.info-row span{color:var(--muted)}.info-row strong{text-align:end;font-size:.92rem}
.service-card{padding:28px;transition:transform .2s,border-color .2s}
.service-card:hover,.project-card:hover{transform:translateY(-5px);border-color:#7a572e}
.service-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:20px;border-radius:14px;background:#e0912f1a;color:var(--accent);font-size:1.5rem}
.service-card h3,.project-content h3,.post-card h3{font-size:1.2rem;font-weight:750}
.service-card p,.project-content p,.post-card p{margin:10px 0 0;color:var(--muted);font-size:.93rem;line-height:1.85}
.project-card{overflow:hidden;transition:transform .2s,border-color .2s}
.project-visual{height:205px;background:#11151c;overflow:hidden}
.project-visual img{width:100%;height:100%;object-fit:cover}
.project-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:radial-gradient(ellipse at 50% 0%,#e0912f21,transparent 60%),linear-gradient(135deg,#202734,#11151c);color:var(--accent)}
.project-placeholder i{font-size:3.5rem}.project-placeholder span{font-size:.72rem;letter-spacing:.18em;color:#aab4c3}
.project-content{padding:23px}.tag-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.text-link{color:var(--accent);font-weight:700;font-size:.9rem}
.post-card{padding:26px}
.post-date{display:block;color:#8793a4;font-size:.8rem;margin-bottom:12px}
.post-card h3 a:hover{color:var(--accent)}
.empty-note{padding:28px;border:1px dashed #3a4351;border-radius:var(--radius);color:var(--muted)}
.contact-section{background:radial-gradient(ellipse at 0% 100%,#e0912f0b,transparent 45%)}
.contact-detail{display:flex;align-items:center;gap:12px;margin-top:25px;color:#d4d9e1}.contact-detail i{color:var(--accent);font-size:1.2rem}
.contact-form{padding:28px}
.form-label{color:#d8dde6;font-size:.88rem;font-weight:650}
.form-control,.form-select{background:#11161e;border:1px solid #354052;color:#f4f6f9;border-radius:9px;padding:11px 13px}
.form-control:focus,.form-select:focus{background:#11161e;color:#fff;border-color:var(--accent);box-shadow:0 0 0 .2rem #e0912f25}
.form-control::placeholder{color:#7d8797}
.site-footer{border-top:1px solid #ffffff0d;color:#8e99a9;font-size:.85rem}
.footer-admin{color:#7b8594}
.page-wrap{min-height:60vh}
.article-container{max-width:850px}
.article-title{font-size:clamp(2.3rem,5vw,4rem);font-weight:800;letter-spacing:-.05em;line-height:1.2;margin:16px 0}
.article-cover{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);margin:20px 0}
.article-body{white-space:pre-wrap;color:#c4ccd8;font-size:1.05rem;line-height:2;margin-top:25px}
.admin-body{background:#10131a;color:var(--text);min-height:100vh}
.admin-login-wrap{min-height:75vh;display:grid;place-items:center;padding:35px 15px}
.admin-login-card{width:min(100%,440px);padding:32px;background:var(--panel);border:1px solid var(--line);border-radius:20px}
.stat-card{display:flex;flex-direction:column;gap:5px;min-height:145px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:16px;color:var(--text)}
.stat-card i{font-size:1.35rem;color:var(--accent)}.stat-card span{font-size:.9rem;color:var(--muted)}.stat-card strong{font-size:2rem}
.admin-panel{padding:22px}
.table{--bs-table-bg:transparent;--bs-table-color:#e5e9ef;--bs-table-border-color:#303947}
.table th{color:#9ba7b7;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.admin-panel .form-label{margin-bottom:7px}
.message-preview{max-width:350px;color:#aab4c3;font-size:.85rem;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}
@media(max-width:767px){.hero-section{padding:70px 0}.hero-card{min-height:390px}.section-pad{padding:65px 0}.contact-form{padding:20px}.info-row{flex-direction:column;gap:2px}.info-row strong{text-align:start}}
[dir=rtl] .brand-mark{margin-left:7px;margin-right:0}
[dir=rtl] .floating-tag i{margin-left:6px;margin-right:0}
[dir=rtl] .info-row strong{text-align:start}





.article-container {
    max-width: 900px;
    margin-inline: auto;
}

.article-body {
    margin-top: 2rem;
    color: var(--text, #e5e7eb);
    font-size: 1.05rem;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.article-body h2 {
    margin: 2rem 0 1rem;
    color: #E0912F;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
}

.article-body h3 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.article-body p {
    margin-bottom: 1.2rem;
}

.article-body ul,
.article-body ol {
    margin: 1rem 0 1.5rem;
    padding-inline-start: 1.75rem;
}

.article-body li {
    margin-bottom: 0.6rem;
}

.article-body a {
    color: #E0912F;
    text-decoration: underline;
}

.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 12px;
}

.article-body pre {
    padding: 1rem;
    overflow-x: auto;
    background: #1a1d25;
    border: 1px solid #303541;
    border-radius: 10px;
}

.article-body code {
    color: #E0912F;
}

.article-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-inline-start: 4px solid #E0912F;
    background: rgba(224, 145, 47, 0.08);
    border-radius: 8px;
}

.article-cover {
    display: block;
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    margin: 1.5rem 0;
    border-radius: 14px;
}

.article-body table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.article-body th,
.article-body td {
    padding: 0.75rem;
    border: 1px solid #343945;
    text-align: start;
}

.article-body th {
    color: #E0912F;
}





/* =========================================
   HIKMATULLAHSIRAJ.COM - PROJECTS PAGE
   ========================================= */

.projects-page {
    min-height: 70vh;
}

.projects-hero {
    padding: 85px 0 45px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.projects-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -180px;
    left: calc(50% - 160px);
    background: rgba(224, 145, 47, 0.12);
    filter: blur(70px);
    border-radius: 50%;
    pointer-events: none;
}

.projects-hero .section-kicker {
    color: #E0912F;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.projects-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.15;
    margin-bottom: 20px;
}

.projects-hero h1 span {
    color: #E0912F;
}

.projects-hero p {
    max-width: 650px;
    margin: 0 auto;
    color: #A5AAB5;
    font-size: 1.05rem;
    line-height: 1.9;
}

.projects-content {
    padding: 30px 0 100px;
}

.projects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.projects-count {
    color: #A5AAB5;
    font-size: 0.95rem;
}

.projects-count strong {
    color: #E0912F;
    font-size: 1.1rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #151821;
    border: 1px solid #292D38;
    border-radius: 18px;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-7px);
    border-color: rgba(224, 145, 47, 0.65);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.project-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #202430;
}

.project-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.055);
}

.project-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #E0912F;
    font-size: 3rem;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(224, 145, 47, 0.15),
            transparent 60%
        ),
        #202430;
}

.project-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
}

.project-card-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #E0912F;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.project-card-title {
    color: #F4F5F7;
    font-size: 1.3rem;
    font-weight: 750;
    line-height: 1.45;
    margin-bottom: 12px;
}

.project-card-description {
    color: #A5AAB5;
    font-size: 0.94rem;
    line-height: 1.85;
    margin-bottom: 22px;
    overflow-wrap: anywhere;
}

.project-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 24px;
}

.project-tech {
    display: inline-block;
    padding: 6px 10px;
    color: #D7D9E0;
    background: #202430;
    border: 1px solid #343846;
    border-radius: 7px;
    font-size: 0.76rem;
    line-height: 1.4;
}

.project-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid #292D38;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #E0912F;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.project-link:hover {
    color: #F4B45E;
    gap: 13px;
}

.project-link-secondary {
    color: #C3C7D0;
}

.project-link-secondary:hover {
    color: #E0912F;
}

.projects-empty {
    padding: 65px 20px;
    text-align: center;
    background: #151821;
    border: 1px dashed #343846;
    border-radius: 18px;
}

.projects-empty i {
    display: block;
    margin-bottom: 18px;
    color: #E0912F;
    font-size: 3rem;
}

.projects-empty h3 {
    color: #F4F5F7;
    margin-bottom: 10px;
}

.projects-empty p {
    color: #A5AAB5;
}

[dir="rtl"] .projects-hero h1 {
    letter-spacing: 0;
}

[dir="rtl"] .project-card-category {
    letter-spacing: 0;
}

@media (max-width: 991.98px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .projects-hero {
        padding-top: 65px;
    }
}

@media (max-width: 575.98px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .projects-hero {
        padding: 55px 0 30px;
    }

    .projects-hero h1 {
        letter-spacing: -1px;
    }

    .project-card-body {
        padding: 21px;
    }

    .projects-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-card-image img,
    .project-link {
        transition: none;
    }

    .project-card:hover,
    .project-card:hover .project-card-image img {
        transform: none;
    }
}

/* =========================================================
   HOMEPAGE REDESIGN - HikmatullahSiraj.com
   Additive styles; original shared styles are preserved.
   ========================================================= */
:root {
    --hs-orange: #E0912F;
    --hs-orange-light: #F4A84C;
    --hs-navy: #131C33;
    --hs-navy-light: #1C2945;
    --hs-white: #F8FAFC;
    --hs-muted: #AAB6CC;
}

/* HERO */
.home-hero {
    position: relative; overflow: hidden; padding: 75px 0 105px;
    color: var(--hs-white);
    background: radial-gradient(ellipse at 75% 20%, rgba(224,145,47,.10), transparent 40%),
                linear-gradient(125deg, #111A30 0%, #192641 55%, #111A30 100%);
}
.hero-decoration {
    position: absolute; width: 380px; height: 380px;
    border: 1px solid rgba(255,255,255,.045); border-radius: 50%; pointer-events: none;
}
.hero-decoration-one { top: -230px; right: -100px; }
.hero-decoration-two { bottom: -300px; left: -180px; }
.home-hero .container { position: relative; z-index: 2; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 17px;
    margin-bottom: 25px; color: var(--hs-orange-light);
    background: rgba(224,145,47,.08); border: 1px solid rgba(224,145,47,.38);
    border-radius: 40px; font-size: .85rem; font-weight: 700;
}
.home-hero .status-dot, .availability-dot {
    width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%;
    background: #19C982; box-shadow: 0 0 0 5px rgba(25,201,130,.12);
}
.home-hero-title {
    max-width: 780px; margin: 0 0 16px; color: #fff;
    font-size: clamp(2.8rem, 5.5vw, 4.6rem); font-weight: 850;
    line-height: 1.08; letter-spacing: -2.5px;
}
.hero-name { display: inline; color: var(--hs-orange); }
.home-hero-role {
    margin-bottom: 8px; color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800;
}
.home-hero-subtitle { margin-bottom: 24px; color: #D5DEEF; font-size: 1.05rem; font-weight: 500; }
.home-hero-description { max-width: 680px; margin-bottom: 25px; color: #C1CDE0; font-size: 1rem; line-height: 1.9; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btn-primary, .hero-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 55px; padding: 13px 22px; border-radius: 10px;
    font-size: 1rem; font-weight: 750; transition: all .25s ease;
}
.hero-btn-primary {
    color: #fff; background: var(--hs-orange); border: 1px solid var(--hs-orange);
    box-shadow: 0 10px 25px rgba(224,145,47,.17);
}
.hero-btn-primary:hover { color: #fff; background: #C8791F; border-color: #C8791F; transform: translateY(-3px); }
.hero-btn-outline { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.55); }
.hero-btn-outline:hover { color: var(--hs-orange-light); border-color: var(--hs-orange); transform: translateY(-3px); }
.hero-skills { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.hero-skills span { display: inline-flex; align-items: center; gap: 7px; color: #C6D2E5; font-size: .82rem; }
.hero-skills i { color: var(--hs-orange); font-size: 1rem; }

/* PROFILE */
.hero-profile-area { position: relative; width: 100%; max-width: 390px; margin: 0 auto; padding: 25px 0 35px; }
.hero-profile-card {
    position: relative; z-index: 3; height: 445px; overflow: hidden;
    background: #253653; border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px; box-shadow: 0 25px 60px rgba(0,0,0,.35);
}
.hero-profile-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile-image-overlay {
    position: absolute; right: 0; bottom: 0; left: 0; padding: 55px 20px 20px;
    color: #fff; background: linear-gradient(transparent, rgba(5,10,20,.92));
}
.profile-image-overlay h3 { margin-bottom: 5px; font-size: 1.25rem; font-weight: 800; }
.profile-image-overlay p { margin: 0; color: #D4DEEF; font-size: .88rem; }
.profile-back-card { position: absolute; z-index: 1; top: 65px; width: 85%; height: 310px; border-radius: 20px; }
.profile-back-one { left: -35px; background: #758B64; transform: rotate(-8deg); opacity: .8; }
.profile-back-two { right: -35px; background: #334BBD; transform: rotate(8deg); opacity: .8; }
.profile-availability {
    position: absolute; z-index: 4; top: 40px; right: -25px;
    display: flex; align-items: center; gap: 10px; padding: 13px 17px;
    color: #172238; background: #fff; border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: .8rem; font-weight: 800;
}
.profile-experience {
    position: absolute; z-index: 4; top: 0; right: -55px;
    display: flex; align-items: center; gap: 13px; padding: 17px;
    color: #fff; background: #202C46; border: 1px solid #46536B;
    border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.profile-experience > i { color: var(--hs-orange); font-size: 1.5rem; }
.profile-experience strong, .profile-experience span { display: block; }
.profile-experience strong { font-size: .95rem; }
.profile-experience span { margin-top: 4px; color: #B5C0D2; font-size: .73rem; }
.profile-slider-dots {
    position: absolute; z-index: 4; bottom: 8px; left: 50%;
    display: flex; gap: 8px; transform: translateX(-50%);
}
.profile-slider-dots span { width: 8px; height: 8px; background: #8390A5; border-radius: 50%; }
.profile-slider-dots span.active { width: 23px; background: var(--hs-orange); border-radius: 20px; }

/* STATS */
.home-stats-section { position: relative; z-index: 5; margin-top: -52px; }
.home-stats-card {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
    padding: 30px 35px; background: #fff; border: 1px solid #E7EAF0;
    border-radius: 22px; box-shadow: 0 18px 50px rgba(17,24,39,.12);
}
.home-stat { display: flex; align-items: center; gap: 15px; min-width: 0; }
.home-stat-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 58px; height: 58px; color: var(--hs-orange);
    background: rgba(224,145,47,.10); border-radius: 15px; font-size: 1.45rem;
}
.home-stat strong, .home-stat span { display: block; }
.home-stat strong { color: #172033; font-size: 1.8rem; font-weight: 850; line-height: 1.2; }
.home-stat span { margin-top: 5px; color: #77839A; font-size: .82rem; }

/* HOME SECTIONS */
.home-about { padding-top: 90px; }
.home-page .section-heading { margin-bottom: 35px; }
.home-page .section-heading h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.home-page .section-kicker {
    display: inline-block; margin-bottom: 12px; color: var(--hs-orange);
    font-size: .78rem; font-weight: 800; letter-spacing: 2px;
}
.home-page .section-copy { color: var(--muted); font-size: 1.05rem; line-height: 1.95; }
.home-page .info-panel { padding: 25px; border-radius: 16px; }
.home-page .info-row { display: flex; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px solid rgba(128,128,128,.15); }
.home-page .info-row:last-child { border-bottom: 0; }
.home-page .info-row span { color: var(--muted); }
.home-page .info-row strong { text-align: right; }

/* HOME CARD ENHANCEMENTS */
.home-page .service-card, .home-page .project-card, .home-page .post-card {
    height: 100%; overflow: hidden; border-radius: 17px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-page .service-card:hover, .home-page .project-card:hover, .home-page .post-card:hover {
    transform: translateY(-6px); box-shadow: 0 16px 35px rgba(0,0,0,.10);
}
.home-page .service-icon { color: var(--hs-orange); }
.home-page .project-visual { overflow: hidden; }
.home-page .project-visual img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease;
}
.home-page .project-card:hover .project-visual img { transform: scale(1.05); }
.home-page .project-placeholder {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 12px; min-height: 200px; color: var(--hs-orange);
    background: var(--hs-navy); font-size: 2.5rem;
}
.home-page .project-placeholder span { font-size: .75rem; letter-spacing: 2px; }
.home-page .tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.home-page .tag-list span {
    padding: 6px 10px; color: var(--hs-orange);
    background: rgba(224,145,47,.10); border-radius: 6px; font-size: .75rem;
}
.home-page .post-card h3 a { color: inherit; text-decoration: none; }
.home-page .post-card h3 a:hover { color: var(--hs-orange); }

/* CONTACT */
.home-page .contact-section {
    background: linear-gradient(125deg, #131C33, #1D2B49); color: #fff;
}
.home-page .contact-section h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.home-page .contact-section .section-copy { color: #B8C4D9; }
.home-page .contact-form {
    padding: 28px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
}
.home-page .contact-form .form-label { color: #D8E0ED; }
.home-page .contact-form .form-control {
    min-height: 48px; color: #fff; background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18); border-radius: 9px;
}
.home-page .contact-form textarea.form-control { min-height: 130px; }
.home-page .contact-form .form-control:focus {
    background: rgba(255,255,255,.10); border-color: var(--hs-orange);
    box-shadow: 0 0 0 3px rgba(224,145,47,.15);
}
.home-page .contact-form .form-control::placeholder { color: #AAB6CC; }
.home-page .contact-detail { display: flex; align-items: center; gap: 12px; color: #E5EAF2; }
.home-page .contact-detail i { color: var(--hs-orange); font-size: 1.3rem; }

/* RTL */
[dir="rtl"] .home-hero-title { letter-spacing: 0; }
[dir="rtl"] .hero-eyebrow, [dir="rtl"] .hero-skills, [dir="rtl"] .hero-buttons { direction: rtl; }
[dir="rtl"] .home-stat { direction: rtl; text-align: right; }
[dir="rtl"] .home-page .info-row { direction: rtl; }
[dir="rtl"] .home-page .info-row strong { text-align: left; }

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .home-hero { padding: 65px 0 90px; }
    .hero-profile-area { max-width: 340px; }
    .hero-profile-card { height: 390px; }
    .profile-experience { right: -15px; }
    .profile-availability { right: -10px; }
    .home-stats-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .home-hero { padding: 50px 0 80px; }
    .home-hero-title { font-size: 2.65rem; letter-spacing: -1.5px; }
    .home-hero-description { font-size: .94rem; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }
    .hero-skills { gap: 13px; }
    .hero-profile-area { max-width: 290px; }
    .hero-profile-card { height: 350px; }
    .profile-experience { right: -5px; padding: 12px; }
    .profile-availability { right: -5px; top: 30px; padding: 10px 12px; font-size: .7rem; }
    .home-stats-card { grid-template-columns: 1fr 1fr; gap: 22px 12px; padding: 22px 16px; }
    .home-stat { gap: 10px; }
    .home-stat-icon { width: 43px; height: 43px; font-size: 1.1rem; }
    .home-stat strong { font-size: 1.35rem; }
    .home-stat span { font-size: .7rem; }
    .home-page .contact-form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page *, .home-page *::before, .home-page *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
}

/* =========================================================
   ABOUT SECTION REDESIGN
   Matches the supplied reference image
   ========================================================= */
.home-about {
    padding-top: 42px;
    padding-bottom: 75px;
    background: #f5f7fb;
    color: #172033;
}

.about-intro-panel {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(0, 1.55fr);
    align-items: center;
    gap: clamp(22px, 4vw, 48px);
    padding: clamp(22px, 4vw, 38px);
    color: #fff;
    background:
        radial-gradient(circle at 95% 0%, rgba(224,145,47,.18), transparent 30%),
        linear-gradient(125deg, #131c33, #1b2945);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(17,24,39,.16);
    overflow: hidden;
    position: relative;
}

.about-intro-panel::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -130px;
    bottom: -150px;
    border: 1px solid rgba(224,145,47,.22);
    border-radius: 50%;
    pointer-events: none;
}

.about-profile-photo {
    position: relative;
    min-width: 0;
    height: 290px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 13px;
    background: #263650;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.about-profile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.about-photo-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 35px 13px 12px;
    color: #fff;
    background: linear-gradient(transparent, rgba(5,10,20,.92));
}

.about-photo-caption strong { font-size: .95rem; font-weight: 800; }
.about-photo-caption span { color: #d4deef; font-size: .72rem; }

.about-intro-content { position: relative; z-index: 1; }
.about-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 10px;
    color: #f4a84c;
    border: 1px solid rgba(224,145,47,.45);
    border-radius: 30px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.about-intro-content h2 {
    max-width: 650px;
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.65rem, 3.3vw, 2.45rem);
    font-weight: 850;
    line-height: 1.18;
}
.about-intro-content p {
    max-width: 720px;
    margin: 0 0 11px;
    color: #c5d0e2;
    font-size: .83rem;
    line-height: 1.8;
}
.about-intro-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.about-primary-btn, .about-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 750;
}
.about-primary-btn { color: #fff; background: #e0912f; border: 1px solid #e0912f; }
.about-primary-btn:hover { color: #fff; background: #c8791f; border-color: #c8791f; }
.about-outline-btn { color: #fff; background: transparent; border: 1px solid #71809b; }
.about-outline-btn:hover { color: #f4a84c; border-color: #e0912f; }

.about-technologies { padding: 48px 8px 0; }
.about-tech-heading { margin-bottom: 22px; text-align: center; }
.about-tech-heading .section-kicker {
    display: inline-block;
    margin-bottom: 4px;
    color: #e0912f;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: 1.6px;
}
.about-tech-heading h2 {
    margin: 0 0 7px;
    color: #172033;
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    font-weight: 850;
}
.about-tech-heading p { margin: 0; color: #78849a; font-size: .75rem; }

.about-tech-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.about-tech-item {
    display: flex;
    min-height: 66px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 5px;
    color: #243047;
    background: #fff;
    border: 1px solid #e0e6ef;
    border-radius: 9px;
    box-shadow: 0 3px 9px rgba(24,39,75,.035);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.about-tech-item:hover {
    transform: translateY(-3px);
    border-color: rgba(224,145,47,.55);
    box-shadow: 0 8px 18px rgba(24,39,75,.09);
}
.about-tech-item i { font-size: 1.15rem; line-height: 1; }
.about-tech-item span { font-size: .62rem; font-weight: 750; }
.tech-html { color: #e44d26; }
.tech-css { color: #1572b6; }
.tech-tailwind { color: #06b6d4; }
.tech-bootstrap { color: #7952b3; }
.tech-js { color: #c7a600; }
.tech-react { color: #149eca; }
.tech-vue { color: #42b883; }
.tech-vite { color: #e6b72e; }
.tech-motion { color: #6c8eaa; }
.tech-git { color: #f05032; }
.tech-php { color: #777bb4; }
.tech-laravel { color: #f55247; }
.tech-mysql { color: #00758f; }
.tech-figma { color: #f24e1e; }
.tech-photoshop { color: #2876c7; }
.tech-next { color: #111827; }
.tech-wordpress { color: #21759b; }

.about-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.about-summary-card {
    min-height: 135px;
    padding: 19px 20px;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(24,39,75,.045);
}
.about-summary-title { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.about-summary-icon {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    color: #e0912f;
    background: rgba(224,145,47,.11);
    border-radius: 7px;
}
.about-summary-title h3 { margin: 0; color: #202b40; font-size: .9rem; font-weight: 850; }
.about-summary-card p { margin: 0; color: #7a879b; font-size: .72rem; line-height: 1.8; }

[dir="rtl"] .about-intro-content,
[dir="rtl"] .about-summary-card { text-align: right; }
[dir="rtl"] .about-summary-title { flex-direction: row; }
[dir="rtl"] .about-photo-caption { text-align: right; }

@media (max-width: 767.98px) {
    .home-about { padding-top: 28px; }
    .about-intro-panel { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
    .about-profile-photo { width: min(100%, 300px); height: 270px; margin: 0 auto; }
    .about-intro-content h2 { font-size: 1.8rem; }
    .about-tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .about-summary-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .about-tech-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .about-profile-photo { height: 260px; }
}