/* ===== ELIOT SAURON — PORTFOLIO v2 ===== */
:root {
    --ff-body: 'Manrope', system-ui, sans-serif;
    --ff-head: 'Syne', system-ui, sans-serif;

    --c-bg:      #06060a;
    --c-bg-alt:  #0d0d18;
    --c-text:    #eeeef5;
    --c-text-sec:#7a7a9a;
    --c-accent-1:#ff5470;
    --c-accent-2:#00c8ff;
    --c-accent-3:#7c3aed;
    --c-border:  rgba(255,255,255,.07);
    --c-glow-1:  rgba(255,84,112,.18);
    --c-glow-2:  rgba(0,200,255,.18);
    --c-glow-3:  rgba(124,58,237,.15);

    --sp:   clamp(1.5rem, 4vw, 3rem);
    --rad:  14px;
    --rad-lg: 22px;
}

body.theme-light {
    --c-bg:      #f4f4f9;
    --c-bg-alt:  #eaeaf2;
    --c-text:    #0d0d18;
    --c-text-sec:#5a5a7a;
    --c-accent-1:#e6364f;
    --c-accent-2:#0099cc;
    --c-accent-3:#6d28d9;
    --c-border:  rgba(0,0,0,.1);
    --c-glow-1:  rgba(230,54,79,.1);
    --c-glow-2:  rgba(0,153,204,.1);
    --c-glow-3:  rgba(109,40,217,.08);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-body);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background .4s, color .4s;
}

/* Grain texture premium */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    opacity: 0.022;
    pointer-events: none;
    z-index: 9997;
}

img, video { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
button { border:none; background:none; font:inherit; cursor:pointer; }

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* scroll-margin pour ancres sous header */
section[id] { scroll-margin-top: 100px; }

/* === CUSTOM CURSOR === */
#cursor {
    position: fixed;
    width: 36px; height: 36px;
    border: 1.5px solid rgba(0,200,255,.45);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%,-50%);
    transition: width .25s, height .25s, border-color .25s, background .25s;
    mix-blend-mode: screen;
}
#cursor.grow {
    width: 56px; height: 56px;
    border-color: rgba(255,84,112,.5);
    background: rgba(255,84,112,.04);
}
#cursor-dot {
    position: fixed;
    width: 4px; height: 4px;
    background: var(--c-accent-2);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%,-50%);
    transition: background .2s;
}

/* === HEADER === */
header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 940px;
    z-index: 998;
    transition: top .3s;
}

header.scrolled { top: 12px; }

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 32px;
    background: rgba(6,6,10,.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--c-border);
    border-radius: 100px;
    transition: box-shadow .3s, border-color .3s;
}

header.scrolled .header-inner {
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.1);
}

body.theme-light .header-inner {
    background: rgba(244,244,249,.9);
}

.logo {
    display: flex;
    height: 40px;
    align-items: center;
    transition: opacity .2s;
}
.logo svg { width: 100px; height: 100%; }

.logo text {
    font-family: var(--ff-head);
    font-weight: 800;
    font-size: 20px;
    fill: var(--c-text);
}
body.theme-light .logo text { fill: #0d0d18; }
body.theme-dark  .logo text { fill: #eeeef5; }

.logo svg path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawCloud 6s ease-in-out infinite;
}

@keyframes drawCloud {
    0%   { stroke-dashoffset: 600; opacity: 0.2; }
    25%  { opacity: 1; }
    50%  { stroke-dashoffset: 0;   opacity: 1;   }
    75%  { stroke-dashoffset: 0;   opacity: 0.6; }
    100% { stroke-dashoffset: 0;   opacity: 0.2; }
}

.logo:hover { opacity: .72; }

nav ul { display:flex; gap:30px; list-style:none; }

nav a {
    font-weight: 600;
    font-size: .875rem;
    color: var(--c-text-sec);
    transition: color .2s;
    letter-spacing: .02em;
}
nav a:hover { color: var(--c-text); }
nav a.active { color: var(--c-text); font-weight: 700; }

.theme-dark .icon-sun  { display: none; }
.theme-light .icon-moon { display: none; }

#theme-toggle {
    padding: 8px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    border: 1px solid var(--c-border);
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-sec);
}
#theme-toggle:hover {
    color: var(--c-text);
    background: rgba(255,255,255,.12);
    transform: rotate(22deg);
}

/* === HERO === */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 130px 0 90px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

.orb-1 {
    width: 650px; height: 650px;
    background: var(--c-glow-1);
    top: -180px; left: -120px;
    animation: orb-drift-1 22s ease-in-out infinite alternate;
}

