:root { --motion-ease:cubic-bezier(.22,1,.36,1); --fanwaar-blue-scene:linear-gradient(135deg,#1e3a5f 0%,#2563eb 50%,#7c3aed 100%); }
.hero { min-height:0; padding:145px 0 80px; text-align:left; background:var(--fanwaar-blue-scene); overflow:hidden; }
.hero::before { background:radial-gradient(ellipse 600px 400px at 20% 30%,#ffffff14,transparent 70%),radial-gradient(ellipse 500px 350px at 80% 60%,#ffffff0d,transparent 70%); animation:none; }
.hero::after { opacity:.5; }.hero::before,.hero::after { pointer-events:none; }
.hero > .container { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:20px; }
.hero h1 { font-size:clamp(44px,4.3vw,62px); letter-spacing:-.055em; line-height:1.09; }
.hero h1 br { display:none; }.hero h1 span { display:block; color:#8fb6ff; }
.hero h1 .hero-line { color:white; white-space:nowrap; }.hero h1 .hero-accent { background:none; color:#bfdbfe; }
.hero .subtitle { margin:24px 0 18px; font-size:18px; line-height:1.7; }
.hero .tagline { margin-bottom:28px; font-size:12px; line-height:1.9; color:#c0cee5; }
.hero-badge { border:0; background:none; padding:0; font-size:11px; letter-spacing:.16em; color:#b3ccf9; margin-bottom:26px; }
.hero .cta-buttons { justify-content:flex-start; gap:10px; }.hero .btn { font-size:12px; padding:13px 16px; }
.hero .animate-fadeInUp { animation:none; opacity:1; transform:none; }
.founder-line { display:flex; gap:13px; align-items:center; margin-bottom:24px; color:#fff; font-size:13px; }
.founder-line img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid #ffffff35; }
.founder-line small { display:block; color:#9eacc5; font-size:11px; margin-top:3px; }
.guide-stage { position:relative; height:470px; isolation:isolate; min-width:0; z-index:6; }
.guide-stage::before { content:''; position:absolute; inset:15% 4% 15%; border:1px solid #809ddd30; border-radius:50%; transform:rotate(-28deg) scaleY(.72); }
.guide-stage::after { content:'+'; position:absolute; right:8%; top:7%; color:#8fb6ff; font-size:32px; font-weight:300; }
.guide-static { position:absolute; width:80%; height:80%; object-fit:contain; left:10%; top:7%; }
.guide-live .guide-static { visibility:hidden; }
#fanwaar-guide { position:fixed; width:560px; height:560px; left:0; top:0; z-index:5; pointer-events:none; visibility:hidden; }
.guide-kicker { position:absolute; top:0; left:0; color:#a8bfdf; text-transform:uppercase; font-size:10px; letter-spacing:.16em; }
.guide-label { position:absolute; z-index:6; font-size:11px; text-decoration:none; padding:11px 14px; border:1px solid #6d8dc94d; border-radius:8px; background:#14213a; color:#e2edff; }
.guide-label:first-of-type { top:24%; left:0; }.guide-label:nth-of-type(2) { right:0; bottom:22%; }
.guide-label:hover,.guide-label:focus-visible { border-color:#75a4ff; background:#1c3157; }
.guide-label span { color:#76acff; padding-right:7px; }
.guide-touch { position:absolute; z-index:6; inset:15% 20%; background:none; border:0; cursor:pointer; border-radius:50%; touch-action:pan-y; display:none; }
.guide-live .guide-touch { display:block; }.guide-controls { position:absolute; bottom:0; width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; color:#a8bfdf; font-size:10px; }
[data-guide-pause] { display:none; padding:8px 10px; color:inherit; background:none; border:1px solid #7893c250; border-radius:20px; font:inherit; cursor:pointer; }
.guide-live [data-guide-pause] { display:block; }.guide-live-note { display:none; }.guide-live .guide-live-note { display:inline; }.guide-live .guide-static-note { display:none; }
.stats-section { margin-top:0; padding-top:0; }.stats-grid { box-shadow:none; border-radius:0; border-left:0; border-right:0; }
.reveal { opacity:1!important; transform:none!important; }
:focus-visible { outline:3px solid #0891b2; outline-offset:5px; }
@media(max-width:900px) {
 .hero > .container { grid-template-columns:1fr; }.hero { padding:110px 0 48px; }.hero-content { max-width:620px; }
 .guide-stage { width:100%; max-width:540px; height:430px; margin:auto; }.hero h1 { font-size:clamp(42px,7vw,64px); }
 .hero .cta-buttons { flex-direction:row; }.hero .subtitle { font-size:16px; }.hero .nowrap { white-space:normal; }
}
@media(max-width:480px) { .guide-stage { height:350px; }.guide-label { padding:9px; font-size:10px; }.hero h1 { font-size:43px; }.hero .cta-buttons .btn { padding:12px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Chapters share the same canvas; HTML remains the source of every action. */
nav { background:#fffffffa; }
.hero { background:var(--fanwaar-blue-scene); }
.hero .spotlight { background:radial-gradient(circle 430px at var(--x,50%) var(--y,50%),#699dff20,transparent 70%); }
.section { padding:100px 0; }.section-title { font-size:42px; letter-spacing:-.045em; line-height:1.15; }
.section-subtitle { font-size:16px; }
.chapter-grid { display:grid; grid-template-columns:350px minmax(0,1fr); gap:55px; align-items:start; }
.chapter-intro { position:sticky; top:100px; }.chapter-intro .section-title,.chapter-intro .section-subtitle { text-align:left; }
.chapter-intro .section-subtitle { margin-bottom:28px; line-height:1.7; }
.chapter-stage { height:350px; background:radial-gradient(ellipse,#dae5ff90,transparent 70%); border-radius:24px; }
.chapter-stage .guide-kicker { top:4px; }.chapter-stage .guide-controls { bottom:2px; }
.ventures-section { background:#f4f6fb; }.ventures-section .guide-kicker,.ventures-section .guide-controls { color:#536585; }
.ventures-grid { gap:20px; }.venture-card { padding:26px; border-radius:16px; background:#fff; box-shadow:0 6px 24px #15284404; }
.venture-card p { font-size:14px; }.venture-card .role { font-size:12px; }.venture-info h3 { font-size:20px; }
.venture-logo { flex-shrink:0; width:44px; height:44px; }.venture-header { gap:12px; }
.venture-card .btn { padding:10px 13px; font-size:12px; }.venture-card.featured { grid-template-columns:1fr; gap:20px; }
.venture-card.featured figure { max-width:410px; }
.venture-card:focus-within { border-color:#2563eb; box-shadow:0 8px 30px #2563eb18; }
.services-section { background:var(--fanwaar-blue-scene); color:#fff; }
.services-section .section-title,.services-section h3 { color:#fff; }.services-section .section-subtitle { color:#fff; }
.services-section .chapter-stage { background:radial-gradient(ellipse,#afcaff26,transparent 70%); height:315px; }
.services-grid { grid-template-columns:1fr 1fr; gap:20px; }
.service-category { background:#102f7c99; border:1px solid #ffffff40; padding:26px 22px; border-radius:16px; }
.service-category h3 { font-size:18px; }.service-category li { color:#f1f6ff; font-size:14px; }.service-category:hover { background:#173f98b3; }
.service-header { align-items:flex-start; gap:10px; }.service-icon { font-size:24px; background:#ffffff1f; min-width:40px; width:40px; height:40px; }
.expertise-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; position:relative; z-index:6; }
.expertise-links a { display:flex; justify-content:space-between; align-items:center; border:1px solid #ffffff59; border-radius:8px; padding:11px 12px; color:#fff; background:#173c8d66; text-decoration:none; font-size:11px; }
.expertise-links a:hover,.expertise-links a:focus-visible { color:#fff; border-color:#fff; background:#1c459db3; }
.expertise-links span { color:#dbeafe; }.service-category { scroll-margin-top:100px; }
.service-category:target { border-color:#fff; background:#173f98b3; }
.timeline { max-width:950px; margin:auto; }.timeline-item { box-shadow:none; border-color:#e5eaf2; }
.about-section { gap:80px; }.profile-photo { border-radius:28px; overflow:hidden; transform:rotate(2deg); }.profile-photo img { border-radius:24px; }
@media(min-width:901px) and (max-height:800px) { .chapter-intro { top:85px; }.chapter-stage { height:300px; }.services-section .chapter-stage { height:260px; }.chapter-intro .section-title { font-size:36px; }.chapter-intro .section-subtitle { margin-bottom:14px; }.expertise-links { margin-top:10px; } }
@media(max-width:1100px) { .chapter-grid { grid-template-columns:300px minmax(0,1fr); gap:28px; }.ventures-grid,.services-grid { grid-template-columns:1fr; }.hero h1 { font-size:46px; } }
@media(max-width:900px) {
 .chapter-grid { grid-template-columns:1fr; gap:32px; }.chapter-intro { position:relative; top:auto; }.chapter-intro .section-title,.chapter-intro .section-subtitle { text-align:center; }
 .ventures-grid,.services-grid { grid-template-columns:1fr 1fr; }.chapter-stage,.services-section .chapter-stage { max-width:450px; height:360px; }.expertise-links { max-width:450px; margin:24px auto 0; }
 .section { padding:70px 0; }.about-section { gap:36px; }.hero h1 { font-size:clamp(39px,7vw,62px); }.hero > .container { gap:42px; }
}
@media(max-width:600px) { .ventures-grid,.services-grid { grid-template-columns:1fr; }.section-title { font-size:34px; }.chapter-stage,.services-section .chapter-stage { height:335px; }.hero h1 { font-size:clamp(32px,9.3vw,49px); }.hero-badge { margin-bottom:20px; }.hero .cta-buttons { gap:8px; }.hero .cta-buttons .btn { padding:12px 10px; }.hero { padding-top:105px; }.founder-line { margin-bottom:20px; }.chapter-grid { gap:26px; } }
@media(prefers-reduced-motion:reduce) { .hero .spotlight { display:none; } }
@media(max-width:600px) { .whatsapp-float { width:48px; height:48px; right:16px; bottom:16px; }.hero .cta-buttons { display:grid; grid-template-columns:auto auto; }.hero .cta-buttons .btn:last-child { grid-column:1/-1; width:fit-content; }.hero > .container { gap:24px; } }
@media(scripting:none) { #menu-toggle { display:none; }.nav-links { display:flex!important; position:static!important; flex-flow:row wrap!important; width:100%; border:0; padding:8px 0!important; box-shadow:none!important; gap:0; }.nav-links a { font-size:11px; padding:5px; }nav { position:relative; }nav .container { flex-wrap:wrap; }.hero { padding-top:48px; } }
/* A continuous desktop companion lane keeps copy clear during scroll travel. */
.chapter-heading{grid-column:1/-1}.chapter-heading .section-subtitle{margin-bottom:0}
#guide-travel-controls{position:fixed;left:0;top:0;z-index:6;pointer-events:none}
#guide-travel-controls[hidden]{display:none}
.travel-react{position:absolute;width:calc(var(--guide-size)*.64);height:calc(var(--guide-size)*.82);transform:translate(-50%,-50%);background:none;border:0;border-radius:45%;pointer-events:auto;cursor:pointer}
/* Hidden on request (2026-10-22): the pause buttons in the hero and section panels stay. */
.guide-live .travel-pause{display:none!important}
.guide-live .travel-pause{position:absolute;top:calc(var(--guide-size)*.47);left:0;transform:translateX(-50%);pointer-events:auto;white-space:nowrap;color:#536585;background:#fff;font-size:10px;box-shadow:0 2px 8px #1528440c}
@media(min-width:901px){
 .guide-live .chapter-grid{grid-template-columns:minmax(0,1fr) 350px}
 .guide-live .chapter-grid{row-gap:30px}
 .guide-live .chapter-heading{grid-column:1;grid-row:1}
 .guide-live .chapter-heading .section-title,.guide-live .chapter-heading .section-subtitle{text-align:left;margin-left:0}
 .guide-live .chapter-intro{grid-column:2;grid-row:1/span 2}
 .guide-live .chapter-stage,.guide-live .services-section .chapter-stage{height:430px}
 .guide-live .ventures-grid,.guide-live .services-grid{grid-column:1;grid-row:2}
 .guide-live .stats-section>.container,.guide-live #about>.container,.guide-live #experience>.container{padding-right:429px}
 .guide-live #about .section-title,.guide-live #about .section-subtitle,.guide-live #experience .section-title,.guide-live #experience .section-subtitle{text-align:left}
 .guide-live .about-section{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:26px;align-items:start}
 .guide-live .profile-photo,.guide-live .profile-photo img{width:170px;height:170px}
 .guide-live .stat-number{font-size:32px}.guide-live .stat-label{font-size:10px}
 .guide-live .timeline{padding-left:12px}.guide-live .timeline-item{margin-left:22px}
}
@media(min-width:901px) and (max-height:800px){.guide-live .chapter-stage,.guide-live .services-section .chapter-stage{height:340px}}
@media(min-width:901px) and (max-width:1100px){
 .guide-live .chapter-grid{grid-template-columns:minmax(0,1fr) 300px}
 .guide-live .stats-section>.container,.guide-live #about>.container,.guide-live #experience>.container{padding-right:352px}
 .guide-live .stats-grid{grid-template-columns:repeat(3,1fr)}
 .guide-live .about-section{grid-template-columns:1fr}.guide-live .profile-photo{justify-self:start}
}
/* Original blue identity, with a warm closing section between blue scenes and footer. */
.hero .tagline,.hero .subtitle,.hero-badge,.founder-line small,
.hero .guide-kicker,.hero .guide-controls,.services-section .guide-kicker,.services-section .guide-controls{color:#fff}
.hero .guide-label{background:#133777b3;border-color:#ffffff52;color:#fff}
.hero .guide-label:hover,.hero .guide-label:focus-visible{background:#153b89;border-color:#fff}
.hero .guide-label span{color:#dbeafe}
.hero .guide-stage::before,.services-section .guide-stage::before{border-color:#ffffff36}
.hero [data-guide-pause],.services-section [data-guide-pause]{border-color:#ffffff73;background:#14398640;color:#fff}
.hero [data-guide-pause]:hover,.services-section [data-guide-pause]:hover{background:#14398680}
.contact-section{background:linear-gradient(135deg,#fffaf2,#f3eadc);color:#292524}
.contact-section .section-title,.contact-cta p{color:#292524}
.contact-section .section-subtitle,.contact-cta .subtitle-text{color:#655a4d}
.contact-item{background:#ffffffb3;border-color:#dfd2c1;box-shadow:0 8px 24px #6e4c1806}
.contact-item:hover{background:#fff;border-color:#b89b76}
.contact-item h3{color:#79562e}
.contact-item a{color:#292524}
.contact-section .btn-primary{background:#292524;color:#fff;box-shadow:0 4px 16px #2925241a}
.contact-section .btn-primary:hover{background:#44403c}
.contact-section .btn-secondary{background:#ffffffb3;color:#43382c;border-color:#bdab94}
.contact-section .btn-secondary:hover{background:#fff;border-color:#79562e}