/* =============================================================================
   redesign.css — desktop visual layer for index.html

   A pure restyle: no markup, copy or behaviour changes. It sits after every
   other stylesheet on the page and everything is wrapped in
   @media (min-width: 992px), so the mobile design in css/index-mobile.css is
   untouched. Delete the <link> and the page is exactly what it was.

   Like enhancements.css, it is deliberately outside css/bundle.min.css.

   Direction: an editorial studio look. Grain over the ink, numbered section
   eyebrows, heavier display type, bento grids, and a cursor-following
   spotlight on the cards (the --mx/--my variables come from js/redesign.js;
   without it the spotlight simply never shows).

   01 Tokens + atmosphere        08 Credentials
   02 Section heads              09 Portfolio bento
   03 Buttons                    10 Blog
   04 Hero                       11 Contact
   05 Stats tape                 12 Footer
   06 About + trusted strip      13 Reduced motion
   07 Skills + experience
   ============================================================================= */

@property --rd-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@media (min-width: 992px) {

/* -----------------------------------------------------------------
   01 · Tokens + atmosphere
   ----------------------------------------------------------------- */
:root {
    --rd-green: #28e98c;
    --rd-violet: #5b6af0;
    --rd-ink: #0a0b0b;
    --rd-surface: rgba(255, 255, 255, 0.028);
    --rd-surface-2: rgba(255, 255, 255, 0.05);
    --rd-line: rgba(255, 255, 255, 0.075);
    --rd-line-2: rgba(255, 255, 255, 0.14);
    --rd-muted: rgba(255, 255, 255, 0.56);
    --rd-radius: 22px;
    --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body { background-color: var(--rd-ink); }

/* Film grain over the whole page. Fixed and non-interactive, drawn from an
   inline SVG turbulence so there is no extra request. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--rd-green); color: #0a0a0a; }

/* Sections breathe more and lose the hard rules between them; a soft
   gradient hairline replaces the flat border. */
.lp-section { border-top: 0; position: relative; }
.lp-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: min(1100px, 86%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
}
.section-padding { padding-top: 115px; padding-bottom: 115px; }
.resume.section-padding { padding-top: 0; }


/* -----------------------------------------------------------------
   02 · Section heads — numbered eyebrow + heavier title
   ----------------------------------------------------------------- */
main { counter-reset: rd-sec; }
main .sub-title-icon { counter-increment: rd-sec; }

.sub-title-icon {
    border: 0;
    padding: 0;
    border-radius: 0;
    gap: 14px;
    margin-bottom: 18px !important;
}
.sub-title-icon .icon { display: none; }
.sub-title-icon .sub-label {
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3.5px;
    color: var(--rd-green);
}
.sub-title-icon .sub-label::before {
    content: counter(rd-sec, decimal-leading-zero);
    display: inline-block;
    margin-right: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(40, 233, 140, 0.35);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--rd-green);
    background: rgba(40, 233, 140, 0.07);
}
.sub-title-icon::after {
    content: '';
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(40, 233, 140, 0.6), transparent);
}
.sec-head .sub-title-icon::before {
    content: '';
    width: 46px;
    height: 1px;
    background: linear-gradient(270deg, rgba(40, 233, 140, 0.6), transparent);
}