.orb-2 {
    width: 550px; height: 550px;
    background: var(--c-glow-2);
    top: 15%; right: -80px;
    animation: orb-drift-2 28s ease-in-out infinite alternate;
}

.orb-3 {
    width: 420px; height: 420px;
    background: var(--c-glow-3);
    bottom: -80px; left: 28%;
    animation: orb-drift-3 19s ease-in-out infinite alternate;
}

@keyframes orb-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(70px, -50px) scale(1.12); }
    100% { transform: translate(-30px, 80px) scale(0.92); }
}
@keyframes orb-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-60px, 70px) scale(1.08); }
    100% { transform: translate(40px, -40px) scale(0.96); }
}
@keyframes orb-drift-3 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(50px, 40px) scale(1.15); }
    100% { transform: translate(-70px, -30px) scale(0.88); }
}

.hero-content { position: relative; z-index: 1; }

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(0,200,255,.07);
    border: 1px solid rgba(0,200,255,.22);
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-accent-2);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 44px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s .1s, transform .6s .1s;
}
.hero-tag.visible { opacity:1; transform:translateY(0); }

.hero-tag-dot {
    width: 6px; height: 6px;
    background: var(--c-accent-2);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--c-accent-2);
    flex-shrink: 0;
    animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink {
    0%,100% { opacity:1; }
    50%      { opacity:.3; }
}

.hero-title {
    font: 800 clamp(3.8rem, 11vw, 8rem)/1 var(--ff-head);
    letter-spacing: -.035em;
    margin-bottom: 36px;
}

.hero-title .line {
    display: block;
    overflow: hidden;
}

.hero-title .line-inner {
    display: block;
    transform: translateY(105%);
    transition: transform .85s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-title .line:nth-child(2) .line-inner {
    transition-delay: .12s;
}

.grad {
    background: linear-gradient(135deg, var(--c-accent-1) 0%, var(--c-accent-2) 60%, var(--c-accent-3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-role {
    font: 600 clamp(.8rem, 1.8vw, 1rem)/1 var(--ff-body);
    color: var(--c-text-sec);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s .5s, transform .7s .5s;
}
.hero-role::before {
    content: '';
    width: 32px; height: 1px;
    background: var(--c-border);
    flex-shrink: 0;
}
.hero-role.visible { opacity:1; transform:translateY(0); }

.hero-desc {
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    color: var(--c-text-sec);
    max-width: 460px;
    line-height: 1.85;
    margin-bottom: 52px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s .65s, transform .7s .65s;
}
.hero-desc.visible { opacity:1; transform:translateY(0); }

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s .8s, transform .7s .8s;
}
.hero-buttons.visible { opacity:1; transform:translateY(0); }

.hero-scroll {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--c-text-sec);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    animation: hero-bob 2.4s ease-in-out infinite;
    opacity: 0;
    transition: opacity .7s 1.2s;
}
.hero-scroll.visible { opacity:1; }
.hero-scroll::after {
    content: '';
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, var(--c-text-sec), transparent);
}
@keyframes hero-bob {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .875rem;
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
    border: 1.5px solid transparent;
    letter-spacing: .02em;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--c-accent-1), var(--c-accent-2));
    color: #fff;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px var(--c-glow-1), 0 0 0 1px rgba(255,255,255,.1);
    filter: brightness(1.08);
}

.btn-ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}
.btn-ghost:hover {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.2);
    transform: translateY(-3px);
}

/* keep old class name working */
.btn-secondary { background:transparent; color:var(--c-text); border-color:var(--c-border); }
.btn-secondary:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.2); transform:translateY(-3px); }

/* === SECTION SEPARATOR === */
.section-sep {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-border), transparent);
}

.section-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-accent-2);
    margin-bottom: 14px;
}

/* === APPROACH === */
.approach {
    padding: calc(var(--sp) * 2.5) 0;
    background: var(--c-bg-alt);
    position: relative;
}

.approach h2 {
    font: 700 clamp(2rem, 5vw, 3rem)/1.15 var(--ff-head);
    margin-bottom: 60px;
    letter-spacing: -.025em;
}

.approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.approach-text p {
    color: var(--c-text-sec);
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 24px;
}

.skills { display:flex; flex-direction:column; gap:28px; }

.skill-item { display:flex; flex-direction:column; gap:10px; }

.skill-head {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: .875rem;
}
.skill-head span:last-child { color: var(--c-text-sec); }

