:root{--bg:#09030f;--panel:rgba(31,10,55,.78);--text:#fffaff;--muted:#d1bfe5;--line:rgba(210,165,255,.18);--purple:#b45cff;--cyan:#d16cff;--shadow:0 28px 80px rgba(0,0,0,.25)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{--mx:50%;--my:40%;margin:0;background:radial-gradient(circle at 20% 15%,rgba(139,113,255,.13),transparent 28%),radial-gradient(circle at 80% 35%,rgba(87,216,255,.08),transparent 30%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6;overflow-x:hidden;transition:.35s}body.light{--bg:#f4f5fb;--panel:rgba(255,255,255,.84);--text:#17192a;--muted:#68708a;--line:rgba(42,46,78,.13);--purple:#8068df;--cyan:#2ca4c8;--shadow:0 25px 70px rgba(50,48,90,.12);background:radial-gradient(circle at 20% 15%,rgba(154,130,255,.18),transparent 28%),radial-gradient(circle at 82% 30%,rgba(86,211,238,.14),transparent 30%),var(--bg)}a{color:inherit;text-decoration:none}.section-shell{width:min(calc(100% - 40px),1180px);margin:auto}.site-header{position:sticky;top:12px;z-index:20;width:min(calc(100% - 28px),1220px);margin:12px auto 0;padding:9px 12px 9px 18px;border:1px solid var(--line);border-radius:999px;background:var(--panel);backdrop-filter:blur(18px);display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:850}.brand em{font-style:normal;color:var(--muted);font-weight:600}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:50%;color:var(--purple)}nav{display:flex;gap:3px;margin:auto}nav a{padding:9px 13px;border-radius:999px;color:var(--muted);font-size:.84rem}nav a:hover,nav a.active{background:rgba(184,167,255,.1);color:var(--text)}.theme-toggle{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.035);color:var(--text);display:flex;gap:7px;align-items:center;cursor:pointer;font-size:.77rem}.hero{min-height:740px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:45px;padding:90px 0}.eyebrow{margin:0 0 14px;color:var(--purple);font-size:.68rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}.hero h1{font-size:clamp(3.4rem,7vw,6.4rem);line-height:.94;letter-spacing:-.06em;margin:0 0 22px}.gradient-text{background:linear-gradient(110deg,var(--text),var(--purple),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p:not(.eyebrow){color:var(--muted);font-size:1.08rem;max-width:600px}.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:0 19px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;font-weight:800}.primary{background:linear-gradient(110deg,var(--purple),var(--pink));color:#111326;border:0}.secondary{background:rgba(255,255,255,.03)}.browser{border:1px solid var(--line);border-radius:32px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);transform:rotate(1deg)}.bar{height:43px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px}.bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}.bar small{margin-left:auto;color:var(--muted);font-size:.62rem}.mock{height:410px;position:relative;overflow:hidden;background:linear-gradient(145deg,#0c1025,#171d42)}.mocknav{position:absolute;top:22px;left:25px;right:25px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:99px;display:flex;align-items:center;padding:0 12px;color:#fff;font-weight:800;font-size:.75rem}.mocknav span{color:#a99cff;margin-left:4px}.mocknav b{width:38px;height:5px;background:rgba(255,255,255,.16);border-radius:99px;margin-left:10px}.mocknav b:first-of-type{margin-left:auto}.mockcopy{position:absolute;left:42px;top:120px;color:#fff}.mockcopy small{font-size:.48rem;letter-spacing:.2em;color:#b9aaff}.mockcopy strong{display:block;margin-top:12px;font-size:2.7rem;line-height:.94;letter-spacing:-.06em}.mockcopy strong span{color:#c5a9ff}.mockcopy em{display:block;width:86px;height:27px;border-radius:99px;background:linear-gradient(110deg,#b45cff,#c06cff);margin-top:22px}.mockmoon{position:absolute;width:260px;height:260px;border-radius:50%;right:-35px;bottom:-70px;background:radial-gradient(circle at 32% 28%,#fff,#c8c5ef 48%,#8978c8);box-shadow:0 0 70px rgba(177,155,255,.3)}.strip{border-block:1px solid var(--line);overflow:hidden}.strip div{width:max-content;display:flex;gap:25px;padding:15px 0;color:var(--muted);font-size:.65rem;letter-spacing:.16em;animation:ticker 25s linear infinite}.strip b{color:var(--purple)}.heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.heading h2{margin:0;font-size:clamp(2.5rem,5vw,4.5rem);line-height:.98;letter-spacing:-.055em}.heading>p{max-width:410px;color:var(--muted)}.work,.services,.reviews,.contact{padding:125px 0}.projects,.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.project,.service,.review{border:1px solid var(--line);border-radius:30px;background:var(--panel);overflow:hidden}.project img{width:100%;display:block;aspect-ratio:1.25;object-fit:cover;border-bottom:1px solid var(--line)}.project div{padding:20px}.project small,.service small{color:var(--purple);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800}.project h3{margin:6px 0;font-size:1.25rem}.project p,.service p{margin:0;color:var(--muted);font-size:.82rem}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.service{padding:27px;min-height:235px}.service h3{margin:34px 0 8px}.review{padding:28px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}.review>span{color:#a994ff;letter-spacing:.15em}.review blockquote{font-size:1.08rem;line-height:1.3}.review footer{display:grid}.review small{color:var(--muted);font-size:.67rem}.contact-card{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:clamp(30px,6vw,65px);border:1px solid var(--line);border-radius:35px;background:var(--panel);box-shadow:var(--shadow)}.contact-card h2{margin:0;font-size:clamp(2.5rem,5vw,4.5rem);line-height:.98}.contact-card p:not(.eyebrow){color:var(--muted)}.footer{padding:34px 0 46px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:end}.footer p{margin:7px 0 0;color:var(--muted);font-size:.75rem}.footer-links{display:flex;gap:17px}.footer-links a{font-size:.75rem;color:var(--muted)}.footer>p{text-align:right}.reveal{opacity:0;transform:translateY(20px);transition:.7s}.reveal.visible{opacity:1;transform:none}@keyframes ticker{to{transform:translateX(-50%)}}@media(max-width:900px){nav{display:none}.hero{grid-template-columns:1fr}.browser{order:-1}.projects,.review-grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr 1fr}.contact-card{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.section-shell{width:calc(100% - 28px)}.hero{padding:70px 0}.projects,.review-grid,.service-grid{grid-template-columns:1fr}.mock{height:330px}.mockcopy{left:28px;top:100px}.mockcopy strong{font-size:2.1rem}.heading{display:block}.heading>p{margin-top:17px}.work,.services,.reviews,.contact{padding:90px 0}.footer{grid-template-columns:1fr}.footer>p{text-align:left}}

/* Small human-feeling details */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle 180px at var(--mx) var(--my),rgba(184,167,255,.08),transparent 72%);
  opacity:.9;
}
.light body::before{opacity:.45}
.site-header{animation:headerIn .7s cubic-bezier(.2,.8,.2,1) both}
.portal-card:nth-child(2){transition-delay:.04s}
.portal-card:nth-child(3){transition-delay:.08s}
.portal-card:nth-child(4){transition-delay:.12s}
.portal-card::after{
  content:"";
  position:absolute;
  width:90px;height:90px;border-radius:50%;
  right:-45px;top:-45px;
  background:rgba(184,167,255,.09);
  transition:transform .5s ease,opacity .5s ease;
  pointer-events:none;
}
.portal-card:hover::after{transform:scale(1.9);opacity:.35}
.portal-card{position:relative;overflow:hidden}
@keyframes headerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}
.star-speck{
  position:fixed;
  width:3px;height:3px;border-radius:50%;
  background:currentColor;
  color:var(--purple);
  pointer-events:none;
  z-index:-1;
  animation:twinkle var(--twinkle,4s) ease-in-out infinite;
}

