:root{
  --bg:#06070c;
  --bg-alt:#0a0d16;
  --surface:#10131f;
  --surface-2:#151a29;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --text:#f4f6fb;
  --text-dim:#9096a8;
  --text-faint:#5b6175;
  --accent:#3f7dfb;
  --accent-2:#8b5cf6;
  --accent-soft:rgba(63,125,251,.14);
  --glow:rgba(63,125,251,.55);
  --radius:14px;
  --disp:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1240px;margin:0 auto;padding:0 32px;}

/* scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:10px;}

/* background grid + glow that follows cursor */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 75%);
  opacity:.5;
}
.bg-spot{
  position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, transparent 70%);
  filter:blur(40px);
  opacity:.35;
  transform:translate(-50%,-50%);
  transition:left .25s ease-out, top .25s ease-out;
  left:50%;top:20%;
}

/* cursor dot */
.cursor-dot{
  position:fixed;width:8px;height:8px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:9999;
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;
  display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-dot{ display:block; } }
.cursor-dot.grow{width:36px;height:36px;background:#fff;}

/* Navbar */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;
  transition:padding .35s ease, background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:14px 0;
  background:rgba(6,7,12,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.5px;
}
.logo-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;
  box-shadow:0 0 22px var(--glow);
  flex-shrink:0;
}
.nav-links{display:flex;align-items:center;gap:4px;position:relative;}
.nav-links a{
  position:relative;padding:8px 16px;font-size:14.5px;font-weight:500;color:var(--text-dim);
  transition:color .25s ease;
}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:'';position:absolute;left:16px;right:16px;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px;
}
.nav-cta{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:999px;
  border:1px solid var(--border-strong);
  font-size:14px;font-weight:500;
  transition:border-color .25s, background .25s, transform .25s;
  white-space:nowrap;
}
.nav-cta:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px);}
.nav-cta svg{width:14px;height:14px;transition:transform .25s;}
.nav-cta:hover svg{transform:translateX(3px);}

.burger{display:none;flex-direction:column;gap:5px;width:26px;background:none;border:none;padding:6px;z-index:1001;}
.burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position:fixed;inset:0;background:rgba(6,7,12,.98);backdrop-filter:blur(10px);
  z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-menu a{font-family:var(--disp);font-size:28px;font-weight:600;color:var(--text-dim);}
.mobile-menu a:hover{color:var(--text);}

/* Section base */
section{position:relative;z-index:1;padding:140px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:18px;
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.08;letter-spacing:-.01em;}
.section-head{max-width:1600px;margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,44px);margin-bottom:14px; text-align: center;}
.section-head p{color:var(--text-dim);font-size:16.5px;max-width:1400px;text-align: center;}
.grad{background:linear-gradient(100deg,var(--accent),var(--accent) 65%);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}

/* HERO */
.hero{padding:170px 0 100px;min-height:100vh;display:flex;align-items:center;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-top: -20px;}
.hero h1{font-size:clamp(38px,5.4vw,58px);margin-bottom:22px;}
.hero p.lead{color:var(--text-dim);font-size:17.5px;max-width:460px;margin-bottom:34px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:10px;font-weight:600;font-size:15px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.btn-primary{
  background:linear-gradient(100deg,var(--accent),var(--accent));color:#fff;
  box-shadow:0 8px 24px -8px var(--glow);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 32px -8px var(--glow);}
.btn-ghost{border:1px solid var(--border-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px);}
.btn svg{width:16px;height:16px;transition:transform .3s;}
.btn:hover svg{transform:translate(3px,-2px);}

.availability{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-dim);margin-bottom:22px;}
.dot-live{width:8px;height:8px;border-radius:50%;background:#3fe08a;position:relative;}
.dot-live::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:#3fe08a;opacity:.4;animation:pulse 1.8s infinite;}
@keyframes pulse{0%{transform:scale(.6);opacity:.6;}100%{transform:scale(2.2);opacity:0;}}

.socials{display:flex;gap:10px;}
.socials a{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--text-dim);
  transition:all .25s;
}
.socials a:hover{color:var(--text);border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px);}
.socials svg{width:16px;height:16px;}

