/* RASM — jasa pembuatan website, styles */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,900&family=Manrope:wght@400;500;700&family=Space+Mono:wght@400;700&family=Amiri:ital,wght@0,400;0,700;1,400&family=Tajawal:wght@300;400;500;700&display=swap');

:root{
  --canvas:#14100b;
  --canvas-2:#1a140d;
  --panel:#1f1811;
  --panel-2:#241c13;
  --accent:#c9a24b;
  --accent-hover:#e0bc63;
  --accent-muted:rgba(201,162,75,.35);
  --accent-dim:rgba(201,162,75,.14);
  --text-primary:#f3ecdf;
  --text-secondary:#b9ae9c;
  --text-tertiary:#8a7f6d;
  --line:rgba(201,162,75,.18);
  --line-strong:rgba(201,162,75,.4);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: .3s;
  --t-med: .6s;
  --t-slow: 1.1s;

  --tshadow: 0 1px 2px rgba(5,5,10,.9), 0 3px 14px rgba(5,5,10,.7), 0 10px 40px rgba(5,5,10,.7);

  --display-ar: 'Amiri', serif;
  --display-en: 'Fraunces', serif;
  --body-ar: 'Tajawal', sans-serif;
  --body-en: 'Manrope', sans-serif;
  --mono: 'Space Mono', monospace;

  color-scheme: dark;
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;overflow-x:hidden}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body-ar);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{ font-family:var(--body-en); }

h1,h2,h3,h4{
  font-family:var(--display-ar);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:.005em;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4{
  font-family:var(--display-en);
  font-weight:600;
  letter-spacing:-0.01em;
}

p{ margin:0 0 1em; color:var(--text-secondary); max-width:60ch }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ margin:0; padding:0; list-style:none }
label,.label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-tertiary) }

/* language toggle visibility */
[data-lang]{ }
html:not([lang="en"]) [data-lang="en"]{ display:none !important }
html[lang="en"] [data-lang="ar"]{ display:none !important }

.skip-link{
  position:absolute; inset-inline-start:1rem; top:-4rem;
  background:var(--accent); color:#14100b; padding:.75rem 1.25rem;
  border-radius:.4rem; z-index:200; transition:top var(--t-fast) var(--ease-out);
  font-family:var(--mono); font-size:.85rem;
}
.skip-link:focus{ top:1rem }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }

.wrap{ max-width:1180px; margin-inline:auto; padding-inline:1.5rem }
@media (min-width:820px){ .wrap{ padding-inline:2.5rem } }

section{ position:relative; padding-block:5.5rem }
@media (min-width:820px){ section{ padding-block:8rem } }

.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.1em;
}
.kicker::before{ content:""; width:1.6em; height:1px; background:var(--accent) }

.section-head{ max-width:44rem; margin-bottom:3rem }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem) }
.section-head p{ font-size:1.05rem }

/* ---------- background environment (whole-page world) ---------- */
.env{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 20% -10%, rgba(201,162,75,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 110%, rgba(201,162,75,.08) 0%, transparent 60%),
    var(--canvas);
}
.env::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(1px 1px at 20% 30%, rgba(201,162,75,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(201,162,75,.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(201,162,75,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 90% 20%, rgba(201,162,75,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 55% 15%, rgba(201,162,75,.3) 0, transparent 60%);
  animation: driftGlow 70s linear infinite;
  opacity:.5;
}
@keyframes driftGlow{ from{ transform:translateY(0) } to{ transform:translateY(-60px) } }
body.paused .env::before{ animation-play-state:paused }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:250;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem;
  background:linear-gradient(rgba(20,16,11,.9), rgba(20,16,11,.5) 70%, transparent);
  backdrop-filter:blur(6px);
  transition:background var(--t-fast) var(--ease-out);
}
@media (min-width:820px){ .nav{ padding:1.4rem 2.5rem } }

.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--display-ar); font-size:1.4rem; color:var(--text-primary) }
html[lang="en"] .brand{ font-family:var(--display-en) }
.brand svg{ width:1.6em; height:1.6em; flex:none }

.nav-right{ display:flex; align-items:center; gap:.9rem }