body.light .portal-card,
body.light .info-card,
body.light .review,
body.light .contact-card,
body.light .project,
body.light .service,
body.light .client-review,
body.light .browser-demo{
  border-color:rgba(36,40,64,.16);
  box-shadow:0 20px 55px rgba(38,42,69,.10);
}
body.light .portal-card:hover,
body.light .project:hover{
  border-color:rgba(112,86,216,.38);
}
body.light .nav-link:hover,
body.light .nav-link.active{
  background:rgba(115,88,216,.10);
}
body.light .secondary,
body.light .theme-toggle{
  background:rgba(255,255,255,.42);
}
body:not(.light) .hero-lead,
body:not(.light) .section-heading>p,
body:not(.light) .about-copy>p:not(.eyebrow),
body:not(.light) .info-copy>p:not(.eyebrow){
  color:#c6c9dc;
}

/* Purple-only visual system */
:root{
  --accent-purple:#9b7bea;
  --accent-purple-light:#c4a9ff;
  --accent-purple-deep:#6848c7;
}
body{
  background-image:
    radial-gradient(circle at 18% 15%,rgba(126,86,214,.14),transparent 28%),
    radial-gradient(circle at 84% 36%,rgba(191,130,255,.10),transparent 30%),
    var(--bg);
}
body.light{
  background-image:
    radial-gradient(circle at 18% 15%,rgba(126,86,214,.12),transparent 28%),
    radial-gradient(circle at 84% 36%,rgba(190,139,245,.10),transparent 30%),
    var(--bg);
}

