/* TECH TUTORIALS — public theme. يعتمد على Bootstrap 5.3 + متغيرات CSS + data-bs-theme */
:root{--brand:#0d6efd;--brand-2:#0a58ca;--card-bg:var(--bs-body-bg);--soft:var(--bs-tertiary-bg);--line:var(--bs-border-color);--radius:.9rem;--shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.05);--header-h:64px}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Naskh Arabic",Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
a{text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:.3rem}
.skip-link{position:absolute;inset-inline-start:.5rem;top:-4rem;background:var(--brand);color:#fff;padding:.5rem 1rem;border-radius:.4rem;z-index:2000}.skip-link:focus{top:.5rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
main{min-height:60vh;outline:none}

/* Header */
.site-header{position:sticky;top:0;z-index:1030;background:color-mix(in srgb,var(--bs-body-bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:1rem;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem;color:var(--bs-body-color);letter-spacing:.3px}.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:.6rem;background:linear-gradient(135deg,var(--brand),#6ea8fe);color:#fff;font-size:.95rem}
.main-nav{gap:.15rem;margin-inline-start:1.2rem;flex:1}
.nav-item-wrap{position:relative}
.nav-link-x{display:block;padding:.5rem .8rem;border-radius:.5rem;color:var(--bs-body-color);font-weight:500;font-size:.95rem}
.nav-link-x:hover,.nav-link-x.active{background:var(--soft);color:var(--brand);text-decoration:none}
.dropdown-panel{position:absolute;inset-inline-start:0;top:100%;min-width:230px;background:var(--card-bg);border:1px solid var(--line);border-radius:.8rem;box-shadow:var(--shadow);padding:.4rem;display:none}
.has-dropdown:hover .dropdown-panel,.has-dropdown:focus-within .dropdown-panel{display:block}
.dropdown-panel a{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:.5rem;color:var(--bs-body-color);font-size:.92rem}
.dropdown-panel a:hover{background:var(--soft);text-decoration:none}.dropdown-panel a.all{color:var(--brand);font-weight:600;border-top:1px solid var(--line);margin-top:.3rem;border-radius:0 0 .5rem .5rem}
.header-actions{display:flex;align-items:center;gap:.3rem;margin-inline-start:auto}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border:0;background:transparent;color:var(--bs-body-color);border-radius:.6rem;font-size:1rem;font-weight:600;padding:0 .5rem}
.icon-btn:hover{background:var(--soft);text-decoration:none}
.search-overlay{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--card-bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:1rem 0;z-index:1025}
.search-form{display:flex;gap:.5rem}.search-form input{flex:1;border:1px solid var(--line);background:var(--bs-body-bg);color:var(--bs-body-color);border-radius:.6rem;padding:.65rem 1rem;font-size:1.05rem}
.suggest-box{margin-top:.6rem;border:1px solid var(--line);border-radius:.8rem;overflow:hidden;max-width:100%}
.suggest-item{display:flex;align-items:center;gap:.8rem;padding:.55rem .8rem;color:var(--bs-body-color);border-bottom:1px solid var(--line)}.suggest-item:last-child{border:0}
.suggest-item:hover,.suggest-item.active{background:var(--soft);text-decoration:none}
.suggest-item img,.suggest-item .ph{width:52px;height:38px;object-fit:cover;border-radius:.4rem;background:var(--soft);flex:none;display:flex;align-items:center;justify-content:center;color:var(--bs-secondary-color)}
.suggest-item small{display:block;color:var(--bs-secondary-color)}
.mobile-menu{position:fixed;inset:var(--header-h) 0 0 0;background:var(--bs-body-bg);z-index:1020;overflow-y:auto;padding:1rem 1.25rem}
.mobile-menu a{display:block;padding:.8rem .25rem;font-weight:600;color:var(--bs-body-color);border-bottom:1px solid var(--line)}
.mobile-menu a.sub{font-weight:400;font-size:.95rem}
body.menu-open{overflow:hidden}

/* Hero & sections */
.hero{padding:4rem 0 3.2rem;background:radial-gradient(1200px 380px at 50% -10%,rgba(13,110,253,.16),transparent 70%),var(--bs-body-bg);border-bottom:1px solid var(--line)}
.hero-title{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;line-height:1.25;margin-bottom:.8rem}
.hero-desc{font-size:1.1rem;color:var(--bs-secondary-color);max-width:640px;margin:0 auto 1.8rem}
.hero-search{display:flex;align-items:center;gap:.6rem;max-width:720px;margin:0 auto;background:var(--card-bg);border:1px solid var(--line);border-radius:1rem;padding:.4rem .4rem .4rem 1rem;box-shadow:var(--shadow)}
.hero-search i{color:var(--bs-secondary-color)}
.hero-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--bs-body-color);padding:.6rem .4rem;font-size:1.05rem;outline:none}
.section{padding:2.2rem 0}
.section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.section-head h2{font-size:1.45rem;font-weight:700;margin:0}
.page-head{padding:1.6rem 0 1rem}.page-head h1{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800}
.breadcrumb{font-size:.88rem;margin-bottom:.8rem;flex-wrap:wrap}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.4rem}
.card-article{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.card-article:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.1)}
.card-media{display:block;aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:2.2rem;color:var(--brand);background:linear-gradient(135deg,rgba(13,110,253,.1),rgba(110,168,254,.2))}
.card-body-x{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.badge-cat{align-self:flex-start;background:rgba(13,110,253,.1);color:var(--brand);font-size:.76rem;font-weight:700;padding:.2rem .6rem;border-radius:2rem}.badge-cat:hover{text-decoration:none;background:rgba(13,110,253,.18)}
.card-title-x{font-size:1.08rem;font-weight:700;line-height:1.45;margin:0}.card-title-x a{color:var(--bs-body-color)}.card-title-x a:hover{color:var(--brand);text-decoration:none}
.card-excerpt{font-size:.9rem;color:var(--bs-secondary-color);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.78rem;color:var(--bs-secondary-color);padding-top:.5rem}
mark{background:rgba(255,193,7,.35);color:inherit;padding:0 .1em;border-radius:.2rem}

/* Category tiles, chips, tabs */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:1rem}
.cat-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:1.2rem .8rem;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);color:var(--bs-body-color);transition:.15s}
.cat-tile:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none;box-shadow:var(--shadow)}
.cat-icon{width:48px;height:48px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;background:rgba(13,110,253,.1);color:var(--brand);font-size:1.3rem}
.cat-name{font-weight:700}.cat-count{font-size:.78rem;color:var(--bs-secondary-color)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border:1px solid var(--line);border-radius:2rem;font-size:.88rem;color:var(--bs-body-color);background:var(--card-bg)}
.chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}.chip .count,.count{font-size:.75rem;color:var(--bs-secondary-color)}
.chips.big .chip{font-size:1rem;padding:.45rem 1rem}
.tabs-mini{display:flex;gap:.25rem;background:var(--soft);padding:.25rem;border-radius:.7rem}
.tabs-mini button{border:0;background:transparent;color:var(--bs-body-color);padding:.3rem .8rem;border-radius:.5rem;font-size:.85rem}
.tabs-mini button.active{background:var(--card-bg);box-shadow:var(--shadow);font-weight:700;color:var(--brand)}
.updates-list{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.updates-list li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:var(--card-bg)}.updates-list li:last-child{border:0}
.updates-list time{font-size:.82rem;color:var(--bs-secondary-color)}
.cat-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.2rem}
.cat-group{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;background:var(--card-bg)}.cat-group h2{font-size:1.15rem}.cat-group ul{margin:0;padding-inline-start:1.1rem}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--bs-secondary-color)}
.newsletter{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#0d6efd,#0a58ca);color:#fff;border-radius:1.2rem;padding:2rem}
.newsletter h2{font-size:1.4rem}.newsletter-form{display:flex;flex-wrap:wrap;gap:.5rem;flex:1;min-width:260px;max-width:480px}
.newsletter-form input[type=email]{flex:1;min-width:180px;border:0;border-radius:.6rem;padding:.65rem 1rem}
.newsletter-msg{width:100%;font-size:.88rem;min-height:1.2em}

/* Article page */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem;align-items:start}
@media(max-width:991.98px){.article-layout{grid-template-columns:minmax(0,1fr)}.article-side{order:2}}
.article-main{max-width:820px;min-width:0}
.article-header h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;line-height:1.3;margin:.7rem 0}
.article-subtitle{font-size:1.2rem;color:var(--bs-secondary-color);margin-bottom:.4rem}
.article-lead{font-size:1.08rem;color:var(--bs-secondary-color)}
.article-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.86rem;color:var(--bs-secondary-color);padding:.8rem 0;border-block:1px solid var(--line);margin-top:.8rem}
.article-hero{margin:1.4rem 0}.article-hero img{width:100%;height:auto;border-radius:var(--radius);display:block}.article-hero figcaption{font-size:.85rem;color:var(--bs-secondary-color);margin-top:.4rem;text-align:center}
.article-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:1.2rem;max-height:calc(100vh - 100px);overflow-y:auto}
.toc-box,.side-box{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;background:var(--card-bg)}
.toc-title{font-weight:700;margin-bottom:.6rem;font-size:.95rem}
.toc-list{list-style:none;margin:0;padding:0;font-size:.88rem}
.toc-list li a{display:block;padding:.28rem .4rem;border-radius:.4rem;color:var(--bs-body-color)}.toc-list li a:hover,.toc-list li a.active{background:var(--soft);color:var(--brand);text-decoration:none}
.toc-list li a.active{font-weight:700}
.toc-l3{padding-inline-start:1.1rem}.toc-num{color:var(--bs-secondary-color);margin-inline-end:.25rem}
.toc-mobile{border:1px solid var(--line);border-radius:var(--radius);padding:.7rem 1rem;margin:1rem 0;background:var(--card-bg)}.toc-mobile summary{font-weight:700;cursor:pointer}.toc-mobile .toc-list{margin-top:.6rem}
.side-list{list-style:none;padding:0;margin:0;font-size:.9rem}.side-list li{padding:.4rem 0;border-bottom:1px solid var(--line)}.side-list li:last-child{border:0}.side-list a{color:var(--bs-body-color)}
.faq-section{margin-top:2.5rem}.faq-section h2{font-size:1.4rem}
.rating-box{margin:2rem 0;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.share-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0;padding:.8rem 0;border-block:1px solid var(--line)}
.share-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card-bg);color:var(--bs-body-color)}.share-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}
.author-box{display:flex;gap:1rem;padding:1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);margin:1.5rem 0}
.author-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}.author-avatar.ph{display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-size:1.6rem;font-weight:700}
.social{display:flex;gap:.5rem;flex-wrap:wrap}.social a{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--bs-body-color)}.social a:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}
.article-content .gallery img{cursor:zoom-in}

