/* WebmediaWerk frontend refinement — 2026. Existing content widths and CMS templates retained. */
:root{--bg:#f6f8fc;--bg-2:#fff;--bg-3:#edf3fb;--ink:#102141;--ink-2:#334565;--text:#27354c;--muted:#62728b;--line:#e2e9f3;--line-strong:#cdd9e8;--accent:#f27436;--accent-2:#376be6;--accent-3:#16ad9d;--shadow:0 30px 75px rgba(21,41,79,.10);--shadow-soft:0 12px 36px rgba(21,41,79,.055)}
html{scroll-padding-top:105px}
body{background:radial-gradient(ellipse at 82% 1%,rgba(55,107,230,.09),transparent 33%),radial-gradient(ellipse at 0% 24%,rgba(242,116,54,.045),transparent 30%),#f6f8fc;letter-spacing:-.006em;line-height:1.7}
::selection{background:#ffd5bd;color:#102141}
:focus-visible{outline:3px solid #3276ee!important;outline-offset:4px}
.skip-to-content{position:fixed;z-index:999;left:16px;top:-100px;padding:12px 18px;background:#102141;color:#fff;font-weight:750;transition:top .15s}.skip-to-content:focus{top:12px}
.shell{width:min(100% - 56px,1520px)}
h1,h2,h3,h4{letter-spacing:-.045em;line-height:1.13}
h1{font-weight:850;font-size:clamp(2.75rem,4.55vw,5.4rem)}
h2{font-weight:800;font-size:clamp(2rem,3vw,3.6rem)}
h3{font-weight:780}
.lead{line-height:1.65}.kicker,.eyebrow{color:#d7652e;letter-spacing:.16em;font-weight:850}
.site-header{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(202,215,234,.7);box-shadow:0 8px 24px rgba(19,42,82,.045);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.topbar{padding:12px 0;min-height:88px;gap:22px}
.brand{gap:12px}.brand-logo{width:58px;height:58px;border-radius:12px;box-shadow:0 7px 20px rgba(18,42,84,.09)}
.brand-copy strong{font-size:1.19rem;font-weight:850;letter-spacing:-.04em}.brand-copy small{font-size:.78rem;letter-spacing:.02em}
.nav-list{gap:4px}.nav-item>a{min-height:46px;padding:0 14px;font-size:.91rem;font-weight:750;border-radius:9px;transition:color .2s,background .2s}.nav-item>a:hover,.nav-item>a:focus-visible{color:#1c4cb5;background:#edf3fd}
.nav-panel{padding-top:10px}.nav-panel-inner{border:1px solid #dce5f1;border-radius:15px;box-shadow:0 25px 60px rgba(15,31,64,.15)}
.subnav-link{padding:19px 21px;background:#fff;transition:background .2s}.subnav-link:hover{background:#f4f8fe}.subnav-link strong{font-weight:800}
.hero-home{padding:44px 0 34px}.hero-grid-v2{gap:24px;grid-template-columns:minmax(0,1.07fr) minmax(420px,.93fr)}
.hero-copy{border:1px solid #e0e9f3;border-radius:22px;padding:clamp(28px,3.2vw,58px);background:linear-gradient(125deg,rgba(255,255,255,.98),rgba(248,251,255,.92));box-shadow:var(--shadow)}
.hero-copy:before{width:110px;left:32px;top:0;height:5px;border-radius:0 0 12px 12px}.hero-copy h1{max-width:18ch}.hero-stage{min-height:610px}.stage-media{border-radius:22px;border:0}.stage-media:after{height:56%;background:linear-gradient(180deg,transparent,rgba(6,19,45,.67))}
.stage-layer{border-radius:14px;background:rgba(255,255,255,.93);border-color:rgba(255,255,255,.8);box-shadow:0 16px 44px rgba(9,27,56,.19)}
.stage-layer-a,.stage-layer-b{transform:none}.mini-label{border-radius:7px;color:#2456c5}.hero-actions{margin-top:30px}
.btn{border-radius:10px;text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:800;min-height:54px;padding:0 25px;transition:transform .22s,box-shadow .22s,background .22s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(120deg,#ed7033,#fa9353);box-shadow:0 15px 32px rgba(232,98,42,.22)}.btn-secondary{border-color:#d8e2ed;box-shadow:0 6px 20px rgba(31,59,95,.05)}.btn-secondary:hover{background:#eef4fe}
.panel,.card,.stat,.contact-card,.filter-box,.cta-block,.author-card,.list-card,.faq-card,.reference-card,.empty-box,.content-shell,.meta-bar,.category-strip,.visual-box,.service-card,.stack-card,.proof-box,.intro-text,.panel-light,.panel-dark{border-color:#e0e8f2;border-radius:17px;background:#fff;box-shadow:var(--shadow-soft)}
.panel,.card,.list-card,.faq-card,.reference-card,.author-card,.empty-box,.contact-card,.content-shell,.visual-box,.service-card,.stack-card,.intro-text,.panel-light,.panel-dark{padding:clamp(22px,2.2vw,34px)}
.proof-box{border-radius:12px;padding:19px}.proof-box strong{font-size:1.24rem}.proof-box span{font-size:.87rem}
.section{padding:52px 0}.section-head{margin-bottom:27px}.section-head h2{max-width:22ch}.section-head .head-text{max-width:53ch}
.service-grid{gap:18px}.service-card,.list-card,.reference-card,.faq-card,.stack-card,.card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.service-card:hover,.list-card:hover,.reference-card:hover,.faq-card:hover,.stack-card:hover,.card:hover{transform:translateY(-4px);border-color:#c6d6f0;box-shadow:0 24px 48px rgba(22,49,92,.11)}
.service-card:after{border-radius:50%;opacity:.6}.service-badge,.list-card .tag,.article-meta .tag{border-radius:7px;background:#edf4ff;color:#2255b2;border-color:#d9e5fb}.card-index{border-radius:10px;background:#fff4ed;border:0;color:#d76128}
.stats-ribbon article{border-radius:14px;box-shadow:var(--shadow-soft);border-color:#e1e9f3;padding:24px}.stats-ribbon strong{letter-spacing:-.05em}
.feature-points div{border-radius:10px;border-color:#e3eaf3;background:#f7faff}.ticker-wrap{background:#fff;border-color:#e8edf5}.ticker{padding:14px 0}.ticker span{font-size:.88rem;letter-spacing:.01em}.ticker span:before{border-radius:50%}
.hero-band{background:linear-gradient(125deg,#fff,#f7faff);border-color:#e0e9f3;border-radius:19px;padding:clamp(25px,3vw,46px)}
.content-body{line-height:1.85}.content-body h2,.content-body h3{scroll-margin-top:115px}.content-body a:not(.btn){text-decoration-thickness:1px;text-underline-offset:3px}
input,textarea,select{border-radius:9px;max-width:100%}input:focus,textarea:focus,select:focus{outline-color:#376be6}
.site-footer{background:linear-gradient(155deg,#142847,#10213e);border-top:0;color:#dce6f6;margin-top:70px}.site-footer h2,.site-footer h3,.site-footer h4,.site-footer strong{color:#fff}.site-footer p,.site-footer .footer-links li a,.site-footer .footer-links li span{color:#cbd8e9}.site-footer .footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}.footer-kicker{color:#ffb181}.footer-grid{padding-top:62px;padding-bottom:54px;gap:32px}.footer-badges span{border:1px solid #435674;background:#1e3657;color:#e5effe;border-radius:8px}.footer-bottom{border-color:#304462;color:#acbed7}
@media(max-width:1320px){.hero-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-stage{min-height:520px}}
@media(max-width:980px){.topbar{min-height:76px}.hero-grid-v2{grid-template-columns:1fr}.hero-stage{min-height:410px}.nav{background:#fff}.nav-toggle{border-radius:9px}.nav-list{gap:0}.nav-panel{box-shadow:none}.hero-copy h1{max-width:none}}
@media(max-width:640px){.shell{width:min(100% - 30px,1520px)}.topbar{padding:9px 0}.brand-logo{width:46px;height:46px}.brand-copy strong{font-size:1.02rem}.brand-copy small{font-size:.7rem}.hero-home{padding:22px 0}.hero-copy,.panel,.card,.list-card,.faq-card,.reference-card,.author-card,.empty-box,.contact-card,.content-head,.content-body,.sidebar-card,.service-card,.stack-card,.intro-text,.panel-light,.panel-dark{padding:22px}.hero-copy{border-radius:16px}.hero-stage{min-height:310px}.stage-media{border-radius:16px}.stage-layer{max-width:175px;padding:12px}.stage-layer strong{font-size:1rem}.stage-layer-a{left:12px;bottom:12px}.stage-layer-b{right:12px;top:12px}.section{padding:35px 0}.footer-grid{padding-top:42px}.btn{width:100%;min-height:52px}.hero-actions{gap:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}