/* Final UI/UX polish layer — loaded after the base responsive styles. */
:root{
  --bg:#060711;
  --bg-2:#0b0d18;
  --panel:rgba(14,17,31,.76);
  --panel-solid:#101321;
  --panel-light:#171b2e;
  --text:#f7f8fc;
  --muted:#aab0c3;
  --muted-2:#737b92;
  --line:rgba(255,255,255,.095);
  --line-strong:rgba(255,255,255,.17);
  --blue:#4778ff;
  --blue-2:#78a7ff;
  --purple:#8c5cff;
  --red:#f14f72;
  --gradient:linear-gradient(105deg,#4778ff 0%,#865bff 52%,#f14f72 100%);
  --gradient-soft:linear-gradient(135deg,rgba(71,120,255,.25),rgba(140,92,255,.2) 52%,rgba(241,79,114,.16));
  --shadow:0 30px 90px rgba(0,0,0,.42);
  --shadow-soft:0 18px 55px rgba(0,0,0,.27);
  --container:min(1240px,calc(100vw - 48px));
  --font-display:"Segoe UI Variable Display","SF Pro Display",Inter,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Segoe UI Variable Text",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{scroll-padding-top:94px}
body{
  background:
    radial-gradient(circle at 76% 2%,rgba(71,120,255,.09),transparent 24rem),
    radial-gradient(circle at 16% 34%,rgba(140,92,255,.045),transparent 28rem),
    var(--bg);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.012),transparent 35%,rgba(255,255,255,.008));
}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:4px;
}

.section{padding:124px 0}
.eyebrow{font-size:.71rem;letter-spacing:.17em}
.outline-text{-webkit-text-stroke:1px rgba(255,255,255,.42)}