.review-viewport{touch-action:pan-y;cursor:grab}
.review-viewport:active{cursor:grabbing}
.slider-progress{height:3px;margin:14px auto 0;width:min(260px,60%);border-radius:99px;background:var(--line);overflow:hidden}
.slider-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#8b2be2,#b45cff,#ed8cff);border-radius:99px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.dot{transition:width .3s ease,background .3s ease,transform .3s ease}
.dot:hover{transform:scale(1.3)}
.dot.active{background:var(--purple);box-shadow:0 0 14px rgba(155,123,234,.35)}
.slider-button{transition:transform .22s ease,background .22s ease,border-color .22s ease}
.slider-button:hover{transform:translateY(-2px) scale(1.05);background:rgba(155,123,234,.12);border-color:rgba(155,123,234,.38)}

.web-review-shell{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.web-review-viewport{overflow:hidden;border-radius:30px;touch-action:pan-y;cursor:grab}
.web-review-viewport:active{cursor:grabbing}
.web-review-track{display:flex;transition:transform .58s cubic-bezier(.22,.75,.18,1)}
.web-review-track .client-review{flex:0 0 100%;min-height:300px}
.web-reviews .dots{margin-top:18px}
@media(max-width:560px){.web-review-shell{grid-template-columns:1fr}.web-review-shell>.slider-button{display:none}}

/* FINAL NUVella PURE-PURPLE THEME */
:root{
  --purple:#b45cff;
  --violet:#7c22ce;
  --magenta:#ed8cff;
  --purple-glow:rgba(180,92,255,.42);
}
body{
  background:
    radial-gradient(circle at 18% 12%,rgba(180,92,255,.22),transparent 27%),
    radial-gradient(circle at 84% 30%,rgba(124,34,206,.18),transparent 32%),
    linear-gradient(135deg,#09030f 0%,#13051f 48%,#23083b 100%);
}
body.light{
  --bg:#f0e4ff;--panel:rgba(255,250,255,.88);--panel2:#fffaff;
  --text:#24102f;--muted:#593f68;--line:rgba(106,44,145,.18);
  --purple:#7c22ce;--violet:#5b159c;--magenta:#a855f7;
  background:
    radial-gradient(circle at 18% 12%,rgba(168,85,247,.18),transparent 27%),
    radial-gradient(circle at 82% 30%,rgba(124,34,206,.12),transparent 32%),
    linear-gradient(135deg,#faf5ff 0%,#f1ddff 48%,#e5c5ff 100%);
}
.gradient-text{
  background:linear-gradient(110deg,var(--text),var(--purple),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.primary{
  background:linear-gradient(110deg,#8b2be2,#b45cff,#ed8cff);
  color:#fff;
  box-shadow:0 12px 38px rgba(168,85,247,.34),0 0 28px rgba(192,92,255,.18);
}
body.light .primary{color:#fff;box-shadow:0 12px 32px rgba(124,34,206,.22),0 0 24px rgba(168,85,247,.15)}
.portal-card:hover,.project:hover{
  box-shadow:0 28px 80px rgba(102,32,155,.20),0 0 34px rgba(180,92,255,.10);
}
.moon{box-shadow:0 0 55px rgba(236,190,255,.34),0 0 150px rgba(168,85,247,.30)}
.ambient-one{background:#a855f7!important}.ambient-two{background:#7c22ce!important}
body::before{background:radial-gradient(circle 190px at var(--mx) var(--my),rgba(180,92,255,.14),transparent 72%)}
.slider-progress span{background:linear-gradient(90deg,#8b2be2,#b45cff,#ed8cff)}
.dot.active{background:#b45cff;box-shadow:0 0 16px rgba(180,92,255,.55)}
.slider-button:hover{background:rgba(180,92,255,.14);border-color:rgba(180,92,255,.42);box-shadow:0 0 20px rgba(180,92,255,.12)}

/* FINAL UX / CONTRAST / MOTION PASS */
body.light{
  color:#24102f;
}
body.light p,
body.light .hero-lead,
body.light .section-heading p,
body.light .portal-card p,
body.light .portal-link,
body.light .muted,
body.light small{
  color:#4b3158;
}
body.light h1,body.light h2,body.light h3,body.light h4,
body.light .nav-link,body.light .logo,body.light .eyebrow{
  color:#24102f;
}
body:not(.light){
  color:#fffaff;
}
body:not(.light) p,
body:not(.light) .hero-lead,
body:not(.light) .section-heading p,
body:not(.light) .portal-card p,
body:not(.light) .muted,
body:not(.light) small{
  color:#d9cce6;
}
body:not(.light) h1,body:not(.light) h2,body:not(.light) h3,body:not(.light) h4,
body:not(.light) .nav-link,body:not(.light) .logo,body:not(.light) .eyebrow{
  color:#fffaff;
}

/* The third portal is deliberately non-clickable. */
.portal-coming{
  cursor:default;
  opacity:.9;
}
.portal-coming:hover{
  transform:translateY(-8px) rotate(-.35deg);
}
.portal-coming .portal-link{
  cursor:default;
}

/* More playful, restrained motion */
.portal-card{
  animation:cardFloat 7s ease-in-out infinite;
  will-change:transform;
}
.portal-card:nth-child(2){animation-delay:-2.1s}
.portal-card:nth-child(3){animation-delay:-4.2s}
.portal-card:hover{animation-play-state:paused}

.portal-icon{
  transition:transform .45s cubic-bezier(.2,.9,.25,1),filter .45s ease;
}
.portal-card:hover .portal-icon{
  transform:translateY(-5px) rotate(-7deg) scale(1.08);
  filter:drop-shadow(0 0 14px rgba(180,92,255,.55));
}

@keyframes cardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

.portal-card::before{
  content:"";
  position:absolute;
  width:150px;height:150px;
  left:-100px;top:-100px;
  border-radius:50%;
  background:rgba(180,92,255,.13);
  filter:blur(5px);
  transition:left .7s ease,top .7s ease;
  pointer-events:none;
}
.portal-card:hover::before{
  left:-35px;top:-35px;
}

.reveal{
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion:reduce){
  .portal-card{animation:none!important}
  .portal-card:hover{transform:none}
  .portal-icon{transition:none}
}