.lang-toggle{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  border:1px solid var(--line-strong); border-radius:2em; padding:.45em 1em;
  color:var(--text-secondary); transition:all var(--t-fast) var(--ease-out);
}
.lang-toggle:hover{ color:var(--accent); border-color:var(--accent) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  padding:.85em 1.6em; border-radius:2em; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  text-shadow:none;
}
.btn-primary{ background:var(--accent); color:#17130c; box-shadow:0 8px 30px -10px rgba(201,162,75,.6) }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 12px 36px -8px rgba(201,162,75,.75) }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text-primary) }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
.btn-whatsapp svg{ width:1.1em; height:1.1em; flex:none }
@media (pointer:coarse){ .btn{ min-height:44px } }

@media (max-width:560px){
  .nav .nav-right > .btn-primary{ display:none }
}

/* ---------- kinetic menu button ---------- */
.nav-menu-btn{
  display:flex; align-items:center; gap:.6em;
  padding:.55em 1em .55em 1.3em; border:1px solid var(--line-strong); border-radius:2em;
  color:var(--text-primary); transition:border-color var(--t-fast), background var(--t-fast);
}
[dir="ltr"] .nav-menu-btn{ padding:.55em 1.3em .55em 1em }
.nav-menu-btn:hover{ border-color:var(--accent) }
.menu-btn-text{ position:relative; display:inline-grid; height:1.1em; overflow:hidden; font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; white-space:nowrap }
.menu-btn-open, .menu-btn-close{
  grid-area:1/1; display:block; line-height:1.1em; transition:transform .5s var(--ease-out);
}
.menu-btn-close{ transform:translateY(100%) }
.nav-menu-btn[aria-expanded="true"] .menu-btn-open{ transform:translateY(-100%) }
.nav-menu-btn[aria-expanded="true"] .menu-btn-close{ transform:translateY(0) }
.menu-btn-icon{ display:flex; width:.9rem; height:.9rem; transition:transform .5s var(--ease-out) }
.menu-btn-icon svg{ width:100%; height:100% }
.nav-menu-btn[aria-expanded="true"] .menu-btn-icon{ transform:rotate(225deg) }
@media (prefers-reduced-motion:reduce){ .menu-btn-open,.menu-btn-close,.menu-btn-icon{ transition:none } }

/* ---------- fullscreen kinetic menu ---------- */
.site-menu{
  position:fixed; inset:0; z-index:200;
  visibility:hidden;
}
.site-menu[data-menu="open"]{ visibility:visible }

.site-menu-overlay{
  position:absolute; inset:0; background:rgba(8,6,4,.55);
  opacity:0; transition:opacity .5s var(--ease-out);
}
.site-menu[data-menu="open"] .site-menu-overlay{ opacity:1 }

.site-menu-panel{
  position:absolute; inset-block:0; inset-inline-end:0; width:min(100%,560px);
  overflow:hidden;
  transform:translateX(110%);
  transition:transform .6s var(--ease-out);
}
[dir="rtl"] .site-menu-panel{ transform:translateX(-110%) }
.site-menu[data-menu="open"] .site-menu-panel{ transform:translateX(0) }

.menu-bg{ position:absolute; inset:0; z-index:0 }
.backdrop-layer{
  position:absolute; inset:0; transform:translateX(101%);
  transition:transform .6s var(--ease-out);
}
[dir="rtl"] .backdrop-layer{ transform:translateX(-101%) }
.site-menu[data-menu="open"] .backdrop-layer{ transform:translateX(0) }
.backdrop-layer.l1{ background:#1c150c; transition-delay:0s }
.backdrop-layer.l2{ background:#191309; transition-delay:.08s }
.backdrop-layer.l3{ background:linear-gradient(160deg,#17110a,#0d0a06); transition-delay:.16s; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) }

.ambient-shapes{ position:absolute; inset:0; overflow:hidden; opacity:.9 }
.bg-shape{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .3s }
.bg-shape.active{ opacity:1 }
.bg-shape .shape-el{ opacity:0; transform:scale(.5); transform-origin:center; transition:transform .5s var(--ease-out), opacity .5s var(--ease-out) }
.bg-shape.active .shape-el{ opacity:1; transform:scale(1) }
.bg-shape .shape-el:nth-child(1){ transition-delay:0s }
.bg-shape .shape-el:nth-child(2){ transition-delay:.06s }
.bg-shape .shape-el:nth-child(3){ transition-delay:.12s }
.bg-shape .shape-el:nth-child(4){ transition-delay:.18s }

.site-menu-list{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:.4rem; padding-inline:3rem; padding-block:6rem;
}
[dir="rtl"] .site-menu-list{ align-items:flex-end }
.site-menu-item{
  overflow:hidden;
}
.site-menu-item a{
  display:inline-block; font-family:var(--display-ar); font-size:clamp(2.2rem,6vw,3.2rem);
  color:var(--text-primary); padding-block:.15em;
  transform:translateY(140%) rotate(6deg); transition:transform .6s var(--ease-out), color var(--t-fast);
  transition-delay:calc(var(--mi,0) * 60ms + .1s);
}
html[lang="en"] .site-menu-item a{ font-family:var(--display-en) }
.site-menu[data-menu="open"] .site-menu-item a{ transform:translateY(0) rotate(0deg) }
.site-menu-item a:hover{ color:var(--accent) }
@media (prefers-reduced-motion:reduce){
  .site-menu-overlay,.site-menu-panel,.backdrop-layer,.bg-shape,.bg-shape .shape-el,.site-menu-item a{ transition:none }
}
@media (max-width:560px){
  .site-menu-panel{ width:100% }
  .site-menu-list{ padding-inline:1.6rem }
  .site-menu-item a{ font-size:clamp(1.8rem,9vw,2.6rem) }
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  position:relative; padding-block:7rem 4rem; overflow:hidden;
  background:var(--canvas);
}
.hero-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100% }

.hero-scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 42%, rgba(10,8,5,0) 40%, rgba(10,8,5,.55) 100%);
}

.hero-inner{ position:relative; z-index:1; width:100% }
.hero-inner--centered{ text-align:center; display:flex; flex-direction:column; align-items:center }
.hero-inner--centered .lede{ margin-inline:auto }
.hero-inner--centered .hero-cta{ justify-content:center }

.hero-badge{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  color:var(--text-primary); background:rgba(201,162,75,.08);
  border:1px solid var(--accent-muted); border-radius:2em; padding:.5em 1.1em;
  margin-bottom:1.6em; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(14px); animation:riseIn .9s var(--ease-out) .1s forwards;
}
.hero-badge svg{ width:1em; height:1em; color:var(--accent) }

.hero h1{
  font-size:clamp(2.4rem,6vw,4.6rem); max-width:16em; text-shadow:var(--tshadow);
  opacity:0; transform:translateY(22px); animation:riseIn 1s var(--ease-out) .25s forwards;
}
.hero .lede{
  color:var(--text-secondary); font-size:clamp(1rem,1.6vw,1.2rem); max-width:38em; margin-top:.4em;
  text-shadow:0 2px 16px rgba(5,5,10,.7);
  opacity:0; transform:translateY(18px); animation:riseIn 1s var(--ease-out) .45s forwards;
}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem;
  opacity:0; transform:translateY(16px); animation:riseIn 1s var(--ease-out) .65s forwards;
}
@keyframes riseIn{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .hero-badge,.hero h1,.hero .lede,.hero-cta{ animation:none; opacity:1; transform:none }
}

.scroll-cue{
  position:absolute; bottom:1.8rem; inset-inline-start:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  color:var(--text-tertiary); font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  z-index:1;
}
[dir="rtl"] .scroll-cue{ transform:translateX(50%) }
.scroll-cue .chevron{ width:1px; height:2.2rem; background:linear-gradient(var(--accent), transparent); animation:cueMove 2.2s ease-in-out infinite; animation-delay:-1.1s }
@keyframes cueMove{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }
body.paused .scroll-cue .chevron{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .scroll-cue .chevron{ animation:none; opacity:.6 } }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.reveal.in{ opacity:1; transform:none }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms) }
.reveal-stagger.in > *{ transition-delay:calc(var(--i,0) * 90ms) }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important }
}

