/* ============================================================
   Nexus Digital — Main Stylesheet
   ============================================================ */

:root {
  --bg:      #080810;
  --surface: #0e0e1a;
  --card:    #13131f;
  --border:  rgba(255,255,255,0.07);
  --accent:  #6c63ff;
  --accent2: #ff6b6b;
  --accent3: #43e97b;
  --text:    #f0f0f8;
  --muted:   #7878a0;
  --glow:    rgba(108,99,255,0.35);
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* ── CURSOR ── */
.cursor {
  width:10px; height:10px; background:var(--accent);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:10000;
  transform:translate(-50%,-50%);
  transition:width .3s,height .3s;
  mix-blend-mode:screen;
}
.cursor-ring {
  width:36px; height:36px;
  border:1.5px solid rgba(108,99,255,.5); border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:10000;
  transform:translate(-50%,-50%);
  transition:width .3s,height .3s;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 60px;
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:blur(20px);
  background:rgba(8,8,16,.8);
  border-bottom:1px solid var(--border);
  transition:padding .3s;
}
.logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:22px;
  letter-spacing:-.5px; color:var(--text); text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.logo img { max-height:40px; width:auto; }
.logo-dot {
  width:8px; height:8px; background:var(--accent);
  border-radius:50%; display:inline-block;
  box-shadow:0 0 12px var(--accent);
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7} }

.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  color:var(--muted); text-decoration:none;
  font-size:14px; font-weight:500; letter-spacing:.3px;
  transition:color .25s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--accent); transition:width .3s;
}
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }
.nav-links .nav-cta {
  background:var(--accent); color:#fff!important;
  padding:10px 22px; border-radius:6px; font-weight:500;
  transition:background .25s,box-shadow .25s!important;
}
.nav-links .nav-cta::after { display:none!important; }
.nav-links .nav-cta:hover { background:#7c74ff!important; box-shadow:0 0 24px var(--glow); }

/* Mobile nav drawer */
.nav-drawer {
  display:none; position:fixed; top:0; right:0; bottom:0; width:260px;
  background:var(--surface); border-left:1px solid var(--border);
  z-index:200; padding:80px 32px 32px; flex-direction:column; gap:24px;
}
.nav-drawer.open { display:flex; }
.nav-drawer a { color:var(--text); text-decoration:none; font-size:18px; font-weight:500; }
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; }
.nav-overlay.open { display:block; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:24px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; }

/* ── HERO ── */
.hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; padding:120px 60px 80px; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(108,99,255,.18) 0%,transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 60%,rgba(255,107,107,.10) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 70%,rgba(67,233,123,.08) 0%,transparent 60%);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(108,99,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(108,99,255,.05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 50% 50%,black 30%,transparent 70%);
}
.hero-content { position:relative; z-index:2; text-align:center; max-width:860px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(108,99,255,.12); border:1px solid rgba(108,99,255,.3);
  border-radius:100px; padding:6px 18px;
  font-size:12px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:32px;
  animation:fadeDown .8s ease both;
}
h1 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(44px,7vw,84px); line-height:1.05;
  letter-spacing:-2px; margin-bottom:28px;
  animation:fadeUp .9s .2s ease both;
}
.gradient-text {
  background:linear-gradient(135deg,#6c63ff 0%,#a78bfa 40%,#ff6b6b 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub {
  font-size:18px; color:var(--muted); max-width:540px; margin:0 auto 48px;
  font-weight:300; line-height:1.7; animation:fadeUp .9s .35s ease both;
}
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:fadeUp .9s .5s ease both; }
.hero-stats {
  position:absolute; bottom:10%; left:50%; transform:translateX(-50%);
  display:flex; gap:24px; animation:fadeUp .9s .7s ease both; z-index:2; flex-wrap:wrap; justify-content:center;
}
.stat-pill {
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:100px; padding:12px 24px;
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted); backdrop-filter:blur(12px);
}
.stat-pill strong { color:var(--text); font-size:18px; font-family:'Syne',sans-serif; font-weight:700; }

.orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.orb-1 { width:400px;height:400px;background:rgba(108,99,255,.15);top:-100px;left:-100px;animation:float1 8s infinite ease-in-out; }
.orb-2 { width:300px;height:300px;background:rgba(255,107,107,.10);bottom:-50px;right:-50px;animation:float2 10s infinite ease-in-out; }
.orb-3 { width:250px;height:250px;background:rgba(67,233,123,.08);bottom:20%;left:5%;animation:float3 12s infinite ease-in-out; }
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,15px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-20px)}}