.progress {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--c-accent-1), var(--c-accent-2));
    border-radius: 2px;
    width: 0;
    box-shadow: 0 0 12px var(--c-glow-2);
}
.progress-bar.animate {
    animation: fill-skill 1.6s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes fill-skill { to { width: var(--fill); } }

/* === CREATIONS === */
.creations { padding: calc(var(--sp) * 2.5) 0; }

.creations-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
    flex-wrap: wrap;
    gap: 28px;
}

.creations h2 {
    font: 700 clamp(2rem, 5vw, 3rem)/1.15 var(--ff-head);
    letter-spacing: -.025em;
}

.filters { display:flex; gap:10px; flex-wrap:wrap; }

.filter-btn {
    padding: 8px 20px;
    border: 1.5px solid var(--c-border);
    border-radius: 50px;
    background: transparent;
    color: var(--c-text-sec);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .02em;
    transition: all .22s;
    cursor: pointer;
}
.filter-btn:hover {
    border-color: rgba(255,255,255,.2);
    color: var(--c-text);
}
.filter-btn.active {
    background: linear-gradient(135deg, var(--c-accent-1), var(--c-accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 20px var(--c-glow-1);
}

.creation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.creation-card {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--rad-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .3s, box-shadow .3s, transform .4s cubic-bezier(.25,.46,.45,.94);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
}

/* shimmer on hover */
.creation-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
    transform: translateX(-110%);
    transition: transform .55s;
    z-index: 1;
    pointer-events: none;
}
.creation-card:hover::before { transform: translateX(110%); }

.creation-card:hover {
    border-color: rgba(0,200,255,.28);
    box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 50px var(--c-glow-2);
}

.creation-card.hidden { display: none; }

.creation-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--c-bg);
    overflow: hidden;
}
.creation-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
    display: block;
}
.creation-card:hover .creation-img img { transform: scale(1.07); }

.creation-content { padding: 18px 22px 22px; position: relative; z-index: 2; }

.creation-cat {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-accent-2);
    margin-bottom: 7px;
}
.creation-content h3 {
    font: 600 1.1rem/1.3 var(--ff-head);
    margin-bottom: 6px;
}
.creation-content p {
    font-size: .85rem;
    color: var(--c-text-sec);
    line-height: 1.55;
}

/* === CONTACT === */
.contact {
    padding: calc(var(--sp) * 2.5) 0;
    background: var(--c-bg-alt);
    position: relative;
}

.contact-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--c-border);
    border-radius: var(--rad-lg);
    padding: 64px;
    transition: border-color .3s;
}
.contact-card:hover { border-color: rgba(0,200,255,.2); }

.contact h2 {
    font: 700 clamp(1.8rem, 4vw, 2.5rem)/1.2 var(--ff-head);
    margin-bottom: 16px;
    letter-spacing: -.02em;
}
.contact-info p { color:var(--c-text-sec); margin-bottom:32px; line-height:1.8; }

.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--c-text-sec);
    margin-bottom: 14px;
    transition: all .22s;
    padding: 12px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--rad);
}
.contact-link:hover {
    color: var(--c-accent-2);
    border-color: rgba(0,200,255,.3);
    background: rgba(0,200,255,.04);
    transform: translateX(4px);
}

.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: .82rem;
    color: var(--c-text-sec);
    letter-spacing: .02em;
}
.form-group input,
.form-group textarea {
    width: 100%;
    background: rgba(255,255,255,.03);
    border: 1.5px solid var(--c-border);
    padding: 12px 16px;
    border-radius: var(--rad);
    color: var(--c-text);
    font-family: inherit;
    font-size: .9rem;
    transition: border-color .2s, background .2s;
    outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,.22); }
body.theme-light .form-group input::placeholder,
body.theme-light .form-group textarea::placeholder { color: rgba(0,0,0,.3); }

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--c-accent-2);
    background: rgba(0,200,255,.03);
}

/* === CV PAGE === */
.cv-page { padding: 160px 0 100px; }

.cv-hero {
    text-align: center;
    margin-bottom: 80px;
}
.cv-hero h1 {
    font: 800 clamp(3rem, 9vw, 7rem)/1 var(--ff-head);
    letter-spacing: -.04em;
    margin-bottom: 16px;
}
.cv-hero-role {
    font: 600 .9rem/1 var(--ff-body);
    color: var(--c-text-sec);
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 36px;
}
.cv-download-bar {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cv-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 56px;
}

.cv-side {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--c-border);
    border-radius: var(--rad-lg);
    padding: 32px;
    height: fit-content;
    position: sticky;
    top: 110px;
    transition: border-color .3s;
}
.cv-side:hover { border-color: rgba(255,255,255,.14); }