/* ---------- divider ---------- */
.divider{ height:1px; background:linear-gradient(to var(--edge,right), transparent, var(--line-strong) 50%, transparent) }

/* ---------- services (interactive tabs) ---------- */
.services-head{
  display:flex; flex-direction:column; gap:1.6rem; margin-bottom:3rem;
}
@media (min-width:980px){ .services-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:3rem } }

.services-tag{ display:flex; align-items:center; gap:.8em; flex:none }
.services-tag-num{
  width:2.4rem; height:2.4rem; border-radius:50%; flex:none;
  background:var(--accent); color:#17130c; font-family:var(--mono); font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px rgba(201,162,75,.35);
}
.services-tag-line{ width:2.6rem; height:1px; background:var(--line-strong) }
.services-tag-label{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--text-secondary);
  border:1px solid var(--line-strong); border-radius:2em; padding:.4em 1em;
}
.services-head-text{ max-width:34rem }
.services-head-text h2{ font-size:clamp(1.9rem,3.4vw,2.6rem) }

.services-tabs{ display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:980px){ .services-tabs{ grid-template-columns:1.3fr 1fr; align-items:stretch } }

.services-tab-list{ display:flex; flex-direction:column; gap:.9rem }

.service-tab{
  border-radius:1.1rem; border:1px solid var(--line); background:rgba(255,255,255,.015);
  transition:border-color var(--t-fast) var(--ease-out), background var(--t-fast);
}
.service-tab.is-active{ background:var(--panel); border-color:var(--accent-muted); box-shadow:0 18px 40px -22px rgba(0,0,0,.7) }
.service-tab:not(.is-active):hover{ border-color:var(--line-strong); background:rgba(255,255,255,.03) }