/* ── MARQUEE ── */
.marquee-section {
  padding:28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden; background:var(--surface);
}
.marquee-track { display:flex; width:max-content; animation:marquee 22s linear infinite; }
.marquee-item {
  display:flex; align-items:center; gap:14px; padding:0 40px;
  color:var(--muted); font-size:13px; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap;
}
.marquee-item span { color:var(--accent); font-size:18px; }
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTIONS ── */
section { padding:100px 60px; }
.section-label { font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; display:block; }
.section-title { font-family:'Syne',sans-serif; font-weight:700; font-size:clamp(32px,4vw,52px); letter-spacing:-1.5px; line-height:1.1; margin-bottom:20px; }
.section-desc { color:var(--muted); font-size:17px; max-width:500px; line-height:1.7; font-weight:300; }
.section-header { margin-bottom:64px; }

/* ── SERVICES ── */
#services { background:var(--surface); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.service-card { background:var(--card); padding:44px 40px; transition:background .3s; position:relative; overflow:hidden; cursor:default; }
.service-card::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.service-card:hover { background:#161626; }
.service-card:hover::before { transform:scaleX(1); }
.service-icon { width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:24px; }
.icon-purple{background:rgba(108,99,255,.15)}.icon-red{background:rgba(255,107,107,.12)}.icon-green{background:rgba(67,233,123,.10)}.icon-orange{background:rgba(255,180,0,.10)}.icon-blue{background:rgba(56,189,248,.10)}.icon-pink{background:rgba(236,72,153,.10)}
.service-tag { font-size:10px;letter-spacing:2px;font-weight:600;text-transform:uppercase;color:var(--muted);margin-bottom:12px; }
.service-card h3 { font-family:'Syne',sans-serif;font-size:20px;font-weight:700;margin-bottom:12px;letter-spacing:-.3px; }
.service-card p { color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:24px; }
.service-features { list-style:none;display:flex;flex-direction:column;gap:8px; }
.service-features li { font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px; }
.service-features li::before { content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0; }
.service-arrow { position:absolute;bottom:28px;right:28px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;transition:all .3s; }
.service-card:hover .service-arrow { background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg); }

/* ── PROCESS ── */
#process { position:relative; }
.process-steps { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;position:relative; }
.process-steps::before { content:'';position:absolute;top:32px;left:60px;right:60px;height:1px;background:linear-gradient(90deg,transparent,var(--border),var(--border),transparent); }
.process-step { padding:0 32px 40px; }
.step-number { width:64px;height:64px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--accent);margin-bottom:28px;position:relative;z-index:1; }
.process-step h3 { font-family:'Syne',sans-serif;font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-.3px; }
.process-step p { color:var(--muted);font-size:14px;line-height:1.7; }