/* Footer */
.site-footer{margin-top:3rem;padding:3rem 0 1.5rem;background:var(--soft);border-top:1px solid var(--line)}
.footer-h{font-size:1rem;font-weight:700;margin-bottom:.8rem}
.footer-links{list-style:none;padding:0;margin:0;font-size:.9rem}.footer-links li{margin-bottom:.4rem}.footer-links a{color:var(--bs-secondary-color)}.footer-links a:hover{color:var(--brand)}
.footer-bottom{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--bs-secondary-color);text-align:center}
.cookie-bar{position:fixed;inset-inline:1rem;bottom:1rem;z-index:1040;max-width:640px;margin-inline:auto;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.18);padding:1rem 1.2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between}
.not-found{padding:4rem 0}.nf-code{font-size:6rem;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--brand),#6ea8fe);-webkit-background-clip:text;background-clip:text;color:transparent}
.copy-btn{font-family:inherit}
@media(max-width:575.98px){.hero{padding:2.6rem 0 2rem}.hero-search .btn{padding:.5rem .9rem;font-size:.95rem}.section{padding:1.5rem 0}.author-box{flex-direction:column}}
@media print{.site-header,.site-footer,.article-side,.share-bar,.rating-box,.cookie-bar,.toc-mobile{display:none!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Comments */
.comments{margin-top:2.5rem}.comments h2{font-size:1.4rem}
.comment-list{list-style:none;padding:0;margin:0}.comment-list.replies{margin-inline-start:2.6rem;margin-top:.6rem}
.comment{display:flex;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.comment>ol.replies{flex-basis:100%}
.comment.is-reply{border-bottom:0;padding:.5rem 0}
.c-avatar{width:40px;height:40px;border-radius:50%;background:var(--soft);color:var(--brand);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.c-body{flex:1;min-width:0}.c-head{font-size:.9rem;margin-bottom:.2rem}.c-head time{color:var(--bs-secondary-color);font-size:.8rem;margin-inline-start:.4rem}
.c-text{font-size:.95rem;line-height:1.7;overflow-wrap:anywhere}
.comment-form{margin-top:1.8rem;padding:1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg)}
.reply-banner{display:flex;gap:.6rem;align-items:center;justify-content:space-between;background:var(--soft);border-radius:.5rem;padding:.4rem .8rem;margin-bottom:.8rem;font-size:.9rem}

/* Tools */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1rem}
.tool-tile{display:flex;gap:.9rem;align-items:flex-start;padding:1rem;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);color:var(--bs-body-color);transition:.15s}
.tool-tile:hover{border-color:var(--brand);text-decoration:none;box-shadow:var(--shadow);transform:translateY(-2px)}
.tool-tile-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tool-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.tool-big{font-size:clamp(1.6rem,5vw,2.4rem);font-weight:800;color:var(--brand);margin:.3rem 0 .8rem;word-break:break-all}
.tool-output{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--soft);border:1px solid var(--line);border-radius:.6rem;padding:.8rem 1rem;word-break:break-all;min-height:3rem;direction:ltr;text-align:left}

