/* Lekhdwar website */
:root {
  --brand: #0b1f4d; --brand2: #123a74; --navy: #071225; --acc: #ff8b1a; --acc2: #ffb15c; --accd: #c2410c; --accbg: #fff3e6; --gold: #ff8b1a;
  --ink: #0b1426; --ink2: #33415a; --mut: #5e6b80; --line: #dbe5f3; --bg: #ffffff; --bg2: #f6f8fc; --card: #ffffff;
  --ok: #047857; --okbg: #ecfdf3; --bad: #c2410c; --badbg: #fdeee6; --warn: #a16207; --warnbg: #fef6dc; --info: #1d4ed8; --infobg: #e8efff;
  --r: 14px; --sh: 0 1px 2px rgba(7,18,37,.05), 0 8px 28px rgba(7,18,37,.07); --sh2: 0 24px 60px rgba(7,18,37,.18);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img, video { max-width: 100%; height: auto; display: block }
picture { display: block }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700 } .skip:focus { top: 12px; text-decoration: none }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px }
a { color: var(--accd); text-decoration: none } a:hover { text-decoration: underline }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em }
h1 { font-size: clamp(30px, 5vw, 56px); font-weight: 800 } h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 800 } h3 { font-size: 18px; font-weight: 700 }
p { margin: 0 0 1em }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px } .narrow { max-width: 820px }
.muted { color: var(--mut) } .small { font-size: 14px } .center { text-align: center } .right { text-align: right } .left { text-align: left }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em }
.pad { padding: 80px 20px } .warntext { color: var(--bad); font-weight: 600 }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap } .between { justify-content: space-between } .end { justify-content: flex-end }
.hp { position: absolute; left: -9999px; opacity: 0 }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; border: 1.5px solid var(--acc); background: linear-gradient(135deg, #ff9a33, #ff7a00); color: var(--navy); font: 700 15px/1.2 inherit; font-family: inherit; cursor: pointer; text-decoration: none !important; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap }
.btn:hover { background: linear-gradient(135deg, #ff8b1a, #f06a00); border-color: #f06a00; box-shadow: 0 8px 22px rgba(255,122,0,.35); transform: translateY(-1px) }
.btn.ghost { background: transparent; color: var(--brand); border-color: #c9d5ea } .btn.ghost:hover { background: var(--accbg); border-color: var(--acc); box-shadow: none }
.btn.light { background: #fff; color: var(--brand); border-color: #fff } .btn.ghostlight { background: transparent; color: #fff; border-color: rgba(255,255,255,.5) }
.btn.danger { background: transparent; color: var(--bad); border-color: #f2c4ad } .btn.danger:hover { background: var(--badbg); box-shadow: none }
.btn.lg { padding: 15px 26px; font-size: 16px; border-radius: 12px } .btn.sm { padding: 7px 13px; font-size: 13.5px; border-radius: 8px } .btn.block { display: flex; width: 100% }
.lnk { color: var(--ink2); font-weight: 600 }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(0,0,0,.05) }
.topin { display: flex; align-items: center; gap: 24px; height: 68px }
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 800; font-size: 21px; text-decoration: none !important; letter-spacing: -.02em }
.brand img { border-radius: 9px } .brand em { font-style: normal; font-size: 12px; background: var(--acc); color: var(--navy); padding: 2px 8px; border-radius: 20px; margin-left: 4px; vertical-align: middle }
.nav { display: flex; gap: 26px; margin-left: 18px } .nav a { color: var(--ink2); font-weight: 600; font-size: 15px } .nav a:hover, .nav a.on { color: var(--accd); text-decoration: none }
.topcta { margin-left: auto; display: flex; align-items: center; gap: 16px }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer } .burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px }

/* hero */
.hero { position: relative; padding: 70px 0 60px; background: radial-gradient(1200px 520px at 85% -10%, #e3ebfb 0, transparent 60%), radial-gradient(800px 400px at -10% 20%, #ffe7cc 0, transparent 55%); overflow: hidden }
.herogrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items: center }
.pill { display: inline-block; padding: 6px 14px; border-radius: 30px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--brand2); margin-bottom: 18px; box-shadow: var(--sh) }
.grad { background: linear-gradient(90deg, #ff7a00, #ff9a33); -webkit-background-clip: text; background-clip: text; color: transparent }
.lead { font-size: 19px; color: var(--ink2); max-width: 560px }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 }
.ticks { list-style: none; padding: 0; margin: 0 } .ticks li { position: relative; padding-left: 26px; margin: 6px 0; color: var(--ink2) }
.ticks li::before { content: ''; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%; background: var(--accbg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5' fill='none' stroke='%23e8730c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat }
.hero .ticks { display: flex; flex-wrap: wrap; gap: 4px 22px } .hero .ticks li { font-size: 14.5px }
.heroshot { position: relative }
.frame { border-radius: 14px; overflow: hidden; background: #0f1e1f; padding: 26px 0 0; box-shadow: var(--sh2); position: relative; border: 1px solid rgba(0,0,0,.08) }
.frame::before { content: ''; position: absolute; top: 9px; left: 14px; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: 16px 0 #febc2e, 32px 0 #28c840 }
.float { position: absolute; background: #fff; border-radius: 12px; padding: 11px 16px; box-shadow: var(--sh2); display: flex; flex-direction: column; animation: bob 5s ease-in-out infinite }
.float b { color: var(--brand); font-size: 17px } .float span { font-size: 12.5px; color: var(--mut) }
.f1 { left: -26px; bottom: 40px } .f2 { right: -14px; top: 54px; animation-delay: -2.5s } .f2 b { color: var(--ok) }
@keyframes bob { 50% { transform: translateY(-8px) } }

.strip { background: linear-gradient(120deg, var(--navy), var(--brand)); color: #fff } .stripin { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 26px 20px }
.stripin b { display: block; font-size: 28px; font-weight: 800; color: var(--acc) } .stripin span { font-size: 14px; opacity: .8 }

/* sections */
.sec { padding: 90px 0 } .sec.alt { background: var(--bg2) }
.sechead { text-align: center; max-width: 760px; margin: 0 auto 44px } .kicker { display: inline-block; color: var(--accd); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px }

.segtabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px }
.segtab { text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; font-family: inherit; transition: .15s; color: var(--ink) }
.segtab b { display: block; font-size: 15px; margin-bottom: 3px } .segtab span { font-size: 12.5px; color: var(--mut); line-height: 1.4; display: block }
.segtab:hover { border-color: var(--acc2) } .segtab.on { border-color: var(--acc); background: var(--accbg); box-shadow: 0 0 0 3px rgba(255,139,26,.12) }
.player { position: relative; border-radius: 16px; overflow: hidden; background: #000; box-shadow: var(--sh2) } .player video { width: 100%; aspect-ratio: 16/9; background: #000 }
.langsw, .cyclesw { display: inline-flex; background: #fff; border-radius: 30px; padding: 4px; border: 1px solid var(--line); gap: 2px }
.langsw { position: absolute; z-index: 2; top: 14px; right: 14px; box-shadow: var(--sh) }
.langsw button, .cyclesw button { border: 0; background: none; padding: 7px 16px; border-radius: 30px; font: 700 13.5px inherit; font-family: inherit; color: var(--ink2); cursor: pointer }
.langsw button.on, .cyclesw button.on { background: var(--brand); color: #fff } .cyclesw { margin-top: 18px } .cyclesw .badge { margin-left: 4px }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.fcard { background: #fff; border-radius: var(--r); padding: 24px; border: 1px solid var(--line); transition: .2s } .fcard:hover { transform: translateY(-3px); box-shadow: var(--sh) }
.fcard p { color: var(--mut); font-size: 15px; margin: 0 } .ficon { width: 48px; height: 48px; border-radius: 12px; background: var(--accbg); color: var(--acc); display: grid; place-items: center; margin-bottom: 14px }

.show { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; margin-bottom: 90px } .show:last-child { margin-bottom: 0 }
.show.rev > div:first-child { order: 2 } .show .ticks { margin-top: 14px }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s }
.steps li { background: #fff; border-radius: var(--r); padding: 24px; border: 1px solid var(--line); position: relative }
.steps li > b, .steps.mini > div > b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; margin-bottom: 14px }
.steps li p { color: var(--mut); font-size: 15px; margin: 0 }
.steps.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px } .steps.mini > div { background: var(--bg2); border-radius: 12px; padding: 16px } .steps.mini p { margin: 0; font-size: 14.5px; color: var(--ink2) }
.steps.mini.three { grid-template-columns: repeat(3, 1fr) }
.steps.mini > div > b { width: 30px; height: 30px; font-size: 14px; margin-bottom: 8px }

.pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch } .pgrid.compact { grid-template-columns: repeat(4, 1fr); margin-top: 16px }
.pcard { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 26px; position: relative; display: flex; flex-direction: column }
.pcard.pop { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(255,139,26,.14), var(--sh) }
.ptag { position: absolute; top: -12px; left: 24px; background: var(--acc); color: var(--navy); font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 20px }
.price { margin: 14px 0 2px; display: flex; align-items: baseline; gap: 6px } .price b { font-size: 36px; font-weight: 800; letter-spacing: -.03em } .price span { color: var(--mut); font-size: 14px }
.save { color: var(--accd); font-weight: 600; min-height: 1.6em; margin-bottom: 14px } .pcard .btn { margin-bottom: 18px } .pcard .ticks li { font-size: 14px }

.faq { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; margin-bottom: 10px }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; position: relative; padding-right: 30px } .faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 24px; color: var(--accd); transition: .2s } .faq[open] summary::after { transform: rotate(45deg) }
.faq p { color: var(--ink2); padding-bottom: 6px }

.cta { background: radial-gradient(700px 300px at 85% 0, rgba(255,139,26,.35), transparent 60%), linear-gradient(120deg, var(--navy), var(--brand)); color: #fff; padding: 70px 0 } .ctain { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap }
.cta h2 { margin: 0 0 4px } .cta p { margin: 0; opacity: .85 } .cta .ctas { margin: 0 }

.foot { background: #020817; color: #b6c2d6; padding: 60px 0 24px; font-size: 15px }
.footgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 30px } .foot .brand { color: #fff; margin-bottom: 12px } .foot .muted { color: #8aa0a0 }
.foot h4 { color: #fff; margin: 0 0 12px; font-size: 15px } .foot a:not(.brand) { display: block; color: #b8c7c7; margin: 6px 0 } .foot a:hover { color: #fff }
.copy { border-top: 1px solid rgba(255,255,255,.08); margin-top: 36px; padding-top: 18px; font-size: 13px; color: #6f8787 }
.wafloat { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37,211,102,.4); z-index: 60; transition: transform .2s } .wafloat:hover { transform: scale(1.08) }

/* forms, auth */
.auth { min-height: calc(100vh - 68px); display: grid; place-items: start center; padding: 60px 16px; background: radial-gradient(900px 400px at 50% -10%, #ffe7cc 0, transparent 60%) }
.authcard { width: 100%; max-width: 460px; background: #fff; border-radius: 18px; padding: 34px; box-shadow: var(--sh2); border: 1px solid var(--line) } .authcard.wide { max-width: 560px }
.authcard h1 { font-size: 28px; margin-bottom: 6px }
.form { display: grid; gap: 14px; margin-top: 18px } .form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink2) }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
input, select, textarea { width: 100%; padding: 11px 13px; border: 1.5px solid #d5e0df; border-radius: 10px; font: 15px inherit; font-family: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255,139,26,.2) }
input[disabled] { background: var(--bg2); color: var(--mut) } input[type=checkbox] { width: auto }
input.tiny { width: 90px; padding: 7px 9px } .inline { display: inline-flex; gap: 6px; align-items: center }
.alert { padding: 12px 16px; border-radius: 10px; margin: 14px 0; font-size: 14.5px; font-weight: 500 } .alert.ok { background: var(--okbg); color: #065f46 } .alert.bad { background: var(--badbg); color: var(--bad) }
.summary { background: var(--bg2); border-radius: 12px; padding: 18px; margin: 18px 0 } .summary .row { padding: 4px 0 } .summary .total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-size: 18px }
.toast { position: fixed; z-index: 100; top: 82px; left: 50%; transform: translateX(-50%); padding: 12px 22px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 600; box-shadow: var(--sh2); animation: toast 5s forwards; max-width: calc(100% - 32px) }
.toast.bad { background: var(--bad) } @keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px) } 6%, 85% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0; visibility: hidden } }

/* panels */
.panelbody { background: var(--bg2) }
.panel { display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding-top: 30px; padding-bottom: 60px; align-items: start }
.pside { background: #fff; border-radius: var(--r); border: 1px solid var(--line); padding: 16px; position: sticky; top: 90px }
.pwho { display: flex; gap: 12px; align-items: center; padding: 6px 6px 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px } .pwho b { display: block; font-size: 15px } .pwho span { font-size: 12.5px; color: var(--mut); word-break: break-all }
.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px }
.pside nav a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--ink2); font-weight: 600; font-size: 15px } .pside nav a:hover { background: var(--bg2); text-decoration: none } .pside nav a.on { background: var(--accbg); color: var(--accd) }
.pmain { min-width: 0 } .ptitle { font-size: 28px; margin: 4px 0 20px }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px } .cards5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px }
.kcard { background: #fff; border-radius: var(--r); border: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px }
.klabel { font-size: 12.5px; color: var(--mut); font-weight: 700; text-transform: uppercase; letter-spacing: .06em } .kval { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.box { background: #fff; border-radius: var(--r); border: 1px solid var(--line); padding: 22px; margin-bottom: 18px } .box.soft { background: var(--bg2); border: 0 }
.boxhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px } .boxhead h2 { font-size: 19px; margin: 0 }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: var(--r); margin-bottom: 18px; flex-wrap: wrap }
.banner.info { background: var(--infobg); color: #1e3a8a } .banner.bad { background: var(--badbg); color: #7c2d12 } .banner span { display: block; font-size: 14.5px; opacity: .85 }
.empty { text-align: center; padding: 20px } .empty ol { display: inline-block; text-align: left }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch } .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle } .tbl tr:last-child td { border-bottom: 0 } .tbl th.right, .tbl td.right { text-align: right }
.tbl.plans td { vertical-align: top } .tbl.plans textarea { min-width: 240px; font-size: 13px }
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; vertical-align: middle; white-space: nowrap }
.badge.ok { background: var(--okbg); color: #0a6156 } .badge.bad { background: var(--badbg); color: var(--bad) } .badge.warn { background: var(--warnbg); color: var(--warn) } .badge.info { background: var(--infobg); color: var(--info) } .badge.muted { background: #eef2f2; color: var(--mut) }
.plain { list-style: none; padding: 0; margin: 8px 0 0 } .plain li { padding: 5px 0; border-bottom: 1px dashed var(--line) }
.dlcard { display: flex; gap: 22px; align-items: center; padding: 10px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px } .dlcard img { border-radius: 16px } .dlcard h2 { margin: 0 0 4px; font-size: 22px }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px } .grid2 > .box { margin-bottom: 0 } .grid2 + .box, .box + .grid2 { margin-top: 18px }
.searchrow { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 } .searchrow input:not([type=date]) { flex: 1; min-width: 200px } .searchrow select, .searchrow input[type=date] { width: auto }
.admintop { background: linear-gradient(120deg, var(--navy), var(--brand)) } .admintop .brand, .admintop .nav a, .admintop .lnk { color: #fff } .admintop .nav a { opacity: .75 } .admintop .nav a.on, .admintop .nav a:hover { opacity: 1; color: var(--acc) }
.amain { padding-top: 26px; padding-bottom: 60px }
.modal { border: 0; border-radius: 18px; padding: 26px; width: min(560px, calc(100% - 32px)); box-shadow: var(--sh2) } .modal::backdrop { background: rgba(10,30,30,.45) } .modal h2 { font-size: 21px }
.prose h3 { margin-top: 28px } .prose p { color: var(--ink2) }
.contactgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start }

/* responsive */
@media (max-width: 1020px) {
  .herogrid, .show { grid-template-columns: 1fr; gap: 36px } .show.rev > div:first-child { order: 0 }
  .fgrid, .pgrid { grid-template-columns: 1fr 1fr } .segtabs { grid-template-columns: repeat(3, 1fr) } .steps, .steps.mini { grid-template-columns: 1fr 1fr }
  .cards5 { grid-template-columns: repeat(3, 1fr) } .footgrid { grid-template-columns: 1fr 1fr } .f1 { left: 8px } .f2 { right: 8px }
}
@media (max-width: 860px) {
  .burger { display: block } .topcta .lnk { display: none }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; flex-direction: column; gap: 0; margin: 0; padding: 8px 16px 16px; border-bottom: 1px solid var(--line); box-shadow: var(--sh) }
  .navopen .nav { display: flex } .nav a { padding: 12px 4px; border-bottom: 1px solid var(--line) }
  .admintop .nav { background: var(--brand) } .admintop .burger span { background: #fff }
  .panel { grid-template-columns: 1fr; gap: 16px; padding-top: 16px } .pside { position: static } .pside nav { display: flex; overflow-x: auto; gap: 4px } .pside nav a { white-space: nowrap }
  .grid2, .contactgrid { grid-template-columns: 1fr } .cards3 { grid-template-columns: 1fr }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px } .sec { padding: 60px 0 } .hero { padding: 40px 0 } .lead { font-size: 17px }
  .fgrid, .pgrid, .pgrid.compact, .steps, .steps.mini, .steps.mini.three, .two { grid-template-columns: 1fr } .segtabs { grid-template-columns: 1fr 1fr } .segtab span { display: none }
  .stripin { grid-template-columns: 1fr 1fr; gap: 16px } .cards5 { grid-template-columns: 1fr 1fr } .footgrid { grid-template-columns: 1fr }
  .float { display: none } .authcard { padding: 24px 20px } .topcta .btn.sm { padding: 7px 10px } .dlcard { flex-direction: column; text-align: center }
  .langsw { top: 8px; right: 8px } .langsw button { padding: 5px 11px }
  .ctas .btn { flex: 1 } .show { margin-bottom: 60px } .box { padding: 18px 16px }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } html { scroll-behavior: auto } }

