/* Abdul Hadi brand layer, matched to his LinkedIn brand.
   Main: purple #3B1E8C, #4E27B0, #6A35D9. Accent (small use only): orange #FF7A1A, soft orange #FFB27A.
   Headings Poppins, body Inter. Dark is the default theme; light is opt in via the header toggle or ?theme=light. */
html[data-theme=light]{color-scheme:light;
 --rb-bg:#FFFFFF;--rb-bg-rgb:255,255,255;--rb-s1:#FFFFFF;--rb-s2:#F6F2FF;--rb-s3:#EEE7FF;--rb-line:#E4DCF6;--rb-line2:#CBBDEB;
 --rb-fg:#1E1047;--rb-fg-rgb:30,16,71;--rb-mut:#453B66;--rb-dim:#5E5480;
 --rb-ac:#4E27B0;--rb-ac-rgb:78,39,176;--rb-ac2:#6A35D9;--rb-ac2-rgb:106,53,217;--rb-ac3:#3B1E8C;--rb-ac-deep:#3B1E8C;
 --rb-chip-rgb:240,234,255;--rb-ok:#0B6B47;--rb-warn:#8A5A00;--rb-page:#FFFFFF;
 --rb-grad:linear-gradient(135deg,#3B1E8C 0%,#4E27B0 52%,#6A35D9 100%);--rb-text-grad:linear-gradient(100deg,#3B1E8C,#4E27B0 45%,#6A35D9);
 --rb-shadow:0 1px 2px rgba(30,16,71,.05),0 8px 24px -16px rgba(59,30,140,.28);background:#FFFFFF}
html[data-theme=dark]{color-scheme:dark;
 --rb-bg:#0F0A1F;--rb-bg-rgb:15,10,31;--rb-s1:#17112B;--rb-s2:#1C1535;--rb-s3:#251C45;--rb-line:#2F2652;--rb-line2:#46397A;
 --rb-fg:#F6F3FF;--rb-fg-rgb:246,243,255;--rb-mut:#D8D0F0;--rb-dim:#AFA5CF;
 --rb-ac:#B49CFF;--rb-ac-rgb:180,156,255;--rb-ac2:#CDBBFF;--rb-ac2-rgb:205,187,255;--rb-ac3:#E3D8FF;--rb-ac-deep:#6A35D9;
 --rb-chip-rgb:37,28,69;--rb-ok:#7FE0B4;--rb-warn:#F0C381;--rb-page:#0F0A1F;
 --rb-grad:linear-gradient(135deg,#3B1E8C 0%,#4E27B0 52%,#6A35D9 100%);--rb-text-grad:linear-gradient(100deg,#B49CFF,#E3D8FF);
 --rb-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.6);background:#0F0A1F}
html[data-theme]{--em:var(--rb-ok);--ok:var(--rb-ok);--b-ok:var(--rb-ok);--warn:var(--rb-warn);
 --display:'Poppins','Segoe UI',system-ui,sans-serif;--b-display:'Poppins',Inter,system-ui,sans-serif;--body:'Inter','Segoe UI',system-ui,sans-serif;--b-body:Inter,system-ui,sans-serif}
html[data-theme] body{background:var(--rb-bg)!important;color:var(--rb-fg);font-family:Inter,'Segoe UI',system-ui,sans-serif;background-attachment:scroll!important;min-height:100vh}
h1,h2,h3,h4{font-family:'Poppins',Inter,system-ui,sans-serif}
h1,h2{font-weight:800;letter-spacing:-.02em}
html[data-theme] h1,html[data-theme] h2{color:var(--rb-fg);line-height:1.17}
::selection{background:rgba(106,53,217,.25)}
html[data-theme] .b-aurora,html[data-theme] .b-grain{display:none}

/* Gradient emphasis and buttons */
html[data-theme] .grad{background:var(--rb-text-grad);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html[data-theme] .btn-primary,html[data-theme] .b-btn-primary,html[data-theme] .call-btn{background:var(--rb-grad)!important;background-size:140% 100%!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 18px -12px rgba(59,30,140,.9)!important;transition:background-position .3s,transform .2s}
html[data-theme] .btn-primary:hover,html[data-theme] .b-btn-primary:hover,html[data-theme] .call-btn:hover{background-position:100% 0!important;color:#fff!important}
html[data-theme] .call-btn.live{background:#3a1424!important;color:#ffd4dc!important}
html[data-theme] .btn-ghost,html[data-theme] .b-btn-ghost{border-color:var(--rb-line2)!important;color:var(--rb-fg)}
html[data-theme] .btn-ghost:hover,html[data-theme] .b-btn-ghost:hover{border-color:var(--rb-ac)!important;color:var(--rb-ac)!important}

/* Labels: Poppins eyebrows like the LinkedIn assets */
html[data-theme] .kicker,html[data-theme] .eyebrow{font-family:'Poppins',Inter,sans-serif!important;font-weight:600!important;font-size:12px!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--rb-ac)!important;display:inline-flex;align-items:center;gap:8px}
html[data-theme] .eyebrow::before,html[data-theme] .kicker::before{content:""!important;display:inline-block;width:16px;height:3px;border-radius:2px;background:var(--rb-grad);margin:0!important}
html[data-theme=dark] .eyebrow::before,html[data-theme=dark] .kicker::before{background:linear-gradient(90deg,#B49CFF,#E3D8FF)}
html[data-theme] .tag,html[data-theme] .chip{color:var(--rb-ac)!important;background:rgba(var(--rb-ac-rgb),.07)!important;border:1px solid rgba(var(--rb-ac-rgb),.28)!important;font-family:'Poppins',Inter,sans-serif;font-weight:600;letter-spacing:.06em}

/* Sections: white canvas with lavender bands for rhythm */
html[data-theme] main>section:nth-of-type(even){background:var(--rb-s2)}
html[data-theme] .sec{border-top:1px solid var(--rb-line);padding-bottom:32px}
html[data-theme] .sec:nth-of-type(even){background:var(--rb-s2);border-radius:20px;padding:32px 24px;margin-top:28px}
html[data-theme=light] .hero{background:linear-gradient(135deg,#fff 35%,#F1EAFF 100%)}
html[data-theme=dark] .hero{background:radial-gradient(ellipse at 85% 15%,#2A1D55 0,transparent 60%)}
html[data-theme] .card,html[data-theme] .cs-card,html[data-theme] .mini,html[data-theme] .lw-card{box-shadow:var(--rb-shadow)}

/* Brand panels: CTA bands and the contact block use the LinkedIn gradient, dotted grid and soft orange glow */
html[data-theme] .final,html[data-theme] .cta-band{position:relative;overflow:hidden;isolation:isolate;
 background:radial-gradient(520px 320px at 0 100%,rgba(255,122,26,.20),transparent 70%),radial-gradient(600px 400px at 100% 0,rgba(255,255,255,.10),transparent 70%),var(--rb-grad)!important;
 color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 18px 40px -28px rgba(59,30,140,.8)!important}
html[data-theme] .cta-band::after,html[data-theme] .final::after{content:"";position:absolute;right:28px;top:24px;width:168px;height:112px;z-index:-1;pointer-events:none;
 background-image:radial-gradient(rgba(255,255,255,.28) 1.4px,transparent 1.6px);background-size:16px 16px;opacity:.8}
html[data-theme] .final h2,html[data-theme] .final p,html[data-theme] .cta-band h2,html[data-theme] .cta-band p{color:#fff!important}
html[data-theme] .cta-band p,html[data-theme] .final .lead{color:rgba(255,255,255,.88)!important}
html[data-theme] .final .kicker,html[data-theme] .cta-band .eyebrow{color:#FFB27A!important}
html[data-theme] .final .kicker::before,html[data-theme] .cta-band .eyebrow::before{background:#FF7A1A}
html[data-theme] .final .btn-primary,html[data-theme] .cta-band .btn-primary{background:#fff!important;color:#3B1E8C!important;box-shadow:none!important}
html[data-theme] .final .btn-primary:hover,html[data-theme] .cta-band .btn-primary:hover{background:#F1EAFF!important;color:#3B1E8C!important}
html[data-theme] .cta-band .btn-ghost,html[data-theme] .final .btn-ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.5)!important}
html[data-theme] .cta-band .btn-ghost:hover,html[data-theme] .final .btn-ghost:hover{background:rgba(255,255,255,.16)!important;color:#fff!important;border-color:#fff!important}

/* Theme toggle sits in the header row, never over content */
#rb-toggle{display:grid;place-items:center;cursor:pointer}
html[data-theme] #rb-toggle{position:static!important;flex:0 0 38px;width:38px;height:38px;margin:0;border-radius:50%;box-shadow:none;background:var(--rb-s2);color:var(--rb-fg);border:1px solid var(--rb-line2)}
html[data-theme] #rb-toggle:hover{border-color:var(--rb-ac);color:var(--rb-ac)}
#rb-toggle:focus-visible{outline:2px solid var(--rb-ac2);outline-offset:3px}
@media print{#rb-toggle{display:none}}
html[data-theme] header,html[data-theme] #nav{position:sticky!important;top:0;background:rgba(var(--rb-bg-rgb),.92)!important;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rb-line);z-index:100}
html[data-theme] .b-brand,html[data-theme] .brand{flex-shrink:0}
html[data-theme] .b-nav-in,html[data-theme] .nav-in{gap:12px}

/* Old dark only white-on-hover rules */
html[data-theme=light] .meet-more:hover,html[data-theme=light] .hask-chips button:hover,html[data-theme=light] .aip-sugg button:hover,html[data-theme=light] .tchips span:hover,html[data-theme=light] .ind:hover h3,html[data-theme=light] .ftools-c input:checked+span,html[data-theme=light] [data-story]>.b-act h3,html[data-theme=light] [data-story]>.b-act b{color:var(--rb-fg)!important}
html[data-theme=light] [data-story]>.b-act>span:first-child,html[data-theme=light] [data-story]>.b-done>span:first-child{color:var(--rb-ac)!important}
html[data-theme=light] .lw-live,html[data-theme=light] .dtag-live{color:#0B6B47!important}

/* Phone mockups stay a dark device in both themes */
.b-phone{--rb-fg:#F5F5F7;--rb-fg-rgb:255,255,255;--rb-mut:#A1A1AA;--rb-dim:#8E8E93;--rb-line:#2E2E38;--rb-line2:#3A3A44;--rb-s1:#1C1C1E;--rb-s2:#26252B;--rb-bg:#000;--rb-bg-rgb:0,0,0;
 --b-fg:#F5F5F7;--b-mut:#A1A1AA;--b-dim:#8E8E93;--b-bd:#2E2E38;--b-bd2:#3A3A44;--b-s1:#1C1C1E;--b-s2:#26252B;--ink:#F5F5F7;--muted:#A1A1AA;--faint:#8E8E93;--fg:#F5F5F7;--mut:#A1A1AA;--dim:#8E8E93;color:#F5F5F7}
html[data-theme] .b-msg.out,html[data-theme] .b-msg.out *,html[data-theme] .av{color:#fff!important;background:#4E27B0}
html[data-theme] .b-phone .b-msg.out{color:#fff!important;background:#4E27B0}

/* Hero notification chips in normal flow */
html[data-theme] .b-floats{position:static!important;inset:auto!important;display:flex!important;flex-wrap:wrap;gap:8px;margin:0 0 14px!important;width:auto!important;height:auto!important}
html[data-theme] .b-floats .b-fc{position:static!important;inset:auto!important;transform:none!important;animation:none!important;max-width:100%;flex:1 1 145px;box-shadow:none}
html[data-theme] .b-floats:empty{display:none!important}
html[data-theme] .side{gap:14px}

/* Reveal content even if animation is disabled or its observer has not run */
html[data-theme] .rv,html[data-theme] .b-rv,html[data-theme] [data-observe]{opacity:1;transform:none;filter:none;clip-path:none}

/* Related case studies */
html[data-theme] .more-cs{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
html[data-theme] .mini{border-top:3px solid var(--rb-ac2);background:var(--rb-s1)}
html[data-theme] .mini .go,html[data-theme] .mini .tag{color:var(--rb-ac)!important}
html[data-theme] .mini .go{font-weight:700}
html[data-theme] #ai-fab{background:var(--rb-grad)!important;color:#fff!important;box-shadow:0 10px 24px -14px rgba(59,30,140,.9)!important}

@media(max-width:860px){html[data-theme] .more-cs{grid-template-columns:1fr}html[data-theme] .b-nav-in{gap:8px}html[data-theme] .b-nav-cta .b-btn-ghost{display:none!important}}
@media(max-width:600px){
 html[data-theme] .b-brand{font-size:0;gap:0}html[data-theme] .b-brand img{width:30px;height:30px;margin:0}
 html[data-theme] .b-nav-in{padding:0 16px;height:64px}html[data-theme] .b-nav-cta{margin-left:auto}
 html[data-theme] .hero{padding-top:28px!important}html[data-theme] .sec:nth-of-type(even){padding:24px 16px}
 html[data-theme] .b-floats{margin-bottom:0!important}html[data-theme] .b-demo-grid>*{min-width:0}html[data-theme] .hero>*{min-width:0}
 html[data-theme] .nav-in .brand{font-size:0;gap:0;width:32px}html[data-theme] .nav-in>.btn{margin-left:auto}
 html[data-theme] .cta-band::after,html[data-theme] .final::after{width:110px;height:80px;right:14px;top:14px;opacity:.55}
}

/* Page polish */
/* Portfolio: what the discovery call covers */
html[data-theme] .dc-covers{margin-top:4px}
html[data-theme] .dc-covers .dc-k{font:600 15px 'Poppins',Inter,sans-serif;color:var(--rb-fg);margin:0 0 12px}
html[data-theme] .dc-covers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html[data-theme] .dc-covers li{display:flex;align-items:center;gap:12px;background:var(--rb-s1);border:1px solid var(--rb-line);border-radius:14px;padding:14px 16px;color:var(--rb-mut);font-size:15px;line-height:1.45}
html[data-theme] .dc-covers li span{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--rb-grad);color:#fff;font:700 11px 'Poppins',sans-serif}
@media(max-width:760px){html[data-theme] .dc-covers ul{grid-template-columns:1fr}}
html[data-theme] .how-time{color:var(--rb-mut);font-weight:500;margin:4px 0 0}
/* Case studies index: numbered cards, lead stat on the brand gradient */
html[data-theme] .cs-list{counter-reset:cs}
html[data-theme] .cs-card{position:relative;overflow:hidden;counter-increment:cs}
html[data-theme] .cs-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rb-grad)}
html[data-theme] .cs-card::before{content:"0" counter(cs);position:absolute;right:26px;top:18px;font:700 12px 'Poppins',sans-serif;letter-spacing:.14em;color:var(--rb-dim)}
html[data-theme] .cs-card .num:first-child{background:var(--rb-grad)!important;border-color:transparent!important}
html[data-theme] .cs-card .num:first-child b,html[data-theme] .cs-card .num:first-child span{color:#fff!important;-webkit-text-fill-color:#fff}
html[data-theme] .cs-card .num:first-child span{color:rgba(255,255,255,.86)!important}
/* Footer: LinkedIn style orange dot before the name */
html[data-theme] .bf-bottom>span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#FF7A1A;margin-right:9px;vertical-align:1px}
/* Contact panel details */
html[data-theme] #contact .clist a>span{color:#3B1E8C;font-weight:700}
html[data-theme=dark] #contact .clist a>span{color:#fff}
html[data-theme] .final::after{left:32px;right:auto;top:auto;bottom:28px}
html[data-theme=dark] #services.sec,html[data-theme=dark] #faq.sec{background:var(--rb-s2)!important}
/* Workflow screenshots sit on a soft brand surface, not a dark frame */
html[data-theme] .lw-card.has-shot .lw-shot,html[data-theme] .lw-shotX{background:var(--rb-s3)!important}
html[data-theme] .lw-lb img{background:#fff!important}
/* Mobile: the AI launcher sits in the hero as a labelled pill, not a lone icon */
@media(max-width:860px){html[data-theme] #rb-ai-slot{min-height:0;margin:4px 0 8px}html[data-theme] #rb-ai-slot #ai-fab{width:auto!important;height:46px!important;padding:0 20px 0 16px!important;border-radius:99px!important;gap:8px}html[data-theme] #rb-ai-slot #ai-fab .fab-tx{display:inline!important;font-size:14px}}
/* Header: links centred, CTA and theme toggle grouped on the right */
html[data-theme] .b-nav-in,html[data-theme] .nav-in{justify-content:flex-start}
html[data-theme] .b-nav-in>.b-links,html[data-theme] .nav-in>.links,html[data-theme] .b-nav-in>.b-nav-cta,html[data-theme] .nav-in>.btn{margin-left:auto}
/* Desktop: AI launcher docked in the header as a quiet pill */
html[data-theme] #ai-fab.in-nav{position:relative!important;inset:auto!important;transform:none!important;height:40px!important;width:auto!important;padding:0 16px 0 12px!important;border-radius:99px!important;gap:8px;font-size:14px;
 background:var(--rb-s2)!important;color:var(--rb-fg)!important;border:1px solid var(--rb-line2)!important;box-shadow:none!important;flex:0 0 auto}
html[data-theme] #ai-fab.in-nav:hover{border-color:var(--rb-ac)!important;color:var(--rb-ac)!important}
html[data-theme] #ai-fab.in-nav .fab-tx{display:inline!important}
html[data-theme] #ai-fab.in-nav .fab-ic{font-size:15px}
html[data-theme] #ai-fab.in-nav.hide{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
html[data-theme] #ai-fab.in-nav+.btn-primary{margin-left:0!important}
html[data-theme] .nav-in>#ai-fab.in-nav{margin-left:auto}
@media(max-width:1240px){html[data-theme] .nav-in>.links{gap:22px}}
@media(min-width:1025px){html[data-theme] #ai-fab.in-nav~.btn-primary{margin-left:0}}
html[data-theme] #ai-fab.in-nav::after{top:-1px;right:2px;width:9px;height:9px;border-color:var(--rb-bg)}