/* HM Creative Design — static styles */
:root {
  --radius: 0.75rem;
  --background: #f4f6f9;
  --foreground: #101427;
  --card: #ffffff;
  --border: #e2e6ee;
  --muted: #f0f2f6;
  --muted-foreground: #6a7286;
  --accent: #1a7fe0;
  --primary: #1a2450;

  --navy-deep: #0f1636;
  --navy: #1a2450;
  --blue: #2f6cd8;
  --blue-glow: #59a9ff;
  --mint: #6fe0b8;

  --gradient-hero: linear-gradient(135deg, #0f1636 0%, #1a2450 45%, #2f6cd8 100%);
  --gradient-radial: radial-gradient(circle at 20% 20%, rgba(47,108,216,.55), transparent 50%),
                      radial-gradient(circle at 80% 60%, rgba(111,224,184,.28), transparent 50%);
  --gradient-cta: linear-gradient(120deg, #2f6cd8, #59a9ff);
  --gradient-text-blue: linear-gradient(120deg, #59a9ff, #6fe0b8);
  --shadow-elegant: 0 25px 50px -20px rgba(15,22,54,.35);
  --shadow-card: 0 10px 30px -12px rgba(15,22,54,.18);
  --transition-smooth: 300ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--background); color: var(--foreground); font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: "Fraunces", serif; letter-spacing: -0.02em; font-weight: 500; line-height: 1.05; }
.italic { font-style: italic; }
.accent { color: var(--accent); }
.blue { color: var(--blue-glow); }
.muted { color: var(--muted-foreground); }
.muted-light { color: rgba(255,255,255,.6); }
.eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .3em; }
.text-gradient-blue { background: var(--gradient-text-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

/* NAV */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 40; backdrop-filter: blur(12px); background: rgba(244,246,249,.72); border-bottom: 1px solid rgba(226,230,238,.6); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
@media (min-width: 768px){ .nav-inner { padding: 16px 40px; } }
.brand img { height: 40px; width: auto; }
@media (min-width: 768px){ .brand img { height: 44px; } }
.primary-nav { display: none; gap: 40px; font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; }
@media (min-width: 768px){ .primary-nav { display: flex; } }
.primary-nav a { transition: color var(--transition-smooth); }
.primary-nav a:hover { color: var(--accent); }
.nav-cta { display: none; }
@media (min-width: 768px){ .nav-cta { display: inline-flex; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; padding: 14px 26px; border-radius: 999px; cursor: pointer; border: 0; }
.btn-cta { background: var(--gradient-cta); color: #fff; box-shadow: var(--shadow-card); }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.btn-shine { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), letter-spacing var(--transition-smooth); }
.btn-shine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%); transform: translateX(-120%); transition: transform 700ms cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 1; }
.btn-shine > * { position: relative; z-index: 2; }
.btn-shine:hover { transform: translateY(-2px) scale(1.03); letter-spacing: .22em; box-shadow: var(--shadow-elegant); }
.btn-shine:hover::before { transform: translateX(120%); }
.btn-shine:active { transform: translateY(0) scale(.98); }
.btn-outline-fill { position: relative; overflow: hidden; isolation: isolate; transition: color var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth); }
.btn-outline-fill::after { content: ""; position: absolute; inset: 0; background: var(--gradient-cta); transform: scaleX(0); transform-origin: left center; transition: transform 500ms cubic-bezier(.65,0,.35,1); z-index: -1; }
.btn-outline-fill:hover { border-color: transparent; transform: translateY(-2px); }
.btn-outline-fill:hover::after { transform: scaleX(1); }
.magnetic-icon { display: inline-block; transition: transform 300ms cubic-bezier(.4,0,.2,1); }
a:hover .magnetic-icon, button:hover .magnetic-icon { transform: translate(4px,-4px) rotate(8deg); }

/* HERO */
.hero { position: relative; padding: 128px 0 96px; background: var(--gradient-hero); overflow: hidden; color: #fff; }
@media (min-width: 768px){ .hero { padding: 160px 0 128px; } }
.hero-overlay { position: absolute; inset: 0; background: var(--gradient-radial); pointer-events: none; }
.hero-dots { position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px; }
.hero-grid { position: relative; display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px){ .hero-grid { grid-template-columns: 7fr 5fr; } }
.chip { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .3em; color: rgba(89,169,255,.9); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 16px; }
.hero-copy h1 { font-size: clamp(44px, 7vw, 108px); margin: 28px 0; line-height: .95; }
.hero-copy p { max-width: 560px; font-size: 18px; color: rgba(255,255,255,.75); margin-bottom: 36px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-stats { display: flex; gap: 40px; margin-top: 56px; font-family: "JetBrains Mono", monospace; }
.hero-stats b { display: block; font-family: "Inter", sans-serif; font-size: 28px; font-weight: 600; }
.hero-stats span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.5); margin-top: 4px; }
.hero-media { justify-self: stretch; }
.hero-card { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-elegant); border: 1px solid rgba(255,255,255,.1); }
.hero-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.hero-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15,22,54,.6) 100%); }
.hero-card-foot { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.hero-card-foot .eyebrow { font-size: 10px; color: rgba(255,255,255,.6); }
.hero-card-title { font-family: "Fraunces", serif; font-size: 22px; }
.hero-card-btn { width: 56px; height: 56px; border-radius: 999px; background: rgba(255,255,255,.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; }

/* MARQUEE */
.marquee-band { padding: 22px 0; background: var(--navy-deep); color: #fff; overflow: hidden; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.marquee-track { display: flex; white-space: nowrap; font-family: "JetBrains Mono", monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .3em; animation: marquee 30s linear infinite; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item { padding: 0 24px; }
.marquee-star { color: var(--blue-glow); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* SECTIONS */
.section { padding: 96px 0; }
@media (min-width: 768px){ .section { padding: 128px 0; } }
.section-dark { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.work-glow { position: absolute; inset: 0; opacity: .3; pointer-events: none; background: radial-gradient(circle at 80% 20%, rgba(47,108,216,.4), transparent 50%); }
.section-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 64px; }
@media (min-width: 768px){ .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.section-head.block { display: block; }
.section-head h2 { font-size: clamp(36px, 5vw, 64px); margin-top: 16px; max-width: 560px; }
.section-head p { max-width: 360px; }

/* SERVICES */
.services-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .services-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1280px){ .services-grid { grid-template-columns: repeat(4,1fr); } }
.service-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elegant); }
.service-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.service-card:hover .service-media img { transform: scale(1.1); }
.service-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(15,22,54,.75) 100%); }
.service-num { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); padding: 5px 12px; border-radius: 999px; }
.service-title { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff; font-family: "Fraunces", serif; font-size: 20px; }
.service-body { padding: 20px; font-size: 14px; color: var(--muted-foreground); line-height: 1.55; }

