:root {--accent: #1E3A8A;--accent-hover: #162D6E;--cream: #FAF9F6;--white: #FFFFFF;--surface: #F4F3EF;--text: #1A1A1A;--muted: #666666;--border: rgba(0, 0, 0, 0.08);--border-strong: rgba(0, 0, 0, 0.13);--radius-card: 20px;--radius-btn: 10px;--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);--shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.12);--font-display: 'DM Serif Display', Georgia, serif;--font-main: 'Plus Jakarta Sans', system-ui, sans-serif;--transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}*, *::before, *::after {box-sizing: border-box;}html {scroll-behavior: smooth;}body {font-family: var(--font-main);color: var(--text);background-color: var(--cream);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}h1, h2, h3, h4 {color: var(--text);letter-spacing: -0.02em;}header {background: rgba(250, 249, 246, 0.85);border-bottom: 1px solid var(--border);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);transition: box-shadow var(--transition);}header.scrolled {box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);}.nav-link {position: relative;padding-bottom: 2px;color: var(--muted);transition: color var(--transition);}.nav-link:hover {color: var(--text);}.nav-link::after {content: '';position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;background: var(--accent);transform: scaleX(0);transform-origin: center;transition: transform 260ms ease;border-radius: 2px;}.nav-link:hover::after {transform: scaleX(1);}#mobile-nav {transition: transform 220ms cubic-bezier(.2, .9, .3, 1), opacity 220ms ease, visibility 220ms linear;transform-origin: top right;opacity: 0;transform: translateY(-6px) scale(.99);visibility: hidden;border: 1px solid var(--border);}#mobile-nav.open {opacity: 1;transform: translateY(0) scale(1);visibility: visible;}.hero-section {background-color: var(--cream);position: relative;overflow: hidden;}.hero-watermark {position: absolute;top: 50%;left: -3%;transform: translateY(-52%);font-family: var(--font-display);font-size: clamp(120px, 22vw, 260px);font-weight: 400;color: rgba(0, 0, 0, 0.045);line-height: 1;pointer-events: none;user-select: none;white-space: nowrap;letter-spacing: -0.04em;}.hero-badge {display: inline-flex;align-items: center;gap: 8px;padding: 6px 14px;border-radius: 999px;border: 1px solid rgba(30, 58, 138, 0.25);background: rgba(30, 58, 138, 0.06);color: var(--accent);font-size: 13px;font-weight: 600;margin-bottom: 24px;}.hero-badge-dot {width: 6px;height: 6px;background: var(--accent);border-radius: 50%;animation: pulse-dot 2s ease-in-out infinite;}@keyframes pulse-dot {0%, 100% {opacity: 1;transform: scale(1);}50% {opacity: 0.4;transform: scale(0.7);}}.hero-title {font-family: var(--font-display);font-size: clamp(2.6rem, 6vw, 4.5rem);font-weight: 400;line-height: 1.06;letter-spacing: -0.03em;color: var(--text);}.hero-title-accent {color: var(--accent);}.hero-subtitle {font-size: 1.1rem;line-height: 1.7;color: var(--muted);max-width: 460px;}.hero-card {background: var(--white);border: 1px solid var(--border);border-radius: var(--radius-card);box-shadow: 0 8px 40px rgba(0, 0, 0, 0.09);animation: float-card 5s ease-in-out infinite;transition: transform var(--transition), box-shadow var(--transition);}.hero-card:hover {box-shadow: 0 20px 60px rgba(0, 0, 0, 0.13);animation-play-state: paused;transform: translateY(-6px);}@keyframes float-card {0%, 100% {transform: translateY(0px);}50% {transform: translateY(-8px);}}.btn-primary {display: inline-flex;align-items: center;gap: 8px;padding: 13px 26px;border-radius: var(--radius-btn);background: var(--accent);color: #fff;font-family: var(--font-main);font-weight: 700;font-size: 0.95rem;border: none;cursor: pointer;transition: background var(--transition), transform var(--transition), box-shadow var(--transition);box-shadow: 0 4px 14px rgba(30, 58, 138, 0.22);text-decoration: none;}.btn-primary:hover {background: var(--accent-hover);transform: translateY(-2px);box-shadow: 0 8px 24px rgba(30, 58, 138, 0.28);color: #fff;}.btn-primary:active {transform: translateY(0);}.btn-outline {display: inline-flex;align-items: center;gap: 8px;padding: 13px 26px;border-radius: var(--radius-btn);background: transparent;color: var(--text);font-family: var(--font-main);font-weight: 600;font-size: 0.95rem;border: 1px solid var(--border-strong);cursor: pointer;transition: background var(--transition), border-color var(--transition), transform var(--transition);text-decoration: none;}.btn-outline:hover {background: var(--surface);border-color: var(--accent);color: var(--accent);transform: translateY(-2px);}.section-cream {background-color: var(--cream);}.section-white {background-color: var(--white);}.section-tinted {background-color: var(--surface);}.section-label {display: inline-block;font-size: 11px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--accent);margin-bottom: 10px;}.section-title {font-family: var(--font-main);font-size: clamp(1.7rem, 3vw, 2.2rem);font-weight: 800;letter-spacing: -0.03em;color: var(--text);}.card {border-radius: var(--radius-card);border: 1px solid var(--border);overflow: hidden;transition: transform var(--transition), border-color var(--transition);display: block;text-decoration: none;}.card:hover {border-color: var(--border-strong);}.card-blue {border-color: #1a1a1a;}.card-peach {border-color: #1a1a1a;}.card-green {border-color: #1a1a1a;}.card-blue:hover, .card-peach:hover, .card-green:hover {border-color: #000;}.project-thumb-wrap {height: 18rem;width: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;}.card-blue .project-thumb-wrap {background: #EEF2FF;}.card-peach .project-thumb-wrap {background: #FEF3EE;}.card-green .project-thumb-wrap {background: #F0FDF4;}.project-thumb {object-fit: cover;display: block;transition: transform 380ms ease;}.card:hover .project-thumb {transform: scale(1.04);}.card:hover .project-thumb {transform: scale(1.04);}.feature-card {border-radius: var(--radius-card);border: 1px solid transparent;display: flex;align-items: center;justify-content: space-between;gap: 32px;padding: 40px 44px;text-decoration: none;transition: transform var(--transition), border-color var(--transition);overflow: hidden;}.feature-card:hover {transform: translateY(-4px);}.feature-card--blue {background: #EEF2FF;border-color: #1a1a1a;}.feature-card--blue:hover {border-color: #000;}.feature-card--peach {background: #FEF3EE;border-color: #1a1a1a;}.feature-card--peach:hover {border-color: #000;}.feature-card__body {flex: 1;min-width: 0;}.feature-card__visual {flex-shrink: 0;width: 200px;display: flex;align-items: center;justify-content: center;}.feature-card__visual svg {max-width: 100%;height: auto;}@media (max-width: 640px) {.feature-card {flex-direction: column-reverse;align-items: center;padding: 28px 24px 24px;gap: 20px;text-align: center;}.feature-card__body {display: flex;flex-direction: column;align-items: center;}.feature-card__body p {max-width: 100% !important;}.feature-card__visual {width: 100%;max-width: 180px;}.feature-card__visual svg {width: 100%;height: auto;}}@media (min-width: 641px) and (max-width: 900px) {.feature-card {padding: 32px 28px;gap: 20px;}.feature-card__visual {width: 140px;}.feature-card__visual svg {width: 100%;height: auto;}}.pill-btn {display: inline-block;margin-top: 20px;padding: 9px 22px;border-radius: 999px;border: 1.5px solid currentColor;font-size: 13px;font-weight: 600;font-family: var(--font-main);transition: background var(--transition);text-decoration: none;}.feature-card--blue .pill-btn, .feature-card--peach .pill-btn {color: #1a1a1a;}.feature-card--blue .pill-btn:hover, .feature-card--peach .pill-btn:hover {background: rgba(0, 0, 0, 0.06);}.tool-icon-wrap {width: 52px;height: 52px;background: rgba(30, 58, 138, 0.06);border-radius: 14px;display: flex;align-items: center;justify-content: center;transition: background var(--transition);}.skill-pill {display: inline-flex;align-items: center;padding: 5px 14px;border-radius: 999px;background: var(--surface);border: 1px solid var(--border);font-size: 13px;font-weight: 600;color: var(--muted);transition: background var(--transition), color var(--transition), border-color var(--transition);}.skill-pill:hover {background: rgba(30, 58, 138, 0.06);border-color: rgba(30, 58, 138, 0.3);color: var(--accent);}.avatar-img {display: block;border-radius: 9999px;border: 3px solid rgba(30, 58, 138, 0.25);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;object-fit: cover;object-position: var(--avatar-position, 50% 14%);width: 190px;max-width: 190px;max-height: 190px;}.avatar-img:hover {transform: translateY(-4px) scale(1.02);box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);border-color: var(--accent);}.form-input {width: 100%;border: 1px solid var(--border-strong);border-radius: 10px;padding: 12px 16px;background: var(--cream);color: var(--text);font-family: var(--font-main);font-size: 0.95rem;outline: none;transition: border-color var(--transition), box-shadow var(--transition);}.form-input:focus {border-color: var(--accent);box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.10);background: var(--white);}.form-input::placeholder {color: #aaa;}footer {background: var(--text);border-top: 1px solid rgba(255, 255, 255, 0.06);}.social-link {display: inline-flex;align-items: center;justify-content: center;width: 38px;height: 38px;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.10);color: #888;transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);}.social-link:hover {background: rgba(30, 58, 138, 0.10);border-color: rgba(30, 58, 138, 0.35);color: var(--accent);transform: translateY(-2px);}.reveal {opacity: 0;transform: translateY(28px);transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);}.reveal.show {opacity: 1;transform: translateY(0);}.stagger-1 {transition-delay: 80ms;}.stagger-2 {transition-delay: 180ms;}.stagger-3 {transition-delay: 280ms;}#btn-menu {transition: transform 220ms cubic-bezier(.2, .9, .3, 1), background-color 180ms ease;}#btn-menu svg {transition: transform 260ms cubic-bezier(.2, .9, .3, 1);}#btn-menu.menu-open {transform: scale(1.02);background-color: rgba(30, 58, 138, 0.10);}#btn-menu.menu-open svg {transform: rotate(90deg) scale(1.06);}