.service-tab-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.5rem; text-align:start;
}
.service-tab-left{ display:flex; align-items:center; gap:1em }
.service-tab-num{
  font-family:var(--mono); font-size:.76rem; font-weight:700; padding:.3em .6em; border-radius:.4em;
  background:rgba(255,255,255,.05); color:var(--text-tertiary); transition:all var(--t-fast);
}
.service-tab.is-active .service-tab-num{ background:var(--accent); color:#17130c }
.service-tab-title{ font-size:1.08rem; font-weight:600; color:var(--text-secondary) }
.service-tab.is-active .service-tab-title{ color:var(--text-primary) }
.service-tab-plus{
  flex:none; width:1.7rem; height:1.7rem; border-radius:50%; position:relative;
  background:rgba(255,255,255,.05); transition:all var(--t-fast) var(--ease-out);
}
.service-tab-plus::before,.service-tab-plus::after{
  content:""; position:absolute; background:var(--text-tertiary); border-radius:2px; transition:all var(--t-fast);
}
.service-tab-plus::before{ inset-inline:.45rem; top:.82rem; height:2px }
.service-tab-plus::after{ inset-block:.45rem; inset-inline-start:.82rem; width:2px }
.service-tab.is-active .service-tab-plus{ background:var(--accent); transform:rotate(45deg) }
.service-tab.is-active .service-tab-plus::before,.service-tab.is-active .service-tab-plus::after{ background:#17130c }

.service-tab-body{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .45s var(--ease-out), opacity .35s var(--ease-out);
}
.service-tab.is-active .service-tab-body{ grid-template-rows:1fr; opacity:1 }
.service-tab-body-inner{ overflow:hidden }
.service-tab-tagline{
  margin:0 1.5rem 0; padding-top:0; font-family:var(--mono); font-size:.76rem;
  color:var(--accent); letter-spacing:.02em;
}
.service-tab.is-active .service-tab-tagline{ padding-top:.2rem }
.service-tab-desc{ margin:.6em 1.5rem 0; font-size:.9rem; color:var(--text-secondary) }
.service-tab-deliverables{
  display:grid; grid-template-columns:1fr; gap:.6em;
  margin:1.1rem 1.5rem 1.5rem; padding-top:1rem; border-top:1px solid var(--line);
}
@media (min-width:480px){ .service-tab-deliverables{ grid-template-columns:1fr 1fr } }
.service-tab-deliverables span{ display:flex; align-items:center; gap:.6em; font-size:.82rem; color:var(--text-secondary) }
.service-tab-deliverables span::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent); flex:none }

.service-preview{
  position:relative; overflow:hidden; border-radius:1.25rem; padding:2rem;
  background:linear-gradient(165deg,#211809,#130e08); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.service-preview-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 20% 0%, rgba(201,162,75,.12) 0%, transparent 60%);
}
.service-preview-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem }
.service-preview-kicker{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.service-preview-count{ font-family:var(--mono); font-size:.68rem; color:var(--text-tertiary); background:rgba(255,255,255,.06); padding:.3em .7em; border-radius:.4em }

.service-preview-canvas{
  position:relative; z-index:1; height:11rem; border-radius:1rem; margin-bottom:1.6rem;
  background:rgba(0,0,0,.28); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
.service-preview-icon{
  width:3.4rem; height:3.4rem; border-radius:1rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--accent-muted),rgba(255,255,255,.04)); border:1px solid var(--accent-muted);
  color:var(--accent); box-shadow:0 0 24px rgba(201,162,75,.18);
}
.service-preview-icon svg{ width:1.6rem; height:1.6rem }
.service-preview-name{ font-size:.94rem; font-weight:700; color:var(--text-primary) }
.service-preview-ready{ font-family:var(--mono); font-size:.66rem; color:var(--text-tertiary) }

.service-preview-tagline{ position:relative; z-index:1; font-size:1.15rem; font-weight:700; color:var(--text-primary); margin:0 0 .5em }
.service-preview-desc{ position:relative; z-index:1; font-size:.86rem; color:var(--text-secondary); margin:0 0 1.6rem }

