/* ============================================================
   Kareeb Sadab — Portfolio Stylesheet
   ============================================================ */
  :root{
    --primary:#18181B;
    --on-primary:#FFFFFF;
    --secondary:#3F3F46;
    --accent:#2563EB;
    --bg:#FAFAFA;
    --fg:#09090B;
    --muted:#E8ECF0;
    --muted-text:#6B7280;
    --border:#E4E4E7;
    --surface:#FFFFFF;
    --sec-security:#2563EB;
    --sec-ai:#7C3AED;
    --sec-data:#B45309;
    --sec-web3:#0F766E;
    --sec-code:#DB2777;
    --success:#16A34A;
    --danger:#DC2626;
    --radius:14px;
    --ease:cubic-bezier(.4,0,.2,1);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:'Open Sans',sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Poppins',sans-serif;color:var(--primary);letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;}
  .container{max-width:1180px;margin:0 auto;padding:0 24px;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  /* NAV */
  #nav{
    position:fixed; top:0; left:0; right:0; z-index:200;
    background:rgba(250,250,250,.7);
    backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  #nav.scrolled{ background:rgba(250,250,250,.92); border-bottom-color:var(--border); }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
  .nav-logo{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.05rem;}
  .nav-logo span{color:var(--accent);}
  .nav-links{display:flex;gap:32px;}
  .nav-links a{font-size:.88rem;font-weight:500;color:var(--secondary);transition:color .2s;position:relative;padding-bottom:2px;}
  .nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--accent);transition:width .25s var(--ease);}
  .nav-links a:hover{color:var(--accent);}
  .nav-links a.active{color:var(--accent);}
  .nav-links a.active::after{width:100%;}
  .nav-cta{
    font-size:.82rem; font-weight:600; padding:9px 18px; border-radius:8px;
    background:var(--primary); color:#fff; transition:background .2s, transform .2s;
  }
  .nav-cta:hover{background:var(--accent); transform:translateY(-1px);}

  .nav-toggle{
    display:none; width:40px;height:40px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface); align-items:center; justify-content:center; position:relative; flex-shrink:0;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:''; position:absolute; width:18px; height:2px; background:var(--fg); border-radius:2px;
    transition:transform .25s var(--ease), opacity .25s var(--ease), background .25s;
  }
  .nav-toggle span::before{transform:translateY(-6px);}
  .nav-toggle span::after{transform:translateY(6px);}
  .nav-toggle.open span{background:transparent;}
  .nav-toggle.open span::before{transform:translateY(0) rotate(45deg);}
  .nav-toggle.open span::after{transform:translateY(0) rotate(-45deg);}

  .mobile-menu{
    display:none; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
  }
  .mobile-menu.open{max-height:420px;}
  .mobile-menu-inner{padding:8px 24px 20px; display:flex; flex-direction:column;}
  .mobile-menu a{padding:12px 2px; font-size:.95rem; font-weight:600; color:var(--secondary); border-bottom:1px solid var(--border);}
  .mobile-menu a:last-of-type{border-bottom:none;}
  .mobile-menu a.active{color:var(--accent);}
  .mobile-menu .nav-cta{margin-top:10px; text-align:center;}

  /* HERO */
  #hero{padding:168px 0 88px; position:relative; overflow:hidden;}
  #hero::before{
    content:''; position:absolute; top:-120px; right:-160px; width:520px; height:520px;
    background:radial-gradient(circle,rgba(37,99,235,.10) 0%,transparent 70%);
    pointer-events:none;
  }
  .hero-floaters{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
  .floater{
    position:absolute; width:52px; height:52px; border-radius:15px;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:rotate(-10deg) scale(.8);
    animation:floatIn .8s var(--ease) forwards, floatBob 5.5s ease-in-out infinite;
    backdrop-filter:blur(2px);
  }
  .floater svg{width:24px;height:24px;}
  @keyframes floatIn{to{opacity:.62; transform:rotate(-8deg) scale(1);}}
  @keyframes floatBob{
    0%,100%{translate:0 0;}
    50%{translate:0 -16px;}
  }
  @media(prefers-reduced-motion:reduce){
    .floater{animation:floatIn .01ms forwards !important;}
  }
  @media(max-width:900px){ .hero-floaters{display:none;} }
  .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; position:relative; z-index:1;}
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); margin-bottom:20px;
  }
  .hero-eyebrow::before{content:'';width:24px;height:1.5px;background:var(--accent);}
  .hero-title{font-size:clamp(2.1rem,4.2vw,3.2rem); font-weight:700; line-height:1.12; margin-bottom:20px;}
  .hero-title .hl{color:var(--accent);}
  .hero-desc{font-size:1.05rem; color:var(--secondary); max-width:520px; margin-bottom:28px;}
  .domain-legend{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;}
  .domain-pill{
    display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600;
    padding:6px 14px; border-radius:100px; border:1px solid var(--border); background:var(--surface);
  }
  .domain-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .d-security{background:var(--sec-security);} .d-ai{background:var(--sec-ai);} .d-data{background:var(--sec-data);}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:9px;
    font-size:.88rem; font-weight:600; transition:all .25s var(--ease); border:1px solid transparent;
  }
  .btn-primary{background:var(--primary); color:#fff;}
  .btn-primary:hover{background:var(--accent); transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(37,99,235,.45);}
  .btn-primary:disabled{opacity:.7; cursor:not-allowed; transform:none;}
  .btn-outline{border:1px solid var(--border); background:var(--surface);}
  .btn-outline:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
  .hero-socials{display:flex; gap:10px;}
  .social-icon{
    width:40px;height:40px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
    display:flex; align-items:center; justify-content:center; color:var(--secondary); transition:all .25s;
  }
  .social-icon:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
  .social-icon svg{width:18px;height:18px;}

  .hero-photo-wrap{position:relative;}
  .hero-photo-card{
    background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px;
    box-shadow:0 24px 60px -30px rgba(0,0,0,.18);
  }
  .photo-frame{position:relative; width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--muted);}
  .hero-photo{width:100%; height:100%; object-fit:cover;}
  .photo-fallback{
    display:none; position:absolute; inset:0; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:800; font-size:3rem; color:#fff;
    background:linear-gradient(135deg,var(--sec-security),var(--sec-ai));
  }
  .photo-frame.no-photo .hero-photo{display:none;}
  .photo-frame.no-photo .photo-fallback{display:flex;}
  .hero-photo-caption{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.82rem; color:var(--secondary);}
  .pulse-dot{width:8px;height:8px;border-radius:50%;background:#16A34A; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:pulse 2s infinite; flex-shrink:0;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45);}70%{box-shadow:0 0 0 8px rgba(22,163,74,0);}100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}}

  .stats-bar{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:40px 0;}
  .stat-item{text-align:center;}
  .stat-num{font-family:'Poppins',sans-serif; font-weight:700; font-size:2rem; color:var(--accent);}
  .stat-label{font-size:.78rem; color:var(--muted-text); letter-spacing:.04em; text-transform:uppercase; margin-top:4px;}

  section{padding:96px 0; scroll-margin-top:72px;}
  .section-eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:10px;
  }
  .section-eyebrow::before{content:'';width:20px;height:1.5px;background:var(--accent);}
  .section-title{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; margin-bottom:14px;}
  .section-desc{color:var(--secondary); max-width:600px; margin-bottom:48px; font-size:.98rem;}

  /* reveal */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.visible{opacity:1; transform:none;}

  /* EXPERIENCE */
  .timeline-item{position:relative; padding-left:32px; border-left:2px solid var(--border);}
  .timeline-item::before{
    content:''; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%;
    background:var(--accent); border:3px solid var(--bg);
  }
  .exp-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:4px;}
  .exp-title{font-size:1.15rem; font-weight:700;}
  .exp-org{color:var(--accent); font-weight:600;}
  .exp-meta{color:var(--muted-text); font-size:.85rem; margin-bottom:14px;}
  .exp-list li{position:relative; padding-left:18px; margin-bottom:10px; color:var(--secondary); font-size:.94rem;}
  .exp-list li::before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--accent);}

  /* SKILLS */
  .skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .skill-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; transition:box-shadow .25s, transform .25s;}
  .skill-card:hover{box-shadow:0 16px 36px -20px rgba(0,0,0,.15); transform:translateY(-3px);}
  .skill-card h3{font-size:.98rem; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
  .skill-card h3 .dot{width:8px;height:8px;border-radius:50%;}
  .chip-row{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{font-size:.78rem; padding:5px 12px; border-radius:100px; background:var(--muted); color:var(--secondary); font-weight:500;}

  /* PROJECTS */
  .filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;}
  .filter-btn{
    font-size:.82rem; font-weight:600; padding:9px 18px; border-radius:100px;
    border:1px solid var(--border); background:var(--surface); color:var(--secondary); transition:all .2s;
  }
  .filter-btn:hover{border-color:var(--accent); color:var(--accent);}
  .filter-btn.active{background:var(--primary); border-color:var(--primary); color:#fff;}
  .project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .project-card{
    background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border);
    border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; position:relative;
    transition:box-shadow .3s, transform .3s var(--ease), opacity .28s var(--ease), border-color .3s;
    opacity:1; transform:scale(1);
  }
  .project-card:hover{box-shadow:0 20px 44px -22px rgba(0,0,0,.18); transform:translateY(-4px);}
  .project-card.is-hidden{opacity:0; transform:scale(.94); pointer-events:none;}
  .project-card[data-cat="security"]{border-left-color:var(--sec-security);}
  .project-card[data-cat="ai"]{border-left-color:var(--sec-ai);}
  .project-card[data-cat="data"]{border-left-color:var(--sec-data);}
  .project-card[data-cat="web3"]{border-left-color:var(--sec-web3);}
  .project-tag{
    display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:6px;
    margin-bottom:14px; align-self:flex-start;
  }
  .tag-security{background:rgba(37,99,235,.1); color:var(--sec-security);}
  .tag-ai{background:rgba(124,58,237,.1); color:var(--sec-ai);}
  .tag-data{background:rgba(180,83,9,.1); color:var(--sec-data);}
  .tag-web3{background:rgba(15,118,110,.1); color:var(--sec-web3);}
  .live-badge{
    position:absolute; top:20px; right:20px; display:inline-flex; align-items:center; gap:5px;
    font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--success); background:rgba(22,163,74,.1); padding:4px 9px; border-radius:100px;
  }
  .live-badge .pulse-dot{width:6px;height:6px;}
  .project-card h3{font-size:1.05rem; margin-bottom:10px; padding-right:10px;}
  .project-card p{font-size:.88rem; color:var(--secondary); margin-bottom:16px; flex:1;}
  .project-stack{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;}
  .stack-tag{font-size:.7rem; color:var(--muted-text); padding:3px 9px; border:1px solid var(--border); border-radius:5px;}
  .project-links{display:flex; gap:14px; margin-top:auto;}
  .project-links a{font-size:.82rem; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:5px;}
  .project-links a:hover{text-decoration:underline;}

  /* SPECIALIZED PORTFOLIOS */
  .portfolio-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .portfolio-card{
    display:flex; flex-direction:column; gap:16px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:28px; transition:box-shadow .3s, transform .3s, border-color .3s;
  }
  .portfolio-card:hover{box-shadow:0 20px 44px -22px rgba(0,0,0,.18); transform:translateY(-4px); border-color:rgba(37,99,235,.3);}
  .portfolio-icon{
    width:46px;height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .portfolio-icon svg{width:22px;height:22px;}
  .portfolio-body h3{font-size:1.1rem; margin:10px 0 8px;}
  .portfolio-body p{font-size:.9rem; color:var(--secondary);}
  .portfolio-link{
    display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--accent);
    margin-top:auto; transition:gap .2s;
  }
  .portfolio-link svg{width:14px;height:14px;}
  .portfolio-card:hover .portfolio-link{gap:9px;}
  @media(max-width:640px){ .portfolio-grid{grid-template-columns:1fr;} }

  /* CERTS */
  .certs-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .cert-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
  .cert-card h3{font-size:.95rem; margin-bottom:14px;}
  .cert-list li{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:.9rem; color:var(--secondary);}
  .cert-check{width:18px;height:18px; border-radius:50%; background:rgba(37,99,235,.1); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .cert-check svg{width:11px;height:11px;}

  /* CONTACT */
  .contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:48px;}
  .contact-detail{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--border);}
  .contact-detail:last-child{border-bottom:none;}
  .contact-icon{width:38px;height:38px; border-radius:9px; background:rgba(37,99,235,.08); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .contact-icon svg{width:17px;height:17px;}
  .contact-label{font-size:.72rem; color:var(--muted-text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px;}
  .contact-value{font-size:.94rem; font-weight:600;}
  .contact-value a:hover{color:var(--accent);}

  .form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
  .form-group{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
  .form-label{font-size:.74rem; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.04em;}
  .form-input, .form-textarea{
    border:1px solid var(--border); border-radius:9px; padding:12px 14px; font-family:inherit; font-size:.92rem;
    background:var(--bg); transition:border-color .2s, box-shadow .2s; outline:none;
  }
  .form-input:focus, .form-textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12);}
  .form-textarea{resize:vertical; min-height:120px;}
  .btn-submit{width:100%; justify-content:center; border:none;}
  .spinner{
    display:inline-block; width:14px;height:14px; border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .form-msg{
    margin-top:14px; padding:12px 14px; border-radius:9px; font-size:.85rem; display:none; font-weight:600;
  }
  .form-msg.show{display:block;}
  .form-msg.success{background:rgba(22,163,74,.1); color:var(--success);}
  .form-msg.error{background:rgba(220,38,38,.1); color:var(--danger);}

  footer{border-top:1px solid var(--border); padding:32px 0;}
  .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--muted-text);}
  .footer-inner strong{color:var(--primary);}

  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-photo-wrap{order:-1; max-width:280px; margin:0 auto;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .skills-grid{grid-template-columns:1fr 1fr;}
    .project-grid{grid-template-columns:1fr 1fr;}
    .certs-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
  }
  @media(max-width:640px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .nav-toggle{display:flex;}
    .mobile-menu{display:flex;}
    .skills-grid{grid-template-columns:1fr;}
    .project-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:1fr 1fr;}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
  }

  /* ============ DARK MODE ============ */
  html[data-theme="dark"]{
    --primary:#F4F4F5;
    --on-primary:#18181B;
    --secondary:#A1A1AA;
    --accent:#3B82F6;
    --bg:#0B0B0D;
    --fg:#F4F4F5;
    --muted:#1F1F23;
    --muted-text:#9CA3AF;
    --border:#27272A;
    --surface:#151517;
  }
  html[data-theme="dark"] #nav{ background:rgba(11,11,13,.7); }
  html[data-theme="dark"] #nav.scrolled{ background:rgba(11,11,13,.92); }
  html[data-theme="dark"] .nav-cta{ color:var(--on-primary); }
  html[data-theme="dark"] .btn-primary{ color:var(--on-primary); }
  html[data-theme="dark"] .stat-num{ color:var(--accent); }
  html[data-theme="dark"] .hero-photo-caption,
  html[data-theme="dark"] .footer-inner{ color:var(--muted-text); }
  html{ transition:background-color .3s var(--ease); }
  body, #nav, .surface, .skill-card, .project-card, .portfolio-card, .cert-card, .form-card, .pub-card, .rec-card{
    transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  }

  .theme-toggle{
    width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface); display:flex; align-items:center; justify-content:center;
    color:var(--secondary); transition:all .25s var(--ease); flex-shrink:0; margin-left:10px;
  }
  .theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }
  .theme-toggle svg{ width:18px; height:18px; }
  .theme-toggle .icon-moon{ display:none; }
  html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
  html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
  .mobile-menu .theme-toggle{ align-self:flex-start; margin:12px 0 0; }

  /* ============ BACK TO TOP ============ */
  #backToTop{
    position:fixed; right:22px; bottom:22px; z-index:150;
    width:46px; height:46px; border-radius:50%; border:1px solid var(--border);
    background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s;
    box-shadow:0 12px 28px -10px rgba(0,0,0,.35);
  }
  #backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
  #backToTop:hover{ background:var(--accent); }
  #backToTop svg{ width:18px; height:18px; }

  /* ============ AVAILABILITY LIST ============ */
  .availability{
    display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:28px; padding:16px 20px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  }
  .availability-item{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--secondary); }
  .availability-item svg{ width:15px; height:15px; color:var(--success); flex-shrink:0; }

  /* ============ EDUCATION (shares .timeline-item) ============ */
  .timeline-item + .timeline-item{ margin-top:28px; }
  .edu-detail{ color:var(--secondary); font-size:.94rem; }

  /* ============ PUBLICATIONS ============ */
  .pub-grid{ display:flex; flex-direction:column; gap:16px; }
  .pub-card{
    display:flex; align-items:flex-start; gap:16px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:22px 24px; transition:box-shadow .3s, transform .3s, border-color .3s;
  }
  .pub-card:hover{ box-shadow:0 20px 44px -22px rgba(0,0,0,.18); transform:translateY(-3px); border-color:rgba(37,99,235,.3); }
  .pub-icon{
    width:38px;height:38px;border-radius:9px;background:rgba(37,99,235,.08);color:var(--accent);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .pub-icon svg{ width:17px; height:17px; }
  .pub-body h3{ font-size:1rem; margin-bottom:6px; }
  .pub-body p{ font-size:.88rem; color:var(--secondary); margin-bottom:10px; }
  .pub-link{ font-size:.82rem; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:5px; }
  .pub-link:hover{ text-decoration:underline; }

  /* ============ FEATURED TAG ============ */
  .featured-badge{
    position:absolute; top:20px; right:20px; display:inline-flex; align-items:center; gap:4px;
    font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:#B45309; background:rgba(180,83,9,.12); padding:4px 9px; border-radius:100px;
  }
  .featured-badge svg{ width:11px; height:11px; }
  .live-badge + .featured-badge, .featured-badge + .live-badge{ top:20px; }
  .project-card .live-badge ~ .featured-badge{ top:48px; }

  /* stat counter keeps existing look, no extra CSS needed */

  /* ============ RECOMMENDATIONS ============ */
  .rec-card{
    position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:36px 40px; max-width:800px; transition:box-shadow .3s, transform .3s, border-color .3s;
  }
  .rec-card:hover{ box-shadow:0 20px 44px -22px rgba(0,0,0,.18); transform:translateY(-3px); border-color:rgba(37,99,235,.3); }
  .rec-quote-mark{ width:30px; height:30px; color:var(--accent); opacity:.35; margin-bottom:12px; }
  .rec-text{ font-size:1rem; line-height:1.7; color:var(--secondary); margin-bottom:26px; }
  .rec-footer{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding-top:20px; border-top:1px solid var(--border);
  }
  .rec-author{ display:flex; align-items:center; gap:14px; }
  .rec-avatar{
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--sec-security),var(--sec-ai));
    color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center;
  }
  .rec-name{ font-weight:700; font-size:.94rem; color:var(--primary); }
  .rec-role{ font-size:.82rem; color:var(--muted-text); }
  .rec-link{
    font-size:.82rem; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:5px;
    white-space:nowrap;
  }
  .rec-link:hover{ text-decoration:underline; }
  .rec-link svg{ width:14px; height:14px; }