/* Intro */
.intro{background:radial-gradient(circle at 50% 44%,#0d1020 0,#050610 48%,#03040a 100%)}
.intro__content{padding:28px}
.intro__content::before{
  content:"RB / DIGITAL STUDIO";
  position:absolute;
  left:50%;
  top:-58px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.36);
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.24em;
  white-space:nowrap;
}
.intro h1{font-weight:760;letter-spacing:-.075em}
.intro__progress{border-radius:999px}
.intro__skip{border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.intro__skip:hover{color:#fff;border-color:rgba(255,255,255,.6)}

/* Navigation */
.site-header{top:16px}
.nav-shell{
  width:min(1160px,calc(100vw - 32px));
  height:64px;
  padding:0 10px 0 13px;
  background:rgba(6,7,17,.66);
  border-color:rgba(255,255,255,.115);
  box-shadow:0 16px 50px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.site-header.is-scrolled .nav-shell{
  background:rgba(7,8,19,.88);
  border-color:rgba(255,255,255,.15);
  box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04);
}
.brand__mark{
  border-radius:11px;
  background:linear-gradient(145deg,rgba(71,120,255,.28),rgba(140,92,255,.18));
  box-shadow:inset 0 0 22px rgba(115,109,255,.08);
}
.nav-links a{position:relative;padding:9px 13px;color:#aeb4c6}
.nav-links a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:1px;
  background:var(--gradient);
  transform:scaleX(0);
  transition:transform .28s var(--ease);
}
.nav-links a:hover,.nav-links a.active{background:transparent;color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-actions{gap:7px}
.availability-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid rgba(77,214,160,.17);
  border-radius:999px;
  color:#b9e8d6;
  background:rgba(77,214,160,.055);
  font-size:.66rem;
  font-weight:800;
}
.availability-pill i,.hero-proof i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#4dd6a0;
  box-shadow:0 0 0 5px rgba(77,214,160,.08),0 0 16px rgba(77,214,160,.5);
  animation:availabilityPulse 2.4s ease-in-out infinite;
}
@keyframes availabilityPulse{50%{opacity:.48;transform:scale(.82)}}
.resume-mini,.motion-control{background:rgba(255,255,255,.025);transition:background .25s,border-color .25s,color .25s}
.resume-mini:hover,.motion-control:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}

/* Hero */
.hero{min-height:100svh;padding:132px 0 36px}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:180px;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg));
}
.hero__grid{
  opacity:.82;
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse at 50% 33%,black 10%,transparent 78%);
}
.hero__ambient--blue{width:620px;height:620px;right:2%;top:0;background:rgba(71,120,255,.18)}
.hero__ambient--red{width:470px;height:470px;right:-10%;bottom:-6%;background:rgba(241,79,114,.11)}
.hero__layout{grid-template-columns:1.08fr .92fr;gap:76px}
.hero__title{
  max-width:780px;
  margin-top:22px;
  font-size:clamp(4.4rem,7.15vw,7.7rem);
  font-weight:760;
  line-height:.89;
  letter-spacing:-.079em;
}
.animated-word{
  min-width:6.1ch;
  background:linear-gradient(110deg,#fff 5%,#dce4ff 82%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.animated-word::after{bottom:-.015em;height:.055em;border-radius:999px;box-shadow:0 0 20px rgba(105,102,255,.35)}
.hero__intro{max-width:670px;margin-top:30px;font-size:1rem;line-height:1.75;color:#adb3c7}
.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  margin-top:18px;
  color:#80889f;
  font-size:.7rem;
  font-weight:650;
}
.hero-proof span:first-child{display:inline-flex;align-items:center;gap:9px;color:#a8b0c4}
.hero__actions{margin-top:28px}
.button{min-height:54px;padding-inline:23px;letter-spacing:-.01em}
.button--primary{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 14px 42px rgba(77,91,255,.25)}
.button--primary::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.28) 48%,transparent 82%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.button--primary:hover::before{transform:translateX(120%)}
.button--ghost{background:rgba(255,255,255,.018)}
.hero__social{gap:10px;margin-top:23px}
.hero__social a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:999px;
  color:#9fa6ba;
  background:rgba(255,255,255,.018);
}
.hero__social a:hover{border-color:var(--line);background:rgba(255,255,255,.045);color:#fff}
.hero__meta{gap:16px;max-width:610px;margin-top:36px}
.hero__meta div{padding:17px 2px 0}
.hero__meta dt{font-size:1.65rem}
.hero__meta dd{font-size:.69rem;line-height:1.45}
.hero-portrait{min-height:650px;transition:transform .32s var(--ease)}
.hero-portrait::before{
  content:"";
  position:absolute;
  width:82%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(71,120,255,.19),rgba(140,92,255,.07) 45%,transparent 70%);
  filter:blur(20px);
}
.portrait-frame{
  width:min(448px,84%);
  border-color:rgba(255,255,255,.17);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:0 44px 110px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.025) inset;
}
.portrait-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px rgba(255,255,255,.15),inset 0 -80px 90px rgba(4,5,12,.55);
  pointer-events:none;
}
.portrait-frame img{filter:saturate(.72) contrast(1.04) brightness(.98)}
.portrait-gradient{background:linear-gradient(to bottom,transparent 52%,rgba(6,7,17,.91)),linear-gradient(125deg,rgba(71,120,255,.1),transparent 45%,rgba(241,79,114,.11))}
.portrait-rings{width:580px;height:580px;opacity:.9}
.portrait-card{
  appearance:none;
  color:inherit;
  text-align:left;
  background:linear-gradient(145deg,rgba(19,22,40,.9),rgba(10,12,24,.78));
  border-color:rgba(255,255,255,.17);
  box-shadow:0 22px 60px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.portrait-card:hover{border-color:rgba(117,128,255,.45);background:rgba(21,24,44,.94);box-shadow:0 28px 70px rgba(0,0,0,.48),0 0 40px rgba(79,93,255,.08)}
.portrait-card--syntra{right:-2%;top:15%}
.portrait-card--fixflow{left:-2%;bottom:14%}
.portrait-chip{background:rgba(8,10,21,.82);box-shadow:0 12px 36px rgba(0,0,0,.23)}
.hero__footer{position:relative;z-index:4}

/* Marquee */
.marquee{background:rgba(9,11,22,.88);border-color:rgba(255,255,255,.085)}
.marquee__track{padding:15px 0;color:#aeb4c6;letter-spacing:.14em}
.marquee__track i{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Sections and project surfaces */
.section-heading{gap:88px;margin-bottom:68px}
.section-heading h2{font-weight:740;letter-spacing:-.07em}
.section-heading__copy{line-height:1.75}
.flagship{
  position:relative;
  overflow:hidden;
  padding:58px;
  border-color:rgba(255,255,255,.1);
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  box-shadow:0 30px 80px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.025);
}
.flagship::before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  right:-190px;
  top:-190px;
  background:radial-gradient(circle,rgba(115,97,255,.18),transparent 68%);
  pointer-events:none;
}
.flagship--fixflow::before{left:-190px;right:auto;background:radial-gradient(circle,rgba(71,120,255,.18),transparent 68%)}
.flagship__copy{position:relative;z-index:2}
.flagship__copy h3{font-weight:760}
.flagship__lead{font-size:1.11rem}
.feature-list li{line-height:1.55}
.tag-list span,.skill-cloud span{background:rgba(255,255,255,.02);transition:background .2s,border-color .2s,color .2s}
.tag-list span:hover,.skill-cloud span:hover{background:rgba(106,104,255,.07);border-color:rgba(119,122,255,.28);color:#fff}
.project-actions{flex-wrap:wrap}
.live-project-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border:1px solid rgba(77,214,160,.2);
  border-radius:999px;
  color:#c2efde;
  background:rgba(77,214,160,.055);
  font-size:.78rem;
  font-weight:800;
  transition:transform .25s var(--ease),background .25s,border-color .25s;
}
.live-project-link::before{content:"";width:6px;height:6px;border-radius:50%;background:#4dd6a0;box-shadow:0 0 12px #4dd6a0}
.live-project-link:hover{transform:translateY(-2px);background:rgba(77,214,160,.1);border-color:rgba(77,214,160,.36)}
.screenshot-frame{
  border-color:rgba(255,255,255,.12);
  background:#0d101d;
  box-shadow:0 34px 85px rgba(0,0,0,.34);
}
.screenshot-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.browser-chrome{height:40px;background:#0d101d;border-color:rgba(255,255,255,.075)}
.browser-chrome p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-card{
  min-height:660px;
  border-color:rgba(255,255,255,.095);
  background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  box-shadow:0 24px 60px rgba(0,0,0,.13);
}
.project-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.project-card:hover{transform:translateY(-10px);border-color:rgba(118,121,255,.35);box-shadow:0 36px 80px rgba(0,0,0,.26)}
.project-card__art{height:350px}
.project-card__body{padding:31px}
.project-card__body h3{font-weight:740}

/* About / capabilities / process */
.about,.capabilities,.journey,.credibility{background:transparent}
.about{border-top:1px solid rgba(255,255,255,.055)}
.about__visual img{border-color:rgba(255,255,255,.12);box-shadow:0 35px 90px rgba(0,0,0,.31)}
.about__copy h2,.contact__copy h2,.credibility__copy h2{font-weight:740}
.about blockquote{border-image:var(--gradient) 1;color:#e8eaf3}
.capability>button{transition:padding-left .3s var(--ease),color .25s}
.capability>button:hover{padding-left:10px}
.capability.active>button b{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.process-step,.achievement-grid article{
  border-color:rgba(255,255,255,.09);
  background:linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  transition:transform .35s var(--ease),border-color .3s,background .3s;
}
.process-step:hover,.achievement-grid article:hover{transform:translateY(-5px);border-color:rgba(112,122,255,.3);background:rgba(255,255,255,.035)}
.process-step h3{font-weight:730}

/* Contact */
.contact{border-top:1px solid rgba(255,255,255,.055)}
.contact__glow{right:-12%;background:radial-gradient(circle,rgba(71,120,255,.23),rgba(140,92,255,.1) 48%,transparent 70%)}
.contact__links a{transition:padding-left .25s var(--ease),color .25s}
.contact__links a:hover{padding-left:8px;color:#fff}
.contact-form{
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(20,23,41,.82),rgba(10,12,24,.78));
  box-shadow:0 35px 100px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.035);
}
.contact-form input,.contact-form select,.contact-form textarea{background:rgba(255,255,255,.025)}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:rgba(255,255,255,.17)}
.footer{background:#04050c}
.footer a{transition:color .22s,transform .22s}
.footer a:hover{color:#fff}

/* Case-study modal */
.project-modal{background:linear-gradient(155deg,#101321,#090b15);border-color:rgba(255,255,255,.15)}
.modal-case__grid div{background:rgba(255,255,255,.02)}
.modal-case__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.modal-case__notice{display:flex;align-items:center;gap:14px;margin-top:30px;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
.modal-case__notice p{color:var(--muted);font-size:.82rem}

.mobile-socials{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.mobile-socials a{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:#d7dbea}

@media (max-width:1050px){
  .availability-pill{display:none}
  .hero__layout{gap:42px}
  .hero__title{font-size:clamp(4rem,7.25vw,6.2rem)}
  .portrait-card--syntra{right:0}.portrait-card--fixflow{left:0}
}
@media (max-width:820px){
  .section{padding:94px 0}
  .hero{padding-top:116px}
  .hero__layout{grid-template-columns:1fr;gap:24px}
  .hero__copy{text-align:left}
  .hero__title{max-width:760px;font-size:clamp(3.8rem,12.5vw,6.4rem)}
  .hero__intro{max-width:700px}
  .hero-portrait{min-height:590px}
  .flagship{padding:30px}
  .project-card{min-height:auto}
}
@media (max-width:560px){
  :root{--container:calc(100vw - 22px)}
  .site-header{top:10px}
  .nav-shell{width:calc(100vw - 20px);height:56px}
  .hero{padding-top:96px;padding-bottom:25px}
  .hero__title{font-size:clamp(3.2rem,15.4vw,4.95rem);line-height:.92;letter-spacing:-.075em}
  .hero-proof{display:grid;gap:8px;margin-top:15px}
  .hero__actions{margin-top:24px}
  .hero__social{gap:7px}
  .hero__social a{padding:6px 8px;font-size:.7rem}
  .hero__meta{margin-top:30px;gap:10px}
  .hero-portrait{min-height:495px;margin-top:8px}
  .portrait-frame{width:82%;border-radius:130px 130px 28px 28px}
  .portrait-card{width:140px;padding:11px 12px}
  .portrait-card--syntra{right:-2%;top:14%}
  .portrait-card--fixflow{left:-2%;bottom:13%}
  .section-heading{margin-bottom:48px}
  .flagship{padding:20px}
  .project-card__art{height:285px}
  .modal-case__notice{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .availability-pill i,.hero-proof i{animation:none}
}