/* ===== Cloud — friendly developer landing with light/dark + cloud background ===== */
:root {
    --cw-sky1: #bfe3ff; --cw-sky2: #eaf6ff;
    --cw-nav: #ffffff; --cw-nav-blur: rgba(255,255,255,.82);
    --cw-text: #16263a; --cw-muted: #54677e; --cw-head: #0b1626;
    --cw-accent: #3f6bf6; --cw-accent2: #2f55e0;
    --cw-card: #ffffff; --cw-border: #e3eaf4; --cw-soft: #f3f7fc;
    --cw-cloud-back: #d4ecff; --cw-cloud-mid: #e7f4ff; --cw-cloud-front: #ffffff;
    --cw-shadow: 0 18px 44px -24px rgba(40,90,170,.45);
    --cw-icon-bg: #eef3fb;
}
html.cloud-dark {
    --cw-sky1: #2a2f3b; --cw-sky2: #14171f;
    --cw-nav: #2b303c; --cw-nav-blur: rgba(43,48,60,.82);
    --cw-text: #e7ecf5; --cw-muted: #a6b4c8; --cw-head: #ffffff;
    --cw-accent: #4f7dff; --cw-accent2: #6f93ff;
    --cw-card: #232936; --cw-border: #353c4b; --cw-soft: #1d222d;
    --cw-cloud-back: #3a4150; --cw-cloud-mid: #555d6d; --cw-cloud-front: #c8cdd7;
    --cw-shadow: 0 18px 44px -22px rgba(0,0,0,.7);
    --cw-icon-bg: #2c3240;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--cw-text);
    background: var(--cw-sky2);
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
    transition: background .3s, color .3s;
}
a { color: inherit; text-decoration: none; }

/* ---------- Cloud background ---------- */
.cw-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: linear-gradient(180deg, var(--cw-sky1) 0%, var(--cw-sky2) 62%); }
.cw-bg .puff { position: absolute; fill: var(--cw-cloud-front); opacity: .55; animation: cwDrift 90s linear infinite; }
.cw-bg .puff.p2 { opacity: .4; animation-duration: 130s; animation-delay: -40s; }
.cw-bg .puff.p3 { opacity: .3; animation-duration: 160s; animation-delay: -80s; }
@keyframes cwDrift { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
.cw-bank { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: block; }
.cw-bank .cloud-back { fill: var(--cw-cloud-back); }
.cw-bank .cloud-mid { fill: var(--cw-cloud-mid); }
.cw-bank .cloud-front { fill: var(--cw-cloud-front); }
@media (prefers-reduced-motion: reduce) { .cw-bg .puff { animation: none; } }

/* ---------- Nav ---------- */
.cw-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
    padding: 14px clamp(18px, 5vw, 60px); background: var(--cw-nav-blur); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cw-border); }
.cw-logo { font-family: 'Caveat', cursive; font-size: 1.9rem; font-weight: 700; color: var(--cw-head); letter-spacing: .5px; }
.cw-links { display: flex; align-items: center; gap: 4px; }
.cw-links a { padding: 9px 18px; border-radius: 10px; font-size: .92rem; font-weight: 500; color: var(--cw-text); transition: background .15s, color .15s; }
.cw-links a:hover { background: var(--cw-soft); }
.cw-links a.active { background: var(--cw-accent); color: #fff; }
.cw-theme { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: var(--cw-text); transition: background .15s; }
.cw-theme:hover { background: var(--cw-soft); }
.cw-theme svg { width: 22px; height: 22px; }
.cw-theme .ic-sun { color: #f5a623; display: block; }
.cw-theme .ic-moon { color: #f5d76e; display: none; }
html.cloud-dark .cw-theme .ic-sun { display: none; }
html.cloud-dark .cw-theme .ic-moon { display: block; }
.cw-burger { display: none; width: 40px; height: 40px; border: none; background: transparent; color: var(--cw-text); cursor: pointer; }
.cw-burger svg { width: 24px; height: 24px; }

/* ---------- Layout ---------- */
.cw-main { position: relative; z-index: 1; }
.cw-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 48px); }

/* ---------- Hero ---------- */
.cw-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; min-height: 84vh; padding: 30px 0; }
.cw-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 800; line-height: 1.08; color: var(--cw-head); }
.cw-hero h1 .role { color: var(--cw-accent); display: inline-block; }
.cw-cursor { display: inline-block; width: 3px; margin-left: 2px; background: var(--cw-accent); animation: cwBlink 1s steps(1) infinite; }
@keyframes cwBlink { 50% { opacity: 0; } }
.cw-hero p { color: var(--cw-muted); font-size: 1.08rem; margin-top: 18px; max-width: 520px; line-height: 1.7; }
.cw-socials { display: flex; gap: 14px; margin-top: 26px; }
.cw-socials a { width: 46px; height: 46px; border-radius: 12px; background: var(--cw-icon-bg); display: flex; align-items: center;
    justify-content: center; color: var(--cw-text); transition: transform .15s, color .15s, background .15s; }
.cw-socials a:hover { transform: translateY(-3px); color: var(--cw-accent); }
.cw-socials svg { width: 22px; height: 22px; }
.cw-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 15px 46px; border-radius: 12px;
    background: var(--cw-accent); color: #fff; font-weight: 600; font-size: 1rem; box-shadow: 0 14px 30px -12px var(--cw-accent);
    transition: transform .15s, background .15s; }
.cw-cta:hover { transform: translateY(-2px); background: var(--cw-accent2); }
.cw-hero-art { position: relative; }
.cw-hero-art svg { width: 100%; height: auto; display: block; }
.cw-paper { fill: var(--cw-card); stroke: var(--cw-border); stroke-width: 1.5; filter: drop-shadow(0 6px 12px rgba(40,70,130,.12)); }
.cw-float { animation: cwFloat 6s ease-in-out infinite; transform-origin: center; }
.cw-float.f2 { animation-duration: 7.5s; animation-delay: -2s; }
.cw-float.f3 { animation-duration: 8.5s; animation-delay: -1s; }
@keyframes cwFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .cw-float { animation: none; } }

