/* STE IT Service GmbH – it-dillingen.de */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#0E1217;--bg2:#0A0D11;--card:rgba(20,26,33,.86);--card-solid:#141A21;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.18);
  --text:#E6EAEE;--soft:#C4CCD4;--muted:#B4BCC5;--dim:#A7B0BA;--white:#fff;
  --or:#F28A1E;--or-hi:#FFA343;--or-lt:#F5A04A;--or-pale:#FFC27F;--or-bg:rgba(242,138,30,.08);--or-line:rgba(242,138,30,.35);
  --head:"Space Grotesk",Inter,system-ui,sans-serif;--body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;--max:1240px
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--or-lt);text-underline-offset:3px}a:hover{color:var(--or-pale)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--head);color:var(--white);line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(38px,6vw,64px);letter-spacing:-.02em;font-weight:700}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:700}
h3{font-size:clamp(19px,2vw,22px);font-weight:600}
p{margin:0}
ul,ol{margin:0}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--or);color:#0E1217;padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
#net{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.page{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(14,18,23,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--max);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand img{height:38px;width:auto}
.brand span{display:flex;flex-direction:column;line-height:1.15;padding-left:12px;border-left:1px solid var(--line2)}
.brand b{font-family:var(--head);font-size:15px;font-weight:700}
.brand small{font-size:12px;color:var(--dim);letter-spacing:.03em}
.nav{display:flex;align-items:center;gap:4px}
.nav>ul{list-style:none;display:flex;gap:2px;padding:0}
.nav li{position:relative}
.nav .top{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;color:var(--soft);text-decoration:none;font-size:15px;font-weight:500;background:none;border:0;font-family:inherit;cursor:pointer;border-radius:8px}
.nav .top:hover,.nav li:focus-within>.top{color:var(--white)}
.nav .top[aria-current="page"],.nav .top.act{color:var(--white)}
.nav .top svg{width:12px;height:12px;opacity:.7}
.sub{position:absolute;top:100%;left:-8px;min-width:280px;list-style:none;padding:10px;margin:0;background:#121820;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s}
.nav li:hover>.sub,.nav li:focus-within>.sub,.nav li.open>.sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 12px;border-radius:8px;color:var(--soft);text-decoration:none;font-size:15px}
.sub a:hover,.sub a[aria-current="page"]{background:var(--or-bg);color:var(--white)}
.hdr-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;transition:.15s;font-family:var(--body);cursor:pointer}
.btn-p{background:var(--or);color:#0E1217}.btn-p:hover{background:var(--or-hi);color:#0E1217}
.btn-g{border-color:var(--line2);color:var(--text);font-weight:500}.btn-g:hover{border-color:var(--or);color:var(--white)}
.btn-s{min-height:44px;padding:0 16px;font-size:14px}
.burger{display:none;min-width:44px;min-height:44px;border:1px solid var(--line2);border-radius:10px;background:none;color:var(--white);cursor:pointer}
.burger svg{width:22px;height:22px}
@media (max-width:1080px){
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav{position:fixed;inset:64px 0 0 0;background:#0E1217;flex-direction:column;align-items:stretch;padding:16px 24px 40px;overflow-y:auto;display:none}
  .nav.on{display:flex}
  .nav>ul{flex-direction:column}
  .nav .top{width:100%;justify-content:space-between;font-size:18px;min-height:52px}
  .sub{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;background:transparent;border:0;padding:0 0 8px 12px}
  .nav li.open>.sub{display:block}
  .hdr-cta .btn-g{display:none}
  .brand span{display:none}
}
@media (max-width:420px){.hdr-cta .btn-p .t{display:none}}

/* Sections */
.sec{padding:88px 0}
.sec-t{padding-top:0}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.head{display:flex;flex-direction:column;gap:14px;max-width:780px;margin-bottom:40px}
.head p{font-size:18px;color:var(--soft)}
.lead{font-size:clamp(18px,2vw,21px);color:var(--soft);max-width:800px}
.prose{max-width:820px;display:flex;flex-direction:column;gap:18px;color:var(--soft)}
.prose h2{margin-top:24px}.prose h3{margin-top:12px}
.prose ul,.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.prose strong{color:var(--white)}
.muted{color:var(--dim);font-size:14px}

/* Hero */
.hero{padding:96px 0 72px}
.hero-in{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.hero-txt{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.pill{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:6px 14px;border:1px solid var(--or-line);border-radius:999px;font-size:14px;color:var(--or-pale);background:var(--or-bg)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--or)}
.hl{color:var(--or)}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.crumbs{font-size:14px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--dim)}
.crumbs a{color:var(--or-lt)}
.sub-hero{padding:64px 0 56px}
.sub-hero .hero-txt{gap:22px}

/* Cards & grids */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px}
.card p{color:var(--muted);font-size:16px}
a.card{text-decoration:none;color:var(--text);transition:.2s}
a.card:hover{border-color:rgba(242,138,30,.55);background:rgba(23,29,36,.94)}
a.card .more{margin-top:auto;font-size:14px;font-weight:600;color:var(--or-lt)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ico{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:rgba(242,138,30,.12)}
.ico svg{width:24px;height:24px;stroke:var(--or);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--or);font-family:var(--head);font-size:18px;font-weight:700;color:var(--or)}
.numcard{flex-direction:row;gap:20px}
.numcard>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.step{border-top:3px solid var(--or)}
.step .k{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--or)}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.tags li{padding:7px 14px;border-radius:999px;border:1px solid var(--or-line);background:var(--or-bg);font-size:15px;color:#F2E6DA}
.checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li{position:relative;padding-left:30px;color:var(--soft)}
.checks li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--or-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F28A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid var(--or-line)}
.checks strong{color:var(--white)}
.band{background:rgba(14,18,23,.72);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px;padding-top:32px;padding-bottom:32px}
.stats b{display:block;font-family:var(--head);font-size:32px;color:var(--white)}
.stats>div>span{font-size:15px;color:var(--dim)}
.stats b span{font-size:inherit;color:inherit}
.stats b .stars{color:var(--or)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,5vw,56px)}
.panel-or{border-color:var(--or-line)}
.split{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.split>*{flex:1 1 420px;min-width:0}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,5vw,56px);background:linear-gradient(135deg,rgba(242,138,30,.16),rgba(20,26,33,.9) 60%);border:1px solid var(--or-line);border-radius:22px}
.cta>div:first-child{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:12px}
.cta p{color:var(--soft);font-size:18px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.tbl table{width:100%;min-width:600px;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{padding:16px 22px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.tbl tbody th{font-family:var(--head);color:var(--white);font-size:17px}
.tbl td{color:var(--muted)}
.tbl tr:last-child>*{border-bottom:0}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 24px}
details.faq+details.faq{margin-top:12px}
details.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;font-family:var(--head);font-size:18px;font-weight:600;color:var(--white)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:26px;color:var(--or);transition:transform .2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 0 22px;color:var(--soft);display:flex;flex-direction:column;gap:10px}
.person{display:flex;align-items:center;gap:18px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--or);flex-shrink:0}
.person b{font-family:var(--head);font-size:19px;color:var(--white);display:block}
.timeline{list-style:none;padding:0;display:flex;flex-direction:column;gap:0;border-left:2px solid var(--or-line);margin-left:10px}
.timeline li{position:relative;padding:0 0 26px 28px}
.timeline li::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--or)}
.timeline b{font-family:var(--head);font-size:20px;color:var(--or);display:block}
.timeline span{color:var(--soft)}
.stars{color:var(--or);letter-spacing:2px}
.note{border:1px dashed var(--or-line);border-radius:12px;padding:14px 18px;color:var(--or-pale);font-size:15px;background:var(--or-bg)}
.gloss{display:grid;gap:12px}
.gloss dt{font-family:var(--head);font-weight:600;color:var(--white);font-size:18px}
.gloss dd{margin:2px 0 14px;color:var(--soft)}
.letters{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-bottom:28px}
.letters a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line2);border-radius:10px;text-decoration:none;color:var(--text);font-weight:600}
.letters a:hover{border-color:var(--or)}
.portrait{border-radius:20px;border:1px solid var(--line);max-width:420px;width:100%}

