/* DevTech83 Hero V3. Scoped integration; prototype and shared V2 files unchanged. */
.hero-v3 {
 --graphite:#171d23; --steel:#293a49; --orange:#e77934; --white:#f2f4f5;
 --muted:#b7c3cb; --line:rgba(183,195,203,.2); --v3-header-height:88px;
 color:var(--white); background:var(--graphite); font-family:"Segoe UI",Arial,sans-serif;
 line-height:normal; text-align:left;
}
.hero-v3 *, .hero-v3 *::before, .hero-v3 *::after { box-sizing:border-box; }
.hero-v3 a { color:inherit; text-decoration:none; touch-action:manipulation; }
.hero-v3 button { font:inherit; cursor:pointer; touch-action:manipulation; }
.hero-v3 a:focus-visible, .hero-v3 button:focus-visible { outline:3px solid var(--orange); outline-offset:6px; }
.hero-v3 h1, .hero-v3 p { margin-top:0; }
.hero-v3 h1 {
 font-family:Bahnschrift,"Arial Narrow",Arial,sans-serif; font-weight:600;
 font-size:clamp(48px,5.2vw,89px); letter-spacing:-.055em; line-height:1.06;
 margin-bottom:30px; text-wrap:initial;
}
.hero-v3 { height:165svh;position:relative }
.hero-v3 .v3-hero-frame { height:calc(100svh - 20px);min-height:760px;max-height:1050px;position:sticky;top:0;isolation:isolate;overflow:clip;background:var(--graphite) }
.hero-v3 .v3-backdrop { position:absolute;inset:0;overflow:hidden;z-index:-1;background:radial-gradient(ellipse at 76% 42%,#374b59 0%,#22313d 30%,#171d23 68%) }
.hero-v3 .v3-light-shaft { position:absolute;top:-35%;left:65%;width:20%;height:140%;transform:rotate(28deg);background:linear-gradient(90deg,transparent,rgba(242,244,245,.065),transparent) }
.hero-v3 .v3-floor-grid { position:absolute;width:150%;height:900px;left:-25%;top:46%;transform:perspective(600px) rotateX(68deg);transform-origin:center top;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(transparent,#000 28%,transparent 75%);opacity:.45 }
.hero-v3 .v3-backdrop-type { position:absolute;bottom:4%;left:16%;font-family:Bahnschrift,"Arial Narrow",sans-serif;font-size:clamp(120px,18vw,340px);font-weight:800;letter-spacing:-.06em;color:rgba(242,244,245,.027);line-height:1 }
.hero-v3 .v3-hero-layout { width:90%;max-width:1660px;margin:auto;display:grid;grid-template-columns:46% 54%;align-items:center;height:calc(100% - 90px) }
.hero-v3 .v3-hero-copy { position:relative;z-index:3;padding:25px 0 42px }
.hero-v3 .v3-highlight { color:var(--orange); }
.hero-v3 .v3-intro { font-size:14px;display:flex;align-items:center;gap:12px;margin:0 0 27px;color:#d6dee3 }
.hero-v3 .v3-intro span { height:7px;width:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 20px #e7793455 }
.hero-v3 .v3-lead { font-size:16px;line-height:1.75;color:var(--muted);max-width:440px;margin-bottom:30px }
.hero-v3 .v3-data-note { color:#b7c3cb;font-size:12px;line-height:1.5;max-width:440px;margin:-18px 0 24px; }
.hero-v3 .v3-cta { display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:18px 22px;background:var(--orange);color:var(--graphite);font-size:14px;font-weight:700;min-height:54px;border:1px solid var(--orange);transition:background .2s }
.hero-v3 .v3-cta:hover { background:#f48e4c }
.hero-v3 .v3-cta span { font-size:23px;line-height:1 }
.hero-v3 .v3-hero-note { font-size:12px;color:var(--muted);margin:18px 0 0 }
.hero-v3 .v3-product-scene { position:relative;margin:0;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center;perspective:1400px }
.hero-v3 .v3-world { position:relative;width:660px;height:630px;flex-shrink:0;transform:scale(.96);transform-style:preserve-3d }
.hero-v3 .v3-engineering-ring { position:absolute;width:510px;height:510px;border:1px solid #9badbc39;border-radius:50%;left:85px;top:0;transform:rotateY(-24deg) rotateX(8deg);box-shadow:inset 0 0 0 24px #a4b4bd04,0 0 0 26px #a4b4bd03 }
.hero-v3 .v3-engineering-ring:before,
.hero-v3 .v3-engineering-ring:after { content:"";position:absolute;inset:35px;border:1px dashed #b7c3cb24;border-radius:50% }
.hero-v3 .v3-engineering-ring:after { inset:-30px;border-style:solid;border-color:#a7b6c117 }
.hero-v3 .v3-engineering-ring i { position:absolute;width:7px;height:7px;background:var(--orange);border-radius:50%;top:3%;left:27%;box-shadow:0 0 15px #e7793488 }
.hero-v3 .v3-engineering-ring i:nth-child(2) { top:69%;left:94%;background:#9cabb4 }
.hero-v3 .v3-engineering-ring i:nth-child(3) { top:91%;left:20%;width:4px;height:4px }
.hero-v3 .v3-back-rail { position:absolute;left:105px;top:420px;width:510px;height:70px;background:repeating-linear-gradient(90deg,#32434e 0px,#32434e 10px,#1d2a33 11px,#1d2a33 17px);transform:skewY(-12deg);border-top:2px solid #647582;opacity:.6 }
.hero-v3 .v3-platform { position:absolute;left:88px;top:492px;width:500px;height:105px;transform:rotate(-7deg);filter:drop-shadow(0 30px 22px #0006) }
.hero-v3 .v3-platform-top { height:100%;background:linear-gradient(160deg,#5e6d76,#293a49 60%,#19242c);clip-path:polygon(14% 0,100% 0,86% 65%,0 65%);border-top:1px solid #b7c3cb }
.hero-v3 .v3-platform-edge { position:absolute;inset:60% 0 0;background:linear-gradient(90deg,#a64c20,var(--orange) 65%,#a84c20);clip-path:polygon(0 0,86% 0,100% -150%,86% 100%,0 100%) }
.hero-v3 .v3-platform span { position:absolute;top:71%;left:27%;font-family:Bahnschrift,sans-serif;font-size:12px;letter-spacing:.12em;color:#171d23;font-weight:700 }
.hero-v3 .v3-phone-layer { position:absolute;left:225px;top:33px;z-index:3;transform:rotate(-9deg) rotateY(-16deg) rotateX(5deg);transform-style:preserve-3d }
.hero-v3 .v3-phone { width:236px;height:482px;border-radius:36px;background:#11191f;padding:7px;border:1px solid #9aa7ae;box-shadow:8px 8px 0 #10181e,11px 11px 0 #4e606b,25px 38px 50px #0006;position:relative }
.hero-v3 .v3-phone:before { content:"";position:absolute;left:-4px;top:106px;width:3px;height:40px;background:#7b8993;border-radius:2px }
.hero-v3 .v3-phone-hardware { height:31px;background:var(--white);color:var(--graphite);border-radius:29px 29px 0 0;padding:11px 18px 0;display:flex;justify-content:space-between;font-size:9px;font-weight:700;position:relative }
.hero-v3 .v3-phone-hardware:after { content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:58px;height:15px;background:#11191f;border-radius:15px }
.hero-v3 .v3-phone-screen { border-radius:0 0 29px 29px;background:var(--white);color:var(--graphite);height:435px;overflow:hidden;padding:14px 17px 8px }
.hero-v3 .v3-app-brand { display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px }
.hero-v3 .v3-app-symbol { display:grid;place-items:center;background:var(--graphite);color:var(--orange);border-radius:7px;width:26px;height:26px;font-size:22px;font-family:Bahnschrift,sans-serif }
.hero-v3 .v3-screen-label { font-size:10px;color:#59646c;margin:13px 0 17px }
.hero-v3 .v3-screen-title { font-family:Bahnschrift,sans-serif;font-size:29px;font-weight:600;letter-spacing:-.035em;line-height:1.12;margin-bottom:18px }
.hero-v3 .v3-voice-orb { margin:0 auto;width:72px;height:72px;display:grid;place-items:center;background:var(--orange);border-radius:50%;box-shadow:0 0 0 8px #e7793412,0 0 0 17px #e7793408 }
.hero-v3 .v3-voice-orb svg { width:32px;height:32px;stroke:var(--graphite);stroke-width:2;stroke-linecap:round }
.hero-v3 .v3-waveform { height:39px;display:flex;gap:4px;justify-content:center;align-items:center;margin-top:15px }
.hero-v3 .v3-waveform i { width:3px;height:12px;background:#bd5820;border-radius:3px }
.hero-v3 .v3-waveform i:nth-child(3n) { height:24px }
.hero-v3 .v3-waveform i:nth-child(4n) { height:33px }
.hero-v3 .v3-waveform i:nth-child(5n) { height:18px }
.hero-v3 .v3-voice-example { text-align:center;font-size:12px;line-height:1.55;margin:4px 0 19px;color:#495863 }
.hero-v3 .v3-concept-action { font-size:10px;display:flex;align-items:center;gap:8px;border-top:1px solid #293a4928;padding-top:11px }
.hero-v3 .v3-concept-action>span { font-size:18px;color:#b14d15 }
.hero-v3 .v3-phone-home { width:68px;height:3px;border-radius:3px;background:#293a4966;margin:16px auto 0 }
.hero-v3 .v3-document-layer { position:absolute;left:420px;top:90px;transform:rotate(12deg) rotateY(-21deg) scale(.9);z-index:2 }
.hero-v3 .v3-document { width:224px;height:300px;background:linear-gradient(130deg,#f2f4f5,#d2dde4);color:var(--graphite);padding:23px;box-shadow:8px 8px 0 #78909f40,18px 26px 42px #0005;border:1px solid #fff7 }
.hero-v3 .v3-document-top { display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:11px }
.hero-v3 .v3-document-symbol { font-size:20px;color:#a74713 }
.hero-v3 .v3-document-kind { font-family:Bahnschrift,sans-serif;font-size:29px;font-weight:600;margin:22px 0 2px }
.hero-v3 .v3-document-ref { font-size:9px;color:#53616c;margin-bottom:15px }
.hero-v3 .v3-document-rule { height:3px;background:var(--orange);margin-bottom:13px;width:31px }
.hero-v3 .v3-document-client { font-size:11px;line-height:1.7 }
.hero-v3 .v3-document-client small { color:#53616c;font-size:9px }
.hero-v3 .v3-document-line { font-size:9px;display:flex;justify-content:space-between;border-top:1px solid #293a4922;padding:8px 0 }
.hero-v3 .v3-document-skeleton { height:3px;width:65%;background:#293a4922;margin:7px 0 }
.hero-v3 .v3-document-stamp { font-size:8px;color:#53616c;margin-top:17px }
.hero-v3 .v3-signal-layer { position:absolute;left:7px;top:357px;z-index:4;transform:rotate(-5deg) }
.hero-v3 .v3-signal { width:273px;padding:18px;display:flex;align-items:center;gap:12px;background:#293a49f0;border:1px solid #8da0af55;border-left:3px solid var(--orange);box-shadow:0 20px 40px #0005 }
.hero-v3 .v3-signal-icon { font-size:30px;color:var(--orange) }
.hero-v3 .v3-signal div { display:grid;gap:5px }
.hero-v3 .v3-signal div>span { font-size:10px;color:#c0cbd3 }
.hero-v3 .v3-signal strong { font-size:12px;font-weight:600 }
.hero-v3 .v3-measure { position:absolute;bottom:0;left:195px;font-size:10px;display:flex;align-items:center;gap:16px;color:var(--muted) }
.hero-v3 .v3-measure span { width:45px;height:1px;background:#b7c3cb66 }
.hero-v3 .v3-product-scene figcaption { position:absolute;bottom:0;left:19%;display:flex;gap:20px;align-items:center;z-index:4 }
.hero-v3 .v3-product-scene figcaption strong { font-family:Bahnschrift,sans-serif;font-size:21px;font-weight:500 }
.hero-v3 .v3-product-scene figcaption>span { font-size:10px;line-height:1.7;color:var(--muted);border-left:1px solid var(--line);padding-left:15px }
.hero-v3 .v3-scene-footer { position:absolute;left:5%;right:5%;bottom:22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:19px;gap:20px }
.hero-v3 .v3-scroll-cue { display:flex;gap:13px;align-items:center;font-size:11px;min-height:44px;color:var(--muted) }
.hero-v3 .v3-scroll-line { width:25px;height:1px;background:var(--orange) }
.hero-v3 .v3-motion-controls { display:flex;gap:12px }
.hero-v3 .v3-motion-controls[hidden] { display:none }
.hero-v3 .v3-motion-controls button { color:var(--muted);background:transparent;border:0;border-bottom:1px solid #a7b6c144;min-height:44px;padding:8px;font-size:11px }
.hero-v3 .v3-motion-controls button:hover { color:var(--white) }
.hero-v3 .v3-motion-controls button:disabled { opacity:.55;cursor:default }
.hero-v3 .v3-scene-index { font-size:13px;font-variant-numeric:tabular-nums }
.hero-v3 .v3-scene-index span { color:#95a5b5;margin:0 10px }
.hero-v3 .v3-progress { position:absolute;bottom:0;height:2px;background:#8da0af22;left:0;right:0 }
.hero-v3 .v3-progress>span { height:100%;width:100%;background:var(--orange);display:block;transform:scaleX(0);transform-origin:left }
.hero-v3 .v3-world { transform-style:flat }
@media(min-width:901px) {
.hero-v3 .v3-hero-frame { height:calc(100svh - 100px);min-height:680px }
}
@media(min-width:1700px) {
.hero-v3 .v3-world { transform:scale(1.12) }
}
@media(max-width:1190px) and (min-width:901px) {
.hero-v3 .v3-world { transform:scale(.8) }
.hero-v3 .v3-hero-layout { grid-template-columns:48% 52% }
.hero-v3 .v3-product-scene figcaption { left:6% }
.hero-v3 .v3-lead { max-width:365px }
.hero-v3 .v3-hero-frame { min-height:760px }
}
@media(max-width:900px) {
.hero-v3 { height:auto }
.hero-v3 .v3-hero-frame { height:auto;min-height:0;max-height:none;position:relative;padding-bottom:110px }
.hero-v3 .v3-hero-layout { display:flex;flex-direction:column;align-items:stretch;height:auto }
.hero-v3 .v3-hero-copy { padding:48px 0 10px;max-width:600px }
.hero-v3 .v3-lead { max-width:520px;font-size:16px }
.hero-v3 .v3-data-note { margin-top:-13px;margin-bottom:20px; }
.hero-v3 .v3-hero-note { display:none }
.hero-v3 .v3-product-scene { height:620px;align-self:auto;display:flex }
.hero-v3 .v3-world { transform:scale(.94) }
.hero-v3 .v3-product-scene figcaption { bottom:-8px;left:50%;transform:translateX(-50%);width:max-content;max-width:100% }
.hero-v3 .v3-scene-footer { bottom:14px;flex-wrap:wrap;gap:4px;padding-top:8px }
.hero-v3 .v3-scene-index { display:none }
.hero-v3 .v3-motion-controls { gap:8px }
.hero-v3 .v3-scroll-cue { font-size:11px }
.hero-v3 .v3-floor-grid { top:60% }
.hero-v3 .v3-backdrop-type { bottom:12%;left:0 }
}
@media(max-width:540px) {
.hero-v3 .v3-hero-layout { width:88% }
.hero-v3 .v3-hero-copy { padding-top:35px }
.hero-v3 .v3-intro { margin-bottom:20px;font-size:12px }
.hero-v3 .v3-lead { font-size:14px;line-height:1.8;margin-bottom:23px }
.hero-v3 .v3-data-note { font-size:12px;margin-top:-10px;margin-bottom:18px; }
.hero-v3 .v3-cta { font-size:13px;padding:15px 18px }
.hero-v3 .v3-product-scene { height:440px;margin:0 -6vw }
.hero-v3 .v3-world { transform:scale(.62) }
.hero-v3 .v3-product-scene figcaption { bottom:-15px;gap:10px }
.hero-v3 .v3-product-scene figcaption strong { font-size:17px }
.hero-v3 .v3-product-scene figcaption>span { font-size:9px;padding-left:10px }
.hero-v3 .v3-hero-frame { padding-bottom:155px }
.hero-v3 .v3-scene-footer { left:6%;right:6%;bottom:16px }
.hero-v3 .v3-motion-controls { width:100%;justify-content:space-between }
.hero-v3 .v3-motion-controls button { font-size:10px;padding:6px }
}
@media(max-width:540px) {
.hero-v3 .v3-world { transform:scale(.54) }
}
@media(prefers-reduced-motion:reduce) {
.hero-v3 { height:auto }
.hero-v3 .v3-hero-frame { position:relative }
.hero-v3 .v3-progress { display:none }
}
/* Sticky navigation is measured locally; no global layout styles are changed. */
.hero-v3 .v3-hero-frame { top:var(--v3-header-height); }
.hero-v3 .v3-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hero-v3 .v3-cta { color:var(--graphite); }
.hero-v3 .v3-contact { border:1px solid #72818c; padding:17px 18px; min-height:54px; display:inline-flex; align-items:center; font-size:14px; }
.hero-v3 .v3-contact:hover { background:var(--steel); }
.hero-v3 .v3-services { padding:23px 5%; display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); background:var(--graphite); color:var(--muted); font-size:12px; position:relative; z-index:2; }
.hero-v3 .v3-services p { margin:0; }
.hero-v3 .v3-services p::before { content:"+"; color:var(--orange); margin-right:14px; }
.hero-v3:not(.v3-enhanced) { height:auto; }
.hero-v3:not(.v3-enhanced) .v3-hero-frame { position:relative; top:0; }
@media(min-width:901px) {
 .hero-v3 .v3-hero-frame { height:calc(100svh - var(--v3-header-height)); min-height:680px; }
 .hero-v3.v3-enhanced .v3-services { position:absolute; bottom:0; left:0; right:0; }
}
@media(max-width:1190px) and (min-width:901px) { .hero-v3 h1 { font-size:58px; } }
@media(max-width:900px) {
 .hero-v3 { --v3-header-height:76px; }
 .hero-v3 .v3-hero-frame { top:0; }
 .hero-v3 h1 { font-size:clamp(42px,8.8vw,72px); line-height:1.05; }
 .hero-v3 .v3-services { flex-wrap:wrap; justify-content:flex-start; }
}
@media(max-width:540px) {
 .hero-v3 h1 { font-size:clamp(38px,10vw,54px); margin-bottom:22px; }
 .hero-v3 .v3-contact { font-size:13px; padding:14px 16px; min-height:50px; }
 .hero-v3 .v3-services { display:grid; gap:9px; padding:20px 6%; }
}
@media(min-width:901px) and (max-height:760px) {
 .hero-v3 { height:auto; }
 .hero-v3 .v3-hero-frame { position:relative; top:0; height:auto; min-height:760px; }
 .hero-v3 .v3-hero-layout { min-height:660px; height:auto; }
 .hero-v3.v3-enhanced .v3-services { position:relative; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-v3 { height:auto; }
 .hero-v3 .v3-hero-frame { position:relative; top:0; }
 .hero-v3.v3-enhanced .v3-services { position:relative; }
 .hero-v3 *, .hero-v3 *::before, .hero-v3 *::after { animation:none!important; transition:none!important; }
}