/* ============================================================
   EsFrame Theme — Main Stylesheet
   ============================================================ */

:root {
  --black:  #050507;
  --deep:   #080b12;
  --neon:   #00f5c4;
  --neon2:  #7b2fff;
  --neon3:  #ff2d78;
  --white:  #f0f0f5;
  --gray:   #a0a0b0;
  --card:   rgba(255,255,255,0.03);
  --border: rgba(0,245,196,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Syne', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

/* ─── NOISE OVERLAY ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9000;
  opacity: 0.4;
}

/* ─── CUSTOM CURSOR ─── */
.cursor {
  width: 10px; height: 10px;
  background: var(--neon);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
  mix-blend-mode: screen;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(0,245,196,0.5);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transition: all 0.15s ease;
}

/* ─── NAV ─── */
#esframe-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 60px;
  background: linear-gradient(to bottom, rgba(5,5,7,0.95), transparent);
  backdrop-filter: blur(4px);
}
.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 4px;
  color: var(--white);
  text-decoration: none;
  position: relative;
}
.logo span { color: var(--neon); }
.logo::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--neon), transparent);
}
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--neon);
  transition: width 0.3s;
}
.nav-links a:hover { color: var(--neon); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  background: transparent;
  border: 1px solid var(--neon);
  color: var(--neon);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 24px;
  cursor: none;
  transition: all 0.3s;
  text-decoration: none;
}
.nav-cta:hover {
  background: var(--neon);
  color: var(--black);
  box-shadow: 0 0 30px rgba(0,245,196,0.4);
}

/* ─── HERO ─── */
#home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 60px;
}
.grid-floor {
  position: absolute;
  bottom: 0; left: 50%;
  width: 200%;
  height: 60%;
  background-image:
    linear-gradient(rgba(0,245,196,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,196,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  transform-origin: bottom center;
  transform: translateX(-50%) perspective(600px) rotateX(60deg);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 100%, black 30%, transparent 100%);
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: orbFloat 8s ease-in-out infinite;
}
.orb1 { width:500px;height:500px;background:var(--neon2);top:-100px;right:-100px;animation-delay:0s; }
.orb2 { width:350px;height:350px;background:var(--neon);bottom:0;left:-80px;animation-delay:3s; }
.orb3 { width:250px;height:250px;background:var(--neon3);top:40%;right:20%;animation-delay:5s; }
@keyframes orbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-30px) scale(1.05); }
}