/* PROJECTS */
.projects-grid { display: grid; gap: 24px; grid-template-columns: 1fr; position: relative; }
@media (min-width: 768px){ .projects-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .projects-grid { grid-template-columns: repeat(3,1fr); } }
.project-card { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); aspect-ratio: 4/5; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elegant); }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.project-card:hover img { transform: scale(1.1); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(11,17,44,.9) 100%); }
.project-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; }
.project-tag { font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .25em; color: var(--blue-glow); margin-bottom: 8px; }
.project-title { font-family: "Fraunces", serif; font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.project-desc { font-size: 14px; color: rgba(255,255,255,.7); }

/* PROCESS */
.process-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .process-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .process-grid { grid-template-columns: repeat(4,1fr); } }
.process-card { background: var(--card); border: 1px solid var(--border); padding: 32px; border-radius: 18px; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
.process-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elegant); }
.process-card b { color: var(--accent); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .2em; }
.process-card h3 { font-size: 26px; margin: 14px 0 10px; }
.process-card p { color: var(--muted-foreground); font-size: 14px; line-height: 1.55; }

/* STATS */
.stats-band { padding: 80px 0; }
.stats-grid { position: relative; display: grid; gap: 40px; grid-template-columns: repeat(2,1fr); text-align: center; color: #fff; }
@media (min-width: 768px){ .stats-grid { grid-template-columns: repeat(4,1fr); } }
.stats-grid b { display: block; font-family: "Fraunces", serif; font-size: clamp(36px, 5vw, 60px); font-weight: 500; }
.stats-grid span { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.6); margin-top: 10px; }

/* CONTACT */
.contact-grid { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .contact-grid { grid-template-columns: 5fr 7fr; } }
.contact h2 { font-size: clamp(32px, 4.5vw, 52px); margin: 24px 0; }
.contact-list { list-style: none; margin-top: 32px; font-family: "JetBrains Mono", monospace; font-size: 14px; display: flex; flex-direction: column; gap: 12px; color: rgba(255,255,255,.85); }
.contact-list a:hover { color: var(--blue-glow); }
.contact-form { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .contact-form { grid-template-columns: 1fr 1fr; } }
.contact-form textarea, .contact-form button { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 16px 20px; font-family: "JetBrains Mono", monospace; font-size: 14px; color: #fff; transition: border-color var(--transition-smooth); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.4); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--blue-glow); }
.contact-form select option { background: var(--navy-deep); color: #fff; }
.contact-form button { justify-self: start; }

/* FOOTER */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.1); padding: 40px 0; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; justify-content: space-between; }
@media (min-width: 768px){ .footer-inner { flex-direction: row; } }
.footer-logo { height: 32px; filter: brightness(0) invert(1); opacity: .7; }
.site-footer p { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; }

/* WhatsApp float */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 56px; height: 56px; border-radius: 999px; background: var(--gradient-cta); box-shadow: var(--shadow-elegant); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform var(--transition-smooth); }
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 28px; height: 28px; }

/* Custom cursor */
.cursor-ring, .cursor-dot { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity 200ms, width 200ms, height 200ms, background-color 200ms, border-color 200ms; }
.cursor-ring { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); }
.cursor-dot { width: 6px; height: 6px; border-radius: 999px; background: #fff; }
.cursor-ring.is-hover { width: 56px; height: 56px; background: rgba(255,255,255,.12); }
@media (pointer: fine) {
  html, body, a, button, input, textarea, select { cursor: none; }
  .cursor-ring, .cursor-dot { display: block; }
}
@media (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}