/* =========================================================
   AHMED TECH / TECH TUTORIALS — PREMIUM MOTION LAYER
   Append this section after the existing site.css rules.
   Bootstrap 5.3 compatible; keeps the existing class names.
   ========================================================= */

:root {
  --brand: #2563eb;
  --brand-2: #06b6d4;
  --brand-glow: rgba(37, 99, 235, .24);
  --radius: 1.15rem;
  --shadow: 0 8px 28px rgba(15, 23, 42, .07);
  --shadow-hover: 0 22px 55px rgba(15, 23, 42, .14);
  --motion: cubic-bezier(.2, .75, .25, 1);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(37,99,235,.045), transparent 34rem),
    radial-gradient(ellipse at 94% 12%, rgba(6,182,212,.04), transparent 30rem),
    var(--bs-body-bg);
}

/* Slim animated reading progress accent */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), #8b5cf6);
  transform-origin: left;
  opacity: .9;
}

/* Header: floating glass surface */
.site-header {
  background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  box-shadow: 0 5px 24px rgba(15, 23, 42, .035);
  transition: background .3s ease, box-shadow .3s ease;
}
.header-inner { gap: 1.25rem; }
.brand { font-size: 1.22rem; letter-spacing: -.035em; }
.brand-mark {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #06b6d4 72%, #67e8f9);
  box-shadow: 0 7px 18px rgba(37,99,235,.27), inset 0 1px rgba(255,255,255,.35);
  transition: transform .35s var(--motion), box-shadow .35s ease;
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 10px 25px rgba(37,99,235,.35);
}
.nav-link-x {
  position: relative;
  border-radius: .7rem;
  font-weight: 600;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.nav-link-x:hover { transform: translateY(-1px); }
.nav-link-x::after {
  content: "";
  position: absolute;
  height: 2px;
  left: .8rem;
  right: .8rem;
  bottom: .22rem;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--motion);
}
.nav-link-x:hover::after, .nav-link-x.active::after { transform: scaleX(1); }
.icon-btn {
  border: 1px solid transparent;
  transition: .22s var(--motion);
}
.icon-btn:hover {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, var(--bs-body-bg));
  transform: translateY(-2px);
}
.dropdown-panel {
  top: calc(100% + .55rem);
  border-radius: 1rem;
  padding: .55rem;
  box-shadow: 0 18px 45px rgba(15,23,42,.14);
  animation: menu-in .18s var(--motion) both;
}
.dropdown-panel a { border-radius: .65rem; padding: .65rem .8rem; }
.dropdown-panel a:hover { transform: translateX(3px); }