.service-preview-bottom{
  position:relative; z-index:1; margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.service-preview-cta{ font-family:var(--mono); font-size:.8rem; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:.4em; transition:gap var(--t-fast) }
.service-preview-cta:hover{ gap:.65em }
.service-preview-brand{ font-family:var(--mono); font-size:.68rem; color:var(--text-tertiary) }

/* ---------- process: pinboard ---------- */
.pinboard{ position:relative; margin-top:1rem }
@media (min-width:980px){ .pinboard{ height:850px; margin-top:2.5rem } }
@media (max-width:979px){ .pinboard{ display:flex; flex-direction:column; gap:1.6rem } }

.pinboard-path{ display:none }
@media (min-width:980px){
  .pinboard-path{ display:block; position:absolute; inset:0; width:100%; height:100%; z-index:0 }
  .pinboard-path path{
    stroke:var(--accent-muted); stroke-width:2; fill:none;
    stroke-dasharray:8 6; stroke-linecap:round; vector-effect:non-scaling-stroke;
    animation:pinDash 3s linear infinite;
  }
}
@keyframes pinDash{ to{ stroke-dashoffset:-140 } }
body.paused .pinboard-path path{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .pinboard-path path{ animation:none } }

.pin-card{
  position:relative; z-index:1; opacity:0; transform:translateY(28px);
  background:#ece2ce; border-radius:1.4rem; padding:1.8rem 1.6rem 1.7rem; text-align:center;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.6);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow var(--t-fast);
}
@media (min-width:980px){ .pin-card{ position:absolute; width:280px } }
.pin-card--1{ top:0; left:15% }
.pin-card--2{ top:120px; right:15% }
.pin-card--3{ top:450px; left:15% }
.pin-card--4{ top:570px; right:10% }

@media (min-width:980px){
  .pinboard .pin-card--1.reveal.in{ transform:rotate(1.5deg) }
  .pinboard .pin-card--2.reveal.in{ transform:rotate(-1.5deg) }
  .pinboard .pin-card--3.reveal.in{ transform:rotate(1.5deg) }
  .pinboard .pin-card--4.reveal.in{ transform:rotate(-1.5deg) }
  .pinboard .pin-card--1.reveal.in:hover{ transform:rotate(1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
  .pinboard .pin-card--2.reveal.in:hover{ transform:rotate(-1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
  .pinboard .pin-card--3.reveal.in:hover{ transform:rotate(1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
  .pinboard .pin-card--4.reveal.in:hover{ transform:rotate(-1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
}
@media (max-width:979px){ .pin-card{ position:static !important; width:100% } }

.pin-dot{ display:block; width:1.7rem; height:1.7rem; margin:0 auto .9rem; color:var(--accent) }
.pin-dot svg{ width:100%; height:100% }
.pin-num{ display:block; font-family:var(--mono); font-size:1.7rem; font-weight:700; color:var(--accent); margin-bottom:.35em }
.pin-card h3{ font-size:1.2rem; color:#1c160e; margin-bottom:.4em }
.pin-card p{ font-size:.86rem; color:#5f563f; margin:0; max-width:none }

/* ---------- why choose us: flow scroll ---------- */
.flow-wrap{ position:relative }

.flow-page{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:stretch;
}
.flow-page--a{ background:linear-gradient(155deg,#241a10,#150f08) }
.flow-page--b{ background:var(--canvas-2) }
.flow-page--c{ background:var(--canvas) }

.flow-inner{
  width:100%; display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
  padding:6rem 6vw 4rem;
  transform-origin:bottom left; will-change:transform;
}
[dir="rtl"] .flow-inner{ transform-origin:bottom right }

.flow-hr{ border:none; border-top:1px solid var(--line); margin:0; width:100% }

.flow-kicker{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0;
}

.flow-headline{
  margin:0; font-family:var(--display-en); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,6.5rem); line-height:.95; letter-spacing:-0.01em; color:var(--text-primary);
}
html[lang="ar"] .flow-headline{ font-family:var(--display-ar); font-weight:700; text-transform:none; line-height:1.2 }

.flow-lede{ margin:0; max-width:52ch; font-size:clamp(1rem,1.6vw,1.35rem); color:var(--text-secondary) }

.flow-pair{ display:flex; flex-direction:column; gap:2.4rem }
@media (min-width:820px){
  .flow-pair{ flex-direction:row; gap:0 }
  .flow-pair-item{ flex:1; padding-inline-end:4vw }
  .flow-pair-item + .flow-pair-item{ border-inline-start:1px solid var(--line); padding-inline-start:4vw }
}
.flow-pair-item .flow-lede{ max-width:none }
.flow-pair-title{
  margin:0 0 .5em; font-family:var(--display-en); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,3.4rem); line-height:1; letter-spacing:-0.01em; color:var(--text-primary);
}
html[lang="ar"] .flow-pair-title{ font-family:var(--display-ar); font-weight:700; text-transform:none; line-height:1.25 }

.flow-quote{
  margin:0 0 0 auto; max-width:44ch; font-family:var(--display-ar); font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--text-primary); text-align:end;
}
html[lang="en"] .flow-quote{ font-family:var(--display-en) }

@media (prefers-reduced-motion:reduce){
  .flow-inner{ transform:none !important }
}

/* ---------- stats ---------- */
.stats-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:700px){ .stats-grid{ grid-template-columns:1fr 1fr } }
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:2.4rem 2rem;
}
.stat .num{
  font-family:var(--display-en); font-size:clamp(2.6rem,6vw,4rem); color:var(--accent); line-height:1;
  display:block; margin-bottom:.35em;
}
.stat p{ margin:0; font-size:.98rem }

.gallery-lede{ margin-top:2.5rem; font-size:1rem; color:var(--text-secondary); max-width:44ch }

.tilt-grid{
  display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:1.6rem;
}
@media (min-width:700px){ .tilt-grid{ grid-template-columns:repeat(3,1fr) } }

.tilt-card{ perspective:1200px }
.tilt-card-inner{
  position:relative; border-radius:1.25rem; overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--line); transform-style:preserve-3d; will-change:transform;
  transition:transform .15s var(--ease-out), box-shadow var(--t-fast);
  box-shadow:0 20px 45px -22px rgba(0,0,0,.6);
}
.tilt-card:hover .tilt-card-inner{ box-shadow:0 30px 60px -20px rgba(0,0,0,.75) }
.tilt-card-inner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:translateZ(0) scale(1.02); transition:transform .6s var(--ease-out);
}
.tilt-card:hover .tilt-card-inner img{ transform:translateZ(0) scale(1.08) }
.tilt-card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,6,4,.92) 0%, rgba(8,6,4,.35) 55%, rgba(8,6,4,.1) 100%);
}
.tilt-card-sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16) 0%, transparent 55%);
  mix-blend-mode:screen;
}
.tilt-card:hover .tilt-card-sheen{ opacity:1 }
.tilt-card-body{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; transform:translateZ(30px);
}
.tilt-card-icon{
  width:2.4rem; height:2.4rem; border-radius:.7rem; margin-bottom:1rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px); color:var(--accent);
  border:1px solid rgba(255,255,255,.12);
}
.tilt-card-icon svg{ width:1.2rem; height:1.2rem }
.tilt-card-body h3{ font-size:1.3rem; color:#fff; margin-bottom:.3em; text-shadow:var(--tshadow) }
.tilt-card-body p{ font-size:.86rem; color:rgba(255,255,255,.78); margin:0; text-shadow:0 2px 10px rgba(0,0,0,.6) }
@media (prefers-reduced-motion:reduce){
  .tilt-card-inner{ transition:none !important; transform:none !important }
  .tilt-card-inner img{ transition:none }
}


/* ---------- founding offer ---------- */
.offer{
  display:grid; gap:2rem; align-items:center;
  grid-template-columns:1fr; text-align:center;
}
@media (min-width:820px){ .offer{ grid-template-columns:1.2fr auto; text-align:start } }
.offer-box{
  background:linear-gradient(135deg, var(--panel), var(--panel-2));
  border:1px solid var(--accent-muted); border-radius:1.25rem; padding:3rem 2rem;
  display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; text-align:center;
}
@media (min-width:820px){ .offer-box{ grid-template-columns:1.4fr auto; text-align:start } }
.offer-box h2{ font-size:clamp(1.7rem,3vw,2.3rem) }

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:900px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); align-items:start } }