/* Hero visual: orbit avatar signature element */
.orbit-wrap{position:relative;aspect-ratio:1/1;max-width:440px;margin:0 auto;}
.orbit-ring{position:absolute;border:1px solid rgba(63, 126, 251, 0);border-radius:50%;}
.orbit-ring.r1{inset:0;animation:spin 40s linear infinite;}
.orbit-ring.r2{inset:38px;border-style:dashed;border-color:rgba(63, 126, 251, 0);animation:spin 60s linear infinite reverse;}
.orbit-ring.r3{inset:78px;border-color:rgba(138, 92, 246, 0);animation:spin 30s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit-core{
  position:absolute;inset:110px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #1a2035, var(--bg-alt) 70%);
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 80px -10px var(--glow), inset 0 0 40px rgba(63,125,251,.12);
}
.orbit-core::before{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent, var(--accent), transparent 30%);
  animation:spin 4s linear infinite;opacity:.5;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.orbit-glyph{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--text-dim);letter-spacing:.08em;text-align:center;z-index:2;}
.orbit-glyph b{display:block;font-size:34px;color:var(--text);background:linear-gradient(120deg,#fff,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.orbit-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:50%;z-index:1;border:3px solid rgba(63,125,251,.55);box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 60px -6px var(--glow);}

.chip{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border-strong);
  padding:9px 14px;border-radius:999px;font-family:var(--mono);font-size:12.5px;color:var(--text);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
  animation:float 5s ease-in-out infinite;
}
.chip svg{width:13px;height:13px;color:var(--accent);}
.chip-1{top:2%;left:-6%;animation-delay:.2s;}
.chip-2{bottom:14%;right:-10%;animation-delay:1.1s;}
.chip-3{bottom:-2%;left:8%;animation-delay:2s;}
.chip-4{bottom:80%;left:110%;animation-delay:2s;}
.chip-5{bottom:40%;left:10%;animation-delay:2s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

.stat-card{
  position:absolute;right:-4%;top:8%;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 24px;display:none;
}

.hero-stats{display:flex;gap:36px;margin-top:8px;flex-wrap:wrap;margin-top: 20px; }
.hero-stats .stat b{font-family:var(--disp);font-size:26px;color:var(--text);display:block;}
.hero-stats .stat b .grad{font-size:26px;}
.hero-stats .stat span{font-size:12.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}

.scroll-cue{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text-faint);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.scroll-cue .mouse{width:22px;height:34px;border:1px solid var(--border-strong);border-radius:12px;position:relative;}
.scroll-cue .mouse::before{content:'';position:absolute;top:6px;left:50%;width:3px;height:6px;background:var(--accent);border-radius:2px;transform:translateX(-50%);animation:scrolldown 1.6s infinite;}
@keyframes scrolldown{0%{opacity:1;top:6px;}100%{opacity:0;top:18px;}}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;}
.about-visual{
  position:relative;aspect-ratio:4/5;border-radius:20px;
  background:linear-gradient(150deg,var(--surface),var(--bg-alt));
  border:1px solid var(--border);overflow:hidden;
}
.about-visual .grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:30px 30px;opacity:.6;}
.about-visual .blob{position:absolute;width:70%;height:70%;top:15%;left:15%;border-radius:40% 60% 55% 45%/45% 40% 60% 55%;background:linear-gradient(140deg,var(--accent-soft),transparent 70%);border:1px solid var(--border-strong);animation:morph 8s ease-in-out infinite;}
@keyframes morph{0%,100%{border-radius:40% 60% 55% 45%/45% 40% 60% 55%;}50%{border-radius:55% 45% 40% 60%/55% 60% 40% 45%;}}
.about-visual .tag-float{position:absolute;font-family:var(--mono);font-size:11.5px;color:var(--text-dim);background:rgba(6,7,12,.7);border:1px solid var(--border);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);}
.about-visual .tf1{top:12%;right:10%;}
.about-visual .tf2{bottom:16%;left:10%;}

