/*
Theme Name: System Maarahot
Theme URI: https://www.system-il.com
Description: ערכת נושא עצמאית של סיסטם מערכות מחשבים — פורטל אבטחת מידע (חדשות, כתבות, חנות). RTL, עיצוב בהיר מודרני.
Author: סיסטם מערכות מחשבים
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: system-il
Tags: rtl-language-support, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   סיסטם מערכות מחשבים — site theme (ported from portal concept).
   Content-led: news + articles + topics + shop. Light, modern.
   ============================================================ */
:root{
  direction: rtl;
  --bg:#eef3fb; --bg-2:#ffffff; --bg-grid:transparent;
  --surface:#ffffff; --surface-2:#f6f9ff;
  --border:#e3eaf6; --border-strong:#cfdaee;
  --fg:#101d36; --fg-dim:#45577a; --muted:#6b7a97;
  --accent:#2a5bff; --accent-2:#0ea5a4; --on-accent:#ffffff;
  --glow:42,91,255; --ring:rgba(42,91,255,.4);
  --hero-wash: radial-gradient(1100px 520px at 84% -14%, rgba(42,91,255,.12), transparent 60%),
               radial-gradient(820px 440px at 2% 4%, rgba(14,165,164,.09), transparent 58%);
  --card-shadow: 0 18px 44px -28px rgba(23,43,92,.30);
  --logo-bg:#ffffff;
  --radius:16px; --radius-sm:11px; --radius-pill:999px; --maxw:1180px;
  --font-display:"Rubik", system-ui, "Segoe UI", sans-serif;
  --font-body:"Assistant", system-ui, "Segoe UI", sans-serif;
  --font-mono:"Space Mono", ui-monospace, "SFMono-Regular", monospace;
  color-scheme: light;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:.1px; overflow-x:hidden}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--bg-grid)}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.1; text-wrap:balance; margin:0}
p{margin:0}
img{max-width:100%}

/* header */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; backdrop-filter:blur(14px) saturate(130%); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--border)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:31; background:var(--bg)}
.nav{display:flex; align-items:center; gap:18px; height:72px}
.brand{display:flex; align-items:center; gap:12px; margin-inline-end:auto}
.logo-card{background:var(--logo-bg); border:1px solid var(--border); border-radius:12px; padding:6px 9px; display:flex; align-items:center; box-shadow:0 4px 14px -8px rgba(var(--glow),.5)}
.logo-card img{height:30px; display:block}
.brand .b-name{font-family:var(--font-display); font-weight:800; font-size:16px; line-height:1.1}
.brand .b-tag{font-size:11.5px; color:var(--muted); font-weight:600; margin-top:2px}
.menu{display:flex; gap:24px; font-weight:600; font-size:14.5px; color:var(--fg-dim); list-style:none; margin:0; padding:0}
.menu a{position:relative; padding:6px 0; transition:color .18s; display:block}
.menu a:hover{color:var(--fg)}
.menu a::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); transform-origin:right; transition:transform .22s}
.menu a:hover::after{transform:scaleX(1)}
.btn{font-family:var(--font-body); font-weight:700; font-size:14.5px; border:0; cursor:pointer; padding:11px 20px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .2s, background .2s; white-space:nowrap}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--on-accent); box-shadow:0 10px 30px -10px rgba(var(--glow),.6)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface); color:var(--fg); border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.navtoggle{display:none; background:var(--surface); border:1px solid var(--border); color:var(--fg); width:44px; height:44px; border-radius:12px; cursor:pointer; font-size:20px}
.mobile-menu{display:none; flex-direction:column; gap:4px; padding:10px 0 16px; border-top:1px solid var(--border); list-style:none; margin:0}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:11px 4px; font-weight:600; color:var(--fg-dim); border-radius:8px; display:block}
.mobile-menu a:hover{color:var(--fg); background:var(--surface)}

/* upgrade notice bar */
.notice-bar{background:linear-gradient(120deg, rgba(var(--glow),.12), rgba(14,165,164,.1)); border-bottom:1px solid var(--border); color:var(--fg-dim); font-size:13.5px; font-weight:600}
.notice-bar .wrap{display:flex; align-items:center; justify-content:center; gap:10px; padding-block:9px; text-align:center}
.notice-bar b{color:var(--accent)}

