/* AL Furqan Corporation, modern corporate design (Oct 2026).
   Layout: dark animated hero bands, light content bands, one typeface (Plus Jakarta Sans).
   Colours: AFC letterhead red on deep charcoal; light and dark themes via tokens. */
:root{
  --bg:#ffffff; --surface:#f6f5f5; --card:#ffffff; --ink:#141012; --muted:#5e5658; --line:#e8e3e4;
  --red:#e0262e; --red-2:#ff4d4f; --maroon:#7a1f22;
  --night:#0e0a0b; --night-2:#1c1214; --night-ink:#f6f1f1; --night-muted:#b9adae;
  --todo:#fff1c7; --todo-ink:#6b4f00;
  --radius:18px; --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f0b0c; --surface:#171113; --card:#1a1315; --ink:#f4efef; --muted:#b5a9ab; --line:#2c2224;
  --todo:#3d300a; --todo-ink:#ffd66b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f0b0c; --surface:#171113; --card:#1a1315; --ink:#f4efef; --muted:#b5a9ab; --line:#2c2224;
  --todo:#3d300a; --todo-ink:#ffd66b; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;line-height:1.1;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.todo{background:var(--todo);color:var(--todo-ink);border-radius:6px;padding:0 6px;font-size:.9em;font-weight:600}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(14,10,11,.8);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(255,255,255,.08);color:var(--night-ink)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.logo img{width:30px;height:auto;filter:drop-shadow(0 0 12px rgba(224,38,46,.45))}
.logo span{color:var(--red-2)}
nav{display:flex;gap:4px}
nav a{text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border-radius:99px;color:var(--night-muted);white-space:nowrap;transition:color .25s,background .25s}
nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
nav a[aria-current=page]{color:#fff;background:rgba(224,38,46,.22);box-shadow:inset 0 0 0 1px rgba(255,77,79,.45)}
@media(max-width:860px){nav{width:100%;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}nav::-webkit-scrollbar{display:none}}

/* Dark hero band with animated canvas */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 85% -10%,rgba(224,38,46,.35),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(122,31,34,.5),transparent 60%),var(--night);color:var(--night-ink);isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%)}
.hero .wrap{padding-block:clamp(64px,11vw,128px) clamp(76px,10vw,120px)}
.hero.sub .wrap{padding-block:clamp(56px,8vw,96px) clamp(44px,6vw,72px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--night-muted);margin-bottom:22px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-2);animation:pulse 2.2s infinite}
.hero h1{font-size:clamp(32px,5.8vw,68px);font-weight:800;max-width:18ch;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.hero.sub h1{font-size:clamp(28px,4.4vw,54px);max-width:20ch}
.grad{background:linear-gradient(100deg,#ff6a5c,var(--red) 40%,#ff9a7a 80%,#ff6a5c);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.hero p.lede{font-size:clamp(16px,1.6vw,19px);color:var(--night-muted);max-width:60ch;margin:24px 0 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:15px;padding:14px 22px;border-radius:99px;background:var(--red);color:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(224,38,46,.8)}
.btn.ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.wa{background:#1fa855}

/* Load-in sequence for hero content */
.hero .in{animation:rise .9s var(--ease) both}
.hero .in:nth-child(2){animation-delay:.08s}.hero .in:nth-child(3){animation-delay:.16s}.hero .in:nth-child(4){animation-delay:.24s}

/* Stats strip overlapping the hero */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:-48px;position:relative;z-index:2;box-shadow:0 30px 60px -30px rgba(20,16,18,.35)}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--card);padding:26px 24px;min-width:0}
.stat b{display:block;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat b .todo{display:inline-block;font-size:.55em;padding:4px 10px}
.stat > span{display:block;margin-top:8px;color:var(--muted);font-size:14px}
.stats.flat{margin-top:0;box-shadow:none}

/* Sections */
.band{padding-block:clamp(64px,9vw,112px)}
.band.alt{background:var(--surface)}
.kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.band h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;max-width:22ch}
.band .intro{color:var(--muted);max-width:62ch;margin:16px 0 0}
.head{margin-bottom:40px}

/* Two business doors */
.doors{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media(min-width:820px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
.door{--x:50%;--y:50%;position:relative;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:34px;border-radius:24px;text-decoration:none;color:var(--night-ink);background:var(--night-2);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease)}
.door::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--x) var(--y),rgba(224,38,46,.45),transparent 60%);opacity:.55;transition:opacity .4s}
.door:hover{transform:translateY(-6px)}
.door:hover::before{opacity:1}
.door .num{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--night-muted)}
.door h3{font-size:clamp(26px,3vw,36px);font-weight:800}
.door p{margin:0;color:var(--night-muted);max-width:44ch}
.door .go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:700}
.door .go i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);font-style:normal;transition:transform .4s var(--ease)}
.door:hover .go i{transform:rotate(-45deg)}

/* Ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:22px;background:var(--bg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker ul{display:flex;gap:56px;width:max-content;margin:0;padding:0;list-style:none;animation:marquee 36s linear infinite}
.ticker li{font-weight:800;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.01em;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:56px}
.ticker li::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.ticker:hover ul{animation-play-state:paused}
.ticker.news{display:flex;align-items:center;gap:0;padding:0;-webkit-mask-image:none;mask-image:none;background:var(--night);border:0}
.ticker.news .tag{flex:none;align-self:stretch;display:flex;align-items:center;gap:10px;padding:0 22px;background:var(--red);color:#fff;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.ticker.news .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 2.2s infinite}
.ticker.news .track{flex:1;min-width:0;overflow:hidden;padding-block:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker.news ul{animation-duration:60s}
.ticker.news li{font-size:15px;font-weight:600;color:var(--night-ink);letter-spacing:0}
.ticker.news time{color:var(--red-2);font-weight:800;margin-right:12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* Cards */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:720px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;overflow:hidden;min-width:0}
.card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--red),#ff8a6a);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(20,16,18,.45);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card .ix{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--red);margin-bottom:14px;display:block;text-transform:uppercase}
.card h3{font-size:20px;font-weight:800;margin-bottom:10px}
.card p{margin:0;color:var(--muted)}

/* Tables */
.table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:820px}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
tbody tr{transition:background .25s}
tbody tr:hover{background:var(--surface)}
tbody tr:last-child td{border-bottom:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:700;background:rgba(31,168,85,.12);color:#1a9a4d;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.past{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.pill.ongoing{background:rgba(232,140,20,.14);color:#c46f00}
.pill.ongoing::before{animation:pulse-amber 1.8s infinite}
@keyframes pulse-amber{0%{box-shadow:0 0 0 0 rgba(232,140,20,.6)}70%{box-shadow:0 0 0 7px rgba(232,140,20,0)}100%{box-shadow:0 0 0 0 rgba(232,140,20,0)}}
.note{color:var(--muted);font-size:14.5px;margin-top:16px}

.past-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.past-list li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:var(--card)}

/* History timeline */
.timeline{list-style:none;margin:8px 0 0;padding:0 0 0 22px;border-left:2px solid var(--line);display:grid;gap:22px;max-width:760px}
.timeline li{position:relative;display:grid;gap:4px}
.timeline li::before{content:"";position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--bg)}
.timeline time{font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.timeline span{color:var(--muted)}

/* CEO message */
.quote{margin:0;position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(28px,5vw,56px);max-width:900px}
.quote::before{content:"\201C";position:absolute;top:-28px;left:28px;font-size:120px;line-height:1;font-weight:800;color:var(--red)}
.quote blockquote{margin:0;font-size:clamp(17px,1.8vw,20px);line-height:1.7}
.quote blockquote p{margin:0 0 16px}
.quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.quote figcaption span{color:var(--muted);font-size:14.5px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:820px){.contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.contact-grid a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--red)}

/* Footer */
footer{background:var(--night);color:var(--night-muted);font-size:14.5px;padding-block:64px 32px}
footer .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:820px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{margin:0 0 12px;color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
footer a{color:var(--night-ink);text-decoration:none}
footer a:hover{color:var(--red-2)}
footer .brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
footer .brand img{width:46px;height:auto}
footer p{margin:0 0 6px}
footer .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:20px;font-size:13px}