.sec-head h3 {
    font-size: clamp(44px, 4.4vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.5px;
}


/* -----------------------------------------------------------------
   03 · Buttons
   ----------------------------------------------------------------- */
.butn.butn-md { padding: 16px 32px; }
.butn.radius-5 { border-radius: 999px !important; }
.butn.butn-bg {
    color: #0a0a0a;
    font-weight: 600;
    box-shadow: 0 10px 34px -10px rgba(40, 233, 140, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.butn.butn-bord {
    border-color: var(--rd-line-2);
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.butn span { position: relative; }
.butn.butn-bg span::after {
    content: '→';
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.35s var(--rd-ease);
}

@media (hover: hover) and (pointer: fine) {
    .butn.butn-bg:hover {
        background: #4ff0a5 !important;
        border-color: #4ff0a5;
        color: #0a0a0a !important;
        box-shadow: 0 16px 44px -10px rgba(40, 233, 140, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }
    .butn.butn-bg:hover span { color: #0a0a0a; }
    .butn.butn-bg:hover span::after { transform: translateX(5px); }
    .butn.butn-bord:hover { border-color: #fff; }
}


/* -----------------------------------------------------------------
   04 · Hero
   ----------------------------------------------------------------- */
.header-crev { padding-top: 150px; overflow: hidden !important; }

/* Blueprint dot grid, fading out from the portrait side. */
.header-crev::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.2px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 72% 38%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 72% 38%, #000 10%, transparent 75%);
}
.hero-blob { opacity: 0.16; }

.availability-badge {
    padding: 7px 16px 7px 12px;
    background: rgba(40, 233, 140, 0.06);
    border-color: rgba(40, 233, 140, 0.28);
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.3px;
}
.roles-ticker {
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 17px;
    color: var(--rd-muted);
}

.header-crev .content h1 {
    font-size: clamp(64px, 6.4vw, 96px);
    line-height: 1.02;
    letter-spacing: -1px;
}
.gradient-name {
    background: linear-gradient(100deg, #28e98c 0%, #7af5c0 22%, #5b6af0 50%, #28e98c 78%, #7af5c0 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: rdShimmer 9s ease-in-out infinite;
}
@keyframes rdShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.header-crev .content p {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--rd-muted);
    max-width: 520px;
}
.hero-ctas { gap: 14px; }

.header-crev .img-author { position: relative; }

/* The "5+ years" badge sits BEHIND the portrait: the photo is a cut-out, so
   the figure overlaps the badge and only the part beside it shows. The image
   carries z-index 3 from style.css, so anything under 3 falls behind it. */
.glass-badge {
    background: rgba(12, 14, 13, 0.55) !important;
    border: 1px solid var(--rd-line-2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 26px 26px 26px 6px !important;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
    z-index: 1;
    /* Scales with the viewport instead of the base theme's fixed 70px figure
       and padding, so it keeps its proportions from 992px to wide screens.
       The long right padding is an empty tail that runs under the figure
       while the text stays clear of it. */
    left: clamp(-10px, -0.6vw, 0px);
    padding: clamp(10px, 1vw, 16px) clamp(84px, 9vw, 150px) clamp(10px, 1vw, 16px) clamp(16px, 1.7vw, 26px) !important;
}
/* style.css draws two gradient layers behind this badge (::before/::after)
   with a different corner shape, which showed as a ghost card behind it. */
.header-crev .img-author .box-shadwo::before,
.header-crev .img-author .box-shadwo::after { display: none; }
/* index.html fades the portrait out from 60% of its height down. The badge
   sits at 50–66%, so its bottom edge showed through the fading photo. The
   photo now stays solid until well past the badge and fades only near the
   bottom, into the page. */
.header-crev .img-author img {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.glass-badge .badge-num { font-size: clamp(44px, 4.4vw, 70px); margin-right: clamp(10px, 1vw, 15px); }
.glass-badge .badge-label { font-size: clamp(13px, 1.15vw, 17px); }
.glass-badge .badge-num {
    background: linear-gradient(180deg, #fff, #28e98c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark-signals { margin-top: 56px !important; }
.dark-signal-item {
    background: var(--rd-surface);
    border-color: var(--rd-line);
    color: var(--rd-muted);
}
.dark-signal-item strong { color: #fff; }


/* -----------------------------------------------------------------
   05 · Stats tape — two crossing bands instead of a flat marquee
   ----------------------------------------------------------------- */
.stats-strip {
    position: relative;
    z-index: 3;
    margin: 90px calc(50% - 50vw - 60px) 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible;
    transform: rotate(-2deg);
}
.stats-strip::before {
    content: '';
    position: absolute;
    inset: 4px 0;
    z-index: -1;
    background: #121414;
    border-top: 1px solid var(--rd-line);
    border-bottom: 1px solid var(--rd-line);
    transform: rotate(3.2deg);
}
.stats-marquee {
    background: var(--rd-green);
    padding: 20px 0;
    box-shadow: 0 20px 60px -20px rgba(40, 233, 140, 0.55);
}
.stats-track > * { margin-right: 46px; }
.stat-item { flex-direction: row; align-items: baseline; gap: 12px; }
.stat-num {
    font-family: 'Righteous', sans-serif;
    font-size: 34px;
    color: #0a0a0a;
}
.stat-label {
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0a0a0a;
    opacity: 0.72;
}
.stat-sep { font-size: 16px; color: #0a0a0a; opacity: 0.55; }


/* -----------------------------------------------------------------
   06 · About + trusted strip
   ----------------------------------------------------------------- */
.about-new-top { grid-template-columns: 400px 1fr; gap: 90px; align-items: center; }

/* The photo cluster is deliberately NOT restyled here — the animated gradient
   border, the rounded frame and the tool chips stay exactly as the original
   index.html has them. */

.about-bio-title { font-size: clamp(38px, 3.6vw, 54px); line-height: 1.08; margin-bottom: 14px; }
.about-bio-roles {
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.about-bio-text { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.72); max-width: 620px; }

/* Stats as one segmented panel. */
.about-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    background: var(--rd-surface);
    overflow: hidden;
}
.about-stat-item {
    padding: 22px 12px 20px;
    border-left: 1px solid var(--rd-line);
    transition: background 0.35s;
}
.about-stat-item:first-child { border-left: 0; }
@media (hover: hover) and (pointer: fine) {
    .about-stat-item:hover { background: rgba(40, 233, 140, 0.05); }
}
.about-stat-num { font-family: 'Righteous', sans-serif; font-size: 38px; font-weight: 400; }
.about-stat-plus { font-size: 22px; }
.about-stat-label { font-family: 'Lexend', 'Poppins', sans-serif; letter-spacing: 1.4px; margin-top: 8px; }

.about-chip { border-radius: 999px; padding: 8px 14px; }

/* Trusted-by: larger, outlined wordmarks that fill in on hover. */
.trusted-by-strip {
    padding: 34px 0;
    background: transparent;
    border-color: var(--rd-line);
}
.trusted-by-label {
    font-family: 'Lexend', 'Poppins', sans-serif;
    letter-spacing: 3px;
    color: var(--rd-green);
}
.trusted-logo-item {
    font-family: 'Righteous', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.38);
    transition: color 0.35s, -webkit-text-stroke-color 0.35s;
}
@media (hover: hover) and (pointer: fine) {
    .trusted-logo-item:hover { color: #fff; -webkit-text-stroke-color: #fff; }
}
.trusted-logo-sep { font-size: 22px; color: var(--rd-green); opacity: 0.7; }


/* -----------------------------------------------------------------
   07 · Skills + experience

   The skills block follows the calmer index-v3 treatment — a plain 2×2 of
   equal cards, no bento spans, no outsized index numbers and no spotlight —
   in this page's dark palette.
   ----------------------------------------------------------------- */
.skills-new { padding-top: 110px !important; }

.skills-grid { gap: 22px; }

/* Shared card surface + spotlight. The spotlight is a ::before that follows
   --mx/--my (written by js/redesign.js) and fades in on hover. */
.edu-card,
.exp-right,
.blog-featured-card,
.blog-side-card {
    position: relative;
    isolation: isolate;
}
.edu-card::before,
.exp-right::before,
.blog-featured-card::before,
.blog-side-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(40, 233, 140, 0.11), transparent 45%);
}
@media (hover: hover) and (pointer: fine) {
    .edu-card:hover::before,
    .exp-right:hover::before,
    .blog-featured-card:hover::before,
    .blog-side-card:hover::before { opacity: 1; }
}

/* Icon on top, then title, tools and the proof line — one column per card. */
.skill-card {
    flex-direction: column;
    gap: 22px;
    padding: 32px 30px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 32px -20px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s var(--rd-ease), box-shadow 0.3s, border-color 0.25s;
}
@media (hover: hover) and (pointer: fine) {
    .skill-card:hover {
        transform: translateY(-5px);
        border-color: rgba(40, 233, 140, 0.25);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 28px 52px -26px rgba(0, 0, 0, 0.95);
    }
}
.skill-card-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 15px;
    background: rgba(40, 233, 140, 0.07);
    border: 1px solid rgba(40, 233, 140, 0.18);
}
.skill-card-body { display: flex; flex-direction: column; width: 100%; }
.skill-card-title { font-size: 21px; margin-bottom: 14px; }
.skill-tool {
    font-size: 11.5px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.7);
}
.skill-anchor-note {
    font-style: normal;
    font-size: 12.5px;
    color: var(--rd-green);
    margin-top: auto;
    padding-top: 4px;
}

/* Experience */
.exp-timeline { max-width: 940px; }
.exp-item { margin-bottom: 14px; }
.exp-left { width: 56px; padding-top: 30px; }
.exp-dot { width: 16px; height: 16px; border-width: 2px; }
.exp-right {
    padding: 26px 30px;
    border-radius: 18px;
    border-color: var(--rd-line);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 70%);
    transition: border-color 0.3s, background 0.3s, transform 0.45s var(--rd-ease), box-shadow 0.45s;
}
@media (hover: hover) and (pointer: fine) {
    .exp-item:hover .exp-right { transform: translateX(6px); }
}
.exp-item.active .exp-right {
    border-color: rgba(40, 233, 140, 0.32);
    box-shadow: inset 3px 0 0 var(--rd-green), 0 30px 70px -40px rgba(40, 233, 140, 0.4);
}
.exp-title { font-size: 19px; margin-bottom: 8px; }
.exp-meta { font-size: 13px; }
.exp-date-badge {
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--rd-line);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.6);
}
.exp-tags span { font-size: 11.5px; padding: 4px 11px; }
.exp-body ul li { font-size: 14px; }


/* -----------------------------------------------------------------
   08 · Credentials
   ----------------------------------------------------------------- */
.edu-section { background: transparent; }

.edu-filters { gap: 6px; }
.edu-section .edu-filters,
.pf-section .edu-filters {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--rd-line);
    background: rgba(255, 255, 255, 0.025);
}
.edu-filter-btn,
.pf-filter-btn {
    border-color: transparent;
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 11.5px;
    letter-spacing: 1.2px;
    padding: 9px 20px;
    color: rgba(255, 255, 255, 0.55);
}
.edu-filter-btn.active,
.pf-filter-btn.active {
    box-shadow: 0 8px 24px -8px rgba(40, 233, 140, 0.7);
}

.edu-grid { gap: 26px; }
.edu-card {
    border-radius: var(--rd-radius);
    border-color: var(--rd-line);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 60%);
    transition: transform 0.5s var(--rd-ease), border-color 0.3s, box-shadow 0.5s;
}
/* The certificate sits in a framed "mat" instead of bleeding to the edge. */
.edu-card-img {
    height: 230px;
    margin: 10px 10px 0;
    width: auto;
    border-radius: 14px;
    background: #fff;
}
.edu-card-img img { transition: transform 0.8s var(--rd-ease); }
.edu-card-body { padding: 22px 24px 26px; }
.edu-card-title { font-size: 16px; }
.edu-card-desc { font-size: 13px; }
.edu-verify-btn { border-radius: 999px; padding: 8px 16px; }


/* -----------------------------------------------------------------
   09 · Portfolio bento — info overlaid on the cover
   ----------------------------------------------------------------- */
.pf-section .edu-filters { gap: 6px; }

.pf-grid:not(.is-list) {
    grid-auto-rows: auto;
    gap: 22px;
}

/* Every cover shows at 14:9. The small cards carry the ratio and so set the
   row heights; the featured card spans two columns and two rows and simply
   stretches to fill them, which lands it at (almost exactly) 14:9 too. A
   grid item with an aspect ratio is not stretched, so the two never fight. */
.pf-grid:not(.is-list) .pf-card {
    position: relative;
    height: auto;
    aspect-ratio: 14 / 9;
    border-radius: var(--rd-radius);
    border-color: var(--rd-line);
    background: #111;
}
.pf-grid:not(.is-list) .pf-card-featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}
.pf-grid:not(.is-list) .pf-card-img,
.pf-grid:not(.is-list) .pf-card-featured .pf-card-img {
    position: absolute;
    inset: 0;
    height: 100%;
}
.pf-grid:not(.is-list) .pf-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 7, 7, 0.95) 0%, rgba(6, 7, 7, 0.55) 26%, transparent 55%);
    pointer-events: none;
}
.pf-grid:not(.is-list) .pf-card-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    align-items: flex-end;
    padding: 22px 24px;
}
.pf-grid:not(.is-list) .pf-card-title { font-size: 19px; margin-bottom: 4px; }
.pf-grid:not(.is-list) .pf-card-featured .pf-card-title { font-size: 30px; }
.pf-grid:not(.is-list) .pf-card-featured .pf-card-info { padding: 32px 34px; }
.pf-grid:not(.is-list) .pf-card-tag {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/* The markup puts the arrow before the word; row-reverse reads "View →". */
.pf-view-pill { flex-direction: row-reverse; }
.pf-grid:not(.is-list) .pf-view-pill {
    background: rgba(10, 10, 10, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    transform: translateY(0);
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.45s var(--rd-ease);
}
@media (hover: hover) and (pointer: fine) {
    .pf-grid:not(.is-list) .pf-card:hover { box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.95); border-color: rgba(40, 233, 140, 0.35); }
    /* Hover fills the pill green with white type. A deeper shade than the
       brand mint, which is too light for white text to be readable. */
    .pf-grid:not(.is-list) .pf-card:hover .pf-view-pill {
        background: #12a866;
        border-color: #12a866;
        color: #fff;
        transform: translateY(-3px);
    }
    .pf-card:hover .pf-view-pill svg { transform: translateX(3px); }
}

.pf-hint-text {
    background: transparent;
    border-style: dashed;
    border-color: var(--rd-line-2);
    color: rgba(255, 255, 255, 0.45);
}


/* -----------------------------------------------------------------
   10 · Blog
   ----------------------------------------------------------------- */
.blog-grid { grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: stretch; }

.blog-featured-card,
.blog-side-card {
    border-radius: var(--rd-radius);
    border-color: var(--rd-line);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 60%);
}
.blog-featured-img { height: 360px; margin: 10px 10px 0; border-radius: 16px; }
.blog-featured-label { padding: 6px 14px; box-shadow: 0 8px 24px -8px rgba(40, 233, 140, 0.8); }
.blog-featured-body { padding: 26px 30px 30px; }
.blog-featured-title { font-size: 28px; line-height: 1.2; }
.blog-featured-excerpt { font-size: 14px; }