/* hero */
.hero{position:relative; padding-block:68px 56px}
.hero::before{content:""; position:absolute; inset:0; background:var(--hero-wash); z-index:-1}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:50px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:13px; color:var(--fg-dim); background:var(--surface); border:1px solid var(--border); padding:7px 14px; border-radius:var(--radius-pill); margin-bottom:22px}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--glow),.22); animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(var(--glow),0)}}
.hero h1{font-size:clamp(33px, 5.6vw, 56px); font-weight:900; letter-spacing:-.5px}
.hero h1 .grad{background:linear-gradient(110deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{font-size:clamp(16px,2.2vw,18.5px); color:var(--fg-dim); max-width:48ch; margin-top:20px}
.hero-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:28px}
.hero-meta{display:flex; gap:28px; margin-top:32px; flex-wrap:wrap}
.hero-meta div{display:flex; flex-direction:column}
.hero-meta b{font-family:var(--font-display); font-size:23px; font-weight:800}
.hero-meta span{font-size:13px; color:var(--muted); font-weight:600}
.panel{background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--card-shadow); overflow:hidden}
.panel-top{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--border)}
.panel-top .t{font-family:var(--font-display); font-weight:800; font-size:15px}
.panel-top .live{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10.5px; color:var(--accent); font-weight:700; letter-spacing:.4px}
.panel-top .live .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite}
.feat{padding:18px; border-bottom:1px solid var(--border); background:linear-gradient(135deg, rgba(var(--glow),.08), transparent); display:block; color:inherit}
.feat .tag{display:inline-block; font-family:var(--font-mono); font-size:10.5px; color:var(--accent-2); font-weight:700; margin-bottom:9px}
.feat h3{font-size:19px; font-weight:800; line-height:1.25}
.feat p{color:var(--fg-dim); font-size:13.5px; margin-top:7px}
.hrow{display:flex; gap:12px; padding:13px 18px; border-bottom:1px solid var(--border); align-items:flex-start; transition:background .16s}
.hrow:last-child{border-bottom:0}
.hrow:hover{background:var(--surface-2)}
.hrow .idx{font-family:var(--font-mono); font-size:12px; color:var(--muted); padding-top:2px}
.hrow .h-main b{display:block; font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.3}
.hrow .h-main span{font-size:11.5px; color:var(--muted); font-family:var(--font-mono)}

/* section scaffolding */
.sec{padding-block:60px}
.sec-head{max-width:62ch; margin-bottom:32px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head .kick{font-weight:700; font-size:13.5px; color:var(--accent); margin-bottom:11px}
.sec-head h2{font-size:clamp(25px,3.8vw,38px); font-weight:800; letter-spacing:-.4px}
.sec-head p{color:var(--fg-dim); margin-top:13px; font-size:16.5px}

/* topics grid */
.topics-sec{background:var(--bg-2); border-block:1px solid var(--border)}
.topicgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.topic{display:flex; flex-direction:column; gap:10px; padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:transform .2s, border-color .2s}
.topic:hover{transform:translateY(-4px); border-color:var(--border-strong)}
.topic .ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(var(--glow),.2), rgba(var(--glow),.05)); border:1px solid var(--border)}
.topic .ico svg{width:22px; height:22px; color:var(--accent)}
.topic h3{font-size:17px; font-weight:700}
.topic p{color:var(--fg-dim); font-size:14px; flex:1}
.topic .cnt{font-family:var(--font-mono); font-size:11.5px; color:var(--muted)}

/* news */
.newswrap{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.news{display:flex; gap:15px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:17px; transition:transform .18s, border-color .2s}
.news:hover{transform:translateY(-3px); border-color:var(--border-strong)}
.news .mk{width:44px; height:44px; flex:none; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(var(--glow),.2), rgba(var(--glow),.05)); border:1px solid var(--border)}
.news .mk svg{width:21px; height:21px; color:var(--accent)}
.news .n-top{display:flex; gap:10px; align-items:center; margin-bottom:5px; font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.news .n-top .pill{color:var(--accent-2); font-weight:700}
.news h3{font-size:15.5px; font-weight:700; line-height:1.3}
.news p{color:var(--fg-dim); font-size:13.5px; margin-top:5px}

/* articles */
.guides{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.guide{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .2s, border-color .2s}
.guide:hover{transform:translateY(-4px); border-color:var(--border-strong)}
.guide>a{display:flex; flex-direction:column; flex:1; color:inherit}
.guide .top{height:120px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); background:linear-gradient(135deg, rgba(var(--glow),.26), rgba(var(--glow),.04)); background-size:cover; background-position:center}
.guide .top svg{position:absolute; inset:0; width:100%; height:100%; opacity:.55; color:var(--accent)}
.guide .body{padding:20px; display:flex; flex-direction:column; gap:9px; flex:1}
.guide .meta{font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.guide h3{font-size:17px; font-weight:700; line-height:1.3}
.guide p{color:var(--fg-dim); font-size:14px; flex:1}
.guide .rd{font-weight:700; font-size:13.5px; color:var(--accent)}

/* why-us band */
.why{background:var(--bg-2); border-block:1px solid var(--border)}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center}
.why h2{font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.3px}
.why p{color:var(--fg-dim); font-size:16.5px; margin-top:14px; max-width:46ch}
.why-points{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.wp{display:flex; gap:12px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm)}
.wp .ic{width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(var(--glow),.2), rgba(var(--glow),.05)); border:1px solid var(--border)}
.wp .ic svg{width:20px; height:20px; color:var(--accent)}
.wp b{display:block; font-family:var(--font-display); font-size:15px; font-weight:700}
.wp span{font-size:13px; color:var(--muted)}