/* ---------- Sections ---------- */
.cw-section { padding: 70px 0; position: relative; background: var(--cw-card); }
.cw-section.alt { background: var(--cw-soft); }
.cw-h2 { text-align: center; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--cw-head); }
.cw-h2 + .cw-sub { text-align: center; color: var(--cw-muted); margin: 8px auto 0; max-width: 600px; }
.cw-bar { width: 64px; height: 4px; border-radius: 3px; background: var(--cw-accent); margin: 14px auto 36px; }

.cw-grid { display: grid; gap: 20px; }
.cw-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cw-grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cw-card { background: var(--cw-card); border: 1px solid var(--cw-border); border-radius: 16px; padding: 24px; box-shadow: var(--cw-shadow);
    transition: transform .2s, box-shadow .25s; }
.cw-card:hover { transform: translateY(-4px); }
.cw-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--cw-head); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-card h4 { font-size: .92rem; font-weight: 600; color: var(--cw-accent); margin: 4px 0 10px; }
.cw-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cw-card li { position: relative; padding-left: 20px; color: var(--cw-muted); font-size: .94rem; }
.cw-card li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--cw-accent); }
.cw-date { font-size: .82rem; color: var(--cw-muted); margin-top: 12px; }
.cw-card h3 a, .cw-date a { color: var(--cw-accent); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.cw-card h3 a svg, .cw-date a svg { width: 13px; height: 13px; }

.cw-about { max-width: 760px; margin: 0 auto; text-align: center; color: var(--cw-muted); font-size: 1.05rem; line-height: 1.8; }
.cw-about p { margin-bottom: 14px; }

.cw-skills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cw-skill { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 12px; background: var(--cw-card);
    border: 1px solid var(--cw-border); font-size: .92rem; font-weight: 500; box-shadow: var(--cw-shadow); transition: transform .15s; }
.cw-skill:hover { transform: translateY(-3px); }
.cw-skill img { width: 22px; height: 22px; }

.cw-shot { height: 150px; border-radius: 12px; margin: -4px -4px 16px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: linear-gradient(135deg, var(--cw-accent), #7aa2ff); color: #fff; font-size: 2.4rem; font-weight: 800; }
.cw-shot img { width: 100%; height: 100%; object-fit: cover; }

/* Projects — alternating zig-zag (Nova style) */
.cw-projects-zz { display: flex; flex-direction: column; gap: 56px; }
.cw-projx { display: grid; grid-template-columns: 1.25fr .75fr; gap: 38px; align-items: center; }
.cw-projx:nth-child(even) { grid-template-columns: .75fr 1.25fr; }
.cw-projx:nth-child(even) .cw-projx-shot { order: 2; }
.cw-projx-shot { border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cw-accent), #7aa2ff); box-shadow: var(--cw-shadow); }
.cw-projx-shot img { width: 100%; height: 100%; object-fit: cover; }
.cw-projx-shot .ph { font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.85); }
.cw-projx-info h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--cw-head);
    font-size: 1.55rem; font-weight: 800; margin: 0 0 14px; border-left: 4px solid var(--cw-accent); padding-left: 14px; }
.cw-checkout { font-size: .78rem; font-weight: 600; padding: 6px 12px; border: 1px solid var(--cw-border); border-radius: 8px; color: var(--cw-muted); white-space: nowrap; }
.cw-checkout:hover { border-color: var(--cw-accent); color: var(--cw-accent); }
.cw-projx-info > p { color: var(--cw-muted); margin: 0 0 16px; line-height: 1.7; }
.cw-plus { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cw-plus li { position: relative; padding-left: 24px; color: var(--cw-muted); font-size: .96rem; }
.cw-plus li::before { content: "✦"; position: absolute; left: 0; color: var(--cw-accent); }
.cw-pill-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-ptag { font-size: .82rem; padding: 7px 14px; border-radius: 999px; background: var(--cw-soft); border: 1px solid var(--cw-border); color: var(--cw-muted); }
@media (max-width: 760px) {
    .cw-projx, .cw-projx:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
    .cw-projx:nth-child(even) .cw-projx-shot { order: 0; }
    .cw-projx-info h3 { font-size: 1.3rem; }
}

/* ---------- Contact ---------- */
.cw-contact { text-align: center; }
.cw-contact .cw-socials { justify-content: center; }
.cw-contact .cw-cta { margin-top: 24px; }

.cw-foot { text-align: center; padding: 30px 20px 46px; color: var(--cw-muted); font-size: .85rem; position: relative; z-index: 1; border-top: 1px solid var(--cw-border); background: var(--cw-card); }

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
    .cw-hero { grid-template-columns: 1fr; text-align: center; min-height: auto; padding-top: 24px; }
    .cw-hero p { margin-left: auto; margin-right: auto; }
    .cw-socials, .cw-hero .cw-cta { justify-content: center; }
    .cw-hero-art { max-width: 460px; margin: 10px auto 0; order: -1; }
    .cw-links { position: fixed; top: 64px; right: 14px; flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--cw-nav); border: 1px solid var(--cw-border); border-radius: 14px; padding: 10px; width: 200px;
        box-shadow: var(--cw-shadow); transform: scale(.96); opacity: 0; pointer-events: none; transition: .15s; transform-origin: top right; }
    .cw-nav.open .cw-links { transform: scale(1); opacity: 1; pointer-events: auto; }
    .cw-burger { display: inline-flex; align-items: center; justify-content: center; }
}