/* RDTRONIC v53: the orange signal guides actions and section changes. */
:root{
  --signal:#f57b34;
  --signal-soft:#fff0e6;
  --wine-deep:#4e202d;
  --surface-lift:#ffffff;
  --neutral-shadow:0 26px 70px rgba(31,24,27,.10);
}

html[data-theme=dark]{
  --signal-soft:#3a2926;
  --surface-lift:#24272d;
  --neutral-shadow:0 28px 80px rgba(0,0,0,.28);
}

.section{padding-block:clamp(76px,7.2vw,104px)}

/* Floating navigation */
.header{padding:12px 0;border:0;pointer-events:none}
.header.scrolled{background:transparent;border:0;backdrop-filter:none}
.header .nav{
  min-height:66px;
  padding:0 14px 0 12px;
  border:1px solid transparent;
  border-radius:18px;
  pointer-events:auto;
  transition:background .3s,border-color .3s,box-shadow .3s,transform .3s;
}
.header.scrolled .nav{
  background:rgba(20,21,25,.92);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 16px 48px rgba(0,0,0,.24);
  backdrop-filter:blur(18px) saturate(120%);
}
.nav nav{gap:8px}
.nav nav>a{padding:11px 14px;border-radius:9px;color:#d8d9dd;transition:background .2s,color .2s}
.nav nav>a::after{display:none}
.nav nav>a:hover{background:#ffffff0c}
.nav nav>a[aria-current]{background:#ffffff12;color:#fff}
.nav nav>a[aria-current]::before{
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  margin:0 8px 2px 0;
  border-radius:50%;
  background:var(--signal);
}
.reading-progress{left:18px;right:18px;bottom:5px;width:auto;height:1px;border-radius:4px}

/* Shoelace mobile drawer */
.mobile-drawer{--size:min(90vw,400px)}
.mobile-drawer::part(overlay){background:rgba(7,8,11,.74);backdrop-filter:blur(8px)}
.mobile-drawer::part(panel){background:#17181d;color:#f8f4ef;border-left:1px solid #ffffff18}
.mobile-drawer::part(header){padding:28px 28px 20px;border-bottom:1px solid #ffffff18}
.mobile-drawer::part(title){font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em}
.mobile-drawer::part(close-button){color:#fff}
.mobile-drawer::part(body){padding:18px 28px 30px}
.mobile-drawer nav{display:flex;flex-direction:column}
.mobile-drawer nav a{position:relative;padding:17px 0;border-bottom:1px solid #ffffff18;font-family:var(--display);font-size:1.4rem;line-height:1.2}
.mobile-drawer nav a::after{content:'↗';position:absolute;right:0;color:#ffad73;font-family:var(--body);font-size:1rem}
.mobile-drawer nav a[aria-current]{color:#ffbd8e}
.mobile-drawer-contact{display:flex;flex-direction:column;gap:20px;margin-top:32px}
.mobile-drawer-contact>span{color:#bfc1c8;font-size:.875rem}
.mobile-drawer-contact .button{align-self:stretch}

/* A quiet route marker for long desktop pages */
.journey-dock{
  position:fixed;
  z-index:45;
  right:18px;
  top:50%;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(20,21,25,.88);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
  transform:translateY(-50%);
}
.journey-dock a{position:relative;display:grid;place-items:center;width:19px;height:27px}
.journey-dock i{display:block;width:5px;height:5px;border-radius:50%;background:#8f929a;transition:background .2s,transform .25s}
.journey-dock span{
  position:absolute;
  right:29px;
  top:50%;
  padding:7px 10px;
  border-radius:7px;
  background:#17181d;
  color:#fff;
  font-size:.75rem;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(7px,-50%);
  transition:opacity .18s,transform .18s;
}
.journey-dock a:hover span,.journey-dock a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.journey-dock a[aria-current] i{background:var(--signal);transform:scale(1.85)}

/* Hero */
.hero{min-height:800px}
.hero-location{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(11,12,15,.32);
  backdrop-filter:blur(8px);
}
.hero h1{max-width:1040px;text-shadow:0 12px 42px rgba(0,0,0,.45)}
.hero-actions .button-warm{box-shadow:0 18px 45px rgba(0,0,0,.24)}
.hero-bottom{margin-top:62px}
.hero-bottom>div{position:relative}
.hero-bottom>div::before{
  content:'';
  position:absolute;
  left:-1px;
  top:-30px;
  width:32px;
  height:2px;
  background:var(--signal);
  transform:scaleX(.34);
  transform-origin:left;
  transition:transform .3s;
}
.hero-bottom>div:hover::before{transform:scaleX(1)}

/* Solution component */
.hub-heading{margin-bottom:34px}
.hub-heading h2{font-size:clamp(2.7rem,4.35vw,4rem)}
.solutions-tabs{--track-width:0;--indicator-color:transparent}
.solutions-tabs::part(nav){
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  padding:6px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.solutions-tabs::part(tabs){gap:3px}
.solutions-tabs::part(body){padding-top:32px}
.solutions-tabs sl-tab::part(base){padding:12px 19px;border-radius:9px;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.solutions-tabs sl-tab[active]::part(base){
  background:var(--surface-lift);
  color:var(--ink);
  box-shadow:0 6px 18px rgba(37,31,33,.09);
}
.product,.compact-card{
  border-radius:28px;
  box-shadow:var(--neutral-shadow);
}
.product-stage,.half-stage,.editorial-visual{position:relative}
.screen-frame{border-radius:15px;box-shadow:0 26px 65px rgba(45,28,35,.18)}
.hub-foot{padding-inline:4px}

/* Workflow */
.connected-section{padding:clamp(78px,7vw,104px) 0;background:color-mix(in srgb,var(--paper) 96%,var(--wine) 4%)}
.connected-heading{margin-bottom:46px}
.connected-scene{border-radius:30px;box-shadow:0 28px 75px rgba(54,25,36,.22)}
.scene-document{box-shadow:0 24px 48px rgba(24,9,13,.32)}
.scene-phone{box-shadow:0 26px 52px rgba(19,8,12,.38)}
.connected-steps li{padding-bottom:22px}
.connected-steps button{
  padding:13px 15px 13px 0;
  border-radius:0 14px 14px 0;
  transition:background .25s,color .25s;
}
.connected-steps .is-current button{background:var(--soft)}
.connected-steps .is-current strong{color:var(--accent)}
.flow-responsibility{margin-top:8px}

/* Client proof */
.projects-section{padding-block:clamp(78px,7vw,104px)}
.proof-heading{margin-bottom:40px}
.proof-case{border-radius:28px;box-shadow:var(--neutral-shadow)}
.proof-visual>div{padding-top:18px;border-top:1px solid rgba(255,255,255,.34)}
.proof-cta{border-radius:9px;transition:transform .2s,background .2s}
.proof-cta:hover{transform:translateY(-2px);background:#743244}
.other-cases-list>a{
  padding:10px;
  border-radius:13px;
  transition:background .2s,transform .2s;
}
.other-cases-list>a:hover{background:var(--soft);transform:translateY(-2px)}

/* System map */
.role-section:after{
  content:'';
  position:absolute;
  right:-140px;
  top:50%;
  width:460px;
  height:460px;
  border:1px solid rgba(255,192,120,.12);
  border-radius:50%;
  transform:translateY(-50%);
}
.role-section>.container{z-index:1}
.role-core{box-shadow:0 28px 60px rgba(16,9,12,.42)}

/* Team */
.section-head h2::before{display:none}
.team-section .section-head{margin-bottom:50px}
.team-section .portrait{aspect-ratio:.82;border-radius:24px 24px 5px 5px;box-shadow:0 18px 48px rgba(34,28,30,.12)}
.team-section .portrait:after{display:none}
.team-section .portrait img{transform:scale(1.02);transition:filter .35s}
.team-card:hover .portrait img{filter:saturate(1.06) contrast(1.02)}
.team-card:nth-child(even){padding-top:46px}
.team-caption{padding-top:19px}
.team-caption h3{font-size:1.15rem}
.portrait-disclosure{margin-top:7px}

/* Advice and FAQ */
.insight-feature{border-radius:24px;box-shadow:var(--neutral-shadow)}
.insight-list>a{padding-inline:12px;border-radius:13px;transition:background .2s,transform .2s}
.insight-list>a:hover{background:var(--soft);transform:translateX(3px)}
.faq details{border-color:var(--line)}
.faq summary{padding-inline:14px;border-radius:10px;transition:background .2s,color .2s}
.faq summary:hover{background:var(--soft);color:var(--accent)}
.faq details p{padding-left:14px}

/* Final action echoes the orbital hero without adding another image. */
.contact-section:before{
  content:'';
  position:absolute;
  inset:-45% -12% -45% 48%;
  background:
    radial-gradient(circle at center,transparent 0 22%,rgba(255,190,137,.13) 22.2% 22.5%,transparent 22.7% 37%,rgba(255,190,137,.09) 37.2% 37.45%,transparent 37.7% 54%,rgba(255,190,137,.07) 54.2% 54.45%,transparent 54.7%);
  pointer-events:none;
}
.contact-panel{position:relative;z-index:1}

html[data-theme=dark] .solutions-tabs::part(nav){box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme=dark] .solutions-tabs sl-tab[active]::part(base){box-shadow:0 7px 20px rgba(0,0,0,.26)}
html[data-theme=dark] .connected-section{background:#191b20}
html[data-theme=dark] .connected-steps .is-current button{background:#25282f}
html[data-theme=dark] .team-section .portrait{box-shadow:0 20px 55px rgba(0,0,0,.32)}
html[data-theme=dark] .proof-cta:hover{background:#ff9453}

@media(max-width:1280px){.journey-dock{display:none}}

@media(max-width:900px){
  .header{padding:9px 0}
  .header .nav{min-height:62px;border-radius:15px}
  .team-section .portrait{aspect-ratio:.95}
  .team-card:nth-child(even){padding-top:28px}
}

@media(max-width:700px){
  .section{padding-block:64px}
  .header .nav{min-height:58px;padding-inline:10px}
  .header.scrolled .nav{box-shadow:0 12px 36px rgba(0,0,0,.24)}
  .nav-cta{display:none}
  .hero{min-height:760px}
  .hero-content{padding-top:140px}
  .hero-location{font-size:.75rem;padding:7px 10px}
  .hero-bottom>div::before{top:-24px}
  .hub-heading h2{font-size:2.45rem}
  .solutions-tabs::part(nav){width:100%;justify-content:flex-start;border-radius:12px;overflow:auto}
  .solutions-tabs::part(tabs){justify-content:flex-start}
  .solutions-tabs sl-tab::part(base){padding:11px 15px}
  .product,.compact-card,.proof-case,.insight-feature{border-radius:20px}
  .connected-section{padding:64px 0}
  .connected-steps button{padding-right:10px}
  .proof-heading{margin-bottom:30px}
  .team-section .section-head{margin-bottom:34px}
  .team-section .portrait{aspect-ratio:.82;border-radius:17px 17px 4px 4px}
  .team-card:nth-child(even){padding-top:0}
  .team-caption{padding-top:14px}
  .faq summary{padding-inline:10px}
  .faq details p{padding-left:10px}
}

@media(max-width:420px){
  .team-section .team-grid{grid-template-columns:1fr 1fr;gap:22px 12px}
  .team-section .portrait{aspect-ratio:.78}
  .team-caption h3{font-size:.98rem}
  .team-caption p{font-size:.78rem}
}

@media(prefers-reduced-motion:reduce){
  .journey-dock i,.journey-dock span,.team-section .portrait img,.other-cases-list>a,.insight-list>a{transition:none}
}