/* RDP Digital — cinematic interactive experience */
:root{
  --max:1320px;
  --cyan:#62f1dc;
  --blue:#6e91ff;
  --violet:#9b7cff;
  --bg:#030b12;
  --panel:#071722;
  --panel-2:#0a202c;
  --line:rgba(138,225,224,.14);
  --ink:#f2fbfc;
  --muted:#8fa6af;
  --shadow:0 35px 120px rgba(0,0,0,.45);
}

body{background:#030b12}
body:before{background:radial-gradient(circle at 67% 16%,rgba(32,162,181,.11),transparent 30%),radial-gradient(circle at 97% 34%,rgba(88,100,255,.09),transparent 32%),radial-gradient(circle at 10% 75%,rgba(63,226,201,.045),transparent 30%),linear-gradient(180deg,#030b12,#04101a 45%,#030a11)}
body:after{opacity:.17;background-size:64px 64px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}

.site-header{max-width:1440px;padding:24px clamp(24px,4vw,64px)}
.site-header.scrolled{padding-inline:clamp(24px,4vw,64px);background:rgba(3,11,18,.74);border-color:rgba(132,229,226,.12)}
.brand img{filter:drop-shadow(0 0 14px rgba(98,241,220,.25))}
.site-nav{gap:36px}
.site-nav>a:not(.button){position:relative;font-size:.82rem;letter-spacing:.04em}
.site-nav>a:not(.button):after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--cyan);transition:right .25s ease}
.site-nav>a:not(.button):hover:after{right:0}
.button{border-radius:4px;letter-spacing:.01em;box-shadow:0 14px 50px rgba(84,225,205,.17)}
.button:before{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.25);pointer-events:none}
.button{position:relative;overflow:hidden}
.button:after{content:"";position:absolute;inset:-80% -40%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4),transparent 60%);transform:translateX(-80%) rotate(10deg);transition:transform .7s ease}
.button:hover:after{transform:translateX(80%) rotate(10deg)}