/* platforms + add-on (2026-10-14) */
.platforms { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px }
.plat { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid #dfe6ee; font-size:13.5px; font-weight:600; color:#0b1f4d }
.platgrid { grid-template-columns:repeat(4,1fr) } .platgrid .ficon { font-size:26px }
.devline { font-weight:600; color:#0b1f4d; margin-top:-4px }
.addon { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin:22px auto 10px; max-width:900px; padding:20px 24px; border:2px dashed #e8730c55; border-radius:16px; background:#fff8f1 }
.addon h3 { margin:6px 0 8px } .addon .ticks { margin:0 } .addonbuy { min-width:220px }
.ptag.static { position:static; display:inline-block }
@media (max-width:900px) { .platgrid { grid-template-columns:1fr 1fr } }
@media (max-width:560px) { .platgrid { grid-template-columns:1fr } }
@media (max-width:1180px) and (min-width:901px) { .pgrid { grid-template-columns: repeat(3, 1fr) } .pgrid.compact { grid-template-columns: repeat(2, 1fr) } }

/* Cloud viewer */
.cloudbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cloudbar b{font-size:20px}
.ctabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px}
.ctabs a{white-space:nowrap;padding:9px 16px;border-radius:999px;border:1px solid #dfe6ee;background:#fff;font-weight:700;color:#0b1f4d;text-decoration:none}
.ctabs a.on{background:#0b1f4d;color:#fff;border-color:#0b1f4d}
.cards4{grid-template-columns:repeat(4,1fr)}
.cfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cfilter input,.cfilter select{padding:9px 12px;border:1px solid #dfe6ee;border-radius:10px;font:inherit}
.cfilter input[name=q]{flex:1;min-width:160px}
.ctot{margin-left:auto;max-width:320px;display:grid;gap:6px;margin-top:12px}
.ctot div{display:flex;justify-content:space-between}.ctot .big{font-size:18px;border-top:1px solid #dfe6ee;padding-top:6px}
@media (max-width:760px){.cards4{grid-template-columns:1fr 1fr}}
@media print{header,footer,.pside,.ctabs,.cloudbar,.noprint,.ptitle{display:none!important}.pmain{padding:0}.cbill{border:0;box-shadow:none}}
@media (max-width:760px){
  .panel{display:block}.pmain{min-width:0;max-width:100%;overflow:hidden}
  .ptitle{font-size:24px;line-height:1.2}
  .cloudbar b{font-size:17px}.cloudbar span{display:block}
  .cfilter{display:grid;grid-template-columns:1fr 1fr}.cfilter input[name=q]{grid-column:1/-1}.cfilter button{grid-column:1/-1}
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cbill .row{flex-direction:column;gap:10px}.cbill .right{text-align:left}
}

.cbills .mdate{display:none}.cbills a b{white-space:nowrap}
@media (max-width:760px){.cbills th:nth-child(3),.cbills td:nth-child(3){display:none}.cbills .mdate{display:inline}.cbills td,.cbills th{padding:10px 8px}}
@media (max-width:760px){.cbills th:nth-child(5),.cbills td:nth-child(5){display:none}}