/* Hero: layered gradient glow */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 6vw, 5rem);
  border-bottom: 0;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(37,99,235,.22), transparent 62%),
    radial-gradient(ellipse at 8% 70%, rgba(6,182,212,.11), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--bs-tertiary-bg) 48%, var(--bs-body-bg)), var(--bs-body-bg));
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.hero::before {
  width: 330px; height: 330px;
  top: -190px; inset-inline-start: -90px;
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 0 0 35px rgba(37,99,235,.025), 0 0 0 75px rgba(37,99,235,.018);
  animation: float-orb 12s ease-in-out infinite;
}
.hero::after {
  width: 220px; height: 220px;
  bottom: -150px; inset-inline-end: 7%;
  background: radial-gradient(circle, rgba(6,182,212,.16), transparent 70%);
  animation: float-orb 9s ease-in-out infinite reverse;
}
.hero-title {
  letter-spacing: -.045em;
  line-height: 1.14;
  background: linear-gradient(105deg, var(--bs-emphasis-color) 15%, var(--brand) 62%, var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rise-in .7s var(--motion) both;
}
.hero-desc { line-height: 1.85; animation: rise-in .8s var(--motion) both; }
.hero-search {
  position: relative;
  border-radius: 1.15rem;
  padding: .5rem .55rem .5rem 1.1rem;
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  box-shadow: 0 12px 35px rgba(15,23,42,.08), 0 0 0 5px rgba(37,99,235,.035);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  animation: rise-in .9s var(--motion) both;
}
.hero-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 15px 40px rgba(37,99,235,.13), 0 0 0 5px rgba(37,99,235,.09);
  transform: translateY(-2px);
}
.hero-search .btn, .search-form .btn {
  border: 0;
  border-radius: .8rem;
  background: linear-gradient(120deg, var(--brand), #1d4ed8 55%, var(--brand-2));
  box-shadow: 0 6px 16px rgba(37,99,235,.22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.hero-search .btn:hover, .search-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(37,99,235,.3);
  filter: saturate(1.15);
}

/* Sections and headings */
.section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { margin-bottom: 1.55rem; }
.section-head h2, .page-head h1 {
  letter-spacing: -.035em;
}
.section-head h2 {
  position: relative;
  padding-inline-start: .9rem;
}
.section-head h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .15em;
  bottom: .15em;
  width: 4px;
  border-radius: 5px;
  background: linear-gradient(var(--brand), var(--brand-2));
}

/* Article cards: smooth lift, image zoom and animated edge */
.card-article {
  position: relative;
  border-radius: 1.15rem;
  border-color: color-mix(in srgb, var(--line) 75%, transparent);
  box-shadow: 0 5px 22px rgba(15,23,42,.045);
  transition: transform .38s var(--motion), box-shadow .38s var(--motion), border-color .3s ease;
}
.card-article::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 20%, rgba(37,99,235,.32), rgba(6,182,212,.22), transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
}
.card-article:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  box-shadow: var(--shadow-hover);
}
.card-article:hover::before { opacity: 1; }
.card-media { position: relative; }
.card-media img {
  transition: transform .65s var(--motion), filter .45s ease;
}
.card-article:hover .card-media img {
  transform: scale(1.055);
  filter: saturate(1.08);
}
.card-placeholder {
  background:
    radial-gradient(circle at 75% 20%, rgba(6,182,212,.22), transparent 35%),
    linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.08));
}
.card-body-x { padding: 1.15rem 1.2rem 1.25rem; gap: .65rem; }
.badge-cat {
  border: 1px solid rgba(37,99,235,.13);
  background: rgba(37,99,235,.075);
  letter-spacing: .015em;
  transition: background .2s ease, transform .2s ease;
}
.badge-cat:hover { transform: translateY(-1px); background: rgba(37,99,235,.14); }
.card-title-x { letter-spacing: -.018em; }
.card-title-x a { transition: color .2s ease; }
.card-excerpt { line-height: 1.75; }
.card-meta { gap: .45rem 1rem; }