.price-card{
  background:var(--panel); border:1px solid var(--line); border-radius:1.25rem;
  padding:2.4rem 2rem; display:flex; flex-direction:column; position:relative;
  transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.price-card:hover{ transform:translateY(-4px) }
.price-card h3{ font-size:1.3rem; margin-bottom:.3em }
.price-for{ font-size:.86rem; color:var(--text-tertiary); min-height:2.6em }
.price-amount{
  margin:1.2rem 0 1.6rem; font-family:var(--display-en); font-size:2.2rem; color:var(--text-primary);
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap;
}
.price-amount span:last-child{ font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--text-tertiary) }
.price-features{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:2rem; flex:1 }
.price-features li{
  display:flex; align-items:flex-start; gap:.7em; font-size:.92rem; color:var(--text-secondary);
}
.price-features li::before{
  content:"✓"; flex:none; width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--accent-dim); color:var(--accent); font-size:.72rem;
  display:flex; align-items:center; justify-content:center; margin-top:.1em;
}
.price-cta{ width:100%; margin-top:auto }

.price-card--featured{
  background:linear-gradient(165deg,#241a10,#120d07); border-color:var(--accent-muted);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
@media (min-width:900px){ .price-card--featured{ transform:translateY(-1rem) } .price-card--featured:hover{ transform:translateY(-1.4rem) } }
.price-badge{
  position:absolute; top:-.9rem; inset-inline-start:2rem;
  background:var(--accent); color:#17130c; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  padding:.35em .9em; border-radius:2em; margin:0;
}

.price-note{ text-align:center; margin-top:2.5rem; font-size:.92rem }
.price-note a{ color:var(--accent); text-decoration:underline; text-underline-offset:.2em }

/* ---------- showcase card ---------- */
.showcase-card{
  position:relative; overflow:hidden; border-radius:1.75rem;
  background:linear-gradient(150deg, #241a10 0%, #100c07 100%);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.85),
    inset 0 1px 1px rgba(255,255,255,.08),
    inset 0 -2px 6px rgba(0,0,0,.6);
  padding:3rem 1.6rem;
}
@media (min-width:820px){ .showcase-card{ padding:4.5rem 3.5rem } }

.showcase-sheen{
  position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  background:radial-gradient(700px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.07) 0%, transparent 45%);
  mix-blend-mode:screen; opacity:0; transition:opacity .4s var(--ease-out);
}
.showcase-card:hover .showcase-sheen{ opacity:1 }

.showcase-grid{
  position:relative; z-index:1; display:grid; gap:2.5rem;
  grid-template-columns:1fr; align-items:center; text-align:center;
}
@media (min-width:1020px){
  .showcase-grid{ grid-template-columns:.85fr 1.3fr .5fr; text-align:start; gap:2rem }
}

.showcase-text h3{ font-size:clamp(1.5rem,2.6vw,2rem); color:var(--text-primary) }
.showcase-text p{ margin-inline:auto; font-size:.98rem }
@media (min-width:1020px){ .showcase-text p{ margin-inline:0 } }

.showcase-mockup-wrap{ position:relative; display:flex; justify-content:center; perspective:1400px }

.laptop-mockup{
  width:min(100%,480px); transform-style:preserve-3d; will-change:transform;
  transition:transform .15s var(--ease-out);
}
.laptop-screen{
  position:relative; aspect-ratio:16/10.4; border-radius:.9rem .9rem .3rem .3rem; overflow:hidden;
  background:#0c0906; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), inset 0 0 0 6px #17110a;
}
.browser-chrome{
  position:absolute; top:0; inset-inline:0; height:1.8rem; z-index:2;
  display:flex; align-items:center; gap:.35em; padding-inline:.8em;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.browser-chrome .dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--accent-muted) }
.browser-chrome .addr{
  margin-inline-start:.6em; font-family:var(--mono); font-size:.62rem; color:var(--text-tertiary);
  background:rgba(255,255,255,.04); border-radius:1em; padding:.2em .8em;
}
.mock-page{ width:100%; height:100%; object-fit:cover; object-position:center 25%; margin-top:1.8rem; opacity:.92 }
.laptop-base{
  height:.7rem; margin-inline:2%; border-radius:0 0 .6rem .6rem;
  background:linear-gradient(180deg, #2a1f13, #120d08);
  box-shadow:0 10px 24px -6px rgba(0,0,0,.7);
}
.laptop-base::after{
  content:""; display:block; width:18%; height:100%; margin-inline:auto;
  background:rgba(0,0,0,.4); border-radius:0 0 .4rem .4rem;
}

.float-badge{
  position:absolute; display:flex; align-items:center; gap:.6em;
  padding:.7em 1.1em; border-radius:1rem; z-index:3;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.01));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -12px rgba(0,0,0,.7);
  font-size:.82rem; color:var(--text-primary); white-space:nowrap;
  animation:badgeFloat 5s ease-in-out infinite;
}
.float-badge .emoji{ font-size:1.1em }
.badge-1{ top:-8%; inset-inline-start:-6%; animation-delay:-1.5s }
.badge-2{ bottom:-6%; inset-inline-end:-6%; animation-delay:-3.6s }
@keyframes badgeFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
body.paused .float-badge{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .float-badge{ animation:none } }
@media (max-width:560px){
  .badge-1{ top:-1.6rem; inset-inline-start:0; font-size:.68rem; padding:.5em .75em }
  .badge-2{ bottom:-1.6rem; inset-inline-end:0; font-size:.68rem; padding:.5em .75em }
}