/* shop */
.shop{padding-block:60px}
.shop-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.shoprow{display:grid; grid-template-columns:repeat(4,1fr); gap:15px}
.prod{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px; transition:transform .18s, border-color .2s; display:flex; flex-direction:column}
.prod:hover{transform:translateY(-3px); border-color:var(--border-strong)}
.prod .pic{height:86px; border-radius:10px; display:grid; place-items:center; margin-bottom:14px; background:linear-gradient(135deg,rgba(var(--glow),.14),transparent); border:1px solid var(--border); overflow:hidden}
.prod .pic svg{width:38px; height:38px; color:var(--accent)}
.prod .pic img{width:100%; height:100%; object-fit:cover}
.prod .cat{font-size:11.5px; color:var(--muted); font-weight:600}
.prod h4{font-size:15px; font-weight:700; margin:4px 0 10px}
.prod .buy{margin-top:auto; display:flex; align-items:center; justify-content:space-between}
.prod .pr{font-family:var(--font-mono); font-size:14px; color:var(--accent-2); font-weight:700}
.prod .add{font-weight:700; font-size:12.5px; color:var(--accent); border:1px solid var(--border-strong); background:var(--surface); padding:6px 12px; border-radius:var(--radius-pill); cursor:pointer}
.shop-note{margin-top:18px; font-size:13.5px; color:var(--muted); text-align:center}

/* FAQ */
.faq-sec{background:var(--bg-2); border-block:1px solid var(--border)}
.faq{max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:17px 20px; font-family:var(--font-display); font-weight:700; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; color:var(--accent); font-weight:400; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 20px 18px; color:var(--fg-dim); font-size:14.5px}

/* newsletter CTA */
.cta-band{position:relative; border-radius:calc(var(--radius) + 8px); overflow:hidden; border:1px solid var(--border-strong); background:linear-gradient(130deg,var(--surface-2),var(--surface)); padding:44px; text-align:center; box-shadow:var(--card-shadow)}
.cta-band::before{content:""; position:absolute; inset:0; background:var(--hero-wash); opacity:.8}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(24px,3.6vw,34px); font-weight:900}
.cta-band p{color:var(--fg-dim); margin:13px auto 24px; max-width:50ch; font-size:16px}
.nl{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:460px; margin-inline:auto}
.nl input{flex:1; min-width:200px; background:var(--surface); border:1px solid var(--border-strong); color:var(--fg); border-radius:var(--radius-pill); padding:12px 18px; font-family:var(--font-body); font-size:15px; outline:none}
.nl input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
.nl-note{margin-top:14px; font-size:12.5px; color:var(--muted)}
.nl-ok{display:none; margin-top:14px; font-weight:700; color:var(--accent-2)}

/* footer */
.site-footer{border-top:1px solid var(--border); background:var(--bg-2); padding-block:40px; margin-top:8px}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:28px}
.foot .f-name{font-family:var(--font-display); font-weight:800; font-size:17px; margin-bottom:12px}
.foot h5{font-family:var(--font-display); font-size:14px; font-weight:700; margin:0 0 14px; color:var(--fg)}
.foot a,.foot p{display:block; color:var(--muted); font-size:14px; margin-bottom:9px; font-weight:500}
.foot a:hover{color:var(--accent)}
.foot .sel{user-select:all; color:var(--fg-dim)}
.foot-bottom{border-top:1px solid var(--border); margin-top:28px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px}