.about-text p{color:var(--text-dim);font-size:16px;margin-bottom:18px;max-width:520px;}
.about-highlights{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;}
.highlight-item{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--border);border-radius:12px;transition:border-color .3s,transform .3s;}
.highlight-item:hover{border-color:var(--accent);transform:translateY(-3px);}
.highlight-item .ico{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.highlight-item .ico svg{width:17px;height:17px;color:var(--accent);}
.highlight-item h4{font-size:14.5px;margin-bottom:4px;font-family:var(--body);font-weight:600;}
.highlight-item p{font-size:13px;color:var(--text-faint);margin:0;}

/* SERVICES */
.services-grid{
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontal Center */
    align-items: center;     /* Vertical Center (optional) */
    margin: 80px auto;
}
.service-card{
  padding:32px 26px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s;
}
.service-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 70%);
}
.service-card:hover::before{opacity:1;}
.service-card:hover{transform:translateY(-6px);border-color:var(--border-strong);}
.service-num{font-family:var(--mono);font-size:12px;color:var(--text-faint);margin-bottom:26px;}
.service-card .ico{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.service-card .ico svg{width:20px;height:20px;color:var(--accent);}
.service-card h3{font-size:18px;margin-bottom:10px;font-weight:600;}
.service-card p{font-size:14px;color:var(--text-dim);}

/* WORK */
.work-filter{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap;}
.filter-btn{
  padding:9px 18px;border-radius:999px;border:1px solid var(--border-strong);
  font-size:13.5px;color:var(--text-dim);transition:all .25s;background:transparent;
}
.filter-btn:hover{color:var(--text);}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.work-card{
  position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);
  aspect-ratio:16/12;
  background:linear-gradient(150deg,var(--surface),var(--bg-alt));
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s;
}
.work-card:hover{transform:translateY(-6px);border-color:var(--border-strong);}
.work-thumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.work-thumb::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:26px 26px;opacity:.5;}
.work-thumb .glyph{font-family:var(--disp);font-size:56px;font-weight:700;color:var(--surface-2);transition:transform .5s ease, color .5s;}
.work-card:hover .work-thumb .glyph{transform:scale(1.12) rotate(-4deg);color:var(--accent);opacity:.25;}
.work-info{
  position:absolute;left:0;right:0;bottom:0;padding:22px;
  background:linear-gradient(to top, rgba(6,7,12,.94), transparent);
  transform:translateY(8px);opacity:.94;transition:transform .4s;
}
.work-card:hover .work-info{transform:translateY(0);}
.work-tags{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.work-tags span{font-family:var(--mono);font-size:10.5px;color:var(--accent);border:1px solid var(--accent-soft);padding:3px 9px;border-radius:999px;}
.work-info h3{font-size:19px;margin-bottom:4px;}
.work-info p{font-size:13px;color:var(--text-dim);}
.work-arrow{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-6px) rotate(-45deg);transition:all .35s;
}
.work-card:hover .work-arrow{opacity:1;transform:translateY(0) rotate(0);background:var(--accent);border-color:var(--accent);}
.work-arrow svg{width:15px;height:15px;}

/* SKILLS */
.skills-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.skill-row{margin-bottom:22px;}
.skill-row .top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:9px;}
.skill-row .top span:last-child{color:var(--text-faint);font-family:var(--mono);font-size:12.5px;}
.bar-track{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;transition:width 1.4s cubic-bezier(.16,1,.3,1);}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tool-item{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 10px;border:1px solid var(--border);border-radius:12px;
  font-size:12.5px;color:var(--text-dim);text-align:center;
  transition:transform .3s, border-color .3s, color .3s;
}
.tool-item:hover{transform:translateY(-4px);border-color:var(--accent);color:var(--text);}
.tool-item .ico{width:30px;height:30px;color:var(--accent);}

