/*
Theme Name: Nebula Portfolio
Theme URI: https://mohammad-almasri.code4y.com/
Author: Mohammad Al-Masri
Description: A premium, motion-led portfolio theme for web designers and WordPress developers.
Version: 1.0.0
Text Domain: nebula-portfolio
*/

:root { --ink:#070b18; --ink-2:#0d1225; --panel:rgba(20,27,55,.62); --line:rgba(255,255,255,.12); --text:#f6f5ff; --muted:#aeb4d0; --violet:#9d7cff; --cyan:#44d9ff; --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.np-noise { position:fixed; inset:0; opacity:.045; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.np-orb { position:absolute; border-radius:999px; filter:blur(4px); pointer-events:none; }
.orb-one { width:36rem;height:36rem;right:-14rem;top:4rem;background:radial-gradient(circle,#7357ee 0,rgba(115,87,238,0) 68%);opacity:.45; }
.orb-two { width:30rem;height:30rem;left:-13rem;top:43rem;background:radial-gradient(circle,#086b91 0,rgba(8,107,145,0) 69%);opacity:.35; }
.np-wrap { width:min(1160px,calc(100% - 40px)); margin:auto; position:relative; }
.np-header { position:fixed; z-index:20; top:0; left:0; right:0; padding:20px 0; transition:.3s; }
.np-header.is-scrolled { background:rgba(7,11,24,.78); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); padding:13px 0; }
.np-nav { display:flex; justify-content:space-between; align-items:center; }
.np-brand { font-size:1.05rem; font-weight:800; letter-spacing:-.04em; }
.np-brand span { color:var(--violet); }
.np-menu { display:flex; gap:25px; list-style:none; padding:0; margin:0; font-size:.86rem; color:var(--muted); }
.np-menu a:hover { color:#fff; }
.np-menu-toggle { display:none; background:none; border:0; color:#fff; font-size:1.5rem; }
.np-hero { min-height:100vh; display:grid; align-items:center; padding:130px 0 70px; }
.np-hero-grid { display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:60px; }
.np-kicker { display:inline-flex; gap:9px; align-items:center; color:#c8c2ec; text-transform:uppercase; font-size:.73rem; letter-spacing:.14em; font-weight:700; }
.np-kicker:before { content:""; height:8px; width:8px; border-radius:100%; background:#7ff3b5; box-shadow:0 0 16px #7ff3b5; }
h1 { font-size:clamp(3.1rem,6.5vw,6.4rem); letter-spacing:-.08em; line-height:.92; margin:22px 0; max-width:720px; }
.np-gradient { background:linear-gradient(120deg,#fff 10%,#bfa9ff 50%,#5ee3ff); -webkit-background-clip:text; color:transparent; }
.np-lead { max-width:540px; color:var(--muted); font-size:1.08rem; line-height:1.8; }
.np-actions { display:flex; gap:13px; flex-wrap:wrap; margin-top:32px; }
.np-btn { padding:14px 21px; border-radius:999px; font-size:.9rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition:transform .25s,box-shadow .25s,background .25s; }
.np-btn:hover { transform:translateY(-3px); }
.np-btn-primary { background:linear-gradient(115deg,var(--violet),#6b87ff); box-shadow:0 12px 35px rgba(118,94,255,.35); }
.np-btn-secondary { border:1px solid var(--line); color:#e8e5fa; background:rgba(255,255,255,.03); }
.np-stack { margin-top:45px; display:flex; gap:20px; color:var(--muted); font-size:.8rem; }
.np-stack strong { display:block; color:#fff; font-size:1.2rem; }
.np-scene { min-height:470px; perspective:1200px; position:relative; display:grid; place-items:center; }
.np-browser { width:min(100%,460px); aspect-ratio:1.1; border:1px solid rgba(255,255,255,.25); border-radius:26px; background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.025)); box-shadow:30px 35px 80px rgba(0,0,0,.48),-20px -20px 80px rgba(109,72,255,.14); backdrop-filter:blur(16px); transform:rotateY(-14deg) rotateX(9deg); transition:transform .5s ease; overflow:hidden; }
.np-browser:hover { transform:rotateY(-4deg) rotateX(3deg) translateY(-8px); }
.np-dots { height:46px; padding:17px; display:flex; gap:7px; border-bottom:1px solid var(--line); }
.np-dots i { width:8px;height:8px;border-radius:100%;background:#ff7297; }.np-dots i:nth-child(2){background:#ffc96b}.np-dots i:nth-child(3){background:#7cf2bd}
.np-browser-body { padding:22px; height:calc(100% - 46px); background:linear-gradient(145deg,#121a3b,#18245a 52%,#4c3f91); position:relative; overflow:hidden; }
.np-browser-body:after { content:"</>"; position:absolute; font-size:12rem; line-height:1; font-weight:900; color:rgba(255,255,255,.08); right:-25px; bottom:-45px; letter-spacing:-.18em; }
.np-portrait { position:absolute;z-index:2;width:155px;height:175px;object-fit:cover;object-position:center top;right:28px;bottom:17px;border-radius:18px 18px 4px 4px;border:1px solid rgba(255,255,255,.24);box-shadow:0 18px 35px rgba(0,0,0,.32);filter:saturate(1.08) contrast(1.05); }
.np-ui-title { font-size:.72rem; letter-spacing:.18em; color:#bbaeff; text-transform:uppercase; }.np-ui-line { height:12px;border-radius:99px;background:rgba(255,255,255,.15);margin-top:18px;width:58%; }.np-ui-line.short { width:38%; }.np-ui-card { margin-top:30px; height:155px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:linear-gradient(135deg,rgba(118,95,255,.88),rgba(65,211,252,.52)); }
.np-float { position:absolute; padding:13px 16px; border-radius:15px; border:1px solid var(--line); background:rgba(16,20,43,.78); backdrop-filter:blur(14px); font-size:.76rem; font-weight:700; box-shadow:0 18px 35px rgba(0,0,0,.25); animation:float 5s ease-in-out infinite; }.float-top { right:-10px;top:60px; }.float-bottom { left:-18px;bottom:65px;animation-delay:-2.4s; }.np-float b { color:#81f6c1; }
@keyframes float { 50% { transform:translateY(-13px); } }
.np-section { padding:110px 0; position:relative; }.np-label { color:var(--cyan); text-transform:uppercase; font-weight:800; letter-spacing:.16em; font-size:.72rem; }.np-title { font-size:clamp(2.2rem,4vw,4rem); margin:15px 0 18px; letter-spacing:-.065em; line-height:1; }.np-intro { color:var(--muted); max-width:580px; line-height:1.75; }
.np-services { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px; }.np-service { padding:30px; min-height:255px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); transition:transform .3s,border-color .3s; }.np-service:hover { transform:translateY(-8px);border-color:rgba(157,124,255,.7); }.np-icon { display:grid;place-items:center;width:44px;height:44px;background:rgba(157,124,255,.15);color:#c9baff;border-radius:13px;font-size:1.2rem; }.np-service h3 { margin:26px 0 12px;font-size:1.25rem;letter-spacing:-.04em; }.np-service p { color:var(--muted);font-size:.92rem;line-height:1.7; }
.np-work-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:46px; }.np-work { overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:#10162c;min-height:360px;position:relative;transition:transform .3s,border-color .3s,box-shadow .3s; }.np-work:hover { transform:translateY(-8px);border-color:rgba(159,137,255,.58);box-shadow:0 24px 60px rgba(0,0,0,.25); }.np-work-visual { height:245px;background:var(--work-bg,linear-gradient(135deg,#7c55d9,#282d68));padding:25px;position:relative;overflow:hidden; }.np-work-visual:after { content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-45px;bottom:-70px;background:radial-gradient(circle,rgba(255,255,255,.42),transparent 67%); }.np-work-ui { height:100%;border-radius:14px;background:rgba(11,15,35,.78);border:1px solid rgba(255,255,255,.18);padding:20px;position:relative;z-index:1; }.np-work-ui:before,.np-work-ui:after { content:"";display:block;height:12px;border-radius:99px;background:rgba(255,255,255,.18);margin-bottom:12px; }.np-work-ui:after { width:53%; }.np-work-ui strong { display:block;font-size:clamp(1.15rem,2vw,1.8rem);letter-spacing:-.05em;line-height:1.05;margin-top:45px;max-width:85%; }.np-work-ui small { display:block;color:rgba(255,255,255,.68);margin-top:8px;font-size:.72rem; }.np-work-info { padding:22px 25px 25px;display:flex;justify-content:space-between;align-items:center;gap:15px; }.np-work-info h3 { margin:0 0 7px;font-size:1.2rem;letter-spacing:-.04em; }.np-work-info span { color:var(--muted);font-size:.8rem;line-height:1.5;display:block; }.np-work-arrow { flex:0 0 auto;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line); }.np-work-meta { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:27px;color:var(--muted);font-size:.8rem; }.np-work-count { display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--line);border-radius:50%;color:#fff;font-weight:800;font-size:.72rem; }.np-work-more { margin:34px auto 0;text-align:center;color:var(--muted);font-size:.88rem; }.np-work-more b{color:#fff;}
.np-image-break { padding:10px 0 105px; }.np-image-break-inner { min-height:360px;border-radius:30px;overflow:hidden;position:relative;display:flex;align-items:end;padding:38px;background:linear-gradient(90deg,rgba(7,11,24,.92),rgba(7,11,24,.13)),url('https://images.unsplash.com/photo-1596949469909-5217f8b68f23?auto=format&fit=crop&w=1800&q=85') center/cover; border:1px solid var(--line); }.np-image-break-inner:before { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(7,11,24,.5)); }.np-image-break-copy { position:relative;max-width:500px; }.np-image-break-copy p { color:#d4d8eb;max-width:430px;line-height:1.7;margin:0; }.np-image-break-copy strong { display:block;font-size:1.6rem;letter-spacing:-.05em;margin-bottom:11px; }
.np-contact { padding:100px 0; }.np-contact-box { border-radius:32px;padding:clamp(32px,6vw,75px);background:radial-gradient(circle at 80% 10%,rgba(91,93,255,.58),transparent 38%),linear-gradient(130deg,#20265b,#100f2b);border:1px solid rgba(255,255,255,.16);text-align:center; }.np-contact-box .np-title { max-width:750px;margin:17px auto 22px; }.np-contact-box p { color:#c8c9df;max-width:530px;margin:0 auto 29px;line-height:1.7; }
.np-footer { padding:35px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem; }.np-footer-inner { display:flex;justify-content:space-between;gap:20px; }.np-footer a { color:#d5d2ed; }
@media(max-width:800px) { .np-menu { display:none;position:absolute;top:63px;left:0;right:0;background:#10152a;border:1px solid var(--line);border-radius:16px;padding:18px;flex-direction:column;gap:15px; }.np-menu.is-open { display:flex; }.np-menu-toggle { display:block; }.np-hero { padding-top:115px; }.np-hero-grid { grid-template-columns:1fr;gap:25px; }.np-scene { min-height:360px;order:-1; }.np-browser { width:min(90%,390px); }.np-services { grid-template-columns:1fr; }.np-work-grid { grid-template-columns:1fr; }.np-stack { margin-top:30px; }.np-section { padding:80px 0; }.np-image-break { padding-bottom:75px; }.np-image-break-inner { min-height:330px;padding:27px;background-position:65% center; }.np-footer-inner { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; } }