/* whatsapp float */
.wa{position:fixed; inset-block-end:calc(20px + env(safe-area-inset-bottom,0px)); inset-inline-start:calc(20px + env(safe-area-inset-left,0px)); z-index:40; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#25d366; box-shadow:0 14px 34px -10px rgba(37,211,102,.7); transition:transform .18s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px; height:30px; color:#fff}

/* ===== single / archive / page content ===== */
.page-hero{position:relative; padding-block:56px 20px}
.page-hero::before{content:""; position:absolute; inset:0; background:var(--hero-wash); z-index:-1}
.crumbs{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:14px}
.crumbs a:hover{color:var(--accent)}
.article-head{max-width:760px}
.article-head .kick{font-weight:700; font-size:13px; color:var(--accent); margin-bottom:12px}
.article-head h1{font-size:clamp(28px,4.4vw,44px); font-weight:900; letter-spacing:-.4px; line-height:1.12}
.article-meta{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted)}
.article-cover{max-width:980px; margin:28px auto 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border)}
.article-cover img{width:100%; display:block}
.article-body{max-width:760px; margin-inline:auto; padding-block:36px 10px; font-size:17px; line-height:1.85; color:var(--fg)}
.article-body h2{font-size:26px; font-weight:800; margin:34px 0 14px}
.article-body h3{font-size:20px; font-weight:700; margin:26px 0 12px}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 18px; padding-inline-start:26px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.article-body img{border-radius:var(--radius-sm); margin:18px 0}
.article-body blockquote{margin:22px 0; padding:16px 20px; border-inline-start:3px solid var(--accent); background:var(--surface-2); border-radius:var(--radius-sm); color:var(--fg-dim)}
.article-body code{font-family:var(--font-mono); background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:.9em}
.article-body pre{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; overflow:auto}
.post-tags{max-width:760px; margin:22px auto 0; display:flex; gap:9px; flex-wrap:wrap}
.post-tags a{font-size:12.5px; font-weight:600; color:var(--fg-dim); background:var(--surface); border:1px solid var(--border); padding:6px 13px; border-radius:var(--radius-pill)}
.post-tags a:hover{border-color:var(--border-strong); color:var(--accent)}
.archive-head{max-width:62ch; margin-bottom:32px}
.archive-head .kick{font-weight:700; font-size:13.5px; color:var(--accent); margin-bottom:11px}
.archive-head h1{font-size:clamp(26px,3.8vw,40px); font-weight:800; letter-spacing:-.4px}
.archive-head p{color:var(--fg-dim); margin-top:13px; font-size:16.5px}
.pager{display:flex; gap:10px; justify-content:center; margin-top:40px; flex-wrap:wrap}
.pager a,.pager span{font-weight:700; font-size:14px; padding:9px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface); color:var(--fg-dim)}
.pager a:hover{border-color:var(--border-strong); color:var(--accent)}
.pager .current{background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--on-accent); border-color:transparent}
.empty-note{max-width:620px; margin:30px auto; text-align:center; color:var(--fg-dim); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px}
.related{border-top:1px solid var(--border); margin-top:46px}