.marquee-wrap{margin-top:70px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0;overflow:hidden;}
.marquee{display:flex;gap:56px;width:max-content;animation:scroll-x 26s linear infinite;}
.marquee span{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--text-faint);white-space:nowrap;display:flex;align-items:center;gap:20px;}
.marquee span::after{content:'✦';color:var(--accent);font-size:14px;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* EXPERIENCE */
.timeline{position:relative;max-width:760px;}
.timeline::before{content:'';position:absolute;left:19px;top:6px;bottom:6px;width:1px;background:var(--border);}
.tl-item{position:relative;padding-left:56px;padding-bottom:44px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:11px;top:4px;width:17px;height:17px;border-radius:50%;background:var(--bg);border:2px solid var(--border-strong);transition:border-color .3s, box-shadow .3s;}
.tl-item.in .tl-dot{border-color:var(--accent);box-shadow:0 0 14px var(--glow);}
.tl-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.tl-top h3{font-size:19px;}
.tl-top .period{font-family:var(--mono);font-size:12.5px;color:var(--accent);border:1px solid var(--accent-soft);padding:4px 12px;border-radius:999px;height:fit-content;}
.tl-item .role{color:var(--text-dim);font-size:13.5px;margin-bottom:10px;}
.tl-item p.desc{color:var(--text-dim);font-size:14.5px;max-width:560px;}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;}
.contact-info p{color:var(--text-dim);font-size:16px;margin-bottom:30px;max-width:420px;}
.info-row{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.info-row .ico{width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.info-row .ico svg{width:17px;height:17px;color:var(--accent);}
.info-row .label{font-size:11.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}
.info-row .value{font-size:14.5px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{position:relative;margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field input, .field textarea{
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:16px 16px 8px;color:var(--text);font-family:var(--body);font-size:14.5px;
  transition:border-color .25s;
}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--accent);}
.field label{
  position:absolute;left:16px;top:15px;color:var(--text-faint);font-size:14.5px;
  pointer-events:none;transition:all .2s ease;
}
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top:6px;font-size:10.5px;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;
}
.submit-btn{width:100%;justify-content:center;border:none;}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:44px 0;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;}
.footer-inner p{font-size:13px;color:var(--text-faint);}
.back-top{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.back-top:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-4px);}
.back-top svg{width:16px;height:16px;}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .orbit-wrap{max-width:340px;margin-top:40px;}
  .about-grid{grid-template-columns:1fr;}
  .about-visual{max-width:420px;margin:0 auto;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .skills-wrap{grid-template-columns:1fr;gap:40px;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .nav-links,.nav-cta{display:none;}
  .burger{display:flex;}
  section{padding:96px 0;}
  .hero{padding:150px 0 70px;min-height:unset;}
  .work-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .about-highlights{grid-template-columns:1fr;}
  .tool-grid{grid-template-columns:repeat(2,1fr);}
  .hero-stats{gap:24px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}


.orbit-wrap {
  width: 100%;               /* ये जरूरी है */
  max-width: 1000px;
  aspect-ratio: 1/1;
  margin: 0 auto;
}


.hero{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    background-image:url("./assets/images/ronin1.png");
    background-position:110% center;
    background-size:60%;
    background-repeat:no-repeat;

    background-attachment:fixed;
}


/* ============================================
   PRELOADER - CINEMATIC TERMINAL BOOT
   ============================================ */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #06070c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
}

/* Terminal Window */
.terminal-window {
    width: 90%;
    max-width: 680px;
    background: rgba(10, 13, 22, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(63, 125, 251, 0.25);
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(63, 125, 251, 0.12),
        inset 0 0 30px rgba(63, 125, 251, 0.03);
    padding: 4px 0 18px 0;
    position: relative;
    overflow: hidden;
}

/* Scanline overlay */
.terminal-window::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.01) 0px,
            rgba(255, 255, 255, 0.01) 2px,
            transparent 2px,
            transparent 6px);
    pointer-events: none;
    z-index: 5;
}

/* Terminal Header */
.term-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.term-dots {
    display: flex;
    gap: 8px;
}

.term-dots span {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3a3f4b;
}
.term-dots span:nth-child(1) {
    background: #ff5f57;
}
.term-dots span:nth-child(2) {
    background: #febc2e;
}
.term-dots span:nth-child(3) {
    background: #2ac840;
}

.term-title {
    color: #5b6175;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 4px;
}

.term-title span {
    color: #3f7dfb;
}