/* Footer */
.ftr{border-top:1px solid var(--line);background:rgba(10,13,17,.94);margin-top:24px}
.ftr-in{max-width:var(--max);margin:0 auto;padding:64px 24px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px}
.ftr h2{font-size:13px;font-family:var(--body);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.ftr ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.ftr address{font-style:normal;color:var(--dim);font-size:15px;line-height:1.7}
.ftr .brand img{height:34px}
.ftr-bot{max-width:var(--max);margin:0 auto;padding:20px 24px 32px;border-top:1px solid var(--line);font-size:14px;color:var(--dim);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (max-width:640px){.sec{padding:64px 0}.hero{padding:64px 0 48px}.card{padding:22px}.numcard{flex-direction:column}}


/* Helle Variante – überschreibt die Farben aus site.css */
:root{
  --bg:#F5F6F8;--bg2:#ECEFF2;--card:rgba(255,255,255,.92);--card-solid:#fff;
  --line:rgba(16,22,28,.10);--line2:rgba(16,22,28,.22);
  --text:#1B2229;--soft:#3A444F;--muted:#4D5863;--dim:#5A6571;--white:#10161C;
  --or:#F28A1E;--or-hi:#E57C10;--or-lt:#B35A00;--or-pale:#9A4D00;--or-bg:rgba(242,138,30,.10);--or-line:rgba(242,138,30,.45)
}
body{background:var(--bg)}
.hdr{background:rgba(255,255,255,.88);border-bottom-color:var(--line)}
.brand span{border-left-color:var(--line2)}
.sub{background:#fff;box-shadow:0 18px 40px rgba(16,22,28,.12)}
.nav .top{color:var(--soft)}
.btn-p,.btn-p:hover{color:#10161C}
.eyebrow,.step .k,.num,.timeline b,.stars,.hl{color:#C46500}
.num{border-color:#C46500}
.pill{color:#9A4D00}
.ico svg{stroke:#C46500}
.band{background:rgba(255,255,255,.75)}
.card,.panel,details.faq,.person,.tbl{box-shadow:0 1px 2px rgba(16,22,28,.04),0 8px 24px rgba(16,22,28,.05)}
a.card:hover{background:#fff;border-color:rgba(242,138,30,.6)}
.tags li{color:#5C3300}
.cta{background:linear-gradient(135deg,rgba(242,138,30,.16),#fff 62%)}
.ftr{background:#10161C;color:#E6EAEE}
.ftr address,.ftr .muted,.ftr-bot{color:#A7B0BA}
.ftr h2{color:#A7B0BA}
.ftr a{color:#F5A04A}
.ftr-bot{border-top-color:rgba(255,255,255,.08)}
.ftr address strong{color:#fff!important}
/* Inline-Farben aus dem dunklen Layout */
main [style*="color:#fff"]{color:var(--white)!important}
main [style*="background:rgba(14,18,23,.7)"]{background:#F5F6F8!important}
main [style*="color:var(--or-pale)"]{color:#9A4D00!important}
.checks li::before{background-color:rgba(242,138,30,.14)}

@media (max-width:1080px){.nav{background:#fff}}

/* Bilder */
.pic{margin:0}
.pic img{border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(16,22,28,.10);width:100%;height:auto;background:#fff}
.pic figcaption{font-size:14px;color:var(--dim);margin-top:8px}
.hero-pic{flex:1 1 400px;min-width:0;max-width:560px}
.hero-pic img{aspect-ratio:3/2;object-fit:cover}
.hero-pic.tall img{aspect-ratio:auto;max-height:520px;object-fit:contain;background:transparent;border:0;box-shadow:none}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.prod img{border:0;box-shadow:none;border-radius:0;background:transparent;height:150px;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.partners{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.partners li{display:flex;align-items:center;justify-content:center;height:110px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px}
.partners img{max-height:78px;width:auto;max-width:100%;object-fit:contain}

/* Barrierefreiheit-Einstellungen */
.a11y-btn{position:fixed;left:16px;bottom:16px;z-index:60;width:52px;height:52px;border-radius:50%;border:0;background:#1F5FBF;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(14,18,23,.25)}
.a11y-btn:hover{background:#174C99}
.a11y-panel{position:fixed;left:16px;bottom:80px;z-index:60;width:min(300px,calc(100vw - 32px));background:#fff;color:#0E1217;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 12px 40px rgba(14,18,23,.2);display:grid;gap:8px}
.a11y-panel[hidden]{display:none}
.a11y-panel h2{font-size:19px;margin:0 0 4px}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px}
.a11y-row div{display:flex;gap:6px}
.a11y-panel button{font:inherit;font-size:15px;min-height:44px;border-radius:10px;border:1px solid #C9CED6;background:#F5F6F8;color:#0E1217;cursor:pointer;padding:0 12px;text-align:left}
.a11y-row button{min-width:44px;text-align:center;font-weight:600}
.a11y-panel button[aria-pressed="true"]{background:#0E1217;color:#fff;border-color:#0E1217}
.a11y-panel button[aria-pressed="true"]::after{content:" ✓"}
.a11y-panel .a11y-reset{background:none;border:0;text-decoration:underline;text-align:center}
html.a11y-fs1 body{zoom:1.15}
html.a11y-fs2 body{zoom:1.3}
html.a11y-fs-1 body{zoom:.9}
html.a11y-links main a,html.a11y-links footer a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px!important}
html.a11y-links main a:not(.btn),html.a11y-links footer a:not(.brand){background:#FFF3B0;color:#0E1217!important}
html.a11y-font body,html.a11y-font h1,html.a11y-font h2,html.a11y-font h3,html.a11y-font .btn{font-family:Arial,Verdana,sans-serif!important;letter-spacing:.02em!important;word-spacing:.08em}
html.a11y-font body{line-height:1.8}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-motion #net{display:none}
html.a11y-contrast{--bg:#fff;--text:#000;--soft:#000;--muted:#000;--dim:#1a1a1a;--line:#000}
html.a11y-contrast #net{display:none}
html.a11y-contrast body{background:#fff;color:#000}
html.a11y-contrast .card,html.a11y-contrast .panel{background:#fff!important;border:2px solid #000!important;box-shadow:none!important;color:#000}
html.a11y-contrast p,html.a11y-contrast li,html.a11y-contrast .muted,html.a11y-contrast small,html.a11y-contrast span{color:#000}
html.a11y-contrast a:not(.btn){color:#0033A0!important;text-decoration:underline}
html.a11y-contrast .hdr{background:#fff!important;border-bottom:2px solid #000!important}
html.a11y-contrast .btn{background:#000!important;color:#fff!important;border:2px solid #000!important}
html.a11y-contrast .btn *{color:#fff!important}
html.a11y-contrast .eyebrow{color:#000!important}
html.a11y-contrast .ftr,html.a11y-contrast .ftr *{background:#000;color:#fff!important}
html.a11y-contrast .ftr a{color:#FFE14D!important}
html.a11y-contrast :focus-visible{outline:3px solid #000;outline-offset:3px}
@media print{.a11y-btn,.a11y-panel{display:none}}

/* Webdesign-Seite: Geräte-Mockups, Stepper, Showcase */
.devices{position:relative;width:100%;max-width:560px;aspect-ratio:16/12;margin:0 auto}
.dev{position:absolute;box-shadow:0 24px 60px rgba(16,22,28,.18)}
.dev-desk{left:0;top:4%;width:86%}
.dev-tab{right:4%;bottom:2%;width:34%;aspect-ratio:3/4;background:#1B2229;border-radius:14px;padding:7px}
.dev-phone{right:-2%;bottom:-4%;width:17%;aspect-ratio:9/19;background:#1B2229;border-radius:16px;padding:5px}
.dev-screen{width:100%;height:100%;border-radius:9px;overflow:hidden;background:#fff}
.bw{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.bw-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#ECEFF2;border-bottom:1px solid var(--line)}
.bw-bar i{width:8px;height:8px;border-radius:50%;background:#C9CED6}
.bw-bar i:first-child{background:#F28A1E}
.bw-bar span{margin-left:10px;flex:1;font-size:10px;color:#5A6571;background:#fff;border-radius:6px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms{--a:#F28A1E;--h:#10161C;--bgm:#fff;--soft:#F1F3F5;background:var(--bgm);padding:10px;display:flex;flex-direction:column;gap:10px;height:100%}
.ms-wood{--a:#B5652B;--h:#3B2A1E;--soft:#F4ECE4}
.ms-navy{--a:#2F6FE0;--h:#14213D;--soft:#EAF0FA}
.ms-teal{--a:#0F9D8F;--h:#123B3A;--soft:#E5F4F2}
.ms-nav{display:flex;justify-content:space-between;align-items:center}
.ms-logo{width:34px;height:9px;border-radius:3px;background:var(--a)}
.ms-links{display:flex;gap:5px}.ms-links i{width:16px;height:5px;border-radius:3px;background:#C9CED6}
.ms-hero{background:var(--soft);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px}
.ms-hero strong{font-family:var(--head);font-size:clamp(10px,1.5vw,16px);color:var(--h);line-height:1.15}
.ms-hero em{font-style:normal;font-size:clamp(7px,.9vw,10px);color:#5A6571}
.ms-btn{width:42px;height:11px;border-radius:4px;background:var(--a);margin-top:4px}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mc{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid #E3E7EB;border-radius:6px;padding:6px}
.mc b{height:16px;border-radius:4px;background:var(--soft)}
.mc s{height:4px;border-radius:2px;background:#DDE2E7;text-decoration:none}
.mc s:last-child{width:60%}
.ms-tab .ms-cards{grid-template-columns:1fr 1fr 1fr}
.ms-phone{padding:6px;gap:6px}.ms-phone .ms-links{display:none}.ms-phone .ms-cards{grid-template-columns:1fr}.ms-phone .ms-hero{padding:7px}.ms-phone .ms-hero strong{font-size:9px}.ms-phone .ms-hero em{font-size:6px}
.ms-tab .ms-hero strong{font-size:11px}.ms-tab .ms-hero em{font-size:7px}
.stepper{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.stepper::before{content:"";position:absolute;left:24px;right:calc((100% - 72px)/5 - 24px);top:24px;height:2px;background:linear-gradient(90deg,var(--or),var(--or-line))}
.stepper li{position:relative;padding-top:64px}
.st-n{position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--or);font-family:var(--head);font-weight:700;color:#C46500;font-size:18px;box-shadow:0 0 0 6px var(--bg)}
.stepper h3{margin:0 0 6px}.stepper p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:900px){.stepper{grid-template-columns:1fr;gap:6px}.stepper::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto;background:var(--or-line)}.stepper li{padding:0 0 22px 70px;min-height:56px}}
.concept{position:relative;display:flex;flex-direction:column;gap:12px}
.concept .badge{position:absolute;top:14px;right:14px;z-index:2;background:#10161C;color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:99px}
.concept-vis{aspect-ratio:16/11;overflow:hidden;border-radius:12px;transition:transform .35s ease}
.concept-vis .bw{height:100%}.concept-vis .ms{height:calc(100% - 30px)}
.concept:hover .concept-vis{transform:translateY(-4px)}
.concept h3{margin:4px 0 0}.concept p{margin:0;color:var(--muted)}
.qual{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.qual li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;font-weight:600;transition:border-color .2s,transform .2s}
.qual li:hover{border-color:var(--or-line);transform:translateY(-2px)}
.qual svg{flex:none;width:22px;height:22px;color:#C46500}
.cta-big{background:linear-gradient(135deg,#10161C 0%,#1F2A35 100%)!important;color:#fff}
.cta-big h2,.cta-big p{color:#fff!important}
.cta-big .btn-g{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--d,0s),transform .6s ease var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal-grid>*{transition:transform .2s,box-shadow .2s}
.reveal-grid>*:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
html.a11y-motion .reveal,html.no-js .reveal{opacity:1;transform:none}
@media (max-width:1080px){.devices{max-width:480px;margin-top:24px}}