.showcase-brand{ display:none }
@media (min-width:1020px){
  .showcase-brand{
    display:flex; align-items:center; justify-content:center;
    writing-mode:vertical-rl; text-orientation:mixed; justify-self:end;
  }
  .showcase-brand span{
    font-family:var(--display-en); font-weight:600; font-size:2.4rem; letter-spacing:.04em;
    background:linear-gradient(180deg, #f3d998 0%, #c9a24b 55%, #8a5a2b 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    transform:translateZ(0);
  }
}

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line) }
.faq-item{ border-bottom:1px solid var(--line) }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.6rem 0; text-align:start; font-size:1.05rem; color:var(--text-primary);
}
.faq-q .plus{ flex:none; width:1.4rem; height:1.4rem; position:relative }
.faq-q .plus::before,.faq-q .plus::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px;
  transition:transform var(--t-fast) var(--ease-out);
}
.faq-q .plus::before{ inset-inline:.1rem; top:.65rem; height:2px }
.faq-q .plus::after{ inset-block:.1rem; inset-inline-start:.65rem; width:2px }
.faq-item[open] .plus::after{ transform:rotate(90deg); opacity:0 }
.faq-a{ padding-bottom:1.6rem; margin:0; max-width:56ch }
.faq-item summary{ cursor:pointer; list-style:none }
.faq-item summary::-webkit-details-marker{ display:none }

/* ---------- contact ---------- */
.contact-grid{ display:grid; gap:3rem; grid-template-columns:1fr }
@media (min-width:920px){ .contact-grid{ grid-template-columns:.85fr 1.15fr } }
.contact-info h2{ font-size:clamp(1.9rem,3.4vw,2.6rem) }
.contact-detail{ display:flex; align-items:center; gap:.8em; margin-block:1.2em; color:var(--text-secondary) }
.contact-detail svg{ width:1.2rem; height:1.2rem; color:var(--accent); flex:none }
.contact-detail a{ transition:color var(--t-fast) }
.contact-detail a:hover{ color:var(--accent) }

form{ display:grid; gap:1.3rem }
.field{ display:grid; gap:.5em }
.field input, .field select, .field textarea{
  background:var(--panel); border:1px solid var(--line-strong); border-radius:.6rem;
  padding:.9em 1em; color:var(--text-primary); font-family:var(--body-ar); font-size:.98rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
html[lang="en"] .field input, html[lang="en"] .field select, html[lang="en"] .field textarea{ font-family:var(--body-en) }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);
}
.field textarea{ resize:vertical; min-height:7rem }
.form-row{ display:grid; gap:1.3rem; grid-template-columns:1fr }
@media (min-width:600px){ .form-row{ grid-template-columns:1fr 1fr } }
.form-msg{
  font-family:var(--mono); font-size:.82rem; color:var(--accent); min-height:1.4em;
  opacity:0; transform:translateY(6px); transition:all var(--t-fast) var(--ease-out);
}
.form-msg.show{ opacity:1; transform:none }