.cv-section {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--c-border);
}
.cv-section:last-child { border:none; margin:0; padding:0; }

.cv-section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--c-text-sec);
    margin-bottom: 12px;
}

.cv-bio {
    font-size: .88rem;
    color: var(--c-text-sec);
    line-height: 1.8;
}

.cv-info-list {
    list-style: none;
    font-size: .88rem;
    color: var(--c-text-sec);
    line-height: 2;
}
.cv-info-list li strong { color: var(--c-text); }

.cv-contact-link {
    display: block;
    font-size: .88rem;
    color: var(--c-text-sec);
    margin-bottom: 10px;
    transition: color .2s, transform .2s;
}
.cv-contact-link:hover { color: var(--c-accent-2); transform: translateX(4px); }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--c-border);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: .78rem;
    color: var(--c-text-sec);
    transition: all .2s;
}
.chip:hover { border-color: var(--c-accent-2); color: var(--c-accent-2); }

/* CV main / timeline */
.cv-main > section { margin-bottom: 72px; }

.cv-section-heading {
    font: 700 1.5rem/1 var(--ff-head);
    letter-spacing: -.015em;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.cv-section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

.timeline { display:flex; flex-direction:column; gap:36px; }

.timeline-item {
    position: relative;
    padding-left: 36px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 0; top: 5px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent-1), var(--c-accent-2));
    box-shadow: 0 0 12px var(--c-glow-2);
}
.timeline-item::after {
    content: '';
    position: absolute;
    left: 4px; top: 16px;
    width: 2px;
    height: calc(100% + 36px);
    background: var(--c-border);
}
.timeline-item:last-child::after { display: none; }

.timeline-date {
    font-size: .75rem;
    color: var(--c-accent-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 4px;
}
.timeline-h {
    font: 600 1.15rem var(--ff-head);
    margin-bottom: 2px;
}
.timeline-place {
    font-size: .85rem;
    color: var(--c-accent-1);
    font-style: italic;
    display: block;
    margin-bottom: 8px;
}
.timeline-p {
    font-size: .88rem;
    color: var(--c-text-sec);
    line-height: 1.75;
}

/* === LEGAL === */
.legal { padding: 160px 0 100px; }
.legal h1 {
    font: 800 clamp(2rem,5vw,3rem)/1.2 var(--ff-head);
    margin-bottom: 40px;
    letter-spacing: -.02em;
}
.legal h2 {
    font: 700 1.5rem var(--ff-head);
    margin-top: 48px; margin-bottom: 18px;
}
.legal p, .legal li {
    color: var(--c-text-sec);
    line-height: 1.8;
    margin-bottom: 14px;
}
.legal ul { margin: 10px 0 10px 22px; }
.legal-content { max-width: 800px; }

/* === FOOTER === */
footer {
    padding: 40px 0;
    border-top: 1px solid var(--c-border);
}
footer .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
footer span, footer a {
    font-size: .85rem;
    color: var(--c-text-sec);
    transition: color .2s;
}
footer a:hover { color: var(--c-text); }
.footer-links { display:flex; gap:24px; }

/* === SCROLL ANIMATIONS === */
[data-animate] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.25,.46,.45,.94),
                transform .7s cubic-bezier(.25,.46,.45,.94);
}
[data-animate].fade-in { opacity:1; transform:translateY(0); }

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .approach-grid { grid-template-columns:1fr; gap:50px; }
    .contact-card { grid-template-columns:1fr; gap:40px; padding:40px; }
    .cv-layout { grid-template-columns:1fr; gap:40px; }
    .cv-side { position:static; }
}

@media (max-width: 768px) {
    header { width:95%; top:10px; }
    .header-inner { padding:10px 18px; }
    nav ul { gap:14px; }
    nav a { font-size:.78rem; }

    .hero { padding:120px 0 70px; }
    .hero-scroll { display:none; }

    .creations-header { flex-direction:column; align-items:flex-start; }

    .orb-1 { width:320px; height:320px; }
    .orb-2 { width:260px; height:260px; }
    .orb-3 { width:200px; height:200px; }

    .cv-hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }

    #cursor, #cursor-dot { display: none; }
}

@media (max-width: 480px) {
    nav ul { gap:10px; }
    nav a { font-size:.72rem; }
    .hero-buttons { flex-direction:column; }
    .btn { justify-content: center; }
    .creation-grid { grid-template-columns:1fr; }
    .contact-card { padding:28px; }
}