/* Terminal Body */
.term-body {
    padding: 20px 24px 10px 24px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.term-log {
    font-size: 14px;
    line-height: 1.8;
    color: #b0b8c8;
    margin-bottom: 16px;
    min-height: 200px;
}

.term-line {
    opacity: 0;
    transform: translateY(6px);
    animation: termFadeIn 0.3s ease forwards;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

@keyframes termFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.term-line .prefix {
    color: #3f7dfb;
    font-weight: 500;
}

.term-line .text {
    color: #d4dcec;
}

.term-line .status {
    color: #2ac840;
    font-weight: 600;
    margin-left: auto;
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.term-line .status.done {
    opacity: 1;
}

.term-line .highlight {
    color: #8b5cf6;
}

.term-line .glitch-text {
    color: #3f7dfb;
    text-shadow: 0 0 12px rgba(63, 125, 251, 0.4);
    animation: glitchPulse 1.2s ease-in-out infinite alternate;
}

@keyframes glitchPulse {
    0% {
        text-shadow: 0 0 4px rgba(63, 125, 251, 0.2);
    }
    100% {
        text-shadow: 0 0 20px rgba(63, 125, 251, 0.8), 0 0 40px rgba(139, 92, 246, 0.3);
    }
}

/* Progress Bar */
.term-progress-wrap {
    margin-top: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 99px;
    height: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.term-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3f7dfb, #8b5cf6);
    border-radius: 99px;
    transition: width 0.3s ease;
    box-shadow: 0 0 14px rgba(63, 125, 251, 0.3);
}

.term-percent {
    font-size: 12px;
    color: #5b6175;
    margin-top: 10px;
    text-align: right;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Cinematic Flash on exit */
.flash-overlay {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.flash-overlay.active {
    opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {
    .terminal-window {
        max-width: 94%;
    }
    .term-body {
        padding: 16px 16px 8px 16px;
        min-height: 220px;
    }
    .term-log {
        font-size: 12px;
        min-height: 160px;
    }
    .term-header {
        padding: 10px 14px;
    }
    .term-dots span {
        width: 10px;
        height: 10px;
    }
}


.blob{
    width:500px;
    height:500px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
}

.blob img{
    width:100%;
    height:100%;
    object-fit:contain;
}



/* From Uiverse.io by codebykay101 */ 
.container1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container1 .glass {
  position: relative;
  width: 250px;
  height: 300px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 10px;
  margin: 0 -45px;
  backdrop-filter: blur(10px);
  transform: rotate(calc(var(--r) * 1deg));
}

.container1:hover .glass {
  transform: rotate(0deg);
  margin: 0 10px;
}

.container1 .glass::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}


.ico{
    display: flex;
    justify-content: center;
    align-items: center;
}

.ico img{
    width: 2000px;   /* apne hisab se change karo */
    height: 2000px;
    object-fit: contain;
}



.work-thumb{
    width:100%;
    height:300px;
    overflow:hidden;
    border-radius:18px;
    position:relative;
}

.work-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s ease;
}

.work-card:hover .work-thumb img{
    transform:scale(1.08);
}





/* CONTACT */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}

/* -- left: form card -- */
.contact-card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--surface),var(--bg-alt));
  border:1px solid var(--border);border-radius:22px;
  padding:44px 38px;
}
.contact-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.contact-card h2{margin:14px 0 10px;font-size:clamp(24px,3vw,32px);}
.contact-sub{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:28px;
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{position:relative;margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field input, .field textarea{
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:16px 16px 8px;color:var(--text);font-family:var(--body);font-size:14.5px;
  transition:border-color .25s;
}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--accent);}
.field label{
  position:absolute;left:16px;top:15px;color:var(--text-faint);font-size:14.5px;
  pointer-events:none;transition:all .2s ease;
}
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label{
  top:6px;font-size:10.5px;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;
}
.submit-btn{width:100%;justify-content:center;border:none;margin-top:4px;}

.or-divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--text-faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--border);}

.btn-whatsapp{
  width:100%;justify-content:center;gap:10px;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);
}
.btn-whatsapp svg:first-child{width:18px;height:18px;color:#25D366;}
.btn-whatsapp:hover{border-color:#25D366;background:rgba(37,211,102,.08);color:#25D366;transform:translateY(-3px);}
.btn-whatsapp:hover svg{color:#25D366;}

.contact-mini{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border);}
.contact-mini a{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);}
.contact-mini a:hover{color:var(--accent);}
.contact-mini svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;}

/* -- right: globe -- */
.contact-globe-wrap{
  background:#10131f00;border-radius:22px;
  padding:40px 38px;height:100%;
}
.globe-info p{color:var(--text-dim);font-size:15px;margin:10px 0 0;max-width:420px;}
.globe-info h3{font-size:clamp(19px,2.4vw,23px);font-weight:600;font-family:var(--disp);}

.contact-globe-inner{display:flex;align-items:center;gap:40px;margin-top:34px;flex-wrap:wrap;}

.globe-orbit{position:relative;width:500px;height:500px;flex-shrink:0;margin:20px;}
.orbit-ring2{
  position:absolute;inset:0;border:1px dashed var(--border-strong);border-radius:50%;
  animation:spinRing 16s linear infinite;
}
.orbit-ring2.gr1{inset:-16px;}
.orbit-ring2.gr1::after{
  content:'';position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2);
}
.orbit-ring2.gr2{inset:-32px;animation-duration:26s;animation-direction:reverse;opacity:.6;}
.orbit-ring2.gr2::after{
  content:'';position:absolute;bottom:-3px;left:50%;width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);
}
@keyframes spinRing{to{transform:rotate(360deg);}}

