/* Layout: a steel-sheet hero with a live laser cut path, then a work list read like a job sheet, then a quote slip that drafts the WhatsApp message. */
:root{
  --bg:#F2F4F6;           /* cold-rolled sheet */
  --panel:#FFFFFF;
  --ink:#14202B;
  --muted:#5A6774;
  --line:#D5DBE1;
  --blue:#1D3A5F;          /* brand blue from the Elkuosh mark */
  --spark:#E2701E;         /* brand orange, the cut */
  --spark-soft:#FBE7D6;
  --sheet:#1A2633;         /* hero plate */
  --sheet-line:#3A4B5C;
  --on-sheet:#E8EDF2;
  --f-display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F161D;--panel:#16202A;--ink:#E6EBF0;--muted:#9AA7B4;--line:#26333F;
  --blue:#7FA6D6;--spark:#F08A3C;--spark-soft:#2B1F16;--sheet:#0B1117;--sheet-line:#2A3846;--on-sheet:#E6EBF0;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F161D;--panel:#16202A;--ink:#E6EBF0;--muted:#9AA7B4;--line:#26333F;
  --blue:#7FA6D6;--spark:#F08A3C;--spark-soft:#2B1F16;--sheet:#0B1117;--sheet-line:#2A3846;--on-sheet:#E6EBF0;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{direction:rtl;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.75;margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);line-height:1.25;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--spark);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--f-mono);direction:ltr;unicode-bidi:isolate;letter-spacing:.02em}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{flex:none}
.brand b{font-family:var(--f-display);font-size:19px;font-weight:700}
.brand small{display:block;font-size:12px;color:var(--muted);line-height:1.2}
.nav{display:flex;gap:22px;font-size:15px}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--f-body);text-decoration:none;border-radius:8px;padding:10px 18px;border:1.5px solid transparent;cursor:pointer}
.btn-spark{background:var(--spark);color:#fff}
.btn-spark:hover{filter:brightness(1.07)}
.btn-ghost{border-color:var(--sheet-line);color:var(--on-sheet);background:transparent}
.btn-ghost:hover{border-color:var(--spark)}
@media (max-width:760px){.nav{display:none}}

/* hero */
.hero{background:var(--sheet);color:var(--on-sheet);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:64px 56px}
.eyebrow{font-size:13px;letter-spacing:.08em;color:var(--spark);font-weight:600}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:700;margin-block:12px 18px}
.hero h1 em{font-style:normal;color:var(--spark)}
.hero p.lede{color:color-mix(in srgb,var(--on-sheet) 78%,transparent);max-width:34em}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.plate{position:relative;aspect-ratio:4/3;max-width:100%;border:1px solid var(--sheet-line);border-radius:6px;background:
  linear-gradient(var(--sheet-line) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,var(--sheet-line) 1px,transparent 1px) 0 0/40px 40px;background-color:color-mix(in srgb,var(--sheet) 85%,#000)}
.plate canvas{position:absolute;inset:0;width:100%;height:100%}
.plate .tag{position:absolute;bottom:10px;inset-inline-start:12px;font-size:12px;color:color-mix(in srgb,var(--on-sheet) 60%,transparent)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-block:44px}}

/* sections */
section{padding-block:72px}
main{overflow-x:clip}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font-size:clamp(26px,3.4vw,38px)}
.sec-head p{color:var(--muted);max-width:30em}

/* services as a job sheet */
.jobs{border-top:2px solid var(--ink)}
.job{display:grid;grid-template-columns:200px 1fr 220px;gap:28px;padding-block:26px;border-bottom:1px solid var(--line);align-items:start}
.job h3{font-size:24px}
.job .code{font-size:12px;color:var(--spark);margin-bottom:6px}
.job p{color:var(--muted);min-width:0}
.job ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.job li{display:flex;gap:8px;align-items:baseline}
.job li::before{content:"";width:8px;height:2px;background:var(--spark);flex:none;transform:translateY(-4px)}
@media (max-width:860px){.job{grid-template-columns:1fr;gap:10px}}