/* Category and tool tiles */
.cat-tile, .tool-tile {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  transition: transform .3s var(--motion), box-shadow .3s ease, border-color .3s ease;
}
.cat-tile::after, .tool-tile::after {
  content: "";
  position: absolute;
  width: 120px; height: 120px;
  inset-inline-end: -65px; bottom: -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.14), transparent 70%);
  transition: transform .4s var(--motion);
}
.cat-tile:hover, .tool-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(15,23,42,.09);
}
.cat-tile:hover::after, .tool-tile:hover::after { transform: scale(2.1); }
.cat-icon {
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(37,99,235,.13), rgba(6,182,212,.12));
  transition: transform .3s var(--motion), box-shadow .3s ease;
}
.cat-tile:hover .cat-icon { transform: rotate(-5deg) scale(1.08); box-shadow: 0 8px 20px rgba(37,99,235,.13); }

/* Chips, tabs, lists */
.chip { transition: .2s var(--motion); }
.chip:hover { transform: translateY(-2px); background: rgba(37,99,235,.06); }
.tabs-mini { border: 1px solid var(--line); }
.tabs-mini button { transition: .2s ease; }
.updates-list { box-shadow: var(--shadow); }
.updates-list li { transition: background .2s ease; }
.updates-list li:hover { background: color-mix(in srgb, var(--brand) 4%, var(--card-bg)); }

