/* ============================================================
   DODO STUDIO · V4 — body sections (dark, minimal, editorial)
   ============================================================ */

section{ position:relative; }
.sec{ padding-block: clamp(90px, 12vh, 150px); background: var(--bg); }
.sec + .sec{ border-top: 1px solid var(--hair); }

.sec-head{ display:grid; gap: 26px; margin-bottom: clamp(48px, 7vh, 84px); }
.sec-head .display{ max-width: 20ch; }
.sec-head.split{
  grid-template-columns: 1fr auto; align-items:end;
}
.sec-head .idx{
  font-family: var(--font-mono); font-size: 13px; letter-spacing:.2em;
  color: var(--tx-dim);
}

/* ============================================================
   ABOUT — panel + copy
   ============================================================ */
.about-grid{
  display:grid; grid-template-columns: minmax(320px, 460px) 1fr;
  gap: clamp(40px, 6vw, 96px); align-items:center;
}

.about-panel{
  position:relative; aspect-ratio: 4 / 4.6;
  background: var(--red);
  overflow:hidden;
  border-radius: 44px 150px 44px 44px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(24px, 3vw, 40px);
}
[dir="rtl"] .about-panel{ border-radius: 150px 44px 44px 44px; }
.about-panel .ring{
  position:absolute; width: 72%; aspect-ratio:1; border-radius:50%;
  border: 1.5px dashed rgba(255,255,255,.5);
  top: -18%; inset-inline-end: -22%;
  animation: ringSpin 46s linear infinite;
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .about-panel .ring{ animation:none; } }
.about-panel .disc{
  position:absolute; width: 34%; aspect-ratio:1; border-radius:50%;
  background: var(--navy-900);
  bottom: 26%; inset-inline-start: -12%;
  opacity:.9;
}
.about-panel .big{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(72px, 8vw, 130px); line-height:.9; letter-spacing:-.04em;
  color:#fff; direction:ltr; text-align:start;
  position:relative;
}
.about-panel .cap{
  font-family: var(--font-mono); font-size: 12px; letter-spacing:.22em; text-transform:uppercase;
  color: rgba(255,255,255,.85); margin-top: 18px; position:relative;
}
.about-panel .bird{
  position:absolute; top: clamp(20px, 3vw, 36px); inset-inline-start: clamp(20px, 3vw, 36px);
  width: clamp(72px, 7vw, 110px);
}

.about-copy .display{ margin-top: 26px; }
.about-copy .sub{ margin-top: 26px; }
.about-lines{ margin-top: 8px; display:grid; }
.about-line{
  display:flex; gap: 18px; align-items:baseline;
  padding-block: 20px;
  font-size: clamp(16px, 1.35vw, 19px); line-height:1.7; color: var(--tx-mut);
}
.about-line + .about-line{ border-top:1px solid var(--hair); }
.about-line b{ color:#fff; font-weight:700; }
.about-line .n{
  font-family: var(--font-mono); font-size:12px; color: var(--mustard); flex:none;
  letter-spacing:.1em;
}

/* ============================================================
   SERVICES — hairline card grid over ocean depth
   ============================================================ */
#services{ isolation: isolate; }
#services::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(11,24,52,.96), rgba(11,24,52,.55) 46%, rgba(11,24,52,.97)),
    url("../assets/ocean.jpg") center / cover no-repeat;
  opacity: .22;
}
#services > .wrap{ position:relative; z-index:1; }

