/* ============================================================ Technozaibi - main.css Modern AI-style design system (light + dark, interactive UI). Loaded async; critical.css is inlined in . ============================================================ */ /* ---------- Design tokens ---------- */ :root{ --bg:#f6f7fc;--bg2:#fff;--surface:rgba(255,255,255,.72);--surface2:rgba(255,255,255,.9);--surface3:#fff; --border:rgba(15,23,42,.09);--border2:rgba(15,23,42,.14);--text:#0b1020;--muted:#5a6273; --brand:#6d4cff;--brand2:#06b6d4;--accent:#ec4899;--success:#10b981;--warning:#f59e0b;--danger:#ef4444; --grad:linear-gradient(135deg,#6d4cff 0%,#06b6d4 100%); --grad-soft:linear-gradient(135deg,rgba(109,76,255,.12),rgba(6,182,212,.12)); --glow:0 0 0 1px rgba(109,76,255,.25),0 8px 30px -8px rgba(109,76,255,.45); --ring:rgba(109,76,255,.45); --shadow:0 10px 30px -12px rgba(15,23,42,.18); --shadow-lg:0 24px 60px -20px rgba(15,23,42,.28); --r:16px;--r-lg:22px;--r-sm:10px;--nav-h:66px;--maxw:1200px; --fs-hero:clamp(2.1rem,1.2rem + 3.6vw,3.7rem); --fs-h2:clamp(1.5rem,1.1rem + 1.4vw,2.2rem); --fs-h3:clamp(1.15rem,1rem + .5vw,1.4rem); --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; } [data-theme=dark]{ --bg:#07080f;--bg2:#0d0f1a;--surface:rgba(255,255,255,.045);--surface2:rgba(255,255,255,.075);--surface3:#11131f; --border:rgba(255,255,255,.09);--border2:rgba(255,255,255,.16);--text:#eef1f8;--muted:#9aa2b8; --shadow:0 10px 30px -12px rgba(0,0,0,.6);--shadow-lg:0 24px 60px -20px rgba(0,0,0,.7); --glow:0 0 0 1px rgba(124,92,255,.35),0 8px 30px -8px rgba(34,211,238,.35); } /* ---------- Base ---------- */ html{color-scheme:light;overflow-x:clip} [data-theme=dark]{color-scheme:dark} body{background: radial-gradient(60rem 32rem at 12% -8%,rgba(109,76,255,.10),transparent 60%), radial-gradient(52rem 30rem at 92% 4%,rgba(6,182,212,.10),transparent 60%), var(--bg); background-attachment:fixed} ::selection{background:rgba(109,76,255,.30)} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px} code,kbd,pre{font-family:var(--mono)} code{background:var(--surface2);border:1px solid var(--border);padding:.12em .4em;border-radius:6px;font-size:.88em} pre{background:#0d1020;color:#dbe2ff;border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.2rem;overflow:auto;position:relative} pre code{background:none;border:0;padding:0;color:inherit;font-size:.9rem} /* ---------- Layout helpers ---------- */ .section{padding:clamp(2.4rem,5vw,4rem) 0} .section-head{max-width:760px;margin:0 auto 2.2rem;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:.35rem .85rem;margin-bottom:.9rem} .section-head h2{font-size:var(--fs-h2);margin-bottom:.6rem} .section-head p{color:var(--muted)} .lead{font-size:clamp(1.02rem,.95rem + .4vw,1.18rem);color:var(--muted);max-width:64ch} .grid{display:grid;gap:1.25rem} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem} .center{text-align:center} .muted{color:var(--muted)} /* ---------- Hero ---------- */ .hero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0 3rem;overflow:hidden} /* Hero header + status bar are centred on the page. The same rules apply at every width, so mobile and desktop look identical (nothing hugs the left edge). */ .hero-inner{max-width:860px;margin-inline:auto;text-align:center} .hero h1{font-size:var(--fs-hero);margin-bottom:.4rem;text-wrap:balance} .hero .lead{margin:1rem auto 1.8rem} .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:center} .hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:min(100%,1120px);margin:2.4rem auto 0;padding:1.15rem 1.35rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-lg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-sizing:border-box} .stat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:144px;padding:1.1rem 1.35rem;text-align:center} .stat+.stat{border-left:1px solid var(--border)} /* Status bar shows numbers + labels only - icons are intentionally disabled. This rule also neutralises any leftover .stat-icon markup from older cached pages. */ .stat .stat-icon,.stat>svg{display:none!important} .stat b{display:block;min-width:4ch;font-size:clamp(2.4rem,1.7rem + 2.1vw,3.4rem);font-weight:900;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;line-height:1.02} .stat>span:last-child{font-size:clamp(.88rem,.8rem + .12vw,1rem);font-weight:600;color:var(--muted);margin-top:.4rem} @media (max-width:720px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:.75rem}.stat{min-height:124px;padding:1rem .9rem}.stat+.stat{border-left:0}.stat:nth-child(2n){border-left:1px solid var(--border)}.stat:nth-child(n+3){border-top:1px solid var(--border)}} @media (max-width:430px){.hero-stats{padding:.55rem}.stat{min-height:112px;padding:.85rem .5rem}} .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:-1;animation:float 9s ease-in-out infinite} .orb-a{width:360px;height:360px;background:rgba(109,76,255,.4);top:-120px;left:-80px} .orb-b{width:300px;height:300px;background:rgba(6,182,212,.35);top:20px;right:-60px;animation-delay:-3s} .orb-c{width:260px;height:260px;background:rgba(236,72,153,.25);bottom:-140px;left:38%;animation-delay:-6s} @keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.05)}} .gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- Bento grid ---------- */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem} .bento-item{position:relative;grid-column:span 4;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;overflow:hidden;backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .bento-item:hover{transform:translateY(-4px);border-color:var(--ring);box-shadow:var(--shadow-lg)} .bento-item.wide{grid-column:span 6} .bento-item.full{grid-column:span 12} .bento-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:var(--grad);color:#fff;box-shadow:var(--glow);margin-bottom:1rem} .bento-item h3{font-size:var(--fs-h3);margin-bottom:.4rem} .bento-item p{color:var(--muted);font-size:.94rem} .bento-link{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.92rem;margin-top:.9rem} /* ---------- Nav: dropdown, drawer, mobile ---------- */ .has-dropdown{position:relative} .nav-drop-toggle svg{width:14px;height:14px;transition:transform .2s ease} .has-dropdown.open .nav-drop-toggle svg{transform:rotate(180deg)} .nav-drop{position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%) translateY(6px);min-width:230px;list-style:none;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:.5rem;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s} .has-dropdown.open .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nav-drop a{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;border-radius:10px;color:var(--text);font-size:.92rem;font-weight:600} .nav-drop a:hover{background:var(--surface2);color:var(--brand)} .nav-backdrop{position:fixed;inset:0;background:rgba(7,8,15,.5);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:900} body.nav-open .nav-backdrop{opacity:1;visibility:visible} .scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--grad);transition:width .1s linear} /* ---------- Search overlay ---------- */ .search-overlay{position:fixed;inset:0;z-index:1300;display:none;align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem;background:rgba(7,8,15,.55);backdrop-filter:blur(6px)} .search-overlay.open{display:flex} .search-panel{width:100%;max-width:620px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .22s ease} @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .search-bar{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--border)} .search-bar svg{width:20px;height:20px;color:var(--muted);flex:none} .search-bar input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:1.05rem;color:var(--text)} .search-bar kbd{font-size:.7rem;color:var(--muted);border:1px solid var(--border2);border-radius:6px;padding:.15rem .4rem} .search-results{max-height:52vh;overflow:auto;padding:.5rem} .search-results a{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .8rem;border-radius:12px;color:var(--text)} .search-results a:hover,.search-results a.sel{background:var(--surface2);color:var(--text)} .search-results a small{color:var(--muted);font-size:.8rem} .search-empty{padding:1.4rem;text-align:center;color:var(--muted);font-size:.92rem} /* ---------- Back to top ---------- */ .to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:1200;width:46px;height:46px;border-radius:50%;border:1px solid var(--border2);background:var(--bg2);color:var(--text);display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top svg{width:20px;height:20px} /* ---------- Cards ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;display:flex;flex-direction:column} .card:hover{transform:translateY(-4px);border-color:var(--ring);box-shadow:var(--shadow-lg)} .card h3{font-size:var(--fs-h3);margin-bottom:.45rem} /* ---------- Page header / breadcrumbs ---------- */ .page-head{padding:2.4rem 0 1.2rem} .page-head h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);margin-bottom:.5rem} .page-head p{color:var(--muted);max-width:70ch} .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.83rem;color:var(--muted);padding:1rem 0 0} .breadcrumb a{color:var(--muted);font-weight:600} .breadcrumb a:hover{color:var(--brand)} .breadcrumb li{list-style:none} .breadcrumb ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;align-items:center} .breadcrumb li+li::before{content:"/";margin-right:.45rem;color:var(--border2)} /* ---------- Article / prose ---------- */ .prose{max-width:760px;margin-inline:auto;font-size:1.04rem} .prose>p,.prose>ul,.prose>ol{margin-bottom:1.15rem} .prose h2{font-size:var(--fs-h2);margin:2.4rem 0 .9rem;scroll-margin-top:90px} .prose h3{font-size:var(--fs-h3);margin:1.8rem 0 .6rem;scroll-margin-top:90px} .prose h2::after{content:"";display:block;width:54px;height:3px;border-radius:3px;background:var(--grad);margin-top:.6rem} .prose ul,.prose ol{padding-left:1.35rem} .prose li{margin-bottom:.4rem} .prose img{border-radius:var(--r);border:1px solid var(--border);margin:1.5rem 0} .prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.93rem;border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .prose th{background:var(--grad-soft);text-align:left;font-weight:800;padding:.7rem .85rem;border-bottom:1px solid var(--border2)} .prose td{padding:.65rem .85rem;border-bottom:1px solid var(--border)} .prose tr:last-child td{border-bottom:0} .prose a{font-weight:600;text-decoration:underline;text-underline-offset:2px} .prose strong{font-weight:800} .post-head{text-align:center;padding:2.2rem 0 1.6rem;border-bottom:1px solid var(--border);margin-bottom:2rem} .post-head h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);margin-bottom:.8rem} .post-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.2rem;font-size:.85rem;color:var(--muted)} .post-meta b{color:var(--text);font-weight:700} .post-tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:1rem} .toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.3rem;margin:1.8rem 0} .toc h2{font-size:1rem;margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.12em} .toc h2::after{display:none} .toc ol{margin:0;padding-left:1.2rem;font-size:.93rem} .toc a{color:var(--muted);font-weight:600} .toc a:hover{color:var(--brand)} .copy-btn{position:absolute;top:.6rem;right:.6rem;font-size:.72rem;font-weight:700;padding:.3rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#dbe2ff;cursor:pointer} .copy-btn:hover{background:rgba(255,255,255,.16)} .faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:.7rem} .faq summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem} .faq summary::after{content:"+";color:var(--brand);font-weight:900} .faq details[open] summary::after{content:"−"} .faq details[open] p{margin-top:.7rem;color:var(--muted)} /* ---------- Forms ---------- */ .form{display:grid;gap:.9rem;max-width:560px} .form label{font-size:.88rem;font-weight:700} .input,.textarea,select.input{width:100%;padding:.8rem .95rem;border:1px solid var(--border2);border-radius:12px;background:var(--bg2);color:var(--text);font:inherit;transition:border-color .18s ease,box-shadow .18s ease} .input:focus,.textarea:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 4px rgba(109,76,255,.14)} .textarea{min-height:130px;resize:vertical} .newsletter{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem} .newsletter .input{flex:1;min-width:230px} /* ---------- Footer ---------- */ .site-footer{margin-top:3.5rem;border-top:1px solid var(--border);background: radial-gradient(48rem 22rem at 80% 0%,rgba(109,76,255,.10),transparent 60%), var(--bg2)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding:3rem 0 2rem} .footer-brand p{color:var(--muted);font-size:.93rem;max-width:34ch;margin-top:.8rem} .footer-col h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.9rem} .footer-links{list-style:none;display:grid;gap:.5rem} .footer-links a{color:var(--text);font-size:.93rem;font-weight:600;opacity:.85} .footer-links a:hover{color:var(--brand);opacity:1} .social-links{display:flex;gap:.5rem;margin-top:1.1rem} .social-links a{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--border2);background:var(--surface);color:var(--text)} .social-links a:hover{color:var(--brand);border-color:var(--ring);transform:translateY(-2px)} .social-links svg{width:17px;height:17px} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;padding:1.2rem 0 1.6rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--muted)} .footer-bottom a{color:var(--muted);font-weight:600} .footer-bottom a:hover{color:var(--brand)} /* ---------- Scroll reveal ---------- */ .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0ms);will-change:opacity,transform} .js [data-reveal].is-in{opacity:1;transform:none} /* ---------- Below-fold rendering optimization ---------- */ .cv{content-visibility:auto;contain-intrinsic-size:auto 520px} /* ---------- Mobile drawer chrome (visible only inside .main-nav drawer) ---------- */ .nav-drawer-head,.nav-drawer-actions{display:none} .nav-drawer-title{font-size:1.02rem;font-weight:800;letter-spacing:-.01em} .nav-close svg{width:18px;height:18px} .drawer-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font:inherit;font-size:.95rem;font-weight:600;text-align:left;cursor:pointer;transition:border-color .18s ease,color .18s ease} .drawer-btn svg{width:18px;height:18px;flex:none} .drawer-btn:hover{border-color:var(--ring);color:var(--brand)} .drawer-btn kbd{margin-left:auto;font-size:.7rem;color:var(--muted);border:1px solid var(--border2);border-radius:6px;padding:.1rem .35rem} body.nav-open,body.search-active{overflow:hidden} /* The sticky header's backdrop-filter would otherwise trap the fixed drawer inside its 66px box */ body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none} body.nav-open .to-top{opacity:0;visibility:hidden;pointer-events:none} /* ---------- Responsive ---------- */ @media (max-width:1060px){ .footer-grid{grid-template-columns:1fr 1fr} .bento-item,.bento-item.wide{grid-column:span 6} .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ /* Floating header bar: side margins so it never touches the screen edge */ .site-header{margin-inline:.6rem;border-radius:0 0 18px 18px;border:1px solid var(--border);border-top:0;box-shadow:var(--shadow)} .site-header.scrolled{box-shadow:var(--shadow-lg)} /* Burger left (col 1) - brand perfectly centered (col 2) - search/theme right (col 3) */ .nav-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.5rem} .nav-burger{display:grid;grid-column:1;justify-self:start} .brand{grid-column:2;justify-self:center;white-space:nowrap} .nav-actions{grid-column:3;justify-self:end} /* Full-screen drawer navigation */ .main-nav{position:fixed;inset:0;display:block;width:auto;max-width:none;background:var(--bg2);border:0;border-radius:0;box-shadow:none;z-index:1100;padding:1rem 1.15rem calc(2rem + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateX(105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),visibility .3s} body.nav-open .main-nav{transform:none;visibility:visible} .nav-list{flex-direction:column;align-items:stretch;gap:.3rem} .nav-list>li>a,.nav-drop-toggle{width:100%;justify-content:space-between;padding:.85rem .9rem;border-radius:12px;font-size:1rem} .nav-drop{position:static;transform:none;opacity:1;visibility:visible;display:none;box-shadow:none;border:0;background:transparent;padding:.2rem 0 .2rem .8rem;min-width:0} .nav-drop a{padding:.55rem .7rem;font-size:.94rem} .has-dropdown.open .nav-drop{display:block;transform:none;opacity:1;visibility:visible} .nav-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.2rem 0 .9rem;margin-bottom:.6rem;border-bottom:1px solid var(--border)} .nav-drawer-actions{display:grid;gap:.6rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border)} .grid-3{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .container{padding-inline:1rem} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .bento-item,.bento-item.wide{grid-column:span 12} .hero-stats{gap:1.1rem} .footer-grid{grid-template-columns:1fr;gap:1.6rem} .posts-grid{grid-template-columns:1fr} .cta{margin-inline:1rem} .ad-slot{min-height:230px;margin-inline:1rem} .breadcrumb{font-size:.78rem} .hero{padding-top:2.4rem} .site-header{margin-inline:.5rem} .search-overlay{padding:5vh .75rem 1rem} .search-results{max-height:60vh} } @media (max-width:400px){ /* Very narrow phones: keep burger + centered brand + search on one row */ .brand{font-size:1.05rem} .brand-mark{width:30px;height:30px;border-radius:9px;font-size:.9rem} .icon-btn{width:36px;height:36px} .nav-actions{gap:.35rem} } @media print{ .site-header,.site-footer,.to-top,.ad-slot,.search-overlay,.scroll-progress{display:none!important} } /* ---------- CTA ---------- */ .cta{position:relative;overflow:hidden;text-align:center;border-radius:var(--r-lg);border:1px solid var(--border2);background:var(--grad-soft);padding:clamp(2rem,4vw,3.2rem) 1.5rem;margin:2.5rem auto;max-width:980px} .cta h2{font-size:var(--fs-h2);margin-bottom:.6rem} .cta p{color:var(--muted);max-width:56ch;margin:0 auto} .card p{color:var(--muted);font-size:.95rem;flex:1} .card .card-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:1rem;font-size:.8rem;color:var(--muted)} .icon-tile{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;background:var(--grad-soft);border:1px solid var(--border2);margin-bottom:.9rem} .posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.25rem} /* ---------- Pills / tags ---------- */ .pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;background:var(--grad-soft);border:1px solid var(--border2);color:var(--brand)} .tag{display:inline-block;font-size:.75rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;background:var(--grad-soft);border:1px solid var(--border);color:var(--brand)} blockquote{margin:1.4rem 0;padding:1rem 1.3rem;border-left:4px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--grad-soft);color:var(--text)} hr{border:0;height:1px;background:var(--border);margin:2rem 0} /* ---------- Ads temporarily disabled ---------- AdSense is not live yet, so ad placeholders stay hidden site-wide. Remove this block (and the matching rule in critical.css) to re-enable. */ .ad-slot,[data-ad-client],ins.adsbygoogle{display:none!important}