/* ── PORTFOLIO ── */
.portfolio-grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px; }
.port-card { background:var(--card);border-radius:12px;overflow:hidden;position:relative;cursor:pointer;transition:transform .3s; }
.port-card:hover { transform:scale(1.02); }
.port-card:nth-child(1){grid-column:span 7}
.port-card:nth-child(2){grid-column:span 5}
.port-card:nth-child(3){grid-column:span 4}
.port-card:nth-child(4){grid-column:span 8}
.port-visual { height:220px;position:relative;overflow:hidden; }
.port-card:nth-child(1) .port-visual{height:280px}
.port-card:nth-child(4) .port-visual{height:260px}
.port-bg { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:80px;transition:transform .5s; }
.port-card:hover .port-bg { transform:scale(1.1); }
.v1{background:linear-gradient(135deg,#1a1a35 0%,#0d0d20 100%)}
.v2{background:linear-gradient(135deg,#1a0d0d 0%,#200d0d 100%)}
.v3{background:linear-gradient(135deg,#0d1a0d 0%,#0d200d 100%)}
.v4{background:linear-gradient(135deg,#0d1020 0%,#121825 100%)}
.mock-ui { position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:20px; }
.mock-bar { height:10px;border-radius:5px;background:rgba(255,255,255,.05); }
.mock-bar.accent { background:rgba(108,99,255,.3);width:60%; }
.mock-row { display:flex;gap:8px; }
.mock-box { height:60px;flex:1;border-radius:8px;background:rgba(255,255,255,.04); }
.mock-box.hl { background:rgba(108,99,255,.15); }
.port-info { padding:22px 24px; }
.port-tag { font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px; }
.port-info h3 { font-family:'Syne',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.2px; }

/* ── PRICING ── */
.pricing-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1000px;margin:0 auto; }
.pricing-card { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:40px 36px;position:relative;transition:border-color .3s,transform .3s; }
.pricing-card:hover { border-color:rgba(108,99,255,.4);transform:translateY(-4px); }
.pricing-card.featured { border-color:var(--accent);background:linear-gradient(135deg,rgba(108,99,255,.1) 0%,var(--card) 100%); }
.pricing-badge { position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:5px 16px;border-radius:100px; }
.pricing-plan { font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:16px; }
.pricing-price { font-family:'Syne',sans-serif;font-size:52px;font-weight:800;letter-spacing:-2px;margin-bottom:6px; }
.pricing-price span { font-size:22px;vertical-align:top;margin-top:12px;display:inline-block; }
.pricing-note { font-size:13px;color:var(--muted);margin-bottom:28px; }
.pricing-feats { list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:36px; }
.pricing-feats li { font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px; }
.pricing-feats li svg { flex-shrink:0; }
.btn-pricing { width:100%;padding:14px;border-radius:8px;font-weight:500;font-size:14px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text);transition:all .25s;font-family:'DM Sans',sans-serif;letter-spacing:.2px; }
.btn-pricing:hover { border-color:var(--accent);color:var(--accent); }
.pricing-card.featured .btn-pricing { background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 30px rgba(108,99,255,.35); }
.pricing-card.featured .btn-pricing:hover { background:#7c74ff; }

/* ── TESTIMONIALS ── */
.testimonials-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px; }
.testi-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s; }
.testi-card:hover { border-color:rgba(108,99,255,.25); }
.stars { color:#f59e0b;font-size:14px;margin-bottom:18px;letter-spacing:2px; }
.testi-text { font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:28px;font-style:italic;font-weight:300; }
.testi-author { display:flex;align-items:center;gap:14px; }
.avatar { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.testi-name { font-weight:600;font-size:14px; }
.testi-role { font-size:12px;color:var(--muted); }

/* ── CTA ── */
.cta-section { position:relative;overflow:hidden;text-align:center;padding:120px 60px; }
.cta-section::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(108,99,255,.15) 0%,transparent 70%); }
.cta-section .section-title { font-size:clamp(36px,5vw,64px);margin-bottom:20px; }
.cta-section .section-desc { margin:0 auto 48px;max-width:480px; }
.cta-btns { display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;z-index:2; }
.cta-section .section-title,.cta-section .section-desc { position:relative;z-index:2; }

/* ── CONTACT FORM ── */
.contact-form { display:flex;flex-direction:column;gap:14px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:14px 16px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:14px;
  transition:border-color .25s;outline:none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color:var(--accent); }
.contact-form select option { background:var(--card); }
.contact-form textarea { resize:vertical; }
#formMsg.success { color:var(--accent3); }
#formMsg.error   { color:var(--accent2); }

/* ── BUTTONS ── */
.btn-primary { background:var(--accent);color:#fff;padding:16px 36px;border-radius:8px;font-weight:500;font-size:15px;text-decoration:none;letter-spacing:.2px;box-shadow:0 0 40px rgba(108,99,255,.4);transition:transform .25s,box-shadow .25s;display:inline-block; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 50px rgba(108,99,255,.55);color:#fff; }
.btn-outline { background:transparent;color:var(--text);padding:16px 36px;border-radius:8px;border:1px solid var(--border);font-weight:500;font-size:15px;text-decoration:none;transition:border-color .25s,background .25s;display:inline-block; }
.btn-outline:hover { border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:var(--text); }

/* ── FOOTER ── */
#site-footer { padding:60px 60px 40px;border-top:1px solid var(--border);background:var(--surface); }
.footer-top { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px; }
.footer-brand p { color:var(--muted);font-size:14px;line-height:1.7;margin-top:16px;max-width:300px; }
.footer-col h4 { font-family:'Syne',sans-serif;font-size:14px;font-weight:700;margin-bottom:20px; }
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:10px; }
.footer-col a { color:var(--muted);text-decoration:none;font-size:14px;transition:color .25s; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:28px;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:12px; }
.social-links { display:flex;gap:12px; }
.social-btn { width:36px;height:36px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:14px;transition:all .25s; }
.social-btn:hover { border-color:var(--accent);color:var(--accent);background:rgba(108,99,255,.08); }

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav { padding:18px 24px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  section { padding:70px 24px; }
  .hero { padding:110px 24px 120px; }
  .hero-stats { position:relative;bottom:auto;left:auto;transform:none;margin-top:48px; }
  .footer-top { grid-template-columns:1fr 1fr;gap:32px; }
  #site-footer { padding:48px 24px 32px; }
  .process-steps::before { display:none; }
  .portfolio-grid { grid-template-columns:1fr; }
  .port-card:nth-child(n){ grid-column:span 1; }
  .port-visual,.port-card:nth-child(1) .port-visual,.port-card:nth-child(4) .port-visual { height:180px; }
  .form-row { grid-template-columns:1fr; }
}
@media(max-width:600px){
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column;text-align:center; }
  .pricing-grid { grid-template-columns:1fr; }
}