/* ---------- footer ---------- */
.hover-footer{
  position:relative; overflow:hidden; margin:1.5rem;
  border-radius:1.5rem; border:1px solid var(--line);
  background:var(--canvas-2);
}
@media (min-width:820px){ .hover-footer{ margin:2rem } }

.footer-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(125% 125% at 50% 0%, rgba(201,162,75,.16) 0%, transparent 55%);
}

.footer-top{ position:relative; z-index:1; padding-block:4rem 2.5rem }

.footer-grid{
  display:grid; gap:2.5rem; grid-template-columns:1fr; padding-bottom:2.5rem;
}
@media (min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1020px){ .footer-grid{ grid-template-columns:1.4fr .8fr .8fr 1fr } }

.footer-about .footer-brand{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--display-ar); font-size:1.6rem; margin:0 0 .7em; color:var(--text-primary);
}
html[lang="en"] .footer-about .footer-brand{ font-family:var(--display-en) }
.footer-about .footer-brand svg{ width:1.5em; height:1.5em }
.footer-disclosure{ max-width:28rem; font-size:.9rem; color:var(--text-secondary); margin:0 }

.footer-col h4{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-primary); font-weight:400; margin-bottom:1.2em;
}
.footer-links{ display:flex; flex-direction:column; gap:.85em }
.footer-links a{ color:var(--text-secondary); font-size:.94rem; transition:color var(--t-fast) }
.footer-links a:hover{ color:var(--accent) }
.pulse-item{ position:relative; display:inline-flex; align-items:center; gap:.5em }
.pulse-dot{
  width:.4rem; height:.4rem; border-radius:50%; background:var(--accent);
  animation:pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:.35; transform:scale(1) } 50%{ opacity:1; transform:scale(1.3) } }
body.paused .pulse-dot{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .pulse-dot{ animation:none; opacity:.8 } }

.footer-contact{ display:flex; flex-direction:column; gap:1em }
.footer-contact li{ display:flex; align-items:center; gap:.7em; color:var(--text-secondary); font-size:.94rem }
.footer-contact svg{ width:1.1rem; height:1.1rem; color:var(--accent); flex:none }
.footer-contact a{ color:inherit; transition:color var(--t-fast) }
.footer-contact a:hover{ color:var(--accent) }

.footer-bottom{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem;
  padding-top:2rem;
}
.footer-social{ display:flex; gap:1rem; order:1 }
.footer-social a{
  display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border:1px solid var(--line-strong); border-radius:50%; color:var(--text-secondary);
  transition:all var(--t-fast) var(--ease-out);
}
.footer-social a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px) }
.footer-social svg{ width:1rem; height:1rem }
.footer-copyright{
  order:3; width:100%; font-family:var(--mono); font-size:.74rem; color:var(--text-tertiary); margin:0;
}
@media (min-width:820px){ .footer-copyright{ order:2; width:auto } }
.footer-ai-note{
  order:2; width:100%; font-size:.78rem; color:var(--text-tertiary); margin:0; max-width:26rem;
}
@media (min-width:820px){ .footer-ai-note{ order:3; text-align:end } }

/* big mouse-reactive wordmark */
.footer-hero-text{
  position:relative; z-index:1; height:clamp(7rem,22vw,14rem);
  margin-top:-1rem;
}
#footer-hover-svg{ width:100%; height:100%; display:block; -webkit-user-select:none; user-select:none }
.fht-base, .fht-draw, .fht-reveal{
  font-family:var(--display-en); font-weight:600; font-size:9.5rem;
  fill:none; stroke-width:1;
}
.fht-base{ stroke:var(--line-strong); opacity:.5 }
.fht-draw{
  stroke:var(--accent-muted);
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:fhtDraw 2.6s var(--ease-out) .2s forwards;
}
@keyframes fhtDraw{ to{ stroke-dashoffset:0 } }
.fht-reveal{ stroke:url(#footerTextGradient); opacity:0; transition:opacity .3s var(--ease-out) }
.footer-hero-text.hovering .fht-reveal{ opacity:1 }
@media (prefers-reduced-motion:reduce){
  .fht-draw{ animation:none; stroke-dashoffset:0 }
}
@media (max-width:640px){ .footer-hero-text{ display:none } }

/* touch targets */
@media (pointer:coarse){
  a, button, summary{ min-height:auto }
  .footer-links a{ padding-block:.3em }
}

/* utility: baseline alignment for icon rows */
.row-baseline{ display:flex; align-items:baseline; gap:.6em }