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

:root {
  --red: #e53e3e;
  --red-dark: #c53030;
  --red-deeper: #9b2c2c;
  --bg: #0a0a0a;
  --bg2: #0d0d0d;
  --bg3: #111111;
  --border: #1e1e1e;
  --text: #f0f0f0;
  --muted: #888;
  --font: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

/* ── UTILITIES ── */
.red { color: var(--red); }
.center { text-align: center; }
.gradient-text {
  background: linear-gradient(135deg, var(--red), #fc8181);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 100px 32px; }
h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; margin-bottom: 56px; }
.section-label {
  font-size: 12px; letter-spacing: 3px; color: var(--red);
  font-weight: 700; margin-bottom: 14px; display: block;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block; background: var(--red); color: #fff;
  border: none; padding: 14px 32px; border-radius: 6px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  text-decoration: none; transition: all .3s; letter-spacing: .5px;
  font-family: var(--font);
}
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(229,62,62,.4); }

.btn-outline {
  display: inline-block; background: transparent; color: var(--red);
  border: 2px solid var(--red); padding: 12px 32px; border-radius: 6px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  text-decoration: none; transition: all .3s; letter-spacing: .5px;
  font-family: var(--font);
}
.btn-outline:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.btn-outline.small { padding: 8px 18px; font-size: 13px; }
.btn-primary.full { width: 100%; text-align: center; padding: 16px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideL   { from { opacity:0; transform:translateX(-60px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideR   { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }
@keyframes float    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@keyframes spin     { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes pulse    { 0%,100% { box-shadow:0 0 0 0 rgba(229,62,62,.5); } 70% { box-shadow:0 0 0 10px rgba(229,62,62,0); } }
@keyframes spin-rev { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }

.reveal-left  { opacity:0; transform:translateX(-60px); transition: opacity .8s ease, transform .8s ease; }
.reveal-right { opacity:0; transform:translateX(60px);  transition: opacity .8s ease, transform .8s ease; }
.reveal-up    { opacity:0; transform:translateY(40px);  transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible, .reveal-right.visible, .reveal-up.visible { opacity:1; transform:none; }

/* ── NAVBAR ── */
.navbar {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  padding: 20px 0; transition: all .4s;
}
.navbar.scrolled {
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(229,62,62,.2);
  padding: 14px 0;
}
.nav-container {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { font-size: 26px; font-weight: 900; color: var(--red); letter-spacing: 3px; }
.logo span { color: #fff; }
.nav-menu { display: flex; list-style: none; gap: 28px; }
.nav-link {
  color: #aaa; text-decoration: none; font-weight: 600;
  font-size: 14px; letter-spacing: .5px; transition: color .3s;
}
.nav-link:hover, .nav-link.active { color: var(--red); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; }

/* ── HERO ── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden; padding: 120px 32px 80px;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(229,62,62,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,62,62,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-bg-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.c1 { width:600px; height:600px; top:-10%; right:-5%; background:radial-gradient(circle, rgba(229,62,62,.13) 0%, transparent 70%); animation: float 7s ease-in-out infinite; }
.c2 { width:350px; height:350px; bottom:5%; left:-5%; background:radial-gradient(circle, rgba(229,62,62,.07) 0%, transparent 70%); }
.hero-container {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(229,62,62,.1); border: 1px solid rgba(229,62,62,.35);
  border-radius: 50px; padding: 8px 20px; margin-bottom: 30px;
  font-size: 13px; font-weight: 600; color: var(--red); letter-spacing: .5px;
}
.badge-dot { width:8px; height:8px; background:var(--red); border-radius:50%; animation: pulse 2s infinite; }
.hero-text h1 { font-size: clamp(38px,5vw,62px); font-weight: 900; line-height: 1.1; margin-bottom: 24px; }
.hero-sub { font-size: 17px; color: var(--muted); line-height: 1.8; margin-bottom: 14px; max-width: 480px; }
.hero-tag { font-size: 13px; color: #555; margin-bottom: 40px; letter-spacing: .5px; }
.hero-btns { display: flex; gap: 16px; }

/* Avatar */
.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; height:420px; }
.ring { position:absolute; border-radius:50%; border:2px dashed rgba(229,62,62,.25); }
.ring1 { width:440px; height:440px; animation: spin 22s linear infinite; }
.ring2 { width:380px; height:380px; animation: spin-rev 30s linear infinite; border-color:rgba(229,62,62,.12); }
.glow-blob { position:absolute; width:340px; height:340px; background:linear-gradient(135deg, var(--red), var(--red-deeper)); border-radius:50%; opacity:.15; filter:blur(40px); }
.avatar-wrap { position:relative; z-index:2; animation: float 5s ease-in-out infinite; }
.avatar {
  width:280px; height:280px; border-radius:50%;
  border:4px solid rgba(229,62,62,.5);
  background:linear-gradient(135deg, #1a0808, #2d1010);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 80px rgba(229,62,62,.25);
}
.avatar-inner { text-align:center; }
.avatar-emoji { width:200px; height:200px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 8px; }
.avatar-name { font-size:16px; font-weight:900; color:var(--red); letter-spacing:4px; }
.avatar-role { font-size:11px; color:#555; letter-spacing:2px; }

.float-badge {
  position:absolute; background:#1a1a1a;
  border:1px solid rgba(229,62,62,.4); border-radius:12px;
  padding:10px 16px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:3;
}
.fb1 { top:40px; right:-20px; }
.fb2 { bottom:60px; left:-30px; }
.fb-title { font-size:12px; font-weight:700; color:var(--red); }
.fb-sub   { font-size:11px; color:#555; }

/* ── ABOUT ── */
.about { background: var(--bg2); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about h2 { font-size:clamp(28px,3.5vw,42px); margin-bottom:20px; }
.about-text { color:var(--muted); font-size:16px; line-height:1.9; margin-bottom:18px; }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.stat-card {
  background:rgba(229,62,62,.05); border:1px solid rgba(229,62,62,.15);
  border-radius:10px; padding:20px 16px; text-align:center;
  display:flex; flex-direction:column; gap:4px;
}
.stat-num { font-size:32px; font-weight:900; color:var(--red); }
.stat-label { font-size:12px; color:#555; letter-spacing:1px; }
.tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tool-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:12px; padding:22px 18px;
  display:flex; align-items:center; gap:14px;
  transition: transform .3s, box-shadow .3s;
}
.tool-card:hover { transform:translateY(-6px); box-shadow:0 15px 40px rgba(229,62,62,.15); }
.tool-card span { font-size:26px; }
.tool-card p { font-weight:700; font-size:15px; }

/* ── SKILLS ── */
.skills { background: var(--bg); }
.skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:20px; }
.skills-col-title { font-size:20px; font-weight:800; color:var(--red); margin-bottom:28px; padding-bottom:12px; border-bottom:1px solid rgba(229,62,62,.2); }
.skill-item { margin-bottom:22px; }
.skill-top { display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; font-weight:600; }
.pct { color:var(--red); font-weight:700; }
.bar { height:6px; background:#1a1a1a; border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; width:0; background:linear-gradient(90deg, var(--red), #fc8181); border-radius:3px; transition: width 1.2s ease; }

/* ── PROJECTS ── */
.projects { background:var(--bg2); }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.project-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  transition: transform .3s, box-shadow .3s;
}
.project-card:hover { transform:translateY(-8px); box-shadow:0 20px 60px rgba(229,62,62,.18); }
.project-img {
  height:400px; display:flex; align-items:center; justify-content:center;
  font-size:56px; position:relative;
}
.pi1 { /* the element was .project-img.pi1 */
  overflow: hidden;
  background:linear-gradient(135deg, rgba(229,62,62,.25), rgba(229,62,62,.08));
}
.pi2 { background:linear-gradient(135deg, rgba(197,48,48,.25), rgba(197,48,48,.08)); }
.pi3 { background:linear-gradient(135deg, rgba(155,44,44,.25), rgba(155,44,44,.08)); }
.pi4 { background:linear-gradient(135deg, rgba(116,42,42,.25), rgba(116,42,42,.08)); }
.project-tag {
  position:absolute; top:16px; right:16px;
  background:rgba(229,62,62,.2); border:1px solid rgba(229,62,62,.4);
  border-radius:20px; padding:4px 14px; font-size:11px;
  color:var(--red); font-weight:700; letter-spacing:.5px;
}
.project-body { padding:26px 22px; }
.project-body h3 { font-size:19px; font-weight:800; margin-bottom:10px; }
.project-body p { color:#777; font-size:14px; line-height:1.7; margin-bottom:18px; }
.tag-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tag {
  background:rgba(229,62,62,.1); border:1px solid rgba(229,62,62,.25);
  color:var(--red); font-size:11px; padding:4px 12px;
  border-radius:20px; font-weight:600;
}

/* ── SERVICES ── */
.services { background:var(--bg); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:16px; padding:36px 26px; position:relative; overflow:hidden;
  transition: transform .3s, box-shadow .3s;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0;
  width:4px; height:100%;
  background:linear-gradient(180deg, var(--red), transparent);
}
.service-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(229,62,62,.15); }
.service-icon { font-size:30px; color:var(--red); margin-bottom:18px; }
.service-card h3 { font-size:17px; font-weight:800; margin-bottom:10px; }
.service-card p { color:#777; font-size:14px; line-height:1.7; }

/* ── TESTIMONIALS ── */
.testimonials { background:var(--bg2); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:16px; padding:32px 26px;
  transition: transform .3s, box-shadow .3s;
}
.testi-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(229,62,62,.13); }
.quote-mark { font-size:52px; color:var(--red); line-height:1; margin-bottom:14px; opacity:.5; font-family:Georgia,serif; }
.testi-card p { color:#aaa; font-size:15px; line-height:1.8; margin-bottom:24px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:14px; }
.testi-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--red), var(--red-deeper));
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px; flex-shrink:0;
}
.testi-author strong { display:block; font-size:14px; font-weight:700; }
.testi-author span { font-size:12px; color:#555; }

/* ── CONTACT ── */
.contact { background:var(--bg); position:relative; overflow:hidden; }
.contact-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:400px;
  background:radial-gradient(ellipse, rgba(229,62,62,.08) 0%, transparent 70%);
  pointer-events:none;
}
.contact .container { position:relative; z-index:1; }
.contact-sub { color:var(--muted); font-size:16px; margin-top:-36px; margin-bottom:48px; }
.contact-form { max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:10px; padding:15px 20px; color:var(--text);
  font-size:15px; font-family:var(--font); outline:none;
  transition: border-color .3s, box-shadow .3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(229,62,62,.1); }
.form-group select { appearance:none; cursor:pointer; }
.form-group textarea { resize:vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color:#444; }
.form-btns { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.form-success {
  display:none; text-align:center; color:#68d391;
  background:rgba(104,211,145,.1); border:1px solid rgba(104,211,145,.3);
  border-radius:8px; padding:14px; font-weight:600;
}
.social-row { display:flex; justify-content:center; gap:32px; margin-top:50px; }
.social-link { color:#555; text-decoration:none; font-size:14px; font-weight:600; transition:color .3s; letter-spacing:.5px; }
.social-link:hover { color:var(--red); }

/* ── FOOTER ── */
.footer { background:#050505; border-top:1px solid #151515; padding:36px 32px; }
.footer-container {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-logo { font-size:22px; font-weight:900; color:var(--red); letter-spacing:3px; }
.footer-logo span { color:#fff; }
.footer-copy { color:#444; font-size:13px; }
.footer-right { display:flex; align-items:center; gap:28px; }
.footer-links { display:flex; gap:20px; }
.footer-links a { color:#555; text-decoration:none; font-size:13px; transition:color .3s; }
.footer-links a:hover { color:var(--red); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-container, .about-grid, .skills-grid, .projects-grid, .testi-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .hero-visual { height:300px; }
  .ring1 { width:300px; height:300px; }
  .ring2 { width:260px; height:260px; }
  .avatar { width:240px; height:240px; }
  .avatar-emoji { width:180px; height:180px; border-radius:50%; object-fit:cover; display:block; margin:0 auto; }
  .nav-menu, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .nav-menu.open {
    display:flex; flex-direction:column;
    position:fixed; top:70px; left:0; right:0;
    background:rgba(10,10,10,.98); padding:24px 32px; gap:20px;
    border-bottom:1px solid var(--border);
  }
  .footer-container { flex-direction:column; gap:20px; text-align:center; }
  .footer-right { flex-direction:column; gap:16px; }
  .form-row { grid-template-columns:1fr; }
  .form-btns { grid-template-columns:1fr; }
  h2 { margin-bottom:36px; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns:1fr; }
  .section { padding:70px 20px; }
  .hero { padding:100px 20px 60px; }
  .hero-text h1 { font-size:34px; }
  .hero-btns { flex-direction:column; gap:12px; }
}