.hero-cinematic{width:min(100%,1600px);max-width:none;min-height:100svh;margin:auto;padding:112px clamp(24px,5vw,84px) 48px;grid-template-columns:minmax(420px,.82fr) minmax(560px,1.18fr);gap:0;isolation:isolate;overflow:visible}
.hero-cinematic:before{content:"";position:absolute;z-index:-2;inset:0 50% 0 0;background:linear-gradient(90deg,rgba(3,11,18,.98) 55%,transparent)}
.hero-cinematic:after{content:"";position:absolute;z-index:0;top:14%;bottom:12%;left:48%;width:1px;background:linear-gradient(transparent,rgba(112,228,226,.14),transparent)}
.hero-ambient{position:absolute;z-index:-2;inset:0;overflow:hidden;pointer-events:none}
.hero-ambient i{position:absolute;border:1px solid rgba(99,237,220,.08);border-radius:50%}
.hero-ambient i:first-child{width:700px;height:700px;right:-270px;top:-270px}
.hero-ambient i:nth-child(2){width:380px;height:380px;left:-250px;bottom:-130px}
.hero-ambient i:nth-child(3){width:8px;height:8px;left:44%;top:18%;background:var(--cyan);border:0;box-shadow:0 0 70px 20px rgba(98,241,220,.18)}
.hero-copy{max-width:670px;padding:30px 0;align-self:center}
.availability{display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;padding:7px 10px 7px 8px;border:1px solid rgba(116,218,216,.16);background:rgba(9,29,39,.38);color:#718d97;font:600 .61rem/1 var(--display);letter-spacing:.11em;text-transform:uppercase}
.availability i{width:6px;height:6px;border-radius:50%;background:#6af0b1;box-shadow:0 0 12px #6af0b1}
.availability b{padding-left:10px;border-left:1px solid rgba(255,255,255,.11);color:#b7cbcf;font-weight:600}
.hero-cinematic .eyebrow{margin-bottom:20px;color:#7f9aa3;font-size:.66rem}
.hero-cinematic h1{max-width:730px;margin-bottom:27px;font-size:clamp(3.9rem,5.7vw,6.8rem);line-height:.91;letter-spacing:-.072em}
.hero-cinematic h1 em{display:block;margin-top:9px;background:linear-gradient(100deg,#65eed9 5%,#68cce7 45%,#7d91ff 90%);background-clip:text}
.hero-cinematic .hero-lede{max-width:585px;color:#a7bbc2;font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.75}
.hero-cinematic .hero-actions{margin-top:40px}
.hero-cinematic .hero-actions .button{min-height:58px;padding-inline:27px}
.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;padding-top:23px;border-top:1px solid rgba(142,211,215,.13)}
.hero-proof div{display:grid;grid-template-columns:25px 1fr;gap:9px;align-items:start}
.hero-proof strong{color:#4f6d78;font:500 .63rem/1.4 monospace}
.hero-proof span{color:#8099a2;font:500 .68rem/1.45 var(--display);letter-spacing:.06em;text-transform:uppercase}

.hero-visual{position:relative;z-index:1;width:calc(100% + clamp(20px,4vw,75px));margin-left:-10px;align-self:center}
.three-stage{width:100%;height:clamp(520px,70vh,720px);min-height:0;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;cursor:grab;touch-action:pan-y}
.three-stage:active{cursor:grabbing}
.three-stage:before{inset:14%;background:rgba(53,212,209,.13);filter:blur(100px)}
.three-stage:after{inset:4%;background-size:46px 46px;opacity:.55;mask-image:radial-gradient(ellipse at center,#000,transparent 68%)}
.stage-noise{position:absolute;z-index:2;inset:7%;border:1px solid rgba(116,226,223,.09);clip-path:polygon(0 7%,7% 7%,7% 0,93% 0,93% 7%,100% 7%,100% 93%,93% 93%,93% 100%,7% 100%,7% 93%,0 93%);pointer-events:none}
.three-hud{inset:8%}
.hud-corner{width:46px;height:46px;border-color:rgba(102,239,221,.34)}
.axis{color:rgba(110,193,199,.34);font-size:.5rem}
.axis-x{top:8px;left:57px}.axis-y{right:8px;bottom:57px}
.three-readout{top:12%;left:11%;max-width:270px}
.three-readout small{color:#6f8d96;font-size:.52rem}
.three-readout strong{max-width:260px;margin-top:11px;color:#e7f6f7;font-size:.95rem;letter-spacing:.01em}
.three-readout p{max-width:230px;margin:8px 0 0;color:#66808a;font-size:.67rem;line-height:1.45}
.three-readout span{margin-top:13px;color:#50717a;font-size:.45rem}
.architecture-index{position:absolute;z-index:5;left:50%;bottom:7%;display:flex;align-items:center;gap:5px;transform:translateX(-50%)}
.architecture-index button{display:flex;align-items:center;gap:7px;min-width:auto;padding:8px 9px;border:1px solid transparent;background:transparent;color:#53717b;font:600 .5rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s}
.architecture-index button b{color:#35515c;font:500 .5rem/1 monospace}
.architecture-index button:hover,.architecture-index button:focus-visible,.architecture-index button.active{transform:translateY(-3px);border-color:rgba(97,234,220,.18);background:rgba(5,20,29,.62);color:var(--cyan)}
.architecture-index button.active b{color:#7c99a1}
.three-instruction{right:9%;bottom:13%;font-size:.5rem}
.three-instruction b{border-radius:3px}
.stage-coordinate{position:absolute;z-index:4;left:9%;bottom:13%;color:#425f69;font:500 .49rem/1 monospace;letter-spacing:.11em;pointer-events:none}
.three-canvas{filter:drop-shadow(0 28px 60px rgba(0,0,0,.28))}
.hero-scroll{position:absolute;z-index:5;right:clamp(24px,4vw,70px);bottom:18px;display:flex;align-items:center;gap:14px;color:#5a7580;font:600 .54rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl}
.hero-scroll i{display:block;width:1px;height:46px;background:linear-gradient(var(--cyan),transparent)}

.signal-strip{width:100%;min-height:62px;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,52px);padding:16px 26px;border-block:1px solid rgba(118,215,215,.1);background:rgba(6,19,28,.7);overflow:hidden}
.signal-strip p{margin:0;color:#718a93;font:600 clamp(.56rem,.7vw,.68rem)/1 var(--display);letter-spacing:.15em;white-space:nowrap}
.signal-strip i{width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}

.section{padding-block:150px}
.section-heading{margin-bottom:75px}
.section-heading .eyebrow:before{content:"// ";color:#46636d}
.section-heading h2{font-size:clamp(3rem,5.4vw,5.4rem);line-height:.98}
.services{position:relative}
.services:before{content:"CAPABILITIES";position:absolute;top:95px;right:3vw;color:rgba(255,255,255,.018);font:700 clamp(5rem,14vw,12rem)/1 var(--display);letter-spacing:-.05em;pointer-events:none}
.service-grid{grid-template-columns:repeat(12,1fr);gap:16px}
.service-card{grid-column:span 4;min-height:410px;padding:36px;border-radius:3px;background:radial-gradient(circle at 85% 8%,rgba(89,215,213,.08),transparent 28%),linear-gradient(145deg,rgba(10,31,43,.92),rgba(4,17,26,.84));transform-style:preserve-3d}
.service-card:nth-child(1),.service-card:nth-child(4){grid-column:span 7}
.service-card:nth-child(2),.service-card:nth-child(5){grid-column:span 5}
.service-card:before{content:"";position:absolute;inset:0;border-left:1px solid transparent;background:linear-gradient(180deg,var(--cyan),transparent 38%) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s}
.service-card:hover{transform:translateY(-7px);border-color:rgba(93,235,220,.32);box-shadow:0 25px 70px rgba(0,0,0,.24)}
.service-card:hover:before{opacity:1}
.service-card:after{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(98,241,220,.085),transparent 62%);opacity:0;pointer-events:none;transition:opacity .25s}
.service-card:hover:after{opacity:1}
.service-icon{border-radius:50%;background:rgba(85,224,210,.045);box-shadow:inset 0 0 20px rgba(91,224,213,.05)}
.service-card h3{max-width:370px;font-size:1.55rem}
.service-card p{max-width:470px}
.service-card li,.work-copy li{border-radius:2px;background:rgba(105,204,204,.025)}

.work{max-width:1400px}
.work-grid{gap:20px}
.work-card{border-radius:3px;background:linear-gradient(150deg,rgba(9,29,41,.92),rgba(4,16,25,.9));transition:transform .3s,border-color .3s,box-shadow .3s}
.work-card:hover{transform:translateY(-6px);border-color:rgba(95,231,218,.28);box-shadow:0 35px 90px rgba(0,0,0,.28)}
.work-art{background-color:#061a25}
.work-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(83,225,213,.08));pointer-events:none}
.work-art>span{border-radius:2px;backdrop-filter:blur(14px)}
.work-copy>span{color:#74929a}
.process{position:relative}
.process-list li{position:relative;grid-template-columns:110px 1fr;min-height:150px;align-items:center;transition:background .25s,padding .25s}
.process-list li:after{content:"↗";position:absolute;right:20px;color:#31505c;font-size:1.2rem;transition:transform .25s,color .25s}
.process-list li:hover{padding-inline:24px;background:rgba(92,221,211,.025)}
.process-list li:hover:after{transform:translate(4px,-4px);color:var(--cyan)}
.process-list li>span{font-size:.7rem}
.process-list h3{font-size:1.7rem}
.cta-section{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(181,255,249,.18);border-radius:3px;background:radial-gradient(circle at 84% 10%,rgba(130,150,255,.45),transparent 33%),linear-gradient(120deg,#3dceb9,#257f9f 58%,#22528c);box-shadow:0 40px 120px rgba(20,124,144,.22)}
.cta-section:before{content:"RDP";position:absolute;z-index:-1;right:-.04em;bottom:-.31em;color:rgba(255,255,255,.08);font:700 14rem/1 var(--display);letter-spacing:-.08em}
.cta-section h2{line-height:.92}
.pointer-aura{position:fixed;z-index:200;width:260px;height:260px;left:-130px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(91,232,219,.07),transparent 68%);mix-blend-mode:screen;pointer-events:none;will-change:transform}
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]:after{right:0}

@media(max-width:1100px){
  .hero-cinematic{grid-template-columns:minmax(360px,.9fr) minmax(480px,1.1fr);padding-inline:32px}
  .hero-cinematic h1{font-size:clamp(3.8rem,7vw,6rem)}
  .three-stage{min-height:590px}
  .service-card,.service-card:nth-child(n){grid-column:span 6}
}

@media(max-width:900px){
  .hero-cinematic{display:grid;grid-template-columns:1fr;min-height:auto;padding:130px 24px 80px;gap:50px;overflow:hidden}
  .hero-cinematic:after{display:none}
  .hero-copy{max-width:760px;padding:0}
  .availability{margin-bottom:34px}
  .hero-cinematic h1{max-width:780px;font-size:clamp(4rem,11vw,7rem)}
  .hero-cinematic .hero-lede{max-width:650px}
  .hero-visual{width:min(100%,760px);margin:0 auto}
  .three-stage{min-height:0;aspect-ratio:1.12/1}
  .hero-scroll{display:none}
  .signal-strip{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .section{padding-block:110px}
}

@media(max-width:620px){
  .site-header{padding:15px 18px}
  .hero-cinematic{padding:115px 19px 62px;gap:46px}
  .availability{width:100%;justify-content:center;margin-bottom:30px;font-size:.52rem}
  .hero-cinematic .eyebrow{font-size:.58rem;letter-spacing:.13em}
  .hero-cinematic h1{font-size:clamp(3.4rem,16vw,5.2rem);line-height:.91}
  .hero-cinematic .hero-lede{font-size:1rem;line-height:1.65}
  .hero-proof{grid-template-columns:1fr;gap:15px;margin-top:44px}
  .hero-proof div{grid-template-columns:30px 1fr}
  .hero-proof span br{display:none}
  .three-stage{width:calc(100% + 20px);margin-left:-10px;aspect-ratio:.88/1;min-height:430px}
  .three-stage:after{background-size:32px 32px}
  .three-readout{top:10%;left:8%;max-width:210px}
  .three-readout strong{font-size:.78rem}.three-readout p{max-width:175px;font-size:.57rem}
  .architecture-index{left:8%;right:8%;bottom:5%;display:grid;grid-template-columns:1fr 1fr;transform:none;gap:2px}
  .architecture-index button{justify-content:center;min-width:0;padding:7px 6px;font-size:.46rem}
  .architecture-index button b{font-size:.42rem}
  .three-instruction{right:8%;bottom:8%}
  .stage-coordinate{left:8%;bottom:8%;font-size:.4rem}
  .signal-strip{padding-inline:20px;gap:17px}
  .section{padding-block:88px}
  .services:before{top:55px}
  .service-grid{display:grid;grid-template-columns:1fr}
  .service-card,.service-card:nth-child(n){grid-column:auto;min-height:340px;padding:30px}
  .service-card h3{font-size:1.4rem}
  .section-heading h2{font-size:clamp(2.8rem,13vw,4.1rem)}
  .process-list li{grid-template-columns:55px 1fr;min-height:132px;padding-right:42px}
  .process-list li:after{right:9px}
}

@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .work-art:after{animation:art-scan linear both;animation-timeline:view();animation-range:entry 10% exit 90%}
    @keyframes art-scan{from{transform:translateX(-28%)}to{transform:translateX(28%)}}
  }
}

@media(prefers-reduced-motion:reduce){
  .pointer-aura{display:none}
  .button:after{display:none}
  .service-card:hover,.work-card:hover{transform:none}
}