/* white line-fish drifting through the section */
.fish-lane{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.fish{ position:absolute; left:0; top:16%; animation: swim 52s linear infinite; opacity:.28; }
.fish svg{ width:56px; height:auto; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; animation: bob 5s ease-in-out infinite alternate; }
.fish.f2{ top:74%; animation-duration: 70s; animation-delay:-34s; opacity:.16; }
.fish.f2 svg{ width:34px; animation-duration: 4s; }
@keyframes swim{ from{ transform: translateX(-160px); } to{ transform: translateX(calc(100vw + 160px)); } }
@keyframes bob{ from{ transform: translateY(-9px) rotate(-2deg); } to{ transform: translateY(9px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce){ .fish-lane{ display:none; } }

.svc-grid{
  display:grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--hair);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(8,16,38,.44);
  backdrop-filter: blur(2px);
}
.svc-card{
  grid-column: span 2;
  border-inline-end: 1px solid var(--hair);
  padding: clamp(26px, 2.6vw, 40px);
  min-height: 320px;
  display:grid; grid-template-rows: auto 1fr auto auto; gap: 16px;
  position:relative; overflow:hidden;
  transition: background .35s var(--ease);
}
.svc-card > *{ position:relative; z-index:1; }
.svc-card:nth-child(3){ border-inline-end: 0; }
.svc-card:nth-child(4), .svc-card:nth-child(5){ border-top: 1px solid var(--hair); grid-column: span 3; }
.svc-card:nth-child(5){ border-inline-end: 0; }

.svc-top{ display:flex; align-items:center; justify-content:space-between; }
.svc-num{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.18em; color: var(--tx-dim); transition: color .3s; }
.svc-ic{
  width: 52px; height: 52px; border:1px solid var(--hair-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.svc-ic svg{ width:21px; height:21px; color:#fff; transition: color .35s; }
.svc-card h3{
  font-size: clamp(21px, 1.9vw, 26px); font-weight:800; letter-spacing:-.01em;
  align-self:end;
}
.svc-card p{ font-size: 15.5px; line-height: 1.7; color: var(--tx-mut); max-width: 40ch; min-height: 3.4em; }
.svc-card::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
[dir="rtl"] .svc-card::after{ transform-origin: 100% 50%; }
.svc-card:hover{ background: rgba(255,255,255,.05); }
.svc-card:hover::after{ transform: scaleX(1); }
.svc-card:hover .svc-ic{ background: #fff; border-color: #fff; transform: rotate(-8deg) scale(1.08); }
.svc-card:hover .svc-ic svg{ color: var(--navy-900); }
.svc-card:hover .svc-num{ color: var(--red); }
.svc-card:nth-child(2n):hover .svc-num{ color: var(--mustard); }
.svc-card:nth-child(2n)::after{ background: var(--mustard); }

/* liquid goo blob — morphs behind the icon on hover */
.svc-goo{
  position:absolute; inset-inline-end: -70px; top: -70px;
  width: 280px; height: 280px;
  filter: url(#gooFilter);
  opacity: 0; transform: scale(.7);
  transform-origin: 70% 30%;
  transition: opacity .5s var(--ease), transform .65s var(--ease);
  pointer-events:none;
  z-index:0;
}
[dir="rtl"] .svc-goo{ transform-origin: 30% 30%; }
.svc-card:hover .svc-goo{ opacity: 1; transform: none; }
.svc-goo i{
  position:absolute; border-radius:50%;
  background: var(--red);
  animation-play-state: paused;
}
.svc-card:nth-child(2n) .svc-goo i{ background: var(--mustard); }
.svc-card:hover .svc-goo i{ animation-play-state: running; }
.svc-goo i:nth-child(1){ width:130px; height:130px; left:75px; top:75px; animation: goo1 2.6s ease-in-out infinite alternate; }
.svc-goo i:nth-child(2){ width:74px; height:74px; left:40px; top:130px; animation: goo2 3.1s ease-in-out infinite alternate; }
.svc-goo i:nth-child(3){ width:56px; height:56px; left:160px; top:60px; animation: goo3 2.2s ease-in-out infinite alternate; }
.svc-goo i:nth-child(4){ width:40px; height:40px; left:120px; top:170px; animation: goo4 2.9s ease-in-out infinite alternate; }
@keyframes goo1{ to{ transform: translate(-30px, 26px) scale(1.18); } }
@keyframes goo2{ to{ transform: translate(44px, -34px) scale(1.3); } }
@keyframes goo3{ to{ transform: translate(-52px, 40px) scale(1.45); } }
@keyframes goo4{ to{ transform: translate(36px, -48px) scale(1.6); } }
@media (prefers-reduced-motion: reduce){
  .svc-goo{ display:none; }
}

/* ============================================================
   EXAMPLES — rail / demo / copy
   ============================================================ */
.ex-layout{
  display:grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}
.ex-rail{ display:grid; position:sticky; top: 120px; }
.ex-rail button{
  display:flex; align-items:baseline; gap: 14px;
  padding-block: 18px; text-align:start;
  border-top: 1px solid var(--hair);
  font-family: var(--font-body); font-weight:700; font-size: 16.5px;
  color: var(--tx-dim);
  transition: color .3s var(--ease), padding .3s var(--ease);
  position:relative;
}
.ex-rail button:last-child{ border-bottom: 1px solid var(--hair); }
.ex-rail button .n{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.12em; }
.ex-rail button::before{
  content:""; position:absolute; inset-inline-start:0; top:-1px;
  height: 2px; width: 100%;
  background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
[dir="rtl"] .ex-rail button::before{ transform-origin: 100% 50%; }
.ex-rail button:hover{ color: var(--tx-mut); }
.ex-rail button.on{ color: #fff; font-weight: 900; }
.ex-rail button.on .n{ color: var(--red); }
.ex-rail button.on::before{ transform: scaleX(1); }

.ex-panels{ display:grid; }
.ex-panel{ grid-area: 1 / 1; opacity:0; visibility:hidden; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.ex-panel.on{ opacity:1; visibility:visible; transform:none; transition: opacity .45s var(--ease) .08s, transform .45s var(--ease) .08s, visibility 0s; }

.ex-copy{ display:grid; align-content:start; gap: 18px; }
.ex-copy .k{ font-family: var(--font-mono); font-size: 12px; letter-spacing:.2em; color: var(--mustard); text-transform:uppercase; }
.ex-copy h3{ font-size: clamp(20px, 1.8vw, 27px); font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.ex-copy p{ font-size: 16px; line-height: 1.8; color: var(--tx-mut); }

/* --- demo cards (shared) --- */
.demo{
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 24px;
  overflow:hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.5);
}
.demo-bar{
  display:flex; align-items:center; gap: 7px;
  padding: 13px 18px; border-bottom: 1px solid var(--hair);
}
.demo-bar i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.demo-bar i:first-child{ background: var(--red); }
.demo-bar .ttl{
  margin-inline-start:auto;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.14em; color: var(--tx-dim);
}
.demo-body{ padding: clamp(20px, 2.2vw, 30px); display:grid; gap: 16px; }

/* cms */
.cms-prod{ display:flex; align-items:center; gap: 14px; border:1px solid var(--hair); padding: 14px; border-radius: 18px; }
.cms-thumb{ width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--navy-500), var(--navy-800)); flex:none; }
.cms-name{ font-weight: 700; font-size: 14.5px; }
.cms-price{ display:flex; gap: 10px; align-items:center; margin-top: 5px; font-size: 13.5px; color: var(--tx-mut); }
.cms-price s{ opacity:.55; }
.cms-price b{ color: var(--mustard); font-size: 15px; }
.cms-badge{ background: var(--red); color:#fff; font-size: 11px; font-weight:700; padding: 2px 10px; border-radius: 999px; }
.cms-live{ margin-inline-start:auto; display:flex; align-items:center; gap:7px; font-size: 12px; color: #6BE3A2; }
.cms-live i{ width: 7px; height: 7px; border-radius: 50%; background: #2ECC80; animation: pulse 1.8s infinite; }
.cms-btn{
  background: var(--red); color:#fff; font-weight: 700; font-size: 14.5px;
  padding: 14px; border-radius: 999px; text-align:center;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* whatsapp */
.wa-head{ display:flex; align-items:center; gap: 12px; padding: 13px 18px; border-bottom:1px solid var(--hair); }
.wa-av{ width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--fuchsia-400), var(--fuchsia-700)); }
.wa-meta b{ display:block; font-size: 14px; }
.wa-meta span{ font-size: 11.5px; color: #6BE3A2; }
.wa-body{ padding: clamp(20px, 2.2vw, 28px); display:grid; gap: 11px; }
.msg{ max-width: 82%; padding: 11px 16px; border-radius: 18px; font-size: 14px; line-height: 1.55; }
.msg.in{ background: rgba(255,255,255,.07); justify-self: start; border-start-start-radius: 5px; }
.msg.out{ background: var(--navy-600); justify-self: end; border-start-end-radius: 5px; }
.wa-confirm{
  display:flex; align-items:center; gap: 10px; justify-self: end;
  background: rgba(46,204,128,.12); border: 1px solid rgba(46,204,128,.4);
  color: #6BE3A2; font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px;
}
.wa-confirm svg{ width: 16px; height: 16px; }

/* app */
.app-row{ display:grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items:center; padding-block: 4px; }
.app-row .lbl{ font-size: 14px; font-weight: 600; }
.app-row .val{ font-family: var(--font-mono); font-size: 14px; color: var(--tx-mut); }
.app-row .low{ font-size: 11.5px; font-weight: 700; color: var(--mustard); border: 1px solid rgba(240,168,0,.45); padding: 3px 11px; border-radius: 999px; }
.app-bar{ grid-column: 1 / -1; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow:hidden; }
.app-bar i{ display:block; height: 100%; border-radius: 3px; background: var(--navy-400); width: var(--w, 50%); }
.app-bar.hot i{ background: var(--red); }
.app-steps{ display:flex; align-items:center; gap: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; color: var(--tx-mut); }
.app-steps .st{ display:flex; align-items:center; gap: 7px; }
.app-steps .st i{ width: 7px; height: 7px; border-radius:50%; background: var(--mustard); }
.app-steps .st:first-child i{ background: var(--red); }
.app-steps .st:last-child i{ background: var(--navy-400); }
.app-steps .sep{ opacity:.4; }

/* dash */
.dash-kpis{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kpi{ border: 1px solid var(--hair); border-radius: 16px; padding: 16px; display:grid; gap: 6px; }
.kpi .lbl{ font-size: 12px; color: var(--tx-mut); }
.kpi b{ font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing:-.02em; }
.kpi .tr{ font-family: var(--font-mono); font-size: 11.5px; color: #6BE3A2; direction:ltr; text-align:start; }
.dash-chart{ border: 1px solid var(--hair); border-radius: 16px; padding: 16px; }
.ch-head{ display:flex; justify-content:space-between; align-items:center; font-size: 12px; color: var(--tx-mut); margin-bottom: 14px; }
.ch-live{ display:flex; align-items:center; gap: 6px; color:#6BE3A2; font-size: 11px; }
.ch-live i{ width: 6px; height: 6px; border-radius:50%; background:#2ECC80; animation: pulse 1.8s infinite; }
.ch-bars{ display:flex; align-items:flex-end; gap: 8px; height: 92px; direction:ltr; }
.ch-bars i{ flex:1; background: var(--navy-500); border-radius: 2px 2px 0 0; height: calc(var(--h) * 100%); transition: height 1s var(--ease); }
.ch-bars i.today{ background: var(--red); }

/* ============================================================
   DEMO USAGE LOOPS — each example replays its story on repeat
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* 01 CMS — publish flow: button press → badge pops → goes live */
  .ex-panel.on .cms-btn{ animation: cmsPress 7s var(--ease) infinite; }
  .ex-panel.on .cms-badge{ animation: cmsPop 7s var(--ease) infinite both; }
  .ex-panel.on .cms-live{ animation: cmsLive 7s var(--ease) infinite both; }

  /* 02 WhatsApp — conversation replays message by message */
  .ex-panel.on .wa-body .msg:nth-child(1){ animation: waSeq1 9s var(--ease) infinite both; }
  .ex-panel.on .wa-body .msg:nth-child(2){ animation: waSeq2 9s var(--ease) infinite both; }
  .ex-panel.on .wa-body .msg:nth-child(3){ animation: waSeq3 9s var(--ease) infinite both; }
  .ex-panel.on .wa-body .wa-confirm{ animation: waSeq4 9s var(--ease) infinite both; }

  /* 03 App — inventory bars fill, pipeline steps light up in order */
  .ex-panel.on .app-bar i{ animation: appFill 7s var(--ease) infinite both; }
  .ex-panel.on .app-row:nth-of-type(2) .app-bar i{ animation-delay: .3s; }
  .ex-panel.on .app-row:nth-of-type(3) .app-bar i{ animation-delay: .6s; }
  .ex-panel.on .app-steps .st:nth-of-type(1) i{ animation: stepPulse 7s var(--ease) infinite; }
  .ex-panel.on .app-steps .st:nth-of-type(2) i{ animation: stepPulse 7s var(--ease) .6s infinite; }
  .ex-panel.on .app-steps .st:nth-of-type(3) i{ animation: stepPulse 7s var(--ease) 1.2s infinite; }

  /* 04 Dashboard — chart bars regrow, today glows, trends pop */
  .ex-panel.on .ch-bars i{ transform-origin: bottom; animation: chGrow 7s var(--ease) infinite both; }
  .ex-panel.on .ch-bars i:nth-child(2){ animation-delay: .1s; }
  .ex-panel.on .ch-bars i:nth-child(3){ animation-delay: .2s; }
  .ex-panel.on .ch-bars i:nth-child(4){ animation-delay: .3s; }
  .ex-panel.on .ch-bars i:nth-child(5){ animation-delay: .4s; }
  .ex-panel.on .ch-bars i:nth-child(6){ animation-delay: .5s; }
  .ex-panel.on .ch-bars i:nth-child(7){ animation-delay: .6s; }
  .ex-panel.on .ch-bars i.today{ animation: chGrow 7s var(--ease) .6s infinite both, todayGlow 2.4s ease-in-out infinite; }
  .ex-panel.on .kpi .tr{ display:inline-block; animation: trPop 7s var(--ease) infinite; }
  .ex-panel.on .kpi:nth-child(2) .tr{ animation-delay: .35s; }
}

@keyframes cmsPress{
  0%, 38%{ transform: none; filter: none; }
  42%, 46%{ transform: scale(.95); filter: brightness(.8); }
  52%, 100%{ transform: none; filter: none; }
}
@keyframes cmsPop{
  0%, 48%{ transform: scale(0); opacity: 0; }
  56%{ transform: scale(1.2); opacity: 1; }
  62%, 100%{ transform: scale(1); opacity: 1; }
}
@keyframes cmsLive{
  0%, 54%{ opacity: .3; }
  62%, 100%{ opacity: 1; }
}
@keyframes waSeq1{
  0%, 4%{ opacity: 0; transform: translateY(12px) scale(.95); }
  10%, 92%{ opacity: 1; transform: none; }
  98%, 100%{ opacity: 0; }
}
@keyframes waSeq2{
  0%, 20%{ opacity: 0; transform: translateY(12px) scale(.95); }
  26%, 92%{ opacity: 1; transform: none; }
  98%, 100%{ opacity: 0; }
}
@keyframes waSeq3{
  0%, 40%{ opacity: 0; transform: translateY(12px) scale(.95); }
  46%, 92%{ opacity: 1; transform: none; }
  98%, 100%{ opacity: 0; }
}
@keyframes waSeq4{
  0%, 58%{ opacity: 0; transform: translateY(12px) scale(.95); }
  64%, 92%{ opacity: 1; transform: none; }
  98%, 100%{ opacity: 0; }
}
@keyframes appFill{
  0%, 6%{ width: 0; }
  40%, 100%{ width: var(--w, 50%); }
}
@keyframes stepPulse{
  0%, 12%{ transform: none; }
  18%{ transform: scale(1.7); }
  26%, 100%{ transform: none; }
}
@keyframes chGrow{
  0%, 5%{ transform: scaleY(.06); }
  45%, 100%{ transform: scaleY(1); }
}
@keyframes todayGlow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,0,96,0); }
  50%{ box-shadow: 0 0 16px 2px rgba(255,0,96,.55); }
}
@keyframes trPop{
  0%, 46%{ transform: none; }
  52%{ transform: scale(1.3); }
  58%, 100%{ transform: none; }
}

/* ============================================================
   PROCESS — numbered hairline rows
   ============================================================ */
.proc-rows{ border-top: 1px solid var(--hair); }
.proc-row{
  display:grid;
  grid-template-columns: 110px minmax(200px, 340px) 1fr auto;
  gap: clamp(20px, 3vw, 56px);
  align-items:center;
  padding-block: clamp(28px, 3.6vh, 44px);
  border-bottom: 1px solid var(--hair);
  transition: background .3s var(--ease);
  position:relative;
}
.proc-row .num{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 2.8vw, 42px); letter-spacing:-.02em;
  color: transparent; -webkit-text-stroke: 1.2px var(--tx-dim);
  transition: color .35s var(--ease), -webkit-text-stroke-color .35s var(--ease);
  direction:ltr; text-align:start;
}
.proc-row h3{ font-size: clamp(18px, 1.7vw, 26px); font-weight: 800; letter-spacing:-.01em; }
.proc-row p{ font-size: 15.5px; line-height: 1.7; color: var(--tx-mut); max-width: 46ch; }
.proc-row .go{
  width: 46px; height: 46px; border: 1px solid var(--hair-2); border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--tx-dim);
  transition: all .35s var(--ease);
}
.proc-row .go svg{ width: 18px; height: 18px; }
[dir="ltr"] .proc-row .go svg{ transform: scaleX(-1); }
.proc-row{ transition: background .3s var(--ease); }
.proc-row h3, .proc-row p{ transition: color .3s var(--ease), transform .5s ease-in-out; }
.proc-row .num{ transition: color .3s var(--ease), -webkit-text-stroke-color .3s var(--ease), transform .5s ease-in-out; }
.proc-row .go{ transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease); }

/* HOVER — white background sweeps in (moved here from the entrance) */
.proc-row:hover{ background: #fff; }
.proc-row:hover h3{ color: var(--navy-900); }
.proc-row:hover p{ color: var(--navy-700); }
.proc-row:hover .num{ color: var(--navy-900); -webkit-text-stroke-color: var(--navy-900); }
.proc-row:hover .go{ background: var(--navy-900); color:#fff; border-color: var(--navy-900); transform: rotate(-45deg); }

/* ENTRANCE — chronological 10% scale-up of the stage elements, ease-in-out,
   plays once. No background flash; numbers keep their accent color as a trace.
   Scales the inner elements (not the row) to avoid the reveal's transform. */
.proc-row.lit{ z-index: 2; }
.proc-row.lit .num, .proc-row.lit h3, .proc-row.lit p{ transform: scale(1.1); }
.proc-row:nth-child(1).lit h3{ color: var(--red); }
.proc-row:nth-child(2).lit h3{ color: var(--mustard); }
.proc-row:nth-child(3).lit h3{ color: var(--navy-400); }
.proc-row:nth-child(4).lit h3{ color: var(--red); }
.proc-row:nth-child(1).lit .num, .proc-row:nth-child(1).lit-done .num{ color: var(--red); -webkit-text-stroke-color: var(--red); }
.proc-row:nth-child(2).lit .num, .proc-row:nth-child(2).lit-done .num{ color: var(--mustard); -webkit-text-stroke-color: var(--mustard); }
.proc-row:nth-child(3).lit .num, .proc-row:nth-child(3).lit-done .num{ color: var(--navy-400); -webkit-text-stroke-color: var(--navy-400); }
.proc-row:nth-child(4).lit .num, .proc-row:nth-child(4).lit-done .num{ color: var(--red); -webkit-text-stroke-color: var(--red); }

/* ============================================================
   PROOF — giant stats
   ============================================================ */
.proof-grid{
  display:grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 100px); align-items:center;
}
.proof-copy .display{ margin-top: 26px; }
.proof-copy .sub{ margin-top: 24px; }
.stats{ display:grid; gap: 0; border:1px solid var(--hair); border-radius: 28px; overflow:hidden; }
.stat{
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  padding: clamp(28px, 3.4vw, 44px);
}
.stat + .stat{ border-top: 1px solid var(--hair); }
.stat .val{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 5.5vw, 88px); line-height: .9; letter-spacing: -0.04em;
  direction: ltr;
}
.stat:first-child .val{ color: var(--red); }
.stat:last-child .val{ color: var(--mustard); }
.stat .lbl{ font-size: clamp(15px, 1.3vw, 18px); color: var(--tx-mut); max-width: 18ch; line-height: 1.6; text-align: end; }

/* ============================================================
   FAQ — minimal accordions
   ============================================================ */
.faq-wrap{ max-width: 880px; margin-inline: auto; }
.faq-list{ border-top: 1px solid var(--hair); }
.faq-item{ border-bottom: 1px solid var(--hair); }
.faq-q{
  display:flex; align-items:center; gap: 22px;
  padding-block: 26px;
  cursor:pointer; list-style:none;
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 700;
  transition: color .25s;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q .qn{ font-family: var(--font-mono); font-size: 12px; color: var(--tx-dim); letter-spacing:.12em; flex:none; }
.faq-q .qi{
  margin-inline-start:auto; flex:none;
  width: 34px; height: 34px; border: 1px solid var(--hair-2); border-radius:50%;
  position:relative; transition: all .3s var(--ease);
}
.faq-q .qi::before, .faq-q .qi::after{
  content:""; position:absolute; background: currentColor;
  top:50%; left:50%; translate:-50% -50%;
}
.faq-q .qi::before{ width: 12px; height: 1.5px; }
.faq-q .qi::after{ width: 1.5px; height: 12px; transition: transform .3s var(--ease); }
.faq-item[open] .faq-q{ color: var(--red); }
.faq-item[open] .qi{ border-color: var(--red); color: var(--red); }
.faq-item[open] .qi::after{ transform: translate(-50%,-50%) scaleY(0); translate: 0 0; left:50%; top:50%; }
.faq-a{ padding-block: 0 30px; padding-inline-start: 56px; }
.faq-a p{ font-size: 16px; line-height: 1.85; color: var(--tx-mut); max-width: 62ch; }

/* ============================================================
   CTA BAND — red bookend
   ============================================================ */
.cta{
  background: var(--red);
  padding-block: clamp(90px, 13vh, 170px);
  overflow:hidden; position:relative;
}
.cta .wrap{ display:grid; gap: 40px; justify-items:center; text-align:center; position:relative; }
.cta .mono-top{ color: rgba(255,255,255,.8); }
.cta h2{
  font-weight: 900; line-height: 1;
  font-size: clamp(36px, 5vw, 76px); letter-spacing: -0.02em;
  color: #fff; max-width: 15ch;
}
.cta .btn{ background:#fff; color: var(--red); padding: 20px 44px; font-size: 17px; --btnbg:#fff; }
.cta .btn:hover{ color: var(--navy-900); }
.cta-watermark{
  position:absolute; inset-inline:0; bottom: -0.24em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(90px, 12vw, 220px); line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22);
  text-align:center; white-space:nowrap;
  pointer-events:none; user-select:none;
}

/* ============================================================
   CONTACT — copy + minimal underline form
   ============================================================ */
.contact{ background: var(--bg-deep); }
.contact-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: start;
}
.contact-copy .display{ margin-top: 26px; }
.contact-copy .sub{ margin-top: 26px; }
.contact-points{ margin-top: 42px; display:grid; }
.cpoint{
  display:flex; align-items:center; gap: 16px;
  padding-block: 18px;
  border-top: 1px solid var(--hair);
  font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,.85);
}
.cpoint:last-child{ border-bottom: 1px solid var(--hair); }
.cpoint svg{ width: 18px; height: 18px; color: var(--mustard); flex:none; }
.cpoint:first-child svg{ color: var(--red); }
.contact-direct{ margin-top: 34px; display:grid; gap: 8px; }
.contact-direct a{
  font-family: var(--font-mono); font-size: 14px; letter-spacing:.06em;
  color: var(--tx-mut); direction:ltr; text-align:start; width:max-content;
}
.contact-direct a:hover{ color: #fff; }

.form-side{ position:relative; }
.form-badge{
  display:inline-flex; align-items:center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
  color: #6BE3A2; margin-bottom: 26px;
}
.form-badge i{ width: 8px; height: 8px; border-radius: 50%; background: #2ECC80; animation: pulse 1.8s infinite; }
.form-card{
  display:grid; gap: 26px; position:relative;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--hair-2);
  border-radius: 26px;
  padding: clamp(26px, 3.2vw, 42px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
}
.field{ display:grid; gap: 10px; }
.field label{
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.85);
}
.field label .hint{ opacity:.55; letter-spacing:.08em; }
.field input, .field textarea{
  background: rgba(8,16,38,.55);
  border: 1.5px solid var(--hair-2);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--font-body); font-size: 17px; font-weight: 600; color: #fff;
  transition: border-color .3s, box-shadow .3s;
}
.field textarea{ min-height: 92px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder{ color: var(--tx-dim); font-weight: 400; }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,0,96,.16); }
.field.invalid input, .field.invalid textarea{ border-color: var(--red); }
.field .err{ font-size: 12.5px; color: var(--fuchsia-300); display:none; }
.field.invalid .err{ display:block; }
.form-card .btn{ justify-self: start; }
.form-note{ font-size: 13px; color: var(--tx-dim); margin-top: -14px; }

.form-success{
  position:absolute; inset: 0; background: var(--bg-deep);
  border: 1px solid var(--hair-2); border-radius: 26px;
  padding: clamp(26px, 3.2vw, 42px);
  display:none; flex-direction:column; justify-content:center; gap: 18px;
  z-index: 3;
}
@media (max-width: 560px){
  .form-card .btn{ justify-self: stretch; }
}
.form-card.sent .form-success{ display:flex; }
.form-success h3{ font-size: clamp(28px, 2.6vw, 40px); font-weight: 900; }
.form-success h3 span{ color: var(--red); }
.form-success p{ font-size: 16px; line-height: 1.75; color: var(--tx-mut); max-width: 44ch; }
.form-success .again{
  width:max-content; margin-top: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--tx-mut); border-bottom: 1px solid var(--hair-2); padding-bottom: 4px;
}
.form-success .again:hover{ color:#fff; border-color:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{ background: var(--bg-deep); border-top: 1px solid var(--hair); overflow:hidden; }
.ft-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  padding-block: clamp(60px, 8vh, 90px) clamp(40px, 6vh, 70px);
}
.ft-brand img{ height: 40px; width:auto; }
.ft-brand .tag{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--tx-dim); margin-top: 18px;
}
.ft-col h4{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--tx-dim); margin-bottom: 20px; font-weight: 700;
}
.ft-col a{ display:block; padding-block: 7px; font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,.8); width:max-content; }
.ft-col a:hover{ color: var(--red); }
.ft-col .ltr{ direction:ltr; text-align:start; }
.ft-bottom{
  border-top: 1px solid var(--hair);
  padding-block: 24px;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
}
.ft-bottom .c{ font-size: 13px; color: var(--tx-dim); }
.ft-dots{ display:flex; gap: 7px; }
.ft-dots i{ width: 9px; height: 9px; border-radius:50%; }
.ft-mark{
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(70px, 11vw, 190px); line-height: .78;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.10);
  text-align:center; white-space:nowrap; direction:ltr;
  user-select:none; pointer-events:none;
  transform: translateY(0.16em);
}

/* ============================================================
   RESPONSIVE — body
   ============================================================ */
@media (max-width: 1080px){
  .ex-layout{ grid-template-columns: 1fr; }
  .ex-rail{
    position:static; grid-auto-flow: column; overflow-x:auto; gap: 0 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
    scrollbar-width: none;
  }
  .ex-rail::-webkit-scrollbar{ display:none; }
  /* fade on the overflow side — a visual clue there are more examples */
  [dir="rtl"] .ex-rail{ -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 60px), transparent); }
  [dir="ltr"] .ex-rail{ -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 60px), transparent); }
  .ex-rail button{ border-top-width: 2px; border-bottom: 0 !important; white-space:nowrap; padding: 13px 14px; scroll-snap-align: start; }
  .ex-rail button.on{ background: rgba(255,0,96,.16); border-radius: 12px; }
  .ex-panel{ display:grid; gap: 32px; }
}
@media (max-width: 960px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-panel{ max-width: 460px; aspect-ratio: 4/4.2; }
  .svc-grid{ grid-template-columns: 1fr 1fr; }
  .svc-card, .svc-card:nth-child(4), .svc-card:nth-child(5){ grid-column: span 1; border-top: 0; border-bottom: 1px solid var(--hair); border-inline-end: 1px solid var(--hair); min-height: 240px; }
  .svc-card:nth-child(2n){ border-inline-end: 0; }
  .svc-grid{ border-bottom: 0; }
  .proc-row{ grid-template-columns: 64px 1fr auto; }
  .proc-row p{ grid-column: 2 / -1; }
  .proof-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .ft-grid{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 620px){
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-card{ border-inline-end: 0 !important; }
  .proc-row .go{ display:none; }
  .stat{ flex-direction:column; align-items:flex-start; }
  .stat .lbl{ text-align:start; }
}

/* ============================================================
   MID-CTA sub-line (C6)
   ============================================================ */
.cta-sub{
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7;
  color: rgba(255,255,255,.9); max-width: 42ch;
}

/* ============================================================
   HASHTAGS — replaces the old pill "chips" everywhere they were
   not clickable (about tags, why points, example chips)
   ============================================================ */
.hashtags{ display:flex; flex-wrap:wrap; gap: 12px 22px; margin-top: 26px; }
.hashtags span{
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--red); white-space: nowrap;
}
.hashtags span::before{ content:"#"; opacity:.6; margin-inline-end: 1px; }
.ex-copy .hashtags{ margin-top: 8px; gap: 10px 18px; }