/* Article reading experience */
.article-header h1 { letter-spacing: -.04em; }
.article-lead { line-height: 1.85; }
.article-content { line-height: 1.9; }
.article-content h2, .article-content h3 {
  letter-spacing: -.025em;
  scroll-margin-top: 6rem;
}
.article-content h2 {
  margin-top: 2.4em;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.article-content pre {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(15,23,42,.06);
}
.article-content :not(pre) > code {
  color: var(--brand);
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.1);
  border-radius: .35rem;
  padding: .12em .38em;
}
.article-hero img { box-shadow: 0 15px 40px rgba(15,23,42,.1); }
.toc-box, .side-box {
  border-radius: 1rem;
  box-shadow: 0 5px 22px rgba(15,23,42,.04);
}
.toc-list li a { transition: background .18s ease, color .18s ease, padding .18s ease; }
.toc-list li a:hover { padding-inline-start: .7rem; }
.author-box, .comment-form, .rating-box {
  border-radius: 1.1rem;
}

/* CTA and footer */
.newsletter {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.4rem;
  background: linear-gradient(115deg, #1d4ed8, #2563eb 48%, #0891b2);
  box-shadow: 0 18px 40px rgba(37,99,235,.2);
}
.newsletter::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px; height: 300px;
  inset-inline-end: -90px; top: -190px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,255,255,.045), 0 0 0 58px rgba(255,255,255,.035);
}
.newsletter-form input[type=email] { outline: 0; }
.newsletter-form input[type=email]:focus { box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.site-footer { position: relative; overflow: hidden; }
.footer-links a { transition: color .2s ease, padding .2s ease; }
.footer-links a:hover { padding-inline-start: .25rem; }
.footer-bottom { line-height: 1.8; }

/* Small UI details */
.share-btn, .social a {
  transition: transform .2s var(--motion), background .2s ease, color .2s ease;
}
.share-btn:hover, .social a:hover { transform: translateY(-3px) scale(1.04); }
.copy-btn { transition: transform .2s ease, box-shadow .2s ease; }
.copy-btn:hover { transform: translateY(-1px); }
.not-found .nf-code { filter: drop-shadow(0 10px 18px rgba(37,99,235,.13)); }
:focus-visible { outline-offset: 4px; }

/* Entry animations for key page areas */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float-orb {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(18px,22px,0); }
}