/* Scroll reveal: elements stay readable before they scroll in (never fully hidden), then settle into place. */
@supports (animation-timeline:view()){
  .reveal{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@keyframes settle{from{opacity:.35;transform:translateY(36px) scale(.98)}to{opacity:1;transform:none}}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes shine{to{background-position:200% center}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,79,.6)}70%{box-shadow:0 0 0 12px rgba(255,77,79,0)}100%{box-shadow:0 0 0 0 rgba(255,77,79,0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Door illustrations */
.door .art{display:block;width:calc(100% + 68px);height:auto;aspect-ratio:460/180;margin:-34px -34px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.door .art .wire{fill:none;stroke:#f6f1f1;stroke-opacity:.45;stroke-width:1.2}
.door .art .spark{fill:#ff4d4f;filter:drop-shadow(0 0 6px #ff4d4f)}
.door .art .route{animation:route 3s linear infinite}
.door .art .truck{animation:drive 14s linear infinite}
@keyframes route{to{stroke-dashoffset:-44}}
@keyframes drive{0%,32%{transform:translateX(0);animation-timing-function:cubic-bezier(.55,0,.9,.6)}52%{transform:translateX(-270px)}52.01%{transform:translateX(480px);animation-timing-function:cubic-bezier(.1,.4,.3,1)}78%,100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.door .art .route,.door .art .truck{animation:none}.door .art .spark{display:none}}
/* Hero headline word reveal and pointer glow */
.hero h1.split .w{display:inline-block;animation:word .9s var(--ease) both}
.hero h1.split .grad.w{animation:word .9s var(--ease) both,shine 6s linear 1s infinite}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(500px circle at var(--mx,70%) var(--my,30%),rgba(224,38,46,.18),transparent 60%);transition:background .2s}
@keyframes word{from{opacity:0;transform:translateY(.6em) rotate(2deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.card .art.sm{display:block;width:100%;height:auto;aspect-ratio:460/180;margin:0 0 16px;border-radius:14px;background:var(--night-2)}
.card .art .wire{fill:none;stroke:#f6f1f1;stroke-opacity:.45;stroke-width:1.2}
.card .art .spark{fill:#ff4d4f;filter:drop-shadow(0 0 6px #ff4d4f)}
.hero canvas{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.45) 45%,#000 80%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.45) 45%,#000 80%)}
@media(max-width:700px){.hero canvas{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.45) 60%,#000);mask-image:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.45) 60%,#000)}}
/* Distribution hero: warehouse and delivery scene instead of power lines */
.hero.dist{--sh:clamp(150px,39vw,560px)}
.hero.dist .wrap{padding-bottom:calc(var(--sh) + 40px)}
.hero .scene{position:absolute;left:0;right:0;bottom:64px;width:100%;height:var(--sh);z-index:-1;overflow:visible}
.hero .road{position:absolute;left:0;right:0;bottom:64px;height:calc(var(--sh) * 20 / 180);z-index:-1;background:linear-gradient(transparent calc(50% - 1px),rgba(242,194,48,.55) calc(50% - 1px),rgba(242,194,48,.55) calc(50% + 1px),transparent calc(50% + 1px)) 0 0/28px 100% no-repeat,linear-gradient(#2a2125,#120c0e)}
.hero .road{background:repeating-linear-gradient(90deg,rgba(242,194,48,.55) 0 16px,transparent 16px 28px) 0 50%/100% 2px no-repeat,linear-gradient(#2a2125,#120c0e)}
.hero .scene .truck{animation:drive-wide 16s linear infinite}
@keyframes drive-wide{0%,30%{transform:translateX(0);animation-timing-function:cubic-bezier(.55,0,.9,.6)}55%{transform:translateX(-1000px)}55.01%{transform:translateX(520px);animation-timing-function:cubic-bezier(.1,.4,.3,1)}80%,100%{transform:translateX(0)}}
@media(max-width:820px){.hero.dist{--sh:39vw}.hero.dist .wrap{padding-bottom:calc(var(--sh) + 64px)}.hero .scene,.hero .road{bottom:56px}}
@media(prefers-reduced-motion:reduce){.hero .scene .truck{animation:none}}
/* Person card: photo with role and short description */
.person{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:32px;align-items:center;background:#fff;border:1px solid var(--line,#e7e2e2);border-radius:20px;padding:24px;max-width:760px;box-shadow:0 18px 40px -28px rgba(0,0,0,.35)}
.person img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;display:block}
.person h3{margin:6px 0 10px}
@media(max-width:620px){.person{grid-template-columns:1fr;gap:18px}.person img{max-width:260px}}
.person .pcontact{font-weight:600;color:var(--ink)}.person .pcontact a{color:#c8102e}