@media (max-width:880px){
  .menu,.hero-meta{display:none}
  .navtoggle{display:block}
  .hero-grid,.why-grid{grid-template-columns:1fr; gap:34px}
  .topicgrid,.guides{grid-template-columns:1fr 1fr}
  .shoprow{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .topicgrid,.newswrap,.guides,.shoprow,.foot,.why-points{grid-template-columns:1fr}
  .nav{height:62px; gap:10px}
  .brand .b-tag{display:none}
  .cta-band{padding:30px 22px}
  .article-body{font-size:16px}
}
/* ============================================================
   v1.1 — magazine layer: real photos, lead story, photo tiles
   ============================================================ */

/* category colours (used by pills, tile stripes) */
.cat-default{--c:#2a5bff}
.cat-security-news{--c:#2a5bff}
.cat-wordpress-security{--c:#3451d1}
.cat-phishing{--c:#0b9493}
.cat-ransomware{--c:#6247d8}
.cat-passwords{--c:#0a7fa3}
.cat-privacy{--c:#8a3fd6}
.cat-tools-hardware{--c:#df640c}

.pill{display:inline-block; font-family:var(--font-body); font-size:12px; font-weight:700; line-height:1.2; padding:4px 10px; border-radius:var(--radius-pill); color:var(--c,#2a5bff); background:color-mix(in srgb, var(--c,#2a5bff) 12%, #fff); white-space:nowrap}

.sec-head.row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:none}
.sec-head.row > div{max-width:62ch}

/* intro + lead story */
.lead-sec{padding-block:28px 34px}
.intro-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--border)}
.intro-row h1{font-size:clamp(22px,3vw,32px); font-weight:900; letter-spacing:-.3px}
.intro-row .grad{background:linear-gradient(110deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.intro-row .today{font-size:13px; color:var(--muted); font-weight:600}

.lead-grid{display:grid; grid-template-columns:1.7fr 1fr; gap:20px}
.lead-card{position:relative; isolation:isolate; min-height:470px; border-radius:20px; overflow:hidden; display:flex; align-items:flex-end; color:#fff; background:#172038 center/cover no-repeat; box-shadow:var(--card-shadow)}
.lead-card.no-img{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.lead-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(7,13,32,.92) 0%, rgba(7,13,32,.55) 42%, rgba(7,13,32,.05) 78%)}
.lead-body{display:flex; flex-direction:column; gap:10px; padding:30px; max-width:660px}
.lead-body .pill{align-self:flex-start; background:var(--c); color:#fff}
.lead-card h2{color:#fff; font-size:clamp(24px,3.2vw,38px); font-weight:900; line-height:1.15}
.lead-card p{color:rgba(255,255,255,.88); font-size:16px; max-width:58ch}
.lead-meta{font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.78)}
.lead-card:hover h2{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}

.side-list{display:flex; flex-direction:column; gap:12px; min-width:0}
.side-item{display:grid; grid-template-columns:112px 1fr; gap:14px; align-items:center; padding:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; transition:border-color .2s, transform .2s}
.side-item:hover{border-color:var(--border-strong); transform:translateY(-2px)}
.side-thumb{width:112px; height:86px; border-radius:10px; background:#dfe7f5 center/cover no-repeat}
.side-text{display:flex; flex-direction:column; gap:5px; min-width:0}
.side-text .pill{align-self:flex-start}
.side-text b{font-family:var(--font-display); font-size:15px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.side-text small{font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.side-thumb.no-img,.news .thumb.no-img,.gw-img.no-img{background:linear-gradient(135deg, rgba(var(--glow),.32), rgba(var(--glow),.06))}

/* topic photo tiles */
.topics-sec{background:var(--bg-2); border-block:1px solid var(--border)}
.topic-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.topic-tile{position:relative; isolation:isolate; min-height:200px; border-radius:18px; overflow:hidden; display:flex; align-items:flex-end; color:#fff; background:#172038 center/cover no-repeat; transition:transform .25s}
.topic-tile:hover{transform:translateY(-4px)}
.topic-tile::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background:var(--c); z-index:1}
.topic-tile.no-img{background:linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #0b1530))}
.tt-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(7,13,32,.9) 5%, rgba(7,13,32,.45) 55%, rgba(7,13,32,.18))}
.tt-body{display:flex; flex-direction:column; gap:4px; padding:18px 20px}
.tt-body b{font-family:var(--font-display); font-size:20px; font-weight:800}
.tt-body span{font-size:14px; color:rgba(255,255,255,.86)}
.tt-body em{align-self:flex-start; margin-top:8px; font-style:normal; font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:#fff; background:var(--c); padding:3px 10px; border-radius:var(--radius-pill)}

/* news with photo thumbnails */
.news{align-items:center}
.news .thumb{width:128px; height:96px; flex:none; border-radius:11px; background:#dfe7f5 center/cover no-repeat}
.news > div{min-width:0}
.news .n-top{font-family:var(--font-mono)}
.news .n-top .pill{color:var(--c); font-weight:700}

/* article cards */
.guide .top{height:190px; background-color:#dfe7f5; background-size:cover; background-position:center; border-bottom:0}
.guide .top.no-img{background:linear-gradient(135deg, rgba(var(--glow),.26), rgba(var(--glow),.04))}
.guide .top .pill{position:absolute; top:12px; inset-inline-start:12px; background:var(--c); color:#fff; box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.guide .body{gap:8px}
.guide .rd{margin-top:4px}

/* wide featured article */
.guide-wide{display:grid; grid-template-columns:1.15fr 1fr; margin-bottom:20px; background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--card-shadow); transition:border-color .2s, transform .2s}
.guide-wide:hover{border-color:var(--border-strong); transform:translateY(-3px)}
.gw-img{min-height:330px; background:#dfe7f5 center/cover no-repeat}
.gw-body{display:flex; flex-direction:column; justify-content:center; gap:12px; padding:32px}
.gw-body .pill{align-self:flex-start}
.gw-body h3{font-size:clamp(22px,2.6vw,30px); font-weight:800; line-height:1.2}
.gw-body p{color:var(--fg-dim); font-size:15.5px}
.gw-body .meta{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.gw-body .rd{font-weight:700; color:var(--accent)}

/* real products */
.prod{color:inherit}
.prod .pic{height:160px; padding:12px; background:#fff; border:1px solid var(--border); overflow:hidden}
.prod .pic img{max-height:136px; width:auto; max-width:100%; object-fit:contain}
.prod h4{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35}
.prod .soon{font-size:11.5px; color:var(--muted); font-weight:600}

/* single article */
.article-head .pill{margin-bottom:14px}
.article-head .dek{font-size:clamp(17px,2vw,20px); color:var(--fg-dim); margin-top:14px; max-width:62ch; line-height:1.6}
.article-cover{max-width:1080px; margin:26px auto 0; border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--surface)}
.article-cover img{width:100%; height:auto; max-height:580px; object-fit:cover; display:block}
.article-cover figcaption,.article-figure figcaption{font-size:12.5px; color:var(--muted); padding:10px 16px; text-align:start}
.article-cover figcaption a,.article-body figcaption a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.article-body figure{margin:28px 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.article-body figure img{display:block; width:100%; height:auto; max-height:560px; object-fit:contain; margin:0; border-radius:0; background:var(--surface-2)}
.article-body figcaption{font-size:12.5px; color:var(--muted); padding:10px 16px; line-height:1.5}
.article-body .article-figure{margin:30px 0; background:var(--surface-2); border:1px solid var(--border); border-radius:16px; overflow:hidden; text-align:center}
.article-body .article-figure img{display:inline-block; margin:0; border-radius:0; width:auto; max-width:100%; max-height:520px; height:auto}

@media (max-width:880px){
  .lead-grid{grid-template-columns:1fr}
  .lead-card{min-height:380px}
  .topic-tiles{grid-template-columns:1fr 1fr}
  .guide-wide{grid-template-columns:1fr}
  .gw-img{min-height:230px}
}
@media (max-width:560px){
  .lead-sec{padding-block:18px 26px}
  .lead-card{min-height:340px}
  .lead-body{padding:20px}
  .topic-tiles{grid-template-columns:1fr}
  .topic-tile{min-height:170px}
  .side-item{grid-template-columns:92px 1fr}
  .side-thumb{width:92px; height:72px}
  .news .thumb{width:92px; height:74px}
  .gw-body{padding:22px}
  .guide .top{height:170px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* 1.1.2 — compact header on phones */
@media (max-width:560px){
  .nav > .btn-primary{display:none}
  .brand{gap:9px; min-width:0}
  .brand .b-name{font-size:15px; white-space:nowrap}
  .logo-card img{height:26px}
}

/* 1.2.0 — real <img> elements instead of CSS backgrounds */
.ph{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block}
.lead-card .ph,.topic-tile .ph{z-index:-2}
.side-thumb,.news .thumb,.gw-img{position:relative; overflow:hidden}
.guide .top .pill{z-index:1}
.lead-card,.topic-tile{background-color:#172038}
/* shop: equipment categories */
.shopcats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.shopcat{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; color:inherit; transition:transform .2s, border-color .2s}
.shopcat:hover{transform:translateY(-4px); border-color:var(--border-strong)}
.shopcat .sc-img{position:relative; display:block; aspect-ratio:4/3; background:#dfe7f5; overflow:hidden}
.shopcat.no-img .sc-img{background:linear-gradient(135deg, rgba(var(--glow),.26), rgba(var(--glow),.04))}
.shopcat .sc-body{display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; flex:1}
.shopcat b{font-family:var(--font-display); font-size:17px; font-weight:700}
.shopcat .sc-body span{color:var(--fg-dim); font-size:14px; flex:1}
.shopcat em{font-style:normal; font-weight:700; font-size:13.5px; color:var(--accent); margin-top:6px}
@media (max-width:880px){ .shopcats{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .shopcats{grid-template-columns:1fr 1fr; gap:12px} .shopcat .sc-body{padding:12px 13px 14px} .shopcat b{font-size:15px} .shopcat .sc-body span{font-size:13px} }