/* products */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:10px}
.prod svg{color:var(--blue)}
.prod h3{font-size:19px}
.prod p{font-size:15px;color:var(--muted)}
@media (max-width:960px){.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.products{grid-template-columns:1fr}}

/* materials strip */
.materials{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;background:var(--panel)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.step{padding:24px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.step:first-child{border-inline-start:0}
.step .n{font-family:var(--f-mono);font-size:13px;color:var(--spark)}
.step h3{font-size:19px}
.step p{font-size:15px;color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(3){border-inline-start:0}.step:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.step{border-inline-start:0}.step+.step{border-top:1px solid var(--line)}}

/* quote */
.quote{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.slip{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px;display:grid;gap:16px}
.slip .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font-size:14px;font-weight:500}
input,select,textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;min-width:0}
textarea{min-height:90px;resize:vertical}
.slip .note{font-size:13px;color:var(--muted)}
.contact{display:grid;gap:18px}
.contact .item{display:grid;gap:2px}
.contact .k{font-size:13px;color:var(--muted)}
.contact .v{font-size:18px;font-weight:600}
.contact .v a{text-decoration:none}
.contact .v a:hover{color:var(--spark)}
.map-note{background:var(--spark-soft);border-radius:10px;padding:18px;font-size:15px}
@media (max-width:860px){.quote{grid-template-columns:1fr}.slip .row{grid-template-columns:1fr}}

/* grating */
.grating{background:var(--panel);border-block:1px solid var(--line)}
.g-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.g-hero{border-radius:10px;overflow:hidden;aspect-ratio:4/3;max-width:100%}
.g-hero img,.g-grid img{width:100%;height:100%;object-fit:cover;display:block}
.g-copy{display:grid;gap:18px}
.g-copy h2{font-size:clamp(28px,3.6vw,42px)}
.g-copy p{color:var(--muted)}
.g-types{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g-type{border:1px solid var(--line);border-radius:8px;padding:14px;background:var(--bg)}
.g-type b{display:block;font-family:var(--f-display);font-size:17px}
.g-type span{font-size:14px;color:var(--muted)}
.g-spec{display:flex;flex-wrap:wrap;gap:8px}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.g-grid figure{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:3/4;position:relative;background:var(--bg)}
.g-grid figcaption{position:absolute;inset-inline:0;bottom:0;padding:22px 12px 10px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
@media (max-width:860px){.g-top{grid-template-columns:1fr}.g-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.g-types{grid-template-columns:1fr}}

/* gates */
.gates .g-top{align-items:start}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{margin:0;border-radius:8px;overflow:hidden;background:var(--sheet);position:relative;aspect-ratio:3/4}
.panel svg,.panel img{display:block;width:100%;height:100%;object-fit:cover}
.panel figcaption{position:absolute;inset-inline:0;bottom:0;padding:22px 12px 10px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:st}
.stage{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--bg);font-size:14px}
.stage b{display:block;font-family:var(--f-display);font-size:16px}
.stage b::before{counter-increment:st;content:counter(st) " · ";color:var(--spark);font-family:var(--f-mono)}
.prices{width:100%;border-collapse:collapse;font-size:15px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.prices th,.prices td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line)}
.prices thead th{background:var(--blue);color:#fff;font-weight:600}
.prices td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.prices tr:last-child td{border-bottom:0}
.p-note{font-size:13px;color:var(--muted)}
@media (max-width:860px){.stages{grid-template-columns:1fr}}

/* pergolas */
.perg{padding-block:64px}
.p-label{font-family:var(--f-display);font-size:18px;margin:34px 0 12px;display:flex;align-items:center;gap:10px}
.p-label::after{content:"";flex:1;height:1px;background:var(--line)}
.p-site{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,1fr);gap:12px;aspect-ratio:2/1}
.p-site figure,.p-ideas figure{margin:0;border-radius:8px;overflow:hidden;position:relative;background:var(--bg)}
.p-site figure:first-child{grid-row:span 2}
.p-site img,.p-ideas img{width:100%;height:100%;object-fit:cover;display:block}
.p-site figcaption,.p-ideas figcaption{position:absolute;inset-inline:0;bottom:0;padding:22px 12px 10px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.p-ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.p-ideas figure{aspect-ratio:1}
@media (max-width:860px){.p-site{grid-template-columns:1fr 1fr;grid-template-rows:auto;aspect-ratio:auto}.p-site figure{aspect-ratio:1}.p-site figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}.p-ideas{grid-template-columns:1fr 1fr}}

/* ===== motion layer ===== */
#sparks{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .glow{position:absolute;width:60vmax;height:60vmax;inset-inline-start:-15vmax;top:-25vmax;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--spark) 22%,transparent),transparent 60%);z-index:0;animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
@keyframes drift{to{transform:translate(-18vmax,12vmax) scale(1.15)}}
.hero .wrap>div:first-child>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap>div:first-child>*:nth-child(2){animation-delay:.12s}.hero .wrap>div:first-child>*:nth-child(3){animation-delay:.24s}.hero .wrap>div:first-child>*:nth-child(4){animation-delay:.36s}.hero .wrap>div:first-child>*:nth-child(5){animation-delay:.48s}
.plate{animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.hero h1 em{background:linear-gradient(90deg,var(--spark),#FFB36B,var(--spark));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.rotator{margin-top:18px;font-weight:600;color:var(--on-sheet);display:flex;gap:8px;align-items:center}
.rot{position:relative;display:inline-block;height:1.75em;min-width:11em;overflow:hidden;vertical-align:bottom}
.rot b{position:absolute;inset-inline-start:0;top:0;color:var(--spark);white-space:nowrap;opacity:0;transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
.rot b.on{opacity:1;transform:none}.rot b.out{opacity:0;transform:translateY(-100%)}
.marquee{background:var(--spark);color:#fff;overflow:hidden;direction:ltr;border-block:1px solid color-mix(in srgb,#000 15%,var(--spark))}
.marquee .track{display:flex;width:max-content;gap:22px;padding-block:12px;animation:marq 40s linear infinite;font:600 15px var(--f-body)}
.marquee .track span{direction:rtl;white-space:nowrap}.marquee i{font-style:normal;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* progress + nav */
.progress{position:fixed;top:0;inset-inline:0;height:3px;background:var(--spark);transform-origin:right;transform:scaleX(0);z-index:30}
.nav a{position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:2px;background:var(--spark);transform:scaleX(0);transition:transform .3s}
.nav a.active{color:var(--ink)}.nav a.active::after,.nav a:hover::after{transform:scaleX(1)}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.rv.in{opacity:1;transform:none}
.sec-head h2,.g-copy h2{position:relative;padding-bottom:10px}
.sec-head h2::after,.g-copy h2::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:3px;width:64px;background:var(--spark);transform:scaleX(0);transform-origin:right;transition:transform .8s .2s cubic-bezier(.2,.7,.2,1)}
.in h2::after,h2.in::after,.rv.in h2::after{transform:scaleX(1)}

/* hover life */
.g-grid figure img,.p-site img,.p-ideas img,.panel img,.g-hero img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.g-grid figure:hover img,.p-site figure:hover img,.p-ideas figure:hover img,.panel:hover img,.g-hero:hover img{transform:scale(1.07)}
figure img{cursor:zoom-in}
.prod,.g-type,.stage,.step{transition:transform .3s,box-shadow .3s,border-color .3s}
.prod:hover,.g-type:hover,.stage:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.10);border-color:var(--spark)}
.prod svg{transition:transform .4s,color .3s}.prod:hover svg{transform:rotate(-8deg) scale(1.12);color:var(--spark)}
.btn{transition:transform .2s,filter .2s,box-shadow .2s}.btn-spark:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--spark) 40%,transparent)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;animation:ping 2.4s ease-out infinite;z-index:-1}
@keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(1.8);opacity:0}}