/* real world map, wrapped to a circle, scrolling horizontally to fake rotation */
.globe-map-mask{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 32% 28%,#182236,var(--bg-alt) 72%);
  border:1px solid var(--border-strong);
  box-shadow:0 0 70px -8px var(--glow), inset 0 0 44px rgba(0,0,0,.55);
}
.globe-map-track{
  position:absolute;top:50%;left:0;display:flex;height:300px;transform:translateY(-50%);
  animation:scrollGlobe 26s linear infinite;
  will-change:transform;
}
.globe-map-track .world-svg{height:300px;width:auto;flex-shrink:0;display:block;}
.world-svg path, .world-svg g{fill:var(--border-strong);}
.world-svg #in, .world-svg #gb, .world-svg #us, .world-svg #de, .world-svg #sg, .world-svg #au{
  fill:var(--accent);
  animation:mapPulse 2.6s ease-in-out infinite;
}
.world-svg #us{animation-delay:.3s;}
.world-svg #de{fill:var(--accent-2);animation-delay:.6s;}
.world-svg #sg{fill:var(--accent-2);animation-delay:.9s;}
.world-svg #au{animation-delay:1.2s;}
@keyframes mapPulse{0%,100%{opacity:1;}50%{opacity:.55;}}
@keyframes scrollGlobe{from{transform:translateY(-50%) translateX(0);}to{transform:translateY(-50%) translateX(-513px);}}

.globe-shade{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 25%, transparent 40%, rgba(6,7,12,.55) 100%);
}
.globe-grid{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 25%);
}

.tz-list{display:flex;flex-direction:column;gap:12px;flex:1;min-width:220px;}
.tz-row{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
  font-size:13.5px;transition:border-color .25s,transform .25s;
}
.tz-row:hover{border-color:var(--accent);transform:translateX(4px);}
.tz-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 8px var(--glow);}
.tz-name{flex:1;color:var(--text);font-weight:500;}
.tz-off{font-family:var(--mono);font-size:11px;color:var(--text-faint);}














/* =========================================================
   DESTINATIONS SLIDER (#destinations)
   ========================================================= */
.dest-slider{
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 500px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  border-radius: 20px;
  overflow: hidden;
}
.dest-slide{ border-radius: 20px; }
.dest-item{
  width: 200px;
  height: 250px;
  position: absolute;
  top: 50%;
  left: calc(50% + 220px);
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  background-position: 50% 50%;
  background-size: cover;
  transition: all .5s;
}
.dest-slide .dest-item:nth-child(1),
.dest-slide .dest-item:nth-child(2){
  top: 0;
  left: 0;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
  border-radius: 20px;
  transition: all .5s;
}
.dest-slide .dest-item:nth-child(3){ left: 60%; }
.dest-slide .dest-item:nth-child(4){ left: calc(60% + 220px); }
.dest-slide .dest-item:nth-child(n + 5){ left: calc(50% + 440px); opacity: 0; }
.dest-content{
  position: absolute;
  top: 50%;
  left: 60px;
  width: min(300px, calc(100% - 120px));
  text-align: left;
  color: #f2f2f2;
  transform: translate(0, -50%);
  font-family: var(--body);
  display: none;
}
.dest-slide .dest-item:nth-child(2) .dest-content{ display: block; }
.dest-content .dest-name{
  font-family: var(--disp);
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0;
  animation: dest-in .8s ease-in-out 1 forwards;
}
.dest-content .dest-des{
  margin-top: 10px;
  margin-bottom: 20px;
  color: #e6e6e6;
  opacity: 0;
  animation: dest-in .8s ease-in-out .2s 1 forwards;
}
.dest-content button{
  padding: 10px 22px;
  border: none;
  cursor: pointer;
  opacity: 0;
  border-radius: 10px;
  font-family: var(--body);
  font-weight: 600;
  background-color: rgba(255,255,255,.85);
  transition: all .3s;
  animation: dest-in .8s ease-in-out .4s 1 forwards;
}
.dest-content button:hover{ background-color: #fff; transform: translateY(-2px); }
@keyframes dest-in{
  from{ opacity: 0; transform: translate(0, 60px); filter: blur(14px); }
  to{ opacity: 1; transform: translate(0); filter: blur(0); }
}
.dest-nav{
  position: absolute;
  left: 90%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 5;
}
.dest-nav button{
  width: 38px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
  background: rgba(255,255,255,.15);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: .3s;
}
.dest-nav button:hover{ background: rgba(255,255,255,.35); transform: scale(1.08); }
.dest-nav button:active{ transform: scale(1); }
@media (max-width: 640px){
  .dest-slider{ height: 320px; }
  .dest-item{ width: 140px; height: 180px; }
  .dest-slide .dest-item:nth-child(3){ left: 60%; }
  .dest-slide .dest-item:nth-child(4){ left: calc(60% + 150px); opacity: 0; }
  .dest-content{ left: 28px; width: calc(100% - 56px); }
  .dest-content .dest-name{ font-size: 28px; }
}