.blog-side-posts { gap: 26px; height: 100%; }
.blog-side-card { flex: 1; padding: 14px; gap: 22px; align-items: stretch; }
.blog-side-img { width: 170px; height: auto; min-height: 150px; border-radius: 14px; }
.blog-side-body { padding: 8px 8px 6px 0; }
.blog-side-title { font-size: 17px; line-height: 1.3; }
.blog-side-excerpt { font-size: 13px; }
.blog-arrow {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(40, 233, 140, 0.35);
    font-size: 14px;
    transition: transform 0.35s var(--rd-ease), background 0.25s, color 0.25s;
}
@media (hover: hover) and (pointer: fine) {
    .blog-side-card:hover { transform: translateY(-4px); }
    .blog-side-card:hover .blog-arrow { background: var(--rd-green); color: #0a0a0a; transform: rotate(-45deg); }
}


/* -----------------------------------------------------------------
   11 · Contact
   ----------------------------------------------------------------- */
.contact-new-grid { grid-template-columns: 1fr 560px; gap: 80px; }
.contact-heading { font-size: clamp(44px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -0.5px; margin-bottom: 18px; }
.contact-sub { font-size: 16px; }
.contact-channels { gap: 14px; margin-top: 36px; }
.contact-channel {
    padding: 18px 20px;
    border-radius: 18px;
    border-color: var(--rd-line);
    background: var(--rd-surface);
}
.contact-channel-icon { width: 50px; height: 50px; border-radius: 15px; }
.contact-channel-value { font-size: 15px; }
.contact-channel-arrow {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(40, 233, 140, 0.25);
    font-size: 15px;
}
.contact-social-btn { width: 44px; height: 44px; border-radius: 50%; }

/* The form card gets a slowly rotating gradient border. */
.contact-cta-card {
    border: 1px solid transparent;
    border-radius: 28px;
    padding: 44px;
    background:
        linear-gradient(165deg, #141716, #0e100f 60%) padding-box,
        conic-gradient(from var(--rd-ang), rgba(40, 233, 140, 0.75), rgba(91, 106, 240, 0.45), rgba(255, 255, 255, 0.06) 35%, rgba(255, 255, 255, 0.06) 65%, rgba(40, 233, 140, 0.75)) border-box;
    box-shadow: 0 40px 100px -40px rgba(40, 233, 140, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    animation: rdSpin 10s linear infinite;
}
@keyframes rdSpin { to { --rd-ang: 360deg; } }
.cform-title { font-size: 30px; }
.cform-input, .cselect-trigger { border-radius: 16px; background-color: rgba(255, 255, 255, 0.03); }
.cform-submit { border-radius: 999px; padding: 19px; box-shadow: 0 14px 40px -12px rgba(40, 233, 140, 0.7); }
.cform-next { border-radius: 999px; }


/* -----------------------------------------------------------------
   12 · Footer — an oversized sign-off
   ----------------------------------------------------------------- */
footer.lp-footer {
    position: relative;
    padding: 30px 0 46px;
    border-top: 0;
    overflow: hidden;
}
footer.lp-footer::before {
    content: 'Let\2019s create';
    display: block;
    margin: 0 0 40px;
    font-family: 'Righteous', sans-serif;
    font-size: clamp(90px, 12.5vw, 210px);
    line-height: 0.95;
    white-space: nowrap;
    letter-spacing: -2px;
    /* No outline on the letters — the sign-off is a soft green fill that
       fades towards the bottom, strong enough that every letter still reads. */
    color: transparent;
    background: linear-gradient(180deg, rgba(40, 233, 140, 0.26), rgba(40, 233, 140, 0.05) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
}
footer.lp-footer .social li a {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--rd-line-2);
    transition: opacity 0.25s, border-color 0.25s, color 0.25s, transform 0.35s var(--rd-ease);
}
@media (hover: hover) and (pointer: fine) {
    footer.lp-footer .social li a:hover { color: var(--rd-green); border-color: var(--rd-green); transform: translateY(-3px); }
}

/* Floating CTA: a touch more presence. */
.hire-me-float {
    padding: 12px 20px;
    font-family: 'Lexend', 'Poppins', sans-serif;
    letter-spacing: 1.4px;
    box-shadow: 0 14px 40px -10px rgba(40, 233, 140, 0.8);
}
.hire-pulse { width: 8px; height: 8px; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); animation: rdPing 2s infinite; }
@keyframes rdPing {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

} /* end @media (min-width: 992px) */

/* Small laptops: the fixed side columns would squeeze their neighbours. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .about-new-top { grid-template-columns: 340px 1fr; gap: 60px; }
    .contact-new-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
    .contact-cta-card { padding: 34px; }
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .blog-side-img { width: 130px; }
}


/* -----------------------------------------------------------------
   13 · Reduced motion
   ----------------------------------------------------------------- */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .gradient-name,
    .contact-cta-card,
    .hire-pulse { animation: none; }
}