/* ============================================================
   ABOUT · "מי אני" — bold button opens a bottom-up section overlay
   ============================================================ */
.story{ margin-top: 30px; }
.story-toggle{
  display:inline-flex; align-items:center; gap: 12px;
  font-family: var(--font-body); font-weight: 900; font-size: 17px;
  color: #fff; background: var(--red); border: 0;
  border-radius: 999px; padding: 16px 34px;
  box-shadow: 0 14px 30px -14px rgba(255,0,96,.7);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.story-toggle:hover{ background: #E00055; }
.story-toggle:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.story-chev{ width: 18px; height: 18px; transition: transform .35s var(--ease); }
.story-toggle[aria-expanded="true"] .story-chev{ transform: rotate(180deg); }

.about-story{
  position: fixed; inset: 0; z-index: 120;
  background: var(--red); color: #fff;
  display: flex; flex-direction: column; justify-content: safe center;
  padding: clamp(84px, 13vh, 120px) clamp(24px, 6vw, 80px) clamp(40px, 8vh, 80px);
  overflow-y: auto;
  transform: translateY(101%); visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s .5s;
}
.about-story.open{ transform: translateY(0); visibility: visible; transition: transform .5s var(--ease); }
.about-story-inner{ width: 100%; max-width: 780px; margin-inline: auto; }
.about-story-inner h3{
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(30px, 5vw, 54px); line-height: 1.06; letter-spacing: -.02em;
}
.about-story-inner p{
  font-size: clamp(16px, 1.7vw, 21px); line-height: 1.85;
  margin-top: clamp(18px, 3vw, 28px); color: #fff; opacity: .95; max-width: 62ch;
}
.about-story-close{
  position: absolute; top: clamp(20px, 3vw, 34px); inset-inline-end: clamp(20px, 3vw, 40px); z-index: 121;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6); color: #fff; background: rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .3s var(--ease), opacity .3s var(--ease) .15s;
}
.about-story.open .about-story-close{ opacity: 1; pointer-events: auto; }
.about-story-close svg{ width: 20px; height: 20px; }
.about-story-close:hover{ border-color: #fff; transform: rotate(90deg); }
.about-story-close:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
html.story-locked{ overflow: hidden; }

/* ============================================================
   SERVICES · "+" icon + colored overlay over the card
   (overlay color mirrors the card's icon-hover accent: red / mustard)
   ============================================================ */
.card-more{
  position: absolute; z-index: 2;
  inset-block-end: clamp(20px, 2vw, 28px); inset-inline-end: clamp(20px, 2vw, 28px);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hair-2); color: #fff;
  background: rgba(8,16,38,.4);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.card-more svg{ width: 20px; height: 20px; }
.svc-card:hover .card-more{ border-color: #fff; }
.card-more:hover{ transform: rotate(90deg); }
.card-more:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

.svc-overlay{
  position: absolute; inset: 0; z-index: 3;
  background: var(--red); color: #fff;
  padding: clamp(26px, 2.6vw, 40px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  opacity: 0; visibility: hidden; transform: scale(.96);
  transform-origin: 100% 100%;
  transition: opacity .4s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
[dir="ltr"] .svc-overlay{ transform-origin: 0 100%; }
.svc-card:nth-child(2n) .svc-overlay{ background: var(--mustard); color: var(--navy-900); }
.svc-card.card-open .svc-overlay{
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity .4s var(--ease), transform .45s var(--ease), visibility 0s 0s;
}
.svc-overlay-title{ font-family: var(--font-body); font-weight: 800; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.2; }
.svc-overlay-body{ font-size: 15px; line-height: 1.75; opacity: .96; max-width: 42ch; }
.svc-overlay-close{
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid currentColor; color: inherit;
  display:flex; align-items:center; justify-content:center;
  opacity: .82; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.svc-overlay-close svg{ width: 16px; height: 16px; }
.svc-overlay-close:hover{ opacity: 1; transform: rotate(90deg); }

/* ============================================================
   WHY-NOW · brand viz — a habitat ring (pops off the edge, spins) with
   a plant growing from its stroke, diagonally toward the copy
   ============================================================ */
#why{ overflow: hidden; }
.why-grid{
  display:grid; grid-template-columns: 1fr minmax(0, .9fr);
  gap: clamp(36px, 5vw, 80px); align-items:center;
}
.why-viz{ position:relative; min-height: 460px; }

/* big ring — no fill, bold white stroke, dashed so the spin reads;
   pushed ~30% off the section's outer edge, rotating on its own axis */
.why-ring{
  position:absolute; top:50%; inset-inline-end: -32%;
  width: min(560px, 152%); aspect-ratio: 1; border-radius: 50%;
  border: 5px dashed rgba(255,255,255,.92);
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  animation: whyRingSpin 46s linear infinite;
}
@keyframes whyRingSpin{ to{ transform: translateY(-50%) rotate(360deg); } }

/* the plant grows from the ring's stroke, up toward the copy (~45°) */
.why-anim{
  position:absolute; bottom: 15%; inset-inline-end: 22%;
  width: min(235px, 58%); height:auto;
  transform-origin: 50% 100%;
  transform: rotate(40deg);
  color: var(--red);
}
[dir="ltr"] .why-anim{ transform: rotate(-40deg); }
.wa-bud{ fill: var(--mustard); }
.wa-stem{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: waGrow 5.5s var(--ease) infinite; }
.wa-leaf{ transform: scale(0); transform-box: fill-box; animation: waLeaf 5.5s var(--ease) infinite; }
.wa-leaf.l1{ transform-origin: 100% 100%; animation-delay: .7s; }
.wa-leaf.l2{ transform-origin: 0% 100%; animation-delay: 1.15s; }
.wa-leaf.l3{ transform-origin: 100% 100%; animation-delay: 1.6s; }
.wa-bud{ transform: scale(0); transform-box: fill-box; transform-origin: center; animation: waBudPop 5.5s var(--ease) infinite; }
@keyframes waGrow{
  0%{ stroke-dashoffset: 1; opacity: 0; }
  8%{ opacity: 1; }
  46%{ stroke-dashoffset: 0; opacity: 1; }
  84%{ stroke-dashoffset: 0; opacity: 1; }
  95%,100%{ stroke-dashoffset: 0; opacity: 0; }
}
@keyframes waLeaf{
  0%,10%{ transform: scale(0); }
  34%{ transform: scale(1.06); }
  44%,84%{ transform: scale(1); }
  95%,100%{ transform: scale(0); }
}
@keyframes waBudPop{
  0%,50%{ transform: scale(0); }
  62%{ transform: scale(1.15); }
  74%,84%{ transform: scale(1); }
  95%,100%{ transform: scale(0); }
}
@media (max-width: 900px){
  .why-grid{ grid-template-columns: 1fr; }
  .why-viz{ min-height: 240px; margin-top: 6px; }
  .why-ring{ display: none; }
  .why-anim{
    position: relative; bottom: auto; inset-inline-end: auto;
    margin-inline: auto; width: min(170px, 44%);
    transform: none; color: #fff;
  }
  .why-anim .wa-bud{ fill: #fff; }
}
@media (prefers-reduced-motion: reduce){
  .why-ring{ animation: none; }
  .wa-stem{ animation: none; stroke-dashoffset: 0; }
  .wa-leaf, .wa-bud{ animation: none; transform: none; }
}