/* VoriaDev orbital identity — design layer, progressive and responsive.
   Dark hero + scroll depth with no extra libraries. */
:root{
  --orange:#ff6a00;
  --orange-light:#ff9a1f;
  --ink:#0b0b0f;
  --ink-soft:#24232a;
  --parallax-shift:0px;
  --scroll-shift:0px;
  --orbit-shift:0px;
}
.site-header{
  position:sticky;
  top:0;
  z-index:110;
  color:#f6f6f8;
  background:#0b0b0f;
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:rgba(11,11,15,.93);
  box-shadow:0 12px 25px rgba(0,0,0,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-header .header-inner{
  border-color:rgba(255,255,255,.18);
}
.site-header .brand{
  font-size:clamp(25px,2vw,33px);
  letter-spacing:-.065em;
  gap:6px;
  color:#f6f6f8;
}
.site-header .brand-mark{
  display:block;
  width:57px;
  height:50px;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(255,106,0,.13));
  flex-shrink:0;
}
.brand-wordmark{font-weight:800;letter-spacing:-.068em}
.brand-wordmark-accent{color:var(--orange)}
.brand-caption{color:#b7b7bb;border-color:rgba(255,255,255,.23)}
.site-header .navigation a:not(.nav-cta){color:#e5e5e8}
.site-header .navigation a:not(.nav-cta):hover{color:#ff9a1f}
.site-header .navigation .nav-cta{background:#ff6a00;border-color:#ff6a00;color:#0b0b0f}
.site-header .navigation .nav-cta:hover{background:#ff9a1f;border-color:#ff9a1f}
.site-header .menu-toggle{border-color:rgba(255,255,255,.35)}
.site-header .menu-toggle span{background:#f5f5f7}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#0b0b0f;
  color:#f6f6f8;
  padding-top:clamp(50px,5.3vw,84px);
}
.hero-atmosphere{
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-grid-mesh{
  position:absolute;
  inset:-15% -15% -30%;
  opacity:.34;
  background-image:
    linear-gradient(rgba(248,248,250,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,248,250,.055) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 70%,transparent 100%);
  transform:translate3d(0,var(--scroll-shift),0) rotate(-7deg);
  will-change:transform;
}
.hero-light-field{
  position:absolute;
  width:75%;
  aspect-ratio:1;
  top:-33%;
  right:-22%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,0,.19) 0%,rgba(248,88,8,.08) 25%,rgba(255,106,0,0) 67%);
  transform:translate3d(0,var(--orbit-shift),0);
  will-change:transform;
}
.hero-wave{
  position:absolute;
  width:125%;
  height:260px;
  left:-12%;
  bottom:-152px;
  border-top:2px solid rgba(255,106,0,.7);
  border-radius:50% 52% 0 0;
  transform:rotate(-8deg) translate3d(0,var(--scroll-shift),0);
  box-shadow:0 -8px 32px rgba(255,106,0,.08),0 -1px 8px rgba(255,106,0,.15);
}
.hero-wave.wave-two{
  width:112%;
  left:22%;
  bottom:-197px;
  border-color:rgba(255,176,78,.35);
  transform:rotate(9deg) translate3d(0,var(--orbit-shift),0);
  box-shadow:0 -8px 30px rgba(255,106,0,.06);
}
.hero>.container{position:relative;z-index:1}
.hero-grid{grid-template-columns:minmax(0,1.13fr) minmax(355px,.87fr);gap:5px}
.hero-content{padding-top:34px}
.hero h1{color:#f5f5f7;max-width:980px;font-weight:800;letter-spacing:-.074em}
.hero h1 em{
  color:#ff7b1a;
  text-shadow:0 0 52px rgba(255,106,0,.14);
}
.hero-lede{color:#c5c4c6}
.eyebrow{color:#c9c7cb}
.eyebrow-line,.tiny-square{background:var(--orange)}
.hero .text-link{color:#f6f6f8;border-color:rgba(255,255,255,.75)}
.hero .text-link:hover{color:#ffb36a;border-color:#ffb36a}
.hero .button{color:#111;background:#ff6a00;border-color:#ff6a00}
.hero .button:hover{background:#ffa134;border-color:#ffa134}
.hero-visual{
  padding:0 0 40px;
  min-height:570px;
}
.orbital-stage{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  max-width:640px;
  aspect-ratio:1;
  transform:translate3d(0,var(--orbit-shift),0);
  will-change:transform;
}
.orbital-stage::before{
  content:"";
  position:absolute;
  inset:5%;
  border-radius:50%;
  background:radial-gradient(circle at 62% 52%,rgba(255,106,0,.16),rgba(255,106,0,0) 66%);
  filter:blur(12px);
}
.orbital-hero-mark{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  max-width:620px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.36));
  animation:orbital-hover 9s ease-in-out infinite;
}
.orbital-schematic{
  position:absolute;
  border:1px solid rgba(255,255,255,.09);
  width:87%;
  aspect-ratio:1;
  border-radius:50%;
}
.schematic-one{
  transform:rotate(-24deg) scaleY(.58);
  border-color:rgba(255,106,0,.16);
  border-style:dashed;
}
.schematic-two{
  width:67%;
  border-color:rgba(245,245,250,.10);
  transform:rotate(21deg) scaleY(.72);
}
.orbital-index{
  position:absolute;
  bottom:5%;
  right:7%;
  color:rgba(255,255,255,.5);
  font-size:10px;
  letter-spacing:.17em;
}
.visual-topline,.visual-side,.visual-bottom{color:#9a9698}
.visual-topline{top:0;left:9%;right:6%}
.visual-side span{color:var(--orange)}
.visual-bottom{bottom:15px}
.hero-foot{
  border-color:rgba(255,255,255,.23);
  color:#cecbce;
  background:linear-gradient(90deg,rgba(255,106,0,.045),transparent 55%);
}
.hero-foot b{color:#ff6a00}

/* Meaningful depth without turning editorial sections into glossy cards */
.intro{
  position:relative;
  background:#f5f2eb;
  overflow:hidden;
}
.intro::before{
  content:"";
  position:absolute;
  top:-160px;
  left:-180px;
  width:560px;height:560px;
  border:1px solid rgba(232,77,43,.08);
  border-radius:50%;
  pointer-events:none;
}
.services{
  background:#111114;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.services::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.24;
  background:radial-gradient(ellipse 600px 450px at 97% 20%,rgba(255,106,0,.16),transparent 75%);
  pointer-events:none;
}
.service-row:hover{color:#fff}
.service-row .service-arrow{transition:background .2s,transform .25s,border-color .2s}
.service-row:hover .service-arrow{transform:translate(3px,-3px)}
.process-steps li{transition:border-color .35s ease}
.process-steps li:hover{border-color:var(--orange)}
.contact{
  background:radial-gradient(ellipse 600px 420px at 89% 4%,rgba(255,106,0,.11),transparent 70%),#0b0b0f;
}
.footer{background:#09090c}
.footer-logo{display:inline-flex;align-items:center;gap:10px}
.footer-brand-mark{width:58px;height:50px;object-fit:contain;max-width:none}
.footer-logo .brand-wordmark{font-size:37px}
.footer-v{display:none}

/* Progressive scroll entrances: only applied when JS confirms observer support */
.motion-ready .reveal{
  opacity:0;
  transform:translate3d(0,30px,0);
  transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.24,1);
}
.motion-ready .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.motion-ready .project.reveal:nth-child(even),
.motion-ready .service-row.reveal:nth-child(even){transition-delay:.08s}
@keyframes orbital-hover{
  0%,100%{transform:translate3d(0,-4px,0)}
  50%{transform:translate3d(0,12px,0)}
}
@media(max-width:1280px){
 .hero-grid{grid-template-columns:minmax(0,1.13fr) minmax(300px,.87fr)}
 .hero-visual{min-height:460px}
}
@media(max-width:960px){
 .hero-grid{grid-template-columns:1fr .86fr}
 .site-header .brand-mark{width:48px;height:42px}
 .hero-visual{min-height:420px}
 .hero h1{font-size:clamp(44px,6.7vw,66px)}
}
@media(max-width:740px){
 .site-header .brand{font-size:26px}
 .site-header .brand-mark{width:45px;height:41px}
 .site-header .navigation{background:#101014;border-color:rgba(255,255,255,.15)}
 .site-header .navigation>a:not(.nav-cta){border-color:rgba(255,255,255,.15)}
 .hero{padding-top:42px}
 .hero-grid{display:flex;flex-direction:column}
 .hero-content{padding-top:0}
 .hero h1{font-size:clamp(45px,10.4vw,76px)}
 .hero-visual{min-height:0;width:min(100%,480px);height:auto;margin-top:5px;padding-bottom:30px}
 .orbital-stage{aspect-ratio:1.12}
 .orbital-hero-mark{width:98%}
 .hero-light-field{top:10%;right:-40%;width:120%}
 .hero-wave{bottom:-165px;height:200px}
 .hero-foot{margin-top:5px}
 .footer-brand-mark{width:49px;height:42px}
 .footer-logo .brand-wordmark{font-size:31px}
}
@media(max-width:380px){
 .hero h1{font-size:42px}
 .hero-visual{margin-top:12px}
 .orbital-stage{aspect-ratio:1.17}
 .footer-logo .brand-wordmark{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
 .orbital-hero-mark{animation:none!important}
 .hero-grid-mesh,.hero-light-field,.hero-wave,.orbital-stage{transform:none!important;will-change:auto!important}
 .motion-ready .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
}