/* animated section backgrounds */
#grating{position:relative;overflow:hidden}
#grating::before{content:"";position:absolute;inset:-50%;background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 26px),repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 52px);opacity:.35;animation:pan 30s linear infinite;pointer-events:none}
#grating>.wrap,#gates>.wrap,#process>.wrap{position:relative}
@keyframes pan{to{transform:translate(26px,52px)}}
#gates{position:relative;overflow:hidden}
#gates::before{content:"";position:absolute;top:0;bottom:0;width:2px;inset-inline-start:-10%;background:linear-gradient(transparent,var(--spark),transparent);box-shadow:0 0 18px 4px color-mix(in srgb,var(--spark) 45%,transparent);animation:beam 7s linear infinite;pointer-events:none;opacity:.7}
@keyframes beam{to{inset-inline-start:110%}}
#pergolas{background:linear-gradient(120deg,var(--bg),color-mix(in srgb,var(--blue) 10%,var(--bg)),var(--bg));background-size:300% 300%;animation:wash 18s ease infinite}
@keyframes wash{50%{background-position:100% 50%}}

/* service tabs */
.tabs{position:relative;display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;min-width:max-content;background:none;border:0;padding:14px 18px;font:600 16px var(--f-display);color:var(--muted);cursor:pointer;transition:color .25s}
.tab small{display:block;font:500 11px var(--f-mono);letter-spacing:.06em;color:var(--spark);direction:ltr}
.tab[aria-selected="true"]{color:var(--ink)}
.tab-ink{position:absolute;bottom:-2px;height:3px;background:var(--spark);border-radius:3px;transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.tab-timer{position:absolute;bottom:-2px;height:3px;background:color-mix(in srgb,var(--spark) 35%,transparent);transform-origin:right}
.jobs.tabbed{border-top:0;display:grid}
.jobs.tabbed .job{grid-area:1/1;border-bottom:0;padding:0;grid-template-columns:1fr 1fr;align-items:center;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1),visibility .45s}
.jobs.tabbed .job.show{opacity:1;visibility:visible;transform:none}
.job-text{display:flex;flex-direction:column;gap:14px}
.job-text h3{font-size:30px}
.job-vis{aspect-ratio:4/3;border-radius:10px;background:var(--sheet);position:relative;overflow:hidden;border:1px solid var(--sheet-line)}
.job-vis svg{width:100%;height:100%;display:block}
@media (max-width:860px){.jobs.tabbed .job{grid-template-columns:1fr}.job-vis{order:-1}.tab{padding:12px 12px;font-size:15px}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,10,15,.88);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb figure{margin:0;max-width:min(1000px,100%);transform:scale(.94);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lb.open figure{transform:none}
.lb img{max-width:100%;max-height:80vh;border-radius:8px;display:block;margin-inline:auto}
.lb figcaption{color:#fff;text-align:center;margin-top:10px}
.lb button{position:absolute;top:16px;inset-inline-end:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff2;color:#fff;font-size:24px;cursor:pointer}

/* steps line */
.steps{position:relative}
.steps::after{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--spark);transform:scaleX(0);transform-origin:right;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.steps.in::after{transform:scaleX(1)}
.step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--spark);transition:background .3s,color .3s}
.step:hover .n{background:var(--spark);color:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

.cutp{stroke-dasharray:900;stroke-dashoffset:900;animation:cut 5s linear infinite}
@keyframes cut{70%,100%{stroke-dashoffset:0}}
.head{offset-path:path("M80 210 L80 120 Q80 90 110 90 L190 90 L220 60 L290 60 Q320 60 320 90 L320 210 Z");offset-rotate:0deg;animation:mv 5s linear infinite}
@keyframes mv{from{offset-distance:0}70%,100%{offset-distance:100%}}
.punch{animation:punch 3s ease-in-out infinite}
@keyframes punch{0%,15%,85%,100%{transform:translateY(0)}35%,65%{transform:translateY(38px)}}
.wingL,.wingR{transform-origin:200px 160px;animation:bendL 3s ease-in-out infinite}
.wingR{animation-name:bendR}
@keyframes bendL{0%,20%,90%,100%{transform:rotate(0)}40%,70%{transform:rotate(45deg)}}
@keyframes bendR{0%,20%,90%,100%{transform:rotate(0)}40%,70%{transform:rotate(-45deg)}}
.deg{opacity:0;animation:fade 3s infinite}@keyframes fade{40%,70%{opacity:1}}
.bead{stroke-dasharray:280;stroke-dashoffset:280;animation:bead 4s linear infinite}
@keyframes bead{80%,100%{stroke-dashoffset:0}}
.torch{animation:torch 4s linear infinite}
@keyframes torch{from{transform:translate(60px,160px)}80%,100%{transform:translate(340px,160px)}}
.spk circle{animation:spk 4s linear infinite}
.spk circle:nth-child(1){--dx:-14px;--dy:-22px}.spk circle:nth-child(2){--dx:16px;--dy:-18px}.spk circle:nth-child(3){--dx:-6px;--dy:-30px}.spk circle:nth-child(4){--dx:10px;--dy:-28px}
.spk{animation:torch 4s linear infinite}
.spk circle{animation:pop .5s ease-out infinite}
.spk circle:nth-child(2){animation-delay:.12s}.spk circle:nth-child(3){animation-delay:.25s}.spk circle:nth-child(4){animation-delay:.37s}
@keyframes pop{from{transform:none;opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}
.joint{opacity:.15;animation:glowj 4s infinite}
.j2{animation-delay:1s}.j3{animation-delay:2s}.j4{animation-delay:3s}
@keyframes glowj{0%,100%{opacity:.15}10%,30%{opacity:1;filter:drop-shadow(0 0 8px #E2701E)}}

footer{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.wa-float{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-start:18px;z-index:20;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* ===== multi-page ===== */
.nav a{white-space:nowrap}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:42px;height:42px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .3s,background .3s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;inset-inline-start:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.bar-actions{display:flex;gap:10px;align-items:center}
@media (max-width:960px){
  .menu-btn{display:inline-flex}
  .nav{display:flex;position:fixed;top:66px;inset-inline:0;flex-direction:column;gap:0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.12);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;z-index:9}
  .nav a{padding:14px 20px;border-top:1px solid var(--line);font-size:16px}
  .nav a::after{display:none}
  .nav a.active{color:var(--spark)}
  .menu-open .nav{opacity:1;visibility:visible;transform:none}
}
.page-hero .wrap{grid-template-columns:1fr;padding-block:56px 48px}
.page-hero h1{font-size:clamp(30px,4.4vw,48px)}
.crumbs{font-size:14px;color:color-mix(in srgb,var(--on-sheet) 65%,transparent);display:flex;gap:8px;align-items:center}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--spark)}
.page-hero .lede{max-width:40em}
/* feature cards on home */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/5;text-decoration:none;color:#fff;background:var(--sheet)}
.feat img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,14,20,.88))}
.feat .ft{position:absolute;inset-inline:0;bottom:0;padding:22px;z-index:1;display:grid;gap:6px}
.feat h3{font-size:26px}
.feat p{font-size:15px;opacity:.85}
.feat .go{display:inline-flex;align-items:center;gap:8px;color:var(--spark);font-weight:600;margin-top:6px}
.feat .go i{font-style:normal;transition:transform .3s}
.feat:hover img{transform:scale(1.08)}.feat:hover .go i{transform:translateX(-6px)}
.feat .tagx{position:absolute;top:14px;inset-inline-start:14px;z-index:1;background:var(--spark);color:#fff;font:600 12px var(--f-mono);padding:4px 10px;border-radius:999px;direction:ltr}
@media (max-width:860px){.features{grid-template-columns:1fr}.feat{aspect-ratio:16/11}}
/* CTA band */
.cta-band{background:var(--sheet);color:var(--on-sheet);position:relative;overflow:hidden}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:44px;position:relative}
.cta-band h2{font-size:clamp(24px,3vw,34px)}
.cta-band p{color:color-mix(in srgb,var(--on-sheet) 75%,transparent)}
.cta-band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 40px,color-mix(in srgb,var(--spark) 10%,transparent) 40px 42px);animation:pan2 20s linear infinite}
@keyframes pan2{to{background-position:400px 0}}
.cta-band .acts{display:flex;gap:12px;flex-wrap:wrap}
section.first{padding-top:56px}