/* Responsive refinements */
@media (max-width: 767.98px) {
  .header-inner { gap: .6rem; }
  .hero { padding-block: 3.3rem 2.8rem; }
  .hero-title { letter-spacing: -.035em; }
  .cards-grid { gap: 1rem; }
  .card-article:hover, .cat-tile:hover, .tool-tile:hover { transform: translateY(-3px); }
  .newsletter { padding: 1.5rem; }
}
@media (hover: none) {
  .card-article:hover, .cat-tile:hover, .tool-tile:hover { transform: none; }
  .card-article:hover .card-media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* AHMED TECH — AURORA UI v2: palette + responsive corrections */
:root{
 --brand:#7c3aed;--brand-2:#06b6a4;--brand-glow:rgba(124,58,237,.22);
 --aurora-coral:#fb7185;--radius:1.2rem;--motion:cubic-bezier(.22,1,.36,1);
 --line:#e7e5f0;--soft:#f5f3fa;
}
[data-bs-theme="dark"]{
 --brand:#a78bfa;--brand-2:#2dd4bf;--brand-glow:rgba(167,139,250,.2);
 --line:#343044;--soft:#211e2c;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{min-width:320px;overflow-x:clip;background:radial-gradient(ellipse at 0 0,rgba(124,58,237,.055),transparent 34rem),radial-gradient(ellipse at 100% 18%,rgba(6,182,164,.045),transparent 32rem),var(--bs-body-bg)}
img,video,iframe,svg{max-width:100%}
pre,code,.tool-output{max-width:100%}
.container,.container-fluid{min-width:0}
.brand-mark{background:linear-gradient(135deg,#7c3aed,#6366f1 48%,#06b6a4);box-shadow:0 8px 22px rgba(124,58,237,.28)}
.site-header{background:color-mix(in srgb,var(--bs-body-bg) 86%,transparent);border-bottom-color:color-mix(in srgb,var(--line) 72%,transparent)}
.nav-link-x:hover,.nav-link-x.active{color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--bs-body-bg))}
.nav-link-x::after{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.dropdown-panel{border-color:color-mix(in srgb,var(--brand) 15%,var(--line));box-shadow:0 20px 55px rgba(17,24,39,.16)}
.hero{
 background:radial-gradient(ellipse at 50% -22%,rgba(124,58,237,.23),transparent 63%),radial-gradient(ellipse at 8% 72%,rgba(6,182,164,.13),transparent 38%),radial-gradient(ellipse at 95% 55%,rgba(251,113,133,.08),transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--bs-tertiary-bg) 54%,var(--bs-body-bg)),var(--bs-body-bg));
}
.hero-title{background:linear-gradient(105deg,var(--bs-emphasis-color) 8%,#7c3aed 48%,#089f91 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-bs-theme="dark"] .hero-title{background-image:linear-gradient(105deg,#f5f3ff 5%,#c4b5fd 48%,#5eead4 92%)}
.hero-search{border-color:color-mix(in srgb,var(--brand) 22%,var(--line));box-shadow:0 15px 42px rgba(65,45,110,.09),0 0 0 5px rgba(124,58,237,.035)}
.hero-search:focus-within{border-color:var(--brand);box-shadow:0 16px 42px rgba(124,58,237,.15),0 0 0 5px rgba(124,58,237,.09)}
.hero-search .btn,.search-form .btn{background:linear-gradient(115deg,#7c3aed,#6366f1 55%,#089f91);box-shadow:0 7px 18px rgba(124,58,237,.24)}
.card-article:hover{border-color:color-mix(in srgb,var(--brand) 38%,var(--line));box-shadow:0 22px 55px rgba(76,29,149,.13)}
.card-placeholder{color:var(--brand);background:radial-gradient(circle at 75% 18%,rgba(6,182,164,.22),transparent 34%),linear-gradient(135deg,rgba(124,58,237,.14),rgba(99,102,241,.09) 52%,rgba(6,182,164,.12))}
.badge-cat,.cat-icon{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--bs-body-bg))}
.cat-tile:hover,.tool-tile:hover{border-color:color-mix(in srgb,var(--brand) 36%,var(--line));box-shadow:0 16px 38px rgba(76,29,149,.11)}
.article-content{overflow-wrap:anywhere;line-height:1.9}
.article-content img,.article-content video{height:auto;max-width:100%;border-radius:.85rem}
.article-content pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-content table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse}
.article-content blockquote{margin:1.5rem 0;padding:1rem 1.2rem;border-inline-start:4px solid var(--brand);border-radius:.4rem .9rem .9rem .4rem;background:color-mix(in srgb,var(--brand) 6%,var(--bs-body-bg))}
.toc-list li a.active{color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--bs-body-bg))}
.newsletter{background:linear-gradient(118deg,#6d28d9,#7c3aed 43%,#0f9f91);box-shadow:0 18px 45px rgba(109,40,217,.2)}
input,textarea,select{max-width:100%}
button,.btn,.icon-btn,.share-btn{touch-action:manipulation}

/* Tablet */
@media (min-width:768px) and (max-width:1199.98px){
 .container{max-width:960px}
 .header-inner{gap:.55rem}
 .brand{font-size:1.05rem}
 .main-nav{margin-inline-start:.35rem;gap:0}
 .nav-link-x{padding:.48rem .52rem;font-size:.88rem}
 .header-actions{gap:.15rem}
 .icon-btn{min-width:36px;height:38px}
 .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
 .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .article-layout{grid-template-columns:minmax(0,1fr) 245px;gap:1.4rem}
 .article-main{max-width:none}
}

/* Phones and small tablets */
@media(max-width:767.98px){
 html{scroll-padding-top:76px}
 .site-header{z-index:1050}
 .header-inner{height:60px;gap:.45rem}
 .brand{gap:.45rem;font-size:1rem;min-width:0}
 .brand-mark{width:34px;height:34px;flex:0 0 34px}
 .main-nav{display:none!important}
 .header-actions{gap:.1rem}
 .icon-btn{min-width:36px;width:36px;height:38px;padding:0}
 .mobile-menu{inset:60px 0 0;padding:.85rem 1rem calc(2rem + env(safe-area-inset-bottom));overscroll-behavior:contain}
 .mobile-menu a{padding:.9rem .35rem;line-height:1.5}
 .dropdown-panel{display:none!important}
 .hero{padding:3rem 0 2.5rem}
 .hero-title{font-size:clamp(1.85rem,8vw,2.65rem);line-height:1.2}
 .hero-desc{font-size:1rem;line-height:1.75;padding-inline:.25rem}
 .hero-search{width:100%;gap:.35rem;padding:.35rem;border-radius:.95rem}
 .hero-search input{width:100%;min-width:0;padding:.65rem .55rem;font-size:16px}
 .hero-search .btn{flex:0 0 auto;padding:.62rem .85rem;white-space:nowrap}
 .search-overlay{inset-block-start:60px;padding:.8rem 0}
 .search-form{gap:.4rem}
 .search-form input{min-width:0;width:100%;font-size:16px}
 .suggest-item,.suggest-item>span,.suggest-item>div{min-width:0;overflow-wrap:anywhere}
 .section{padding:2rem 0}
 .section-head{align-items:flex-start}
 .section-head h2{font-size:1.25rem}
 .page-head{padding:1.2rem 0 .8rem}
 .page-head h1{font-size:clamp(1.55rem,6vw,2rem)}
 .cards-grid,.cat-groups,.tools-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
 .card-article{border-radius:1rem}
 .card-body-x{padding:1rem}
 .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
 .cat-tile{padding:1rem .55rem;min-width:0}
 .cat-icon{width:43px;height:43px}
 .cat-name{overflow-wrap:anywhere}
 .newsletter{padding:1.35rem;border-radius:1.1rem}
 .newsletter-form{min-width:0;width:100%;max-width:none}
 .newsletter-form input[type=email]{min-width:0;width:100%}
 .article-layout{display:flex;flex-direction:column;gap:1.3rem}
 .article-main{width:100%;max-width:none}
 .article-side{position:static;order:2;width:100%;max-height:none;overflow:visible}
 .article-header h1{font-size:clamp(1.55rem,6.7vw,2.15rem);line-height:1.3}
 .article-subtitle{font-size:1.05rem}
 .article-lead{font-size:1rem;line-height:1.8}
 .article-meta{gap:.45rem .8rem;font-size:.8rem}
 .article-hero{margin:1rem 0}
 .article-content{font-size:1rem;line-height:1.85}
 .article-content h2{font-size:1.35rem;margin-top:1.9em}
 .article-content h3{font-size:1.15rem}
 .toc-mobile{margin:.8rem 0 1.2rem}
 .toc-box,.side-box{padding:.9rem}
 .author-box{padding:1rem;gap:.8rem}
 .author-avatar{width:58px;height:58px}
 .comment-list.replies{margin-inline-start:1rem}
 .comment-form{padding:1rem}
 .share-bar{gap:.4rem}
 .share-btn{width:36px;height:36px}
 .site-footer{margin-top:2rem;padding:2.2rem 0 1.2rem}
 .footer-bottom{margin-top:1.3rem;padding-top:1rem}
 .cookie-bar{inset-inline:.65rem;bottom:calc(.65rem + env(safe-area-inset-bottom));padding:.85rem;gap:.7rem}
}
@media(max-width:380px){
 .container{padding-inline:14px}
 .brand{font-size:.92rem}
 .icon-btn{min-width:33px;width:33px}
 .hero-search{flex-wrap:wrap}
 .hero-search input{flex:1 1 100%}
 .hero-search .btn{width:100%}
 .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card-meta{font-size:.74rem}
}
[dir="rtl"] .hero-search{padding-inline:.55rem .9rem}
pre,.tool-output,.article-content pre,.article-content code{direction:ltr;text-align:left}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}