/* SAARSflow Engineering Toolkit — scalable, functional service workspace. */
.toolkit-section {
  --tk-bg:#0c252d;
  --tk-panel:#0b2027;
  --tk-copy:#f0f3ee;
  --tk-muted:#9db4b6;
  --tk-line:rgba(173,224,215,.16);
  --tk-cyan:#78d8c8;
  --tk-blue:#83aef2;
  --tk-amber:#e9b980;
  --toolkit-scroll:.5;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(100px,10vw,156px) 0 clamp(110px,11vw,172px);
  color:var(--tk-copy);
  background:
    radial-gradient(ellipse at 10% 20%,rgba(44,204,179,.24),transparent 32%),
    radial-gradient(ellipse at 91% 15%,rgba(89,124,225,.22),transparent 30%),
    radial-gradient(ellipse at 72% 86%,rgba(190,105,214,.14),transparent 34%),
    linear-gradient(145deg,#12343d 0%,#0c252d 48%,#102d37 100%);
}
.toolkit-section::before {
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:linear-gradient(rgba(190,226,220,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(190,226,220,.052) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent,#000 12% 88%,transparent);
}
.toolkit-section::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(115deg,transparent 15%,rgba(138,221,207,.06) 42%,transparent 62%);
  transform:translateX(-65%);
  animation:toolkit-light-pass 11s ease-in-out infinite;
}
.toolkit-atmosphere,.toolkit-orbit,.toolkit-beam { position:absolute; pointer-events:none; }
.toolkit-atmosphere { z-index:-1; inset:0; overflow:hidden; }
.toolkit-orbit { border:1px solid rgba(148,220,207,.13); border-radius:50%; }
.toolkit-orbit--one { top:-230px; right:-80px; width:680px; height:680px; box-shadow:0 0 100px rgba(72,185,166,.06); animation:toolkit-orbit 22s linear infinite; }
.toolkit-orbit--two { bottom:-360px; left:-190px; width:820px; height:820px; border-style:dashed; opacity:.7; animation:toolkit-orbit 30s linear infinite reverse; }
.toolkit-beam { top:46%; right:-20%; left:-20%; height:1px; background:linear-gradient(90deg,transparent,rgba(131,174,242,.14),rgba(120,216,200,.55),rgba(233,185,128,.22),transparent); box-shadow:0 0 22px rgba(120,216,200,.22); transform:translate3d(calc((var(--toolkit-scroll) - .5) * 70px),calc((var(--toolkit-scroll) - .5) * -34px),0) rotate(-4deg); transition:transform .15s linear; }
.toolkit-container { position:relative; }
.toolkit-heading { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); align-items:end; gap:clamp(48px,9vw,140px); margin-bottom:clamp(54px,6vw,86px); }
.toolkit-heading .eyebrow { color:#9be2d6; }
.toolkit-heading h2 { max-width:850px; margin-top:19px; color:var(--tk-copy); font-family:var(--font-display); font-size:clamp(3.5rem,6.8vw,7.5rem); font-weight:560; line-height:.86; letter-spacing:-.065em; }
.toolkit-heading h2 em { display:inline-block; color:#b8e6dd; font-family:var(--font-serif); font-weight:400; font-style:italic; letter-spacing:-.045em; text-shadow:0 0 34px rgba(120,216,200,.13); }
.toolkit-heading > p { max-width:430px; padding-bottom:8px; color:#bfd0d0; font-size:clamp(1rem,1.3vw,1.14rem); line-height:1.75; }

.toolkit-rail { display:grid; grid-template-columns:1.12fr .88fr; gap:18px; }
.tool-card {
  --tool-accent:var(--tk-cyan);
  --tool-glow:rgba(120,216,200,.18);
  --mx:50%;
  --my:50%;
  --rx:0deg;
  --ry:0deg;
  position:relative;
  min-width:0;
  min-height:650px;
  overflow:hidden;
  padding:clamp(26px,3.2vw,48px);
  border:1px solid var(--tk-line);
  border-radius:8px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),transparent 32%),
    radial-gradient(circle at 90% 0,var(--tool-glow),transparent 38%),
    linear-gradient(145deg,rgba(12,42,49,.96),rgba(5,22,28,.98));
  box-shadow:0 35px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055);
  transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.75,.2,1),border-color .5s ease,box-shadow .5s ease;
}
.tool-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(115deg,transparent 15%,var(--tool-accent) 46%,transparent 72%);
  opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  transition:opacity .45s ease;
  pointer-events:none;
}
.tool-card::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(430px circle at var(--mx) var(--my),color-mix(in srgb,var(--tool-accent) 13%,transparent),transparent 48%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.tool-card > * { position:relative; z-index:1; }
.tool-card:hover { transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px); border-color:color-mix(in srgb,var(--tool-accent) 38%,transparent); box-shadow:0 44px 100px rgba(0,0,0,.31),0 0 56px var(--tool-glow),inset 0 1px 0 rgba(255,255,255,.07); }
.tool-card:hover::after { opacity:1; }
.tool-card:hover::before { opacity:.75; }
.tool-card--rfq { --tool-accent:var(--tk-amber); --tool-glow:rgba(233,185,128,.14); }
.tool-card-top { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#a9bec0; font-size:9px; letter-spacing:.18em; }
.tool-status { display:inline-flex; align-items:center; gap:8px; color:color-mix(in srgb,var(--tool-accent) 78%,white); font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.tool-status i { width:7px; height:7px; border-radius:50%; background:var(--tool-accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--tool-accent) 9%,transparent),0 0 14px var(--tool-accent); animation:tool-status 2.8s ease-in-out infinite; }
.tool-card-copy { display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start; margin-top:clamp(42px,5vw,74px); }
.tool-icon { display:grid; place-items:center; width:58px; height:58px; color:var(--tool-accent); border:1px solid color-mix(in srgb,var(--tool-accent) 32%,transparent); border-radius:16px; background:color-mix(in srgb,var(--tool-accent) 8%,transparent); box-shadow:0 0 32px var(--tool-glow); transform:translateZ(24px); transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .4s ease; }
.tool-card:hover .tool-icon { transform:translateZ(36px) translateY(-2px); box-shadow:0 0 42px var(--tool-glow); }
.tool-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tool-card h3 { color:#f2f3ed; font-family:var(--font-display); font-size:clamp(2rem,3.1vw,3.65rem); font-weight:570; line-height:.96; letter-spacing:-.045em; }
.tool-card-copy p { max-width:560px; margin-top:16px; color:#a9bdbd; font-size:14px; line-height:1.7; }

.converter { margin-top:clamp(36px,4vw,58px); }
.converter-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border:1px solid rgba(166,221,212,.12); border-radius:6px; background:rgba(3,16,21,.42); }
.converter-tabs button,.converter-tabs span { display:grid; place-items:center; min-height:44px; padding:9px 12px; color:#8fa5a7; border:0; border-radius:4px; background:transparent; font-family:var(--font-mono); font-size:9px; text-align:center; text-transform:uppercase; letter-spacing:.08em; transition:color .25s ease,background .25s ease,box-shadow .25s ease; }
.converter-tabs button:hover { color:#dfe9e6; }
.converter-tabs button[aria-selected="true"],.converter-tabs span.is-selected { color:#eafffa; background:rgba(86,164,151,.22); box-shadow:inset 0 0 0 1px rgba(120,216,200,.18),0 8px 25px rgba(0,0,0,.15); }
.converter-panel { grid-template-columns:minmax(150px,1fr) auto minmax(155px,.82fr); align-items:end; gap:18px; margin-top:24px; }
.converter-panel.is-active { display:grid; animation:converter-in .45s cubic-bezier(.2,.75,.2,1) both; }
.converter-panel label > span:first-child,.converter-result small { display:block; margin-bottom:9px; color:#8fa6a8; font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:.12em; }
.converter-panel select,.converter-panel input { width:100%; height:59px; padding:0 17px; color:#eef5f2; border:1px solid rgba(153,219,207,.2); border-radius:4px; outline:0; background:#071a20; font-family:var(--font-display); font-size:16px; }
.converter-panel select:focus,.converter-panel input:focus { border-color:rgba(120,216,200,.65); box-shadow:0 0 0 3px rgba(120,216,200,.08); }
.converter-arrow { padding-bottom:18px; color:var(--tool-accent); font-size:22px; }
.converter-result { min-height:59px; padding:10px 16px; border:1px solid rgba(120,216,200,.26); border-radius:4px; background:linear-gradient(135deg,rgba(120,216,200,.13),rgba(38,104,94,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.converter-result small { margin-bottom:5px; color:#93b8b3; }
.converter-result strong { display:block; color:#dffbf5; font-family:var(--font-display); font-size:20px; font-weight:590; line-height:1; }
.converter-ghost-field { min-height:59px; padding:10px 16px; border:1px solid rgba(153,219,207,.16); border-radius:4px; background:#071a20; }
.converter-ghost-field small { display:block; margin-bottom:5px; color:#8fa6a8; font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:.12em; }
.converter-ghost-field strong { display:block; color:#dfe9e6; font-family:var(--font-display); font-size:20px; font-weight:590; line-height:1; }
.converter-blueprint { position:relative; height:84px; margin-top:18px; overflow:hidden; border:1px solid rgba(120,216,200,.1); border-radius:4px; background:linear-gradient(rgba(120,216,200,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,216,200,.05) 1px,transparent 1px),rgba(5,22,28,.52); background-size:18px 18px; }
.converter-blueprint i { position:absolute; top:50%; left:18%; width:64%; height:1px; background:rgba(120,216,200,.33); }
.converter-blueprint i:nth-child(2) { left:32%; width:36%; transform:rotate(90deg); }
.converter-blueprint i:nth-child(3) { left:26%; width:48%; border-top:1px dashed rgba(120,216,200,.25); background:none; transform:rotate(-18deg); }
.converter-blueprint span,.converter-blueprint b { position:absolute; top:16px; color:#83b8b0; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; }
.converter-blueprint span { left:16px; }
.converter-blueprint b { right:16px; font-weight:400; }
.converter-result.is-updated strong { animation:result-flash .48s ease; }
.converter-input-wrap { display:grid !important; grid-template-columns:1fr 72px; gap:5px; }
.converter-input-wrap select { padding-inline:10px; font-size:13px; }
.converter-note { min-height:36px; margin-top:18px; padding-left:14px; color:#819a9d; border-left:1px solid rgba(120,216,200,.4); font-size:10px; line-height:1.6; }

.rfq-preview { position:relative; margin-top:clamp(38px,4vw,60px); overflow:hidden; border:1px solid rgba(233,185,128,.17); border-radius:6px; background:rgba(4,17,22,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.rfq-preview-head,.rfq-preview-row { display:grid; align-items:center; min-height:60px; padding:0 20px; border-bottom:1px solid rgba(233,185,128,.1); }
.rfq-preview-head { grid-template-columns:1fr auto; color:#a68e70; font-family:var(--font-mono); font-size:8px; letter-spacing:.13em; }
.rfq-preview-head b { color:#e8c89e; font-family:var(--font-display); font-size:13px; letter-spacing:0; }
.rfq-preview-row { grid-template-columns:30px 1fr 1.35fr auto; gap:10px; color:#819799; font-size:10px; transition:color .3s ease,background .3s ease,transform .35s ease; }
.tool-card:hover .rfq-preview-row:nth-child(2) { transform:translateX(3px); transition-delay:.04s; }
.tool-card:hover .rfq-preview-row:nth-child(3) { transform:translateX(6px); transition-delay:.08s; }
.tool-card:hover .rfq-preview-row:nth-child(4) { transform:translateX(9px); transition-delay:.12s; }
.tool-card:hover .rfq-preview-row { color:#9bb0b1; background:rgba(233,185,128,.025); }
.rfq-preview-row i { color:#bd9565; font-family:var(--font-mono); font-style:normal; }
.rfq-preview-row strong { color:#e6e9e4; font-size:12px; }
.rfq-preview-row em { color:#dcb681; font-style:normal; }
.rfq-preview-scan { position:absolute; top:-30%; right:0; left:0; height:28%; background:linear-gradient(180deg,transparent,rgba(233,185,128,.1),transparent); animation:rfq-preview-scan 5.5s ease-in-out infinite; pointer-events:none; }
.tool-features { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; }
.tool-features li { padding:8px 11px; color:#aebdbc; border:1px solid rgba(233,185,128,.14); border-radius:999px; background:rgba(233,185,128,.045); font-family:var(--font-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.tool-action { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:58px; margin-top:24px; padding:0 20px; color:#122329; border:1px solid #efc48d; border-radius:4px; background:linear-gradient(135deg,#f0c992,#d9a767); font-family:var(--font-display); font-size:15px; font-weight:650; cursor:pointer; box-shadow:0 15px 35px rgba(141,91,39,.2); transition:transform .3s ease,box-shadow .3s ease,filter .3s ease; }
.tool-action:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 20px 42px rgba(141,91,39,.3); }
.tool-action span { font-size:20px; }
.tool-action--disabled { color:#8ea2a2; border-color:rgba(128,185,176,.15); background:rgba(66,112,106,.12); box-shadow:none; cursor:default; }
.tool-action--disabled span { font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:.13em; }
.tool-action--disabled:hover { transform:none; filter:none; box-shadow:none; }
.tool-status--soon { color:#9ab0b1; }
.tool-status--soon i { background:#7f9da0; box-shadow:0 0 0 6px rgba(127,157,160,.08); animation:none; }

.toolkit-upcoming { display:grid; grid-template-columns:minmax(220px,.63fr) 1.37fr; gap:clamp(32px,6vw,90px); margin-top:18px; padding:clamp(28px,3vw,42px); border:1px solid rgba(167,219,211,.13); border-radius:8px; background:linear-gradient(135deg,rgba(7,28,34,.82),rgba(12,38,45,.7)); box-shadow:0 24px 65px rgba(0,0,0,.15); }
.toolkit-upcoming-title span { color:#8fc8bf; font-size:8px; letter-spacing:.16em; }
.toolkit-upcoming-title strong { display:block; max-width:330px; margin-top:18px; color:#e7ece8; font-family:var(--font-display); font-size:clamp(1.35rem,2vw,2rem); line-height:1.13; letter-spacing:-.025em; }
.upcoming-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(163,214,206,.1); }
.upcoming-tools article { position:relative; display:flex; flex-direction:column; min-height:150px; padding:21px; overflow:hidden; background:#0b252c; transition:background .35s ease,transform .35s ease; }
.upcoming-tools article::after { content:""; position:absolute; right:-20%; bottom:-60%; width:120px; height:120px; border:1px solid rgba(120,216,200,.12); border-radius:50%; transition:transform .6s ease,border-color .35s ease; }
.upcoming-tools article:hover { z-index:2; background:#103039; transform:translateY(-3px); }
.upcoming-tools article:hover::after { border-color:rgba(120,216,200,.28); transform:scale(1.22); }
.upcoming-tools article > span { color:#6f9295; font-family:var(--font-mono); font-size:9px; }
.upcoming-tools article div { margin:auto 0; }
.upcoming-tools strong { display:block; color:#cfd9d7; font-size:12px; line-height:1.35; }
.upcoming-tools small { display:block; margin-top:7px; color:#779093; font-size:9px; line-height:1.4; }
.upcoming-tools em { color:#7aa79f; font-family:var(--font-mono); font-size:7px; font-style:normal; letter-spacing:.14em; }
.toolkit-scale { grid-column:1/-1; display:grid; grid-template-columns:auto repeat(5,1fr) auto; align-items:center; gap:9px; margin-top:4px; color:#668286; font-size:8px; }
.toolkit-scale i { height:1px; background:rgba(159,212,203,.13); }
.toolkit-scale i:first-of-type { background:var(--tk-cyan); box-shadow:0 0 8px rgba(120,216,200,.5); }
.toolkit-scale b { position:relative; height:1px; background:var(--tk-amber); }
.toolkit-scale b::after { content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%; background:var(--tk-amber); box-shadow:0 0 10px rgba(233,185,128,.7); transform:translate(-50%,-50%); }

html[data-theme="light"] .toolkit-section { --tk-copy:#f0f3ee; --tk-muted:#9db4b6; background:radial-gradient(ellipse at 10% 20%,rgba(44,204,179,.24),transparent 32%),radial-gradient(ellipse at 91% 15%,rgba(89,124,225,.22),transparent 30%),linear-gradient(145deg,#12343d,#0c252d 50%,#102d37); }

@keyframes toolkit-light-pass { 0%,20% { transform:translateX(-75%); opacity:0; } 40% { opacity:1; } 72%,100% { transform:translateX(75%); opacity:0; } }
@keyframes toolkit-orbit { to { transform:rotate(360deg); } }
@keyframes tool-status { 0%,100% { opacity:.55; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
@keyframes converter-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes result-flash { 0% { opacity:.3; transform:translateY(3px); } 100% { opacity:1; transform:none; } }
@keyframes rfq-preview-scan { 0%,16% { top:-30%; opacity:0; } 32% { opacity:.8; } 76% { opacity:.35; } 90%,100% { top:110%; opacity:0; } }

/* Workflow panels now open toward the upper edges and remain compact. */
@media (min-width:901px) {
  .process-panel { width:min(292px,22vw) !important; padding:20px 21px !important; }
  .process-panel-title { font-size:20px !important; }
  .process-panel-desc { font-size:12px !important; line-height:1.58 !important; }
  .process-node[data-step="0"] .process-panel { top:auto !important; right:auto !important; bottom:calc(100% + 16px) !important; left:50% !important; transform:translate(calc(-50% + var(--panel-shift-x)),8px) !important; }
  .process-node[data-step="0"].is-active .process-panel { transform:translate(calc(-50% + var(--panel-shift-x)),0) !important; }
  .process-node[data-step="1"] .process-panel,
  .process-node[data-step="2"] .process-panel { top:auto !important; right:12px !important; bottom:calc(100% + 15px) !important; left:auto !important; transform:translate(calc(var(--panel-shift-x) - 6px),8px) !important; }
  .process-node[data-step="1"].is-active .process-panel,
  .process-node[data-step="2"].is-active .process-panel { transform:translate(var(--panel-shift-x),0) !important; }
  .process-node[data-step="3"] .process-panel,
  .process-node[data-step="4"] .process-panel { top:auto !important; right:auto !important; bottom:calc(100% + 15px) !important; left:12px !important; transform:translate(calc(var(--panel-shift-x) + 6px),8px) !important; }
  .process-node[data-step="3"].is-active .process-panel,
  .process-node[data-step="4"].is-active .process-panel { transform:translate(var(--panel-shift-x),0) !important; }
}

/* No hard slide edges: the new workspace flows into adjacent sections. */
html[data-theme="dark"] main > section:not(#hero) { background-attachment:scroll !important; }
.toolkit-section + .process-section { margin-top:-2px; }
.toolkit-section + .process-section::before { content:""; position:absolute; top:-100px; right:0; left:0; height:180px; pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(57,119,128,.08),transparent); }

@media (max-width:1050px) {
  .toolkit-rail { grid-template-columns:1fr; }
  .tool-card { min-height:0; }
  .toolkit-upcoming { grid-template-columns:1fr; }
  .toolkit-scale { grid-column:auto; }
}
@media (max-width:760px) {
  .toolkit-section { padding-block:88px 100px; }
  .toolkit-heading { grid-template-columns:1fr; gap:26px; }
  .toolkit-heading h2 { font-size:clamp(3.1rem,13vw,5rem); }
  .toolkit-heading > p { padding:0; }
  .toolkit-rail { display:flex; gap:14px; margin-inline:-20px; padding:0 20px 18px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .toolkit-rail::-webkit-scrollbar { display:none; }
  .tool-card { flex:0 0:min(88vw,560px); padding:25px 20px; scroll-snap-align:center; }
  .tool-card-copy { grid-template-columns:48px 1fr; gap:14px; }
  .tool-icon { width:46px; height:46px; border-radius:12px; }
  .tool-icon svg { width:25px; height:25px; }
  .converter-tabs { grid-template-columns:1fr; }
  .converter-tabs button { min-height:38px; }
  .converter-panel,.converter-panel.is-active { grid-template-columns:1fr; gap:12px; }
  .converter-arrow { display:none; }
  .upcoming-tools { grid-template-columns:1fr; }
  .upcoming-tools article { min-height:118px; }
  .toolkit-upcoming { padding:24px 20px; }
}
@media (max-width:480px) {
  .tool-card { flex-basis:92vw; }
  .tool-card h3 { font-size:2rem; }
  .rfq-preview-row { grid-template-columns:25px 1fr auto; }
  .rfq-preview-row span { display:none; }
  .toolkit-heading h2 { font-size:3.05rem; }
}
@media (prefers-reduced-motion:reduce) {
  .toolkit-section::after,.toolkit-orbit,.tool-status i,.rfq-preview-scan { animation:none !important; }
  .tool-card { transform:none !important; transition:none; }
}

/* Interactive engineering-services guide — it explains facilities without
   embedding or launching the tools themselves. */
.toolkit-section--guide { padding-bottom:clamp(96px,10vw,150px); }
.service-guide { 
  display:grid;
  grid-template-columns:minmax(260px,.38fr) minmax(0,1fr);
  min-height:760px;
  overflow:hidden;
  border:1px solid rgba(170,224,215,.18);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(8,30,37,.9),rgba(8,24,31,.82));
  box-shadow:0 38px 100px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045);
}
.service-guide-nav { display:grid; margin:0; padding:0; border-right:1px solid rgba(170,224,215,.14); list-style:none; background:rgba(4,20,26,.35); }
.service-guide-nav li { position:relative; min-width:0; border-bottom:1px solid rgba(170,224,215,.1); }
.service-guide-nav li:last-child { border-bottom:0; }
.service-guide-nav li::before { content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--guide-accent,#78d8c8); box-shadow:0 0 18px var(--guide-accent,#78d8c8); transform:scaleY(0); transition:transform .45s cubic-bezier(.2,.75,.2,1); }
.service-guide-nav li:nth-child(1) { --guide-accent:#e9b980; }
.service-guide-nav li:nth-child(2) { --guide-accent:#78d8c8; }
.service-guide-nav li:nth-child(3) { --guide-accent:#89aaf0; }
.service-guide-nav li:nth-child(4) { --guide-accent:#bd92dd; }
.service-guide-nav li.is-active::before { transform:scaleY(1); }
.service-guide-nav button { display:grid; grid-template-columns:34px 1fr; align-content:center; width:100%; height:100%; min-height:135px; padding:25px 27px; color:#81999c; border:0; outline:0; background:transparent; text-align:left; cursor:pointer; transition:color .35s ease,background .35s ease,padding .4s cubic-bezier(.2,.75,.2,1); }
.service-guide-nav button:hover,.service-guide-nav button:focus-visible,.service-guide-nav li.is-active button { padding-left:33px; color:#e8efec; background:linear-gradient(90deg,color-mix(in srgb,var(--guide-accent) 10%,transparent),transparent 78%); }
.service-guide-nav button > span { grid-row:1/3; color:var(--guide-accent); font-size:9px; letter-spacing:.12em; }
.service-guide-nav strong { color:inherit; font-family:var(--font-display); font-size:17px; font-weight:580; line-height:1.18; }
.service-guide-nav small { margin-top:7px; color:#789094; font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.service-guide-nav li.is-active small { color:color-mix(in srgb,var(--guide-accent) 75%,white); }

.service-guide-stage {
  --guide-stage:#e9b980;
  --mx:70%;
  --my:35%;
  --rx:0deg;
  --ry:0deg;
  position:relative;
  isolation:isolate;
  min-width:0;
  overflow:hidden;
  padding:clamp(54px,6vw,88px);
  background:
    radial-gradient(460px circle at var(--mx) var(--my),color-mix(in srgb,var(--guide-stage) 13%,transparent),transparent 58%),
    linear-gradient(145deg,rgba(17,53,61,.9),rgba(6,26,33,.95));
  transform:perspective(1500px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:background .55s ease,transform .45s cubic-bezier(.2,.75,.2,1);
}
.service-guide-stage[data-accent="convert"] { --guide-stage:#78d8c8; }
.service-guide-stage[data-accent="review"] { --guide-stage:#89aaf0; }
.service-guide-stage[data-accent="document"] { --guide-stage:#bd92dd; }
.service-guide-stage::before { content:""; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(color-mix(in srgb,var(--guide-stage) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--guide-stage) 6%,transparent) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 68% 42%,#000,transparent 67%); }
.service-guide-stage::after { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:-28%; width:22%; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--guide-stage) 16%,transparent),transparent); filter:blur(8px); transform:skewX(-12deg); animation:service-stage-scan 7s ease-in-out infinite; }
.service-guide-radar { position:absolute; z-index:1; top:48%; right:clamp(25px,6vw,92px); width:clamp(230px,30vw,410px); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--guide-stage) 18%,transparent); border-radius:50%; transform:translateY(-50%) rotate(calc(var(--toolkit-scroll) * 22deg)); box-shadow:0 0 80px color-mix(in srgb,var(--guide-stage) 7%,transparent); transition:border-color .5s ease; pointer-events:none; }
.service-guide-radar::before,.service-guide-radar::after,.service-guide-radar > i { content:""; position:absolute; inset:14%; border:1px solid color-mix(in srgb,var(--guide-stage) 13%,transparent); border-radius:50%; }
.service-guide-radar::after { inset:30%; }
.service-guide-radar > i:nth-child(1) { top:50%; right:0; bottom:auto; left:0; border:0; border-top:1px solid color-mix(in srgb,var(--guide-stage) 20%,transparent); border-radius:0; }
.service-guide-radar > i:nth-child(2) { top:0; right:auto; bottom:0; left:50%; border:0; border-left:1px solid color-mix(in srgb,var(--guide-stage) 20%,transparent); border-radius:0; }
.service-guide-radar > b { position:absolute; top:50%; left:50%; width:42%; height:1px; background:linear-gradient(90deg,var(--guide-stage),transparent); transform-origin:left center; animation:service-radar 6.5s linear infinite; }
.service-guide-radar > span { position:absolute; z-index:3; top:50%; left:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:190px; aspect-ratio:1; padding:25px; border:1px solid color-mix(in srgb,var(--guide-stage) 35%,transparent); border-radius:50%; background:rgba(6,27,34,.88); box-shadow:0 0 42px rgba(0,0,0,.28),inset 0 0 34px color-mix(in srgb,var(--guide-stage) 8%,transparent); transform:translate(-50%,-50%) rotate(calc(var(--toolkit-scroll) * -22deg)); backdrop-filter:blur(12px); }
.service-transformation small,.service-transformation b,.service-transformation strong { display:block; position:static; width:auto; height:auto; max-width:142px; background:none; box-shadow:none; animation:none; transform:none; text-align:center; }
.service-transformation small { color:#b5c5c4; font-family:var(--font-display); font-size:12px; line-height:1.12; }
.service-transformation b { color:var(--guide-stage); font-family:var(--font-display); font-size:13px; font-weight:600; line-height:1.12; }
.service-transformation strong { color:#f1f5f1; font-family:var(--font-display); font-size:17px; font-weight:650; line-height:1.05; letter-spacing:-.02em; }
.service-transformation i { position:static; inset:auto; color:color-mix(in srgb,var(--guide-stage) 72%,white); border:0; font-family:var(--font-mono); font-size:11px; font-style:normal; line-height:1; }
.service-guide-photo { position:absolute; z-index:0; top:0; right:0; width:52%; height:61%; margin:0; overflow:hidden; border-left:1px solid color-mix(in srgb,var(--guide-stage) 15%,transparent); opacity:.94; mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%),linear-gradient(to bottom,#000 0 74%,transparent 100%); mask-composite:intersect; }
.service-guide-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,rgba(7,31,38,.88),rgba(7,31,38,.06) 72%),linear-gradient(to bottom,transparent 55%,rgba(7,31,38,.84)); mix-blend-mode:multiply; }
.service-guide-photo img { width:100%; height:100%; object-fit:cover; object-position:64% 50%; filter:saturate(.92) contrast(1.02) brightness(.98); transform:scale(1.015); transition:transform 1.4s cubic-bezier(.2,.75,.2,1),filter .7s ease,opacity .35s ease; }
.service-guide-stage:hover .service-guide-photo img { transform:scale(1.045); filter:saturate(1.02) contrast(1.03) brightness(1.04); }
.service-guide-photo-scan { position:absolute; z-index:2; top:0; bottom:0; left:-24%; width:18%; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--guide-stage) 22%,transparent),transparent); filter:blur(6px); transform:skewX(-10deg); animation:service-photo-scan 7.5s ease-in-out infinite; }
.service-guide-photo figcaption { position:absolute; z-index:3; right:12px; bottom:12px; color:rgba(220,235,231,.52); font-family:var(--font-mono); font-size:6px; letter-spacing:.05em; }
.service-guide-copy { position:relative; z-index:2; max-width:54%; transform:translateZ(22px); }
.service-guide-kicker { color:var(--guide-stage); font-size:8px; letter-spacing:.16em; }
.service-guide-copy h3 { max-width:560px; margin-top:18px; color:#f0f2ed; font-family:var(--font-display); font-size:clamp(3rem,5.7vw,6.4rem); font-weight:570; line-height:.88; letter-spacing:-.06em; }
.service-guide-copy > p { max-width:520px; margin-top:25px; color:#c1cfce; font-size:clamp(.98rem,1.2vw,1.08rem); line-height:1.7; }
.service-guide-copy ul { display:grid; gap:11px; margin:28px 0 0; padding:0; list-style:none; }
.service-guide-copy li { display:flex; align-items:center; gap:12px; color:#9eb3b4; font-size:12px; }
.service-guide-copy li::before { content:""; flex:0 0 19px; width:19px; height:1px; background:var(--guide-stage); box-shadow:0 0 8px color-mix(in srgb,var(--guide-stage) 45%,transparent); }
.service-guide-stage.is-changing .service-guide-copy > * { animation:service-copy-in .58s cubic-bezier(.2,.75,.2,1) both; }
.service-guide-stage.is-changing .service-guide-copy > *:nth-child(2) { animation-delay:.04s; }
.service-guide-stage.is-changing .service-guide-copy > *:nth-child(3) { animation-delay:.08s; }
.service-guide-stage.is-changing .service-guide-copy > *:nth-child(4) { animation-delay:.12s; }
.service-guide-journey { position:absolute; z-index:3; right:clamp(35px,5vw,70px); bottom:clamp(30px,4vw,58px); left:clamp(54px,6vw,88px); padding-top:24px; border-top:1px solid rgba(170,224,215,.1); }
.service-guide-hover-cue { display:flex; align-items:center; gap:7px; margin:0 0 12px; color:#9eb1b2; font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.service-guide-hover-cue i { width:7px; height:7px; border-radius:50%; background:var(--guide-stage); box-shadow:0 0 0 5px color-mix(in srgb,var(--guide-stage) 8%,transparent),0 0 12px var(--guide-stage); animation:tool-status 2.8s ease-in-out infinite; }
.service-guide-hover-cue strong { color:#e7efec; font-weight:600; }
.service-guide-steps { position:relative; display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items:center; gap:10px; color:#90a5a6; }
.service-guide-steps::before { content:""; position:absolute; z-index:0; top:21px; right:6px; left:6px; height:1px; background:linear-gradient(90deg,color-mix(in srgb,var(--guide-stage) 26%,transparent),rgba(170,224,215,.11),color-mix(in srgb,var(--guide-stage) 26%,transparent)); box-shadow:0 0 10px color-mix(in srgb,var(--guide-stage) 12%,transparent); }
.service-guide-steps::after { content:""; position:absolute; z-index:1; top:17px; left:5px; width:9px; height:9px; border:1px solid color-mix(in srgb,var(--guide-stage) 72%,white); border-radius:50%; background:#102f36; box-shadow:0 0 0 5px color-mix(in srgb,var(--guide-stage) 8%,transparent),0 0 16px var(--guide-stage); animation:service-signal-travel 6.2s cubic-bezier(.45,0,.55,1) infinite alternate; }
.service-guide-steps button { position:relative; z-index:3; display:grid; gap:7px; min-width:112px; min-height:66px; padding:10px 12px; color:inherit; border:1px solid rgba(173,224,215,.14); border-radius:4px; outline:0; background:rgba(5,24,30,.94); box-shadow:0 9px 24px rgba(0,0,0,.12); text-align:left; cursor:pointer; transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease; }
.service-guide-steps button:hover,.service-guide-steps button:focus-visible,.service-guide-steps button.is-active { border-color:color-mix(in srgb,var(--guide-stage) 48%,transparent); background:linear-gradient(145deg,color-mix(in srgb,var(--guide-stage) 11%,#09242b),#071d23); box-shadow:0 14px 30px rgba(0,0,0,.2),0 0 22px color-mix(in srgb,var(--guide-stage) 8%,transparent); transform:translateY(-3px); }
.service-guide-steps button::before { content:""; width:7px; height:7px; margin-left:1px; border:1px solid color-mix(in srgb,var(--guide-stage) 38%,transparent); border-radius:50%; background:#0a272e; box-shadow:0 0 0 5px #071d23; transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.service-guide-steps button:hover::before,.service-guide-steps button:focus-visible::before,.service-guide-steps button.is-active::before { border-color:var(--guide-stage); background:var(--guide-stage); box-shadow:0 0 0 5px rgba(7,28,34,.86),0 0 14px color-mix(in srgb,var(--guide-stage) 70%,transparent); transform:scale(1.2); }
.service-guide-steps i { color:var(--guide-stage); font-family:var(--font-mono); font-size:8px; font-style:normal; }
.service-guide-steps b { position:relative; color:#8ea4a5; font-size:9px; font-weight:550; text-transform:uppercase; letter-spacing:.07em; transition:color .25s ease,transform .25s ease; }
.service-guide-steps button:hover b,.service-guide-steps button:focus-visible b,.service-guide-steps button.is-active b { color:#edf4f1; transform:translateY(-2px); }
.service-guide-steps button.is-active i { text-shadow:0 0 11px color-mix(in srgb,var(--guide-stage) 80%,transparent); }
.service-guide-steps em { position:relative; z-index:2; height:1px; overflow:hidden; background:rgba(170,224,215,.13); }
.service-guide-steps em::after { content:""; display:block; width:42%; height:100%; background:var(--guide-stage); box-shadow:0 0 8px color-mix(in srgb,var(--guide-stage) 45%,transparent); animation:service-step-line 3.8s ease-in-out infinite; }
.service-guide-step-detail { display:grid; grid-template-columns:68px minmax(140px,.6fr) minmax(220px,1.4fr); align-items:start; gap:18px; min-height:78px; margin-top:16px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--guide-stage) 17%,transparent); border-radius:4px; background:rgba(4,20,26,.63); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); backdrop-filter:blur(12px); }
.service-guide-step-detail > span { padding-top:3px; color:var(--guide-stage); font-size:8px; letter-spacing:.1em; }
.service-guide-step-detail > strong { color:#e3ebe8; font-family:var(--font-display); font-size:14px; line-height:1.3; }
.service-guide-step-detail > p { color:#91a7a8; font-size:10px; line-height:1.55; }
.service-guide-step-detail.is-updated > * { animation:service-detail-in .42s cubic-bezier(.2,.75,.2,1) both; }
.service-guide-float { position:absolute; z-index:4; min-width:144px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--guide-stage) 38%,transparent); border-radius:4px; background:rgba(5,25,31,.9); box-shadow:0 16px 38px rgba(0,0,0,.27),0 0 24px color-mix(in srgb,var(--guide-stage) 7%,transparent); backdrop-filter:blur(14px); animation:service-float 5s ease-in-out infinite; }
.service-guide-float span { display:block; color:#a6b9b9; font-family:var(--font-mono); font-size:8px; letter-spacing:.14em; }
.service-guide-float strong { display:block; margin-top:7px; color:var(--guide-stage); font-family:var(--font-display); font-size:16px; }
.service-guide-float--one { top:18%; right:7%; }
.service-guide-float--two { top:45%; right:4%; animation-delay:-2.4s; }
.service-guide-foot { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:18px; padding:22px 28px; border:1px solid rgba(170,224,215,.12); border-radius:6px; background:rgba(6,26,32,.46); }
.service-guide-foot span { color:#8fc8bf; font-size:8px; letter-spacing:.13em; }
.service-guide-foot p { color:#8fa6a8; font-size:11px; }

@keyframes service-stage-scan { 0%,15% { left:-30%; opacity:0; } 28% { opacity:.65; } 74% { opacity:.25; } 90%,100% { left:115%; opacity:0; } }
@keyframes service-radar { to { transform:rotate(360deg); } }
@keyframes service-copy-in { from { opacity:0; transform:translateY(12px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes service-step-line { 0%,100% { transform:translateX(-110%); opacity:.2; } 50% { transform:translateX(240%); opacity:1; } }
@keyframes service-float { 0%,100% { transform:translate3d(0,-4px,0); } 50% { transform:translate3d(0,5px,0); } }
@keyframes service-detail-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes service-photo-scan { 0%,18% { left:-25%; opacity:0; } 32% { opacity:.65; } 78% { opacity:.2; } 92%,100% { left:112%; opacity:0; } }
@keyframes service-signal-travel { 0% { left:5px; } 100% { left:calc(100% - 15px); } }

@media (max-width:980px) {
  .service-guide { grid-template-columns:1fr; }
  .service-guide-nav { grid-template-columns:repeat(4,1fr); border-right:0; border-bottom:1px solid rgba(170,224,215,.14); }
  .service-guide-nav li { border-right:1px solid rgba(170,224,215,.1); border-bottom:0; }
  .service-guide-nav button { grid-template-columns:1fr; min-height:112px; padding:18px; }
  .service-guide-nav button:hover,.service-guide-nav button:focus-visible,.service-guide-nav li.is-active button { padding-left:18px; }
  .service-guide-nav button > span { grid-row:auto; }
  .service-guide-stage { min-height:720px; }
  .service-guide-copy { max-width:58%; }
}
@media (max-width:700px) {
  .service-guide-nav { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .service-guide-nav::-webkit-scrollbar { display:none; }
  .service-guide-nav li { flex:0 0 70%; scroll-snap-align:center; }
  .service-guide-stage { min-height:890px; padding:42px 24px; }
  .service-guide-copy { max-width:none; }
  .service-guide-copy h3 { font-size:clamp(2.8rem,13vw,4.4rem); }
  .service-guide-radar { right:-100px; opacity:.65; }
  .service-guide-photo { top:300px; right:0; width:100%; height:245px; opacity:.48; border-left:0; }
  .service-guide-float { display:none; }
  .service-guide-journey { right:24px; bottom:28px; left:24px; }
  .service-guide-steps { grid-template-columns:repeat(5,minmax(76px,1fr)); gap:5px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
  .service-guide-steps::-webkit-scrollbar { display:none; }
  .service-guide-steps em { display:none; }
  .service-guide-step-detail { grid-template-columns:1fr; gap:7px; min-height:150px; }
  .service-guide-foot { display:block; padding:20px; }
  .service-guide-foot p { margin-top:9px; line-height:1.5; }
}
@media (prefers-reduced-motion:reduce) {
  .service-guide-stage::after,.service-guide-radar b,.service-guide-steps::after,.service-guide-steps em::after,.service-guide-float,.service-guide-photo-scan { animation:none !important; }
}