/* 3D Cube */
.cube-wrap {
  position: absolute;
  right: 8%; top: 50%;
  transform: translateY(-50%);
  width: 340px; height: 340px;
  perspective: 800px;
}
.cube {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: cubeRotate 14s linear infinite;
  position: relative;
}
@keyframes cubeRotate {
  from { transform: rotateX(20deg) rotateY(0deg); }
  to   { transform: rotateX(20deg) rotateY(360deg); }
}
.cube-face {
  position: absolute;
  width: 200px; height: 200px;
  top: 50%; left: 50%;
  margin-top: -100px; margin-left: -100px;
  border: 1px solid rgba(0,245,196,0.3);
  background: rgba(0,245,196,0.02);
  backdrop-filter: blur(2px);
}
.cube-face.front  { transform: translateZ(100px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(100px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(100px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(100px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(100px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(100px); }
.ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid;
  transform-style: preserve-3d;
}
.ring1 {
  width:280px;height:280px;
  margin:-140px 0 0 -140px;
  border-color: rgba(123,47,255,0.4);
  animation: ring1Spin 6s linear infinite;
}
.ring2 {
  width:240px;height:240px;
  margin:-120px 0 0 -120px;
  border-color: rgba(255,45,120,0.3);
  animation: ring2Spin 9s linear infinite reverse;
}
@keyframes ring1Spin {
  from { transform: rotateX(70deg) rotateZ(0deg); }
  to   { transform: rotateX(70deg) rotateZ(360deg); }
}
@keyframes ring2Spin {
  from { transform: rotateY(70deg) rotateZ(0deg); }
  to   { transform: rotateY(70deg) rotateZ(360deg); }
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 10;
  max-width: 620px;
}
.hero-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: var(--neon);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.3s;
}
.hero-tag::before { content:''; width:40px;height:1px;background:var(--neon); }
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 0.9;
  letter-spacing: 2px;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.5s;
}
.hero-title .line2 { color:var(--neon); display:block; }
.hero-title .line3 {
  -webkit-text-stroke: 1px rgba(255,255,255,0.3);
  color: transparent;
  display: block;
}
.hero-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray);
  max-width: 440px;
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.7s;
}
.hero-btns {
  display: flex;
  gap: 20px;
  align-items: center;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.9s;
}
.btn-primary {
  background: var(--neon);
  color: var(--black);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 36px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 0 40px rgba(0,245,196,0.3);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-primary:hover {
  background: var(--white);
  box-shadow: 0 0 60px rgba(0,245,196,0.5);
  transform: translateY(-2px);
}
.btn-ghost {
  color: var(--white);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}
.btn-ghost:hover { color:var(--neon); gap:16px; }
.hero-stats {
  position: absolute;
  bottom: 60px; left: 60px;
  display: flex;
  gap: 60px;
  z-index: 10;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 1.1s;
}
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: var(--neon);
  line-height: 1;
}
.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
  margin-top: 4px;
}
.scroll-line {
  position: absolute;
  bottom: 40px; right: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.scroll-line span {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 3px;
  color: var(--gray);
  writing-mode: vertical-lr;
}
.scroll-line::after {
  content: '';
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--neon), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.3; }
  50%     { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── MARQUEE ─── */
.marquee-wrap {
  background: var(--neon);
  overflow: hidden;
  padding: 14px 0;
}
.marquee-track {
  display: flex;
  animation: marqueeRun 20s linear infinite;
  white-space: nowrap;
}
.marquee-item {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 4px;
  color: var(--black);
  padding: 0 40px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.marquee-sep { color: rgba(5,5,7,0.3); }
@keyframes marqueeRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── SECTIONS SHARED ─── */
section { padding: 120px 60px; position: relative; }
.section-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 4px;
  color: var(--neon);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-tag::before { content: '//'; color: rgba(0,245,196,0.4); }
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* ─── ABOUT ─── */
#about {
  background: var(--deep);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.about-visual { position:relative; height:500px; }
.about-frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.about-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,245,196,0.05), rgba(123,47,255,0.05));
}
.film-strip {
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 100%;
  background: var(--black);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  overflow: hidden;
}
.film-hole {
  width: 18px; height: 14px;
  border: 1px solid rgba(0,245,196,0.3);
  border-radius: 2px;
  margin: 6px 0;
  flex-shrink: 0;
}
.about-inner {
  position: absolute;
  left: 55px; right: 20px; top: 20px; bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.sphere-container { width:200px;height:200px;position:relative;perspective:600px; }
.sphere {
  width:100%;height:100%;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(0,245,196,0.6), rgba(123,47,255,0.4), rgba(5,5,7,0.9));
  box-shadow: 0 0 60px rgba(0,245,196,0.2), inset 0 0 40px rgba(0,0,0,0.5);
  animation: spherePulse 4s ease-in-out infinite;
  position: relative;
}
.sphere::after {
  content:'';
  position:absolute;
  top:15%;left:20%;
  width:30%;height:20%;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  filter:blur(8px);
  transform:rotate(-30deg);
}
.sphere-orbit {
  position:absolute;top:50%;left:50%;
  width:240px;height:240px;
  margin:-120px 0 0 -120px;
  border:1px solid rgba(0,245,196,0.25);
  border-radius:50%;
  animation:orbitSpin 5s linear infinite;
}
.sphere-orbit::after {
  content:'';
  position:absolute;
  top:-4px;left:50%;
  width:8px;height:8px;
  margin-left:-4px;
  background:var(--neon);
  border-radius:50%;
  box-shadow:0 0 12px var(--neon);
}
@keyframes orbitSpin {
  from { transform: rotateX(75deg) rotateZ(0deg); }
  to   { transform: rotateX(75deg) rotateZ(360deg); }
}
@keyframes spherePulse {
  0%,100% { box-shadow:0 0 60px rgba(0,245,196,0.2),inset 0 0 40px rgba(0,0,0,0.5); }
  50%     { box-shadow:0 0 100px rgba(0,245,196,0.35),inset 0 0 40px rgba(0,0,0,0.5); }
}
.about-badge {
  background: rgba(0,245,196,0.08);
  border: 1px solid var(--border);
  padding: 10px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: var(--neon);
  text-transform: uppercase;
}
.about-corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--neon);
  border-style: solid;
  opacity: 0.5;
}
.about-corner.tl { top:8px;left:48px;border-width:1px 0 0 1px; }
.about-corner.tr { top:8px;right:8px;border-width:1px 1px 0 0; }
.about-corner.bl { bottom:8px;left:48px;border-width:0 0 1px 1px; }
.about-corner.br { bottom:8px;right:8px;border-width:0 1px 1px 0; }
.about-text p { color:var(--gray);line-height:1.8;margin-bottom:20px;font-size:1rem; }
.about-pills { display:flex;flex-wrap:wrap;gap:10px;margin-top:32px; }
.pill {
  background: rgba(0,245,196,0.06);
  border: 1px solid var(--border);
  padding: 8px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 1px;
  color: var(--neon);
  transition: all 0.3s;
}
.pill:hover { background:rgba(0,245,196,0.12);box-shadow:0 0 20px rgba(0,245,196,0.1); }

/* ─── SERVICES ─── */
#services { background: var(--black); }
.services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--border);
}
.service-card {
  background: var(--black);
  padding: 50px 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s;
}
.service-card::before {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,245,196,0.05),transparent);
  opacity:0;transition:opacity 0.4s;
}
.service-card:hover::before { opacity:1; }
.service-card:hover { transform:translateY(-4px); }
.service-num {
  font-family:'Bebas Neue',sans-serif;
  font-size:5rem;
  color:rgba(0,245,196,0.06);
  position:absolute;top:20px;right:30px;
  line-height:1;transition:color 0.4s;
}
.service-card:hover .service-num { color:rgba(0,245,196,0.12); }
.service-icon {
  width:56px;height:56px;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;
  color:var(--neon);
  transition:all 0.4s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.service-card:hover .service-icon { background:rgba(0,245,196,0.08);box-shadow:0 0 30px rgba(0,245,196,0.15); }
.service-name { font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:14px;transition:color 0.3s; }
.service-card:hover .service-name { color:var(--neon); }
.service-desc { color:var(--gray);font-size:0.88rem;line-height:1.7; }
.service-link {
  display:inline-flex;align-items:center;gap:8px;
  margin-top:28px;
  font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--neon);text-decoration:none;
  opacity:0;transform:translateX(-10px);transition:all 0.3s;
}
.service-card:hover .service-link { opacity:1;transform:translateX(0); }

/* ─── PORTFOLIO ─── */
#portfolio { background:var(--deep); }
.portfolio-header { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px; }
.portfolio-filter { display:flex;gap:4px; }
.filter-btn {
  background:transparent;border:1px solid transparent;
  color:var(--gray);
  font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;
  padding:8px 16px;cursor:none;transition:all 0.3s;
}
.filter-btn.active,.filter-btn:hover { border-color:var(--neon);color:var(--neon);background:rgba(0,245,196,0.05); }
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.port-item {
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--border);
  cursor:none;
}
.port-item:nth-child(1) { grid-column:1/8;grid-row:1;height:380px; }
.port-item:nth-child(2) { grid-column:8/13;grid-row:1;height:380px; }
.port-item:nth-child(3) { grid-column:1/5;grid-row:2;height:280px; }
.port-item:nth-child(4) { grid-column:5/9;grid-row:2;height:280px; }
.port-item:nth-child(5) { grid-column:9/13;grid-row:2;height:280px; }
.port-bg {
  position:absolute;inset:0;
  transition:transform 0.6s ease;
}
.port-item:hover .port-bg { transform:scale(1.05); }
.port-bg-1 { background:linear-gradient(135deg,#0a1628,#1a0a3d); }
.port-bg-2 { background:linear-gradient(135deg,#1a0a0d,#0a1a2a); }
.port-bg-3 { background:linear-gradient(135deg,#0a1a10,#1a1a0a); }
.port-bg-4 { background:linear-gradient(135deg,#0d0a1a,#1a0d10); }
.port-bg-5 { background:linear-gradient(135deg,#1a0a10,#0a0d1a); }
.port-shape { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.4; }
.port-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,5,7,0.95) 0%,rgba(5,5,7,0.3) 50%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:30px;
}
.port-cat { font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:2px;color:var(--neon);text-transform:uppercase;margin-bottom:8px; }
.port-title { font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:8px; }
.port-hover {
  position:absolute;inset:0;
  background:rgba(0,245,196,0.03);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.4s;
}
.port-item:hover .port-hover { opacity:1; }
.port-hover-icon {
  width:60px;height:60px;
  border:1px solid var(--neon);
  display:flex;align-items:center;justify-content:center;
  color:var(--neon);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}

/* ─── CONTACT ─── */
#contact { background:var(--black); }
.contact-wrap { display:grid;grid-template-columns:1fr 1.2fr;gap:100px;align-items:start; }
.contact-info { padding-top:20px; }
.contact-line { display:flex;align-items:center;gap:16px;padding:24px 0;border-bottom:1px solid var(--border); }
.contact-icon { width:44px;height:44px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--neon);flex-shrink:0; }
.contact-label { font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:2px;color:var(--gray);text-transform:uppercase;margin-bottom:4px; }
.contact-val { font-size:0.95rem;color:var(--white); }
.social-row { display:flex;gap:12px;margin-top:40px; }
.social-btn {
  width:44px;height:44px;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--gray);text-decoration:none;transition:all 0.3s;
}
.social-btn:hover { border-color:var(--neon);color:var(--neon);background:rgba(0,245,196,0.05);box-shadow:0 0 20px rgba(0,245,196,0.1); }
.contact-form { display:flex;flex-direction:column;gap:20px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.form-group { display:flex;flex-direction:column;gap:8px; }
.form-label { font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:2px;color:var(--gray);text-transform:uppercase; }
.form-input,.form-textarea {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--white);
  font-family:'Syne',sans-serif;font-size:0.9rem;
  padding:14px 18px;outline:none;transition:all 0.3s;
  resize:none;cursor:none;
}
.form-input::placeholder,.form-textarea::placeholder { color:rgba(160,160,176,0.4); }
.form-input:focus,.form-textarea:focus { border-color:var(--neon);background:rgba(0,245,196,0.03);box-shadow:0 0 20px rgba(0,245,196,0.08); }
.form-textarea { height:140px; }
.form-submit {
  background:var(--neon);color:var(--black);
  border:none;
  font-family:'DM Mono',monospace;font-size:0.75rem;letter-spacing:3px;text-transform:uppercase;
  padding:18px 40px;cursor:none;font-weight:600;
  transition:all 0.3s;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  align-self:flex-start;
  box-shadow:0 0 40px rgba(0,245,196,0.25);
}
.form-submit:hover { background:var(--white);box-shadow:0 0 60px rgba(0,245,196,0.4);transform:translateY(-2px); }
.form-submit:disabled { opacity:0.6; }
#esframe-form-msg.success { background:rgba(0,245,196,0.08);border:1px solid var(--neon);color:var(--neon); }
#esframe-form-msg.error   { background:rgba(255,45,120,0.08);border:1px solid var(--neon3);color:var(--neon3); }

/* ─── FOOTER ─── */
#esframe-footer {
  background:var(--deep);
  padding:40px 60px;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--border);
}
.footer-copy { font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:2px;color:var(--gray);text-transform:uppercase; }
.footer-copy span { color:var(--neon); }
.footer-top { cursor:none; }

/* ─── REVEAL ─── */
.reveal { opacity:0;transform:translateY(40px);transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }

/* ─── LOGO GLITCH ─── */
.logo:hover { animation:glitch 0.3s linear; }
@keyframes glitch {
  0%   { text-shadow:2px 0 var(--neon2),-2px 0 var(--neon3); }
  25%  { text-shadow:-2px 0 var(--neon2),2px 0 var(--neon3);clip-path:inset(20% 0 30% 0); }
  50%  { text-shadow:2px 0 var(--neon2),-2px 0 var(--neon3);clip-path:inset(50% 0 10% 0); }
  75%  { text-shadow:-2px 0 var(--neon2),2px 0 var(--neon3);clip-path:inset(10% 0 50% 0); }
  100% { text-shadow:none;clip-path:none; }
}

/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
  #esframe-nav { padding:20px 30px; }
  section { padding:80px 30px; }
  #about { grid-template-columns:1fr;gap:60px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .contact-wrap { grid-template-columns:1fr;gap:60px; }
  #home { padding:0 30px; }
  .hero-stats { left:30px; }
  #esframe-footer { flex-direction:column;gap:20px;text-align:center; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .services-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:1fr; }
  .port-item:nth-child(n) { grid-column:1;grid-row:auto;height:220px; }
  .hero-title { font-size:4rem; }
  .cube-wrap { display:none; }
  .form-row { grid-template-columns:1fr; }
  .services-header,.portfolio-header { flex-direction:column;align-items:flex-start;gap:20px; }
}