/*
 * Extracted values for sections migrated from Framer inline styles to
 * Tailwind CSS via the /inline-to-tailwind-migration skill.
 *
 * The live markup uses Tailwind utility classes (including arbitrary
 * values like `left-[49%]` or `gap-[unset]`) rather than the class names
 * below — this file is the Phase 2 checkpoint: a literal record of the
 * exact values pulled from each section's original inline styles / Framer
 * CSS rules, kept as a source of truth for the pixel/behavior-identical
 * requirement. Do not delete when the corresponding Tailwind classes look
 * self-explanatory; re-derive from here if a future edit needs the exact
 * original value instead of guessing from the rendered page.
 */

:root {
  /* Reused from the page's existing global --token-* custom properties
     (defined on body in index.html) — listed here for reference only. */
  --nav-bg: var(--token-39ddd062-1652-43f2-92ed-3b933bd0c51c, rgb(21, 23, 24));
  --text-light: var(--token-eb76d118-9935-4ab4-b495-d89a9aa6f181, rgb(231, 231, 231));
  --text-muted: var(--token-bd973352-3903-405a-a167-f4ea6a706d8a, rgb(167, 168, 176));
  --text-white: var(--token-4d5a4df4-3a5c-436a-8aa9-1ee30081c628, rgb(255, 255, 255));
  --section-bg: var(--token-0cdfab1b-8013-4ca2-b861-4173da92d5a6, #0a0a0c);

  /* Breakpoints used site-wide by the Framer export; Tailwind arbitrary
     variants (min-[810px]:, max-[809.98px]:, etc.) are hand-matched to
     these exact cutoffs rather than Tailwind's default sm/md/lg scale. */
  --bp-tablet-min: 810px;
  --bp-tablet-max: 1199.98px;
  --bp-phone-max: 809.98px;
}

/* ---------------------------------------------------------------------
   Navbar (nav.framer-FdPgq in the original export)
   --------------------------------------------------------------------- */

/* Desktop/tablet variant (>=810px): row layout, fixed 1200px inner width */
/* .navbar-inner { display:flex; flex-direction:row; align-items:center;
     justify-content:space-between; width:1200px; height:64px; padding:0 20px; } */

/* Phone variant (<810px): column layout, full width */
/* .navbar-inner--phone { display:flex; flex-direction:column; width:100%; } */

/* Logo text: font-size 35px; font-weight 700; letter-spacing -2px; color: var(--text-light) */
/* Nav link text (current page "About me"): font-size 15px; font-weight 700;
   letter-spacing -0.01em; line-height 2em; color: var(--text-light) */
/* Nav link text (other pages): same size/spacing, color: var(--text-muted) */
/* Bottom divider line: height 1px; background rgba(0,0,0,0.08) */

/* ---------------------------------------------------------------------
   Follow-me social links section
   --------------------------------------------------------------------- */

/* Outer section: background var(--section-bg); flex column, centered;
   gap 60px; padding 100px 40px */
/* Inner content column: width 1200px (full width below 1200px);
   gap 60px; align-items center (per "align center" comment) */
/* Heading "Follow me": font-size 50px desktop / 40px <810px; font-weight 700;
   letter-spacing -2.1px; color: var(--text-light) */
/* Icon row: flex row, gap 60px; justify-content center; align-content center
   (align-content matters once icons wrap on phone) */
/*   >=810 and <1200px (tablet): justify-content space-between; gap unset */
/*   <810px (phone): flex-wrap wrap; gap 30px */
/* Icon item: 32px x 33px; opacity 0.5; overflow hidden (overflow visible
   for the two YouTube icons that carry a text label) */
/* YouTube "Arabic" label: 10px text, color var(--text-white); anchored
   bottom:-8px; right:0 */
/* YouTube "English" label: 10px text, color var(--text-white); anchored
   bottom:-8px; left:50%; translateX(-50%) */

/* ---------------------------------------------------------------------
   Hero section ("👋 Hey, I'm Osama Eldrieny (Oo)")
   --------------------------------------------------------------------- */

/* Section: background var(--section-bg); padding 130px 0 100px (desktop),
   130px 0 50px (tablet 810-1199.98px), 100px 0 50px (phone <810px) */
/* Row: width 85%, max-width 1200px, gap 30px; row layout desktop,
   column layout <1200px; min-height 440px desktop only */
/* Card: width 67% desktop / 100% below 1200px; row layout below 1200px,
   column layout desktop; background var(--nav-bg); border 1px solid
   var(--border-subtle: --token-5bd7b18c, #222426); border-radius 30px */
/* Headline "Hey, I'm...": font-size 66px desktop / 50px below 1200px;
   font-weight 700; letter-spacing -2px; color rgb(231,231,231) (literal,
   not a --token- var, unlike most other text on the page) */
/* Subheading "Senior Product Designer...": font-size 24px desktop-only /
   20px phone-only; NOT shown at all in the 810-1199.98px tablet range
   (existing site behavior — do not "fix") — a separate duplicate instance
   (24px) is shown at tablet only, positioned right after the headline via
   flex `order`. font-weight 500; letter-spacing -0.5px; line-height 1.5em;
   color var(--text-muted) */
/* Skill-tag pills (6x): background #2f2e33; border-radius 40px; padding
   10px 20px; gap 10px; text color rgb(232,232,232); font-size 14px
   desktop / 10px below 1200px. Phone-only reorder: the last two pills
   swap (order 5 then 4 instead of DOM order 4 then 5) */
/* CTA buttons ("Let's Work Together" + "Download CV"): three separate
   instances (desktop/tablet/phone) with different visibility AND
   different CV file links:
     - desktop: .docx file
     - tablet & phone: .pdf file (different asset than desktop's)
   "Let's Work Together" pill: background #6551b5; border-radius 40px;
   padding 10px 20px; text color rgb(232,232,232); 14px desktop/tablet,
   10px phone.
   "Download CV" button: 2px solid #6551b5 border; border-radius 50px;
   text color rgb(152,131,235); background var(--nav-bg); 14px
   desktop/tablet, 10px phone */
/* Profile photo + AdPList badge (desktop only): photo
   homepage-profile-photo-03.webp, aspect-ratio .955961, height 340px,
   mix-blend-mode luminosity, border-radius inherited (30px, from parent
   circle-container); badge icon 37x37px, opacity 0.5, absolute
   top:15px; right:15px */
/* Tablet-only photo: same homepage-profile-photo-03.webp but no badge,
   width 255px, height 266/267px, aspect-ratio .955961 */
/* Phone-only photo: different asset, homepage-profile-photo-01.webp,
   width 220px, height 188px, no badge */
/* NOTE: hero was rebuilt a second time using Tailwind's default md:(768px)/
   lg:(1024px) breakpoints instead of Framer's exact 810/1199.98/809.98px
   cutoffs (user's explicit choice — see Phase 0 in SKILL.md). Several
   duplicate desktop/tablet/phone DOM copies were collapsed into single
   elements with responsive classes (h1, subheading, CTA button text size).
   The AdPList badge `<a>` needs explicit `absolute inset-0` (or a fixed
   size) — without it, height:auto collapses through the percentage-sized
   children down to the SVG, making the icon invisible. */

/* ---------------------------------------------------------------------
   About me section ("About me" heading + 4 bio paragraphs)
   --------------------------------------------------------------------- */

/* Section: padding 100px 0 (all breakpoints); order 3 among page sections
   (unconditional, not breakpoint-specific) */
/* Card: background var(--nav-bg); border 1px solid var(--border-subtle);
   border-radius 30px; padding 30px; gap 30px */
/* Heading "About me": font-size 34px (<1024px) / 40px (>=1024px, snapped
   to Tailwind's lg: breakpoint rather than Framer's exact 1200px cutoff);
   font-weight 700; letter-spacing -2px; color var(--text-light) */
/* 4 bio paragraphs: font-size 20px; font-weight 500; letter-spacing
   -0.5px; line-height 1.5em; color var(--text-muted); no breakpoint
   variation */

/* ---------------------------------------------------------------------
   Structural rework pass (nav, footer, hero, About me)
   --------------------------------------------------------------------- */
/* All four sections were rebuilt a second time to fix issues from the
   first Tailwind pass: dead wrapper divs carried over 1:1 from the
   Framer export, non-semantic markup (<div> for everything, <h2> used
   for body paragraphs), and inline style="" left in place instead of
   Tailwind arbitrary values.
   - nav -> single <nav> landmark (was 2 duplicate <nav> elements toggled
     by a wrapper div), <ul>/<li> link lists instead of bare <a> siblings.
   - Follow-me/footer -> <footer>, <ul>/<li> icon list. Fixed a real
     accessibility bug: the social icon <a> tags had aria-hidden="true"
     (copied from the Framer export), which hid real navigational links
     from screen readers entirely — replaced with per-icon aria-label.
   - hero -> <section aria-labelledby>, tag list is now <ul>/<li>,
     flattened ~10 dead wrapper divs, fixed the same aria-hidden bug on
     the AdPList badge link, added real alt text to the profile photo
     (was alt="", now "Portrait of Osama Eldrieny") across all 3
     breakpoint image variants. Confirmed tablet/phone photo variants
     have NO border-radius (the original's `border-radius:inherit`
     chain resolves to 0 there — only the desktop badge photo has the
     30px radius, inherited from its real circle-container).
   - About me -> <section>/<article>/<h1>/<p> (was <h2> for all 4 body
     paragraphs, now correctly <p>).
   All color/font values still reference the same --token-* CSS custom
   properties as before, now via Tailwind arbitrary values like
   `text-[color:var(--token-x,_fallback)]` instead of style="". */

/* ---------------------------------------------------------------------
   Testimonials ("Value I will add to your team")
   --------------------------------------------------------------------- */
/* Removed ~42KB of dead markup: a Framer tab-selector (Active/Default
   category tabs — "Expertise in UX/UI", "Design Systems", "Accessibility",
   etc.) with no functional JS to switch tabs in this static export, plus
   a second, OLD/unstyled duplicate carousel ("Mentorship & Knowledge
   Sharing") that only showed at phone widths while the desktop-only
   wrapper showed a DIFFERENT (already hand-rebuilt) carousel — meaning
   phone visitors were seeing stale content desktop visitors weren't.
   Per explicit instruction, this is intentionally simplified: the tabs
   were dead UI, and the real, current design is a single carousel with
   all testimonials merged (already built, `.testimonial-viewport` /
   `.testimonial-track` / etc., defined in the `<style id=
   "testimonial-carousel-css">` block in `<head>`) shown at every
   breakpoint, not gated by breakpoint anymore. That carousel's own
   internals were NOT touched by this migration — only its heading and
   outer section wrapper were converted to Tailwind. The carousel relies
   on `assets/js/site.js`'s `initCarousels()`, which requires
   `section[aria-roledescription="carousel"] ul.framer--carousel` plus a
   `[aria-label="Carousel pagination controls"]` fieldset with Previous/
   Next buttons — do not rename those classes/attributes without updating
   site.js too. */

/* ---------------------------------------------------------------------
   Skills and Certificates
   --------------------------------------------------------------------- */
/* Heading + a static (non-animated, no ticker) tag cloud of 15 unique
   skill/expertise names repeated many times for visual density: 78
   instances shown >=768px, 80 shown <768px (kept per explicit instruction
   to preserve the exact repeat count/order rather than deduplicate).
   Flattened ~14 nested per-row wrapper divs (each an identical
   flex-wrap container from the Framer export) into two flat <ul> lists
   (one per breakpoint) — reduced this section from 216KB to 58KB.
   Verified this section has no ticker/marquee: the actual auto-scrolling
   marquees (site.js initTickers(), `<section style*="opacity:0">` +
   `<ul style*="will-change:transform">`) live in a different, separate
   section between About Me and here, not yet migrated.

   UPDATE: the flattened tag-cloud above turned out to be the WRONG
   content for this section — it was replaced with a new design (cert
   list + 6 categorized skill-tag groups) supplied directly by the user,
   not extracted from the Framer export at all. See below. */

/* ---------------------------------------------------------------------
   Career highlights (Years / Industries / Companies / Clients locations)
   --------------------------------------------------------------------- */
/* Found and deleted a real duplicate-render bug before migrating: a
   second full copy of this section (framer-4me2ob) sat right after
   About Me, gated `hidden-72rtr7 hidden-1rj4wcj` (tablet-only, 810-
   1199px) while the section actually migrated (framer-19blce8) had NO
   breakpoint gate — meaning tablet-width visitors were seeing this
   entire ~73KB section rendered TWICE, stacked. Deleted the tablet-only
   duplicate entirely (matches the testimonials/skills pattern of
   Framer-export dead content).
   4 stat cards in a 2-col grid (Years, Industries, Companies, Clients
   locations), each with a JS-driven count-up number (site.js
   initCountUps(), matched by nearby label text via COUNTUP_TARGETS —
   Industries:14, "Clients locations":10, Companies:10, Years:15 — do
   not rename these labels without updating that map). Companies and
   Clients-locations cards each contain an auto-scrolling ticker/marquee
   (site.js initTickers()) — company logos (mixed inline-SVG `<use>` and
   data-URI backgrounds per company, left verbatim/untouched rather than
   "Tailwind-ified", since these are generated vector graphics, not
   simple inline styles) and client location names, respectively. The
   locations ticker existed as two near-identical breakpoint copies
   (desktop-only vs tablet+phone) with IDENTICAL content (verified: same
   10 countries, same order) — kept only the desktop copy, now shown at
   all breakpoints, since Tailwind wasn't even needed for the duplication
   (CSS mask-image + JS already make it responsive on its own).

   UPDATE: the first pass of this migration dropped real content — the
   Industries card originally had 14 skill-tag pills (Enterprise
   Software, RPA, Hospitality, Low-Code Platforms, Workflow automation,
   Petroleum & Gas, Banking, SAAS, e-Commerce, Automotive, Healthcare,
   Online Training, Sports, News & Media) that got missed during
   discovery and silently left out. Recovered by diffing against the
   original pre-migration markup in git history (commit b3e3d80). Also
   fixed: headings now read as one line ("14 Industries" / "10
   Companies" / "10 Clients locations" — number inline with label,
   matching the actual design) instead of stacked number-then-heading;
   and the grid layout is now Years (full width) above a 2-column row
   where the left column stacks Industries + Companies and the right
   column is Clients locations alone (was a plain symmetric 2x2 grid
   before). The locations ticker's first `<li>` is the actual world-map
   graphic (assets/images/0ISmzFPnsge8nPJFxAmIAWwIqM.svg) with the
   country-pin badges scrolling across it as part of the same ticker —
   this was already correct from the first pass, just easy to miss
   since only a few pins are visible in any single scroll frame. */

/* ---------------------------------------------------------------------
   My Story (new section, placed directly below About Me)
   --------------------------------------------------------------------- */
/* Vertical timeline/stepper: 3 numbered chapters (Who I Am / What I Do /
   Where I'm Headed) connected by a vertical line, chosen to match the
   "storytelling narrative arc" pattern from the UI UX Pro Max skill
   (chapter-like structure, timeline progression) rather than another
   bordered card like the rest of the page — deliberate layout variety,
   per the user's request for an "awesome design layout".
   Kept the site's existing dark theme/Inter typography instead of the
   skill's generic light-theme suggestion (#FAFAFA bg, Archivo font) —
   would have clashed with every other section on the page.
   Visa-status callout is a distinct card below the timeline. CTA row
   ("Ready to talk?") has 3 links: Email (mailto, real), LinkedIn (real
   URL, same as footer), Calendar (href="#" placeholder — no existing
   booking link found anywhere on the site; needs a real URL from the
   user before shipping). */

/* ---------------------------------------------------------------------
   "The short version." (2nd design pass of the same Who/What/Where
   content, placed directly below My Story — both kept, per request)
   --------------------------------------------------------------------- */
/* Different visual language on purpose: 3-panel card grid with large
   translucent ghost numerals (01/02/03) instead of a linear connected
   timeline — editorial/graphic treatment vs. the first version's
   chronological stepper. Visa status is a small inline chip on the
   3rd panel instead of a separate callout card. CTA is a full-width
   gradient-bordered banner (bg-[linear-gradient(...)] arbitrary value,
   no inline style) instead of a plain bordered card, for variety. */

/* ---------------------------------------------------------------------
   Why Companies Hire Me
   --------------------------------------------------------------------- */
/* 5 alternating full-width rows (icon-left/text-right, flipping to
   icon-right/text-left via lg:flex-row-reverse on odd rows), with a
   subtle alternating background tint for rhythm — a 3rd distinct
   layout vs. the timeline and card-grid "story" sections, per the
   Feature-Rich Showcase pattern (alternating sections, benefit list). */

/* ---------------------------------------------------------------------
   What I Bring to the Table (2nd design of "Why Companies Hire Me",
   placed directly below it — both kept)
   --------------------------------------------------------------------- */
/* User feedback on v1: the alternating-rows layout used `divide-y`
   for the row separators, which is a border on one side only (top/
   bottom between items) — inconsistent with every other card on the
   page, which all use a full border on all 4 sides. Fixed in this
   version: proper `border` (all sides) on every card, no divide-y
   anywhere. Different layout too, per request: asymmetric bento grid
   (3-col, first card spans 2 columns as the featured item) instead of
   full-width alternating rows — matches the "Bento Box Grid" pattern
   (modular cards, varied sizes, consistent rounded corners/borders). */

/* ---------------------------------------------------------------------
   What I Do Best (3-tier skills: Core / Expanded / Tools)
   --------------------------------------------------------------------- */
/* Tier 1 (Core, 5 items): always-visible bold filled cards, most
   visual weight, per "visible immediately".
   Tier 2 (Expanded, 6 items) and Tier 3 (Tools, 3 categories): native
   <details>/<summary> — real click-to-expand/collapse with zero custom
   JS, fully keyboard/screen-reader accessible by default. Chevron
   rotation uses Tailwind's built-in `group-open:` variant (designed
   exactly for <details>), no JS needed for that either.
   This is a NEW section, separate from the existing "Skills and
   Certificates" section (70+ item tag cloud) — that one was left
   untouched per instruction, not replaced. */

/* ---------------------------------------------------------------------
   Mentorship, Speaking & Workshops (photo carousel)
   --------------------------------------------------------------------- */
/* Placed right after the compact "Community & Mentorship" stat-tile
   section: quick numbers first, then visual proof. Content/stats
   inspired by the /workshops page (90+ mentored, 14 workshops, 14
   speaking events, 4.46K YouTube subs). CTA links to /workshops, which
   is this site's actual events page (its own heading literally reads
   "Events & Workshops" — no separate /events route exists).
   Carousel: originally used 8 generic homepage-carousel-photo-01..08
   images; replaced per feedback with one photo per distinct workshop/
   event from /workshops (12 events found — MEGA Competition, Design
   System & Tokens Q&A, Automate Design Tokens with AI, Kickstart Your
   Journey in Figma, Introduction to Design Tokens, Why You Should
   Start Using Design Tokens, Design Tokens Workshop, Design Systems in
   the Middle East, Future of UX in the Era of AI, The Power of Bold
   Decisions (podcast), Bridge the Gap, Exploring AI Features in
   FigJam), each using that event's own first photo (bounded per-event
   by finding the first image between one event's title and the next,
   not just "first image found after the title" — the naive version
   picked up the wrong photo for events whose gallery didn't start
   immediately after the heading). Reuses the SAME generic carousel
   JS as testimonials (site.js initCarousels(): any
   `section[aria-roledescription="carousel"]` containing `ul.framer--
   carousel`, with a sibling `[aria-label="Carousel pagination
   controls"]` for prev/next) — zero new JS needed, just new CSS classes
   (community-viewport/track/slide, in a new <style id="community-
   carousel-css"> block, same technique as testimonial-carousel-css)
   scoped separately so they don't collide with the testimonials
   carousel's styling. Reused the same prev/next arrow icon assets the
   testimonials carousel already uses, for visual consistency. */

/* ---------------------------------------------------------------------
   Community & Mentorship stat tiles (fix)
   --------------------------------------------------------------------- */
/* Same bug as the Career Highlights cards: shipped with a border but no
   background color, inconsistent with every other card on the page.
   Fixed: added bg-[color:CARD_BG]. Also added a Lucide-style icon per
   tile (Users / Calendar / GraduationCap / Youtube, inline SVG, no
   external icon font) per feedback to use Lucide or existing site
   icons for visual consistency with the rest of the page. */

/* ---------------------------------------------------------------------
   Global Collaboration Experience
   --------------------------------------------------------------------- */
/* Placed between Testimonials and Skills and Certificates, per request.
   3-column equal-width icon cards (Locations / Languages / Expertise,
   Lucide-style inline SVG icons matching the site's established icon
   technique) plus a full-bordered "Why This Matters" note below — kept
   deliberately flat/equal-width rather than another asymmetric bento
   layout, for variety against "What I Bring to the Table". All cards
   use full borders + CARD_BG, consistent with every other card on the
   page (no single-sided borders). The 10 countries match exactly the
   existing Career Highlights locations ticker's data (same list, same
   order) rather than inventing a new set. */

/* ---------------------------------------------------------------------
   Teaching & Community Impact
   --------------------------------------------------------------------- */
/* Placed between Career Highlights and Testimonials, per request
   ("after Why You Should Hire Me / before testimonials"). 2x2 grid of
   impact cards (YouTube Creator, ADPList Mentor, Oo Design Community,
   Speaker) — each a filled purple icon badge + large accent-colored
   stat number + title + body, full border + CARD_BG like every other
   card. Emojis from the source content (📺👥👨‍💼🎤) were replaced with
   Lucide-style inline SVG icons, consistent with how every other new
   section on this page handles icons (no emoji-as-icon anywhere else
   on the page either). */

/* ---------------------------------------------------------------------
   My Skillset, One Layer at a Time (3rd design of the Core/Expanded/
   Tools tiered-skills content, placed right after "What I Do Best" —
   both kept, third layout, per request to add another rather than
   replace the original "Skills and Certificates" section)
   --------------------------------------------------------------------- */
/* Different interaction pattern this time: three <details> grouped with
   the same `name="skills-tier"` attribute, which makes them a native
   EXCLUSIVE accordion (opening one auto-closes the others) — a real
   HTML feature, zero JS. "What I Do Best" has Tier 1 always visible
   plus two INDEPENDENT accordions (both can be open at once); this
   version treats all three tiers as equal, mutually-exclusive panels,
   with Core expanded by default via the `open` attribute. */

/* ---------------------------------------------------------------------
   New sections: Featured Work, Courses, Community & Mentorship
   --------------------------------------------------------------------- */
/* Added at the user's request for "some other sections with different
   layouts" — not migrated from the Framer export, built fresh with
   content and images reused from the site's other pages (not
   placeholders):
   - Featured Work: 3-col image-forward card grid. 3 projects pulled
     from /portfolio (Multi-Theme Design System, PriceTag App, Currency
     Exchange), each linking to its real case-study page, using the
     same cover images those pages already use.
   - Courses: asymmetric 2-col CTA banner (not a grid/stack, to keep the
     page's layouts varied per the request). Content from /courses
     (headline, subtitle, and the "Token Architecture..." course card
     with its real rating/duration), linking to /courses and the real
     course page.
   - Community & Mentorship: compact 4-tile stat strip, deliberately
     smaller/denser than the Career Highlights cards for visual
     variety. Numbers pulled from /workshops (designers mentored,
     sessions, workshops hosted, YouTube subscribers), linking to
     /workshops.
   All three follow the same conventions as the rest of the migrated
   page: semantic <section>/<h2>/<article>, Tailwind arbitrary values
   referencing the same --token-* custom properties, no inline styles. */

/* Skills and Certificates v2 (current): heading, a 2-column list of 6
   certificates (icon + label), then a bordered card containing 6
   categories (Design Systems & Tokens, AI & Innovation, Enterprise &
   Product Design, Collaboration & Leadership, Tools, Development), each
   with an icon + title + wrapped pill list (71 pills total). Colors
   reuse the site's existing --token-* custom properties (pill bg
   rgb(47,46,51), same as other pill patterns on the page; card bg/border
   match the hero/About-me card tokens).
   Cert icons: all 6 use real assets, supplied by the user and correctly
   named — design-system-university.webp, safe.webp, coursera.webp
   (Generative AI course), udemy.webp (both Udemy course items reuse the
   same logo), adplist.webp. These replaced the earlier mislabeled/
   guessed paths (homepage-cert-badge-01.webp, homepage-event-bemore-
   adplist.webp) and the colored-circle placeholders. */