:root {
  --bg:      #0A0A0A;
  --bg2:     #111111;
  --card:    #161616;
  --orange:  #00c3ff;
  --yellow:  #00aeff;
  --purple:  #55bbff;
  --text:    #E8E8E8;
  --muted:   #666666;
  --border:  rgba(255,255,255,0.07);
  --hh:      70px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:16px; line-height:1.7; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ─── VIEWFINDER HUD ─── */
.hud {
  position:fixed;
  font-family:'Space Mono',monospace;
  font-size:10px;
  color:rgba(255,255,255,0.18);
  letter-spacing:0.12em;
  z-index:9000;
  pointer-events:none;
}
.hud-tl { top:14px; left:20px; display:flex; gap:4px; align-items:center; }
.hud-tr { top:14px; right:20px; }
.hud-bl { bottom:14px; left:20px; }
.hud-br { bottom:14px; right:20px; }
.rec-dot { color:#FF3B30; animation:blink 1.4s steps(2) infinite; }
@keyframes blink { from{opacity:0} to{opacity:1} }

/* ─── HEADER ─── */
header {
  position:fixed; top:0; left:0; right:0;
  height:var(--hh);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 60px;
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  z-index:8000;
}
.logo { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; }
.dot  { color:var(--orange); }
.nav-links { display:flex; gap:4px; }
.nav-links a {
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500;
  color:var(--muted); padding:8px 16px; border-radius:8px; transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a.active { color:var(--orange); background:rgba(255,107,0,0.08); }
.btn-hire {
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  background:var(--orange); color:#fff; padding:9px 20px; border-radius:8px;
  transition:transform .2s,box-shadow .2s;
}
.btn-hire:hover { transform:translateY(-2px); box-shadow:0 0 20px rgba(0, 162, 255, 0.4); }

/* Hamburger */
.nav-toggle-input { display:none; }
.hamburger {
  display:none; flex-direction:column; justify-content:space-between;
  width:44px; height:44px; align-items:center; cursor:pointer;
  padding:12px 10px; border-radius:8px; z-index:9999;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.hamburger span { height:2px; width:22px; background:var(--text); border-radius:4px; transition:all .3s; display:block; pointer-events:none; }
.nav-toggle-input:checked ~ .hamburger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle-input:checked ~ .hamburger span:nth-child(2) { opacity:0; }
.nav-toggle-input:checked ~ .hamburger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─── TICKER ─── */
.ticker-wrap {
  position:fixed; top:var(--hh); left:0; right:0;
  overflow:hidden; z-index:7000;
  background:rgba(10,10,10,0.9);
  border-bottom:1px solid rgba(0, 174, 255, 0.15);
  padding:8px 0;
}
.ticker-track {
  display:flex; white-space:nowrap; gap:40px;
  animation:ticker 25s linear infinite;
}
.ticker-track span {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  color:rgba(0, 140, 255, 0.5); letter-spacing:0.2em;
}
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:8px; border:none; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-primary { background:var(--orange); color:#fff; box-shadow:0 0 20px rgba(0, 4, 255, 0.2); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 32px rgba(17, 0, 255, 0.4); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
.full-w { width:100%; justify-content:center; }

/* ─── SHARED ─── */
.section-pad { padding:100px 10%; }
.section-eyebrow { font-family:'Space Mono',monospace; font-size:11px; color:var(--orange); letter-spacing:.15em; text-transform:uppercase; margin-bottom:12px; }
.section-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(30px,5vw,52px); font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-bottom:16px; }
.section-title.centered { text-align:center; }
.section-sub { color:var(--muted); font-size:16px; margin-bottom:56px; }
.accent { color:var(--orange); }

/* ─── HERO ─── */
.hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--hh) + 42px + 40px) 10% 80px;
  gap:60px;
}
.hero-left { flex:1; max-width:580px; }
.hero-eyebrow {
  font-family:'Space Mono',monospace; font-size:11px; color:var(--orange);
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--orange); }
.hero-name {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(52px,9vw,96px); font-weight:700; letter-spacing:-.04em;
  line-height:.95; margin-bottom:24px;
  color:var(--text);
  position:relative;
  z-index:10;
}
.gradient-name {
  background:linear-gradient(135deg,#5204e2,);
  background-size:200% auto;
  animation:gradShift 4s linear infinite;
}
@keyframes gradShift { to{background-position:200% center} }
.hero-bio { color:var(--muted); font-size:16px; line-height:1.8; margin-bottom:36px; max-width:480px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:52px; }
.hero-stats { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; gap:4px; }
.stat-n { font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700; color:var(--orange); line-height:1; }
.stat-l { font-size:11px; color:var(--muted); line-height:1.4; }
.stat-div { width:1px; height:40px; background:var(--border); }

/* ─── HERO RIGHT / PHOTO ─── */
.hero-right { position:relative; width:380px; height:440px; flex-shrink:0; }
.photo-frame {
  width:280px; height:360px;
  background:transparent;
  border-radius:4px;
  position:absolute; top:40px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}
.photo-placeholder {
  width:100%; height:100%;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  perspective:1200px;
}
.photo-initials {
  font-family:'Space Grotesk',sans-serif; font-size:64px; font-weight:700;
  color:var(--orange); opacity:.3; position:relative; z-index:1;
}

/* Coin-flip 3D structure — circular coin */
.coin {
  width:240px; height:240px;
  max-width:90%;
  position:relative;
  z-index:1;
  border-radius:50%;
  transform-style:preserve-3d;
  animation:coinSpin 5s linear infinite;
  box-shadow:0 0 0 2px rgba(0, 68, 255, 0.35), 0 12px 32px rgba(6, 28, 150, 0.5),0 12px 32px rgba(0, 0, 0, 0.5);
}
.coin-face {
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.coin-face.coin-front {
  transform:rotateY(0deg);
  background:var(--card);
}
.coin-face.coin-back {
  transform:rotateY(180deg) scaleX(-1);
  background:var(--card);
}
.profile-img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@keyframes coinSpin {
  0%   { transform:rotateY(0deg); }
  100% { transform:rotateY(360deg); }
}

/* Viewfinder corners on photo */
.frame-corner {
  position:absolute; width:16px; height:16px;
  border-color:var(--orange); border-style:solid; border-width:0;
}
.fc-tl { top:8px; left:8px; border-top-width:2px; border-left-width:2px; }
.fc-tr { top:8px; right:8px; border-top-width:2px; border-right-width:2px; }
.fc-bl { bottom:8px; left:8px; border-bottom-width:2px; border-left-width:2px; }
.fc-br { bottom:8px; right:8px; border-bottom-width:2px; border-right-width:2px; }

/* Tool circles */
.tool-circle {
  position:absolute;
  width:72px; height:72px;
  background:var(--card); border:1px solid var(--border);
  border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-size:18px; color:var(--orange); gap:2px;
}
.tool-circle span { font-family:'Space Mono',monospace; font-size:8px; color:var(--muted); }
.tc1 { top:0; left:0; }
.tc2 { top:0; right:0; color:var(--yellow); border-color:rgba(255,229,0,.2); }
.tc3 { bottom:60px; left:0; }
.tc4 { bottom:60px; right:0; color:var(--purple); border-color:rgba(157,85,255,.2); }

/* ─── SERVICES ─── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:36px 28px; position:relative; transition:border-color .3s,transform .3s;
}
.svc-card:hover { transform:translateY(-6px); }
.layer-1:hover { border-color:rgba(0, 183, 255, 0.4); }
.layer-2:hover { border-color:rgba(157,85,255,.4); }
.layer-3:hover { border-color:rgba(0, 174, 255, 0.4); }

.layer-badge {
  position:absolute; top:-12px; left:24px;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  color:var(--orange); background:var(--bg);
  border:1px solid rgba(0, 60, 255, 0.25); padding:3px 10px; border-radius:6px;
}
.layer-2 .layer-badge { color:var(--purple); border-color:rgba(157,85,255,.25); }
.layer-3 .layer-badge { color:var(--yellow); border-color:rgba(0, 110, 255, 0.25); }

.svc-icon {
  width:48px; height:48px; border-radius:12px;
  background:rgba(255,107,0,.1); border:1px solid rgba(0, 26, 255, 0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--orange); margin-bottom:20px;
}
.layer-2 .svc-icon { background:rgba(85, 130, 255, 0.1); border-color:rgba(85, 144, 255, 0.2); color:var(--purple); }
.layer-3 .svc-icon { background:rgba(0, 153, 255, 0.1); border-color:rgba(0, 81, 255, 0.2); color:var(--yellow); }

.svc-card h3 { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; margin-bottom:12px; }
.layer-1 h3 { color:var(--orange); }
.layer-2 h3 { color:var(--purple); }
.layer-3 h3 { color:var(--yellow); }

.svc-card p { color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:20px; }
.svc-card ul { list-style:none; margin-bottom:24px; }
.svc-card ul li { font-size:13px; color:#888; padding:6px 0 6px 20px; position:relative; border-bottom:1px solid rgba(255,255,255,.04); }
.svc-card ul li:last-child { border-bottom:none; }
.svc-card ul li::before { content:'→'; position:absolute; left:0; }
.layer-1 ul li::before { color:var(--orange); }
.layer-2 ul li::before { color:var(--purple); }
.layer-3 ul li::before { color:var(--yellow); }
.svc-link { font-size:13px; font-weight:700; color:var(--orange); transition:gap .2s; }
.layer-2 .svc-link { color:var(--purple); }
.layer-3 .svc-link { color:var(--yellow); }

/* ─── PORTFOLIO ─── */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn {
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600;
  padding:8px 20px; border-radius:99px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer; transition:all .2s;
}
.filter-btn:hover,.filter-btn.active { background:var(--orange); color:#fff; border-color:var(--orange); }

.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.port-card {
  position:relative; border-radius:12px; overflow:hidden;
  aspect-ratio:4/3; cursor:pointer;
  transition:transform .3s;
}
.port-card:hover { transform:scale(1.02); }
.port-card.hidden { display:none; }
.port-thumb {
  width:100%; height:100%;
  background:var(--card);
  transition:transform .4s;
}
.port-card:hover .port-thumb { transform:scale(1.08); }

/* Gradient placeholders */
.thumb-1 { background:linear-gradient(135deg,#1a0a00,#3d1800,#FF6B00 180%); }
.thumb-2 { background:linear-gradient(135deg,#0a0015,#2a0060,#9D55FF 180%); }
.thumb-3 { background:linear-gradient(135deg,#0a0a00,#2a2500,#FFE500 180%); }
.thumb-4 { background:linear-gradient(135deg,#001a00,#003800,#00C851 180%); }
.thumb-5 { background:linear-gradient(135deg,#1a0005,#3d0015,#FF0055 180%); }
.thumb-6 { background:linear-gradient(135deg,#00101a,#002a3d,#00AAFF 180%); }

.port-overlay {
  position:absolute; inset:0;
  background:rgba(10,10,10,0.92);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; opacity:0; transition:opacity .3s;
}
.port-card:hover .port-overlay { opacity:1; }
.port-cat { font-family:'Space Mono',monospace; font-size:10px; color:var(--orange); letter-spacing:.1em; margin-bottom:8px; }
.port-card h4 { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; margin-bottom:6px; }
.port-card p { font-size:13px; color:var(--muted); margin-bottom:16px; }
.port-link { font-size:13px; font-weight:700; color:var(--orange); transition:color .2s; }
.port-link:hover { color:var(--yellow); }
.port-links { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.port-link-pdf { display:inline-flex; align-items:center; gap:6px; color:#FF4444; }
.port-link-pdf:hover { color:#7785ff; }
.port-link-pdf i { font-size:12px; }

/* ─── PRICING ─── */
.pricing-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.ptab {
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600;
  padding:10px 24px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer; transition:all .2s;
}
.ptab:hover,.ptab.active { background:var(--orange); color:#fff; border-color:var(--orange); box-shadow:0 0 20px rgba(255,107,0,.25); }

.ppanel { display:none; }
.ppanel.active { display:block; }
.price-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.price-card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:28px 24px; transition:border-color .3s,transform .3s; position:relative;
}
.price-card:hover { border-color:rgba(0, 4, 255, 0.35); transform:translateY(-4px); }
.pc-icon { font-size:24px; color:var(--orange); margin-bottom:16px; }
.price-card h4 { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; margin-bottom:20px; line-height:1.4; }
.price-card h4 small { display:block; font-size:12px; color:var(--muted); font-weight:400; margin-top:4px; }
.pc-rates { display:flex; flex-direction:column; gap:10px; }
.pc-rate { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:rgba(255,255,255,.03); border-radius:8px; }
.pc-tier { font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); }
.pc-val { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--orange); }
.featured-price { border-color:rgba(0, 38, 255, 0.3); background:linear-gradient(135deg,rgba(0, 60, 255, 0.06),rgba(0, 81, 255, 0.04)); }
.best-value {
  position:absolute; top:-12px; right:20px;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  color:var(--yellow); background:var(--bg);
  border:1px solid rgba(0, 60, 255, 0.3); padding:3px 10px; border-radius:6px;
}

/* ─── ABOUT ─── */
.about-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:center; }
.about-photo {
  width:100%; aspect-ratio:3/4; max-width:320px;
  background:transparent; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:visible;
  perspective:1200px;
}
.about-initials { font-family:'Space Grotesk',sans-serif; font-size:72px; font-weight:700; color:var(--orange); opacity:.25; }
.about-text p { color:var(--muted); margin-bottom:16px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.chips span {
  background:rgba(255,107,0,.08); border:1px solid rgba(0, 38, 255, 0.2);
  color:var(--orange); font-size:13px; font-weight:500; padding:6px 14px; border-radius:99px;
}
.motto { font-style:italic; font-size:13px; color:var(--orange); opacity:.7; margin-bottom:28px !important; }
.wa-big { margin-top:16px; }

/* ─── CONTACT ─── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start; margin-top:56px; }
.ci-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; }
.ci-icon {
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,107,0,.1); border:1px solid rgba(0, 47, 255, 0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--orange); flex-shrink:0;
}
.email-icon { background:rgba(255,229,0,.1); border-color:rgba(0, 81, 255, 0.2); color:var(--yellow); }
.loc-icon   { background:rgba(157,85,255,.1); border-color:rgba(157,85,255,.2); color:var(--purple); }
.ci-label { font-size:12px; color:var(--muted); margin-bottom:4px; }
.ci-val { font-size:15px; font-weight:500; transition:color .2s; }
.ci-val:hover { color:var(--orange); }
.contact-form-wrap { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:40px; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:12px; color:var(--muted); font-weight:500; margin-bottom:8px; }
.fg input,.fg select,.fg textarea {
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; color:var(--text);
  font-family:'Inter',sans-serif; font-size:14px; outline:none; transition:border-color .2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--orange); }
.fg select option { background:var(--bg2); }
.fg textarea { resize:vertical; min-height:120px; }

/* ─── FOOTER ─── */
.footer { padding:60px 10%; border-top:1px solid var(--border); }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.footer-logo { font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; }
.footer-tag { color:var(--muted); font-size:13px; max-width:400px; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.footer-links a { font-size:14px; color:var(--muted); transition:color .2s; }
.footer-links a:hover { color:var(--orange); }
.footer-social { display:flex; gap:14px; }
.footer-social a {
  width:40px; height:40px; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--muted); transition:color .2s,border-color .2s;
}
.footer-social a:hover { color:var(--orange); border-color:rgba(55, 0, 255, 0.3); }
.footer-copy { font-size:12px; color:var(--muted); }
.footer-credit { font-size:12px; color:var(--muted); }
.footer-credit a { color:var(--orange); transition:color .2s; }
.footer-credit a:hover { color:var(--yellow); }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity:1; transform:none; }
.will-animate.reveal { opacity:0; transform:translateY(36px); transition:opacity .7s ease,transform .7s ease; }
.will-animate.delay1 { transition-delay:.15s; }
.will-animate.delay2 { transition-delay:.3s; }
.will-animate.delay3 { transition-delay:.45s; }
.revealed { opacity:1 !important; transform:none !important; }

/* ─── HERO ANIMATE IN ─── */
.hero-eyebrow { animation:fadeUp .7s ease .1s both; }
.hero-name    { animation:fadeUp .7s ease .25s both; }
.hero-bio     { animation:fadeUp .7s ease .4s both; }
.hero-actions { animation:fadeUp .7s ease .55s both; }
.hero-stats   { animation:fadeUp .7s ease .7s both; }
.hero-right   { animation:fadeRight .9s ease .3s both; }
@keyframes fadeUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes fadeRight{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }

/* ─── RESPONSIVE ─── */
@media(max-width:1100px) {
  .services-grid,.price-cards { grid-template-columns:1fr 1fr; }
  .portfolio-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:900px) {
  header { padding:0 24px; }
  .btn-hire { display:none; }
  .hamburger { display:flex !important; }
  .nav-links {
    position:fixed; top:0; right:-100%; height:100vh; width:260px;
    background:#111; flex-direction:column; align-items:flex-start;
    padding:90px 28px 40px; border-left:1px solid var(--border);
    transition:right .35s; z-index:8500; gap:4px;
    box-shadow:-8px 0 32px rgba(0,0,0,.6);
  }
  .nav-toggle-input:checked ~ .nav-links { right:0; }
  .nav-links a { font-size:16px; width:100%; padding:12px 16px; }
  .hero { flex-direction:column; padding-top:calc(var(--hh)+42px+32px); text-align:center; }
  .hero-right { width:280px; height:320px; margin:0 auto; }
  .hero-bio { margin:0 auto 36px; }
  .hero-actions { justify-content:center; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .contact-grid { grid-template-columns:1fr; gap:40px; }
}
@media(max-width:680px) {
  .section-pad { padding:70px 6%; }
  .services-grid,.price-cards,.portfolio-grid { grid-template-columns:1fr; }
  .pricing-tabs { flex-direction:column; }
  .ptab { width:100%; }
  .fg-row { grid-template-columns:1fr; }
  .hero-stats { justify-content:center; }
  .hud { display:none; }
}