/* HomsWeb — Flecto system. Monoweight 400. Flat. Cream canvas. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root{
  --forest:#004737;--mint:#56f09f;--mist:#d4ffe8;--cream:#fffbec;--loam:#032019;--sage:#99b5af;--stone:#ccdad7;--bone:#faf2d5;--char:#222;--iris:#8f37ff;
  --muted:#3f5a54;--wa:#25d366;
  --r-card:19px;--r-btn:40px;--r-chip:10px;--r-panel:60px;
  --shadow:rgba(0,0,0,.04) 0 3px 2px 0;
  --max:1200px;--gut:20px;
  --f:"Inter","Plex Arabic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--loam);font-family:var(--f);font-weight:400;font-size:16px;line-height:1.55;font-feature-settings:"tnum" on;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[dir=rtl] body{font-family:"Plex Arabic","Inter",ui-sans-serif,system-ui,sans-serif;line-height:1.75}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-weight:400;margin:0}
p{margin:0 0 1em}
b,strong{font-weight:400}
strong{box-shadow:inset 0 -.42em 0 var(--mist)}
.dark strong{box-shadow:inset 0 -.42em 0 rgba(86,240,159,.25)}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:780px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--mint);color:var(--loam);padding:10px 18px;border-radius:var(--r-btn);z-index:100;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:6px}

/* type scale */
.display{font-size:clamp(40px,7.4vw,74px);line-height:1.02;letter-spacing:-.043em}
.h-lg{font-size:clamp(34px,5.2vw,56px);line-height:1.08;letter-spacing:-.043em}
.h-md{font-size:clamp(28px,3.6vw,36px);line-height:1.15;letter-spacing:-.03em}
.h-sm{font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em}
.sub{font-size:20px;line-height:1.35;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--muted)}
.dark .lead{color:var(--sage)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--forest)}
.dark .eyebrow{color:var(--mint)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
[dir=rtl] .display,[dir=rtl] .h-lg,[dir=rtl] .h-md,[dir=rtl] .h-sm,[dir=rtl] .sub,[dir=rtl] .eyebrow,[dir=rtl] .btn,[dir=rtl] .pill{letter-spacing:0;text-transform:none}
[dir=rtl] .display{line-height:1.2}[dir=rtl] .h-lg{line-height:1.25}[dir=rtl] .h-md{line-height:1.3}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 24px;border-radius:var(--r-btn);font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-mint{background:var(--mint);color:var(--loam)}
.btn-mint:hover{background:#7ff5b7}
.btn-line{border-color:var(--char);color:var(--char);background:transparent}
.btn-line:hover{background:var(--char);color:var(--cream)}
.dark .btn-line{border-color:var(--cream);color:var(--cream)}
.dark .btn-line:hover{background:var(--cream);color:var(--forest)}
.btn-lg{min-height:56px;padding:14px 30px;font-size:17px}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
[dir=rtl] .btn .arr{transform:scaleX(-1)}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.wa-ico{width:20px;height:20px;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--mist);color:var(--forest);border-radius:9999px;padding:6px 14px;font-size:12.5px;letter-spacing:.02em;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s}
button.pill{cursor:pointer}
.pill.off{background:transparent;border-color:var(--stone);color:var(--muted)}
.pill.off:hover{border-color:var(--forest);color:var(--forest)}
.pill.on{background:var(--forest);color:var(--cream)}
.link{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--mint);transition:border-color .2s}
.link:hover{border-color:var(--forest)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,251,236,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.scrolled{border-bottom-color:var(--stone)}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:38px;width:auto}
.nav{display:flex;gap:4px;margin-inline-start:12px}
.nav a{font-size:14.5px;text-decoration:none;padding:8px 12px;border-radius:var(--r-btn);color:var(--char);transition:background .2s}
.nav a:hover{background:var(--bone)}
.nav a[aria-current=page]{background:var(--mist);color:var(--forest)}
.hdr-r{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang{font-size:13px;text-decoration:none;border:1px solid var(--stone);border-radius:var(--r-chip);padding:7px 12px;background:#fff;color:var(--char);transition:border-color .2s}
.lang:hover{border-color:var(--forest)}
.hdr .btn{min-height:40px;padding:8px 18px;font-size:14px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--stone);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:1.5px;background:var(--loam);position:relative;transition:transform .3s var(--ease),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1020px){
  .nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;background:var(--cream);padding:12px var(--gut) 24px;margin:0;border-bottom:1px solid var(--stone);transform:translateY(-12px);opacity:0;visibility:hidden;transition:all .3s var(--ease)}
  .nav a{font-size:20px;padding:12px 8px;border-radius:12px}
  .menu-open .nav{transform:none;opacity:1;visibility:visible}
  .burger{display:inline-flex}
  .hdr .btn-cta-txt{display:none}
}
@media (max-width:420px){.logo img{height:32px}.hdr .wrap{gap:10px}.lang{padding:7px 9px}}

/* sections */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec-sm{padding:clamp(44px,6vw,72px) 0}
.dark{background:var(--forest);color:var(--cream)}
.bone{background:var(--bone)}
.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head .lead{margin-top:16px}
.center{text-align:center;margin-inline:auto}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* cards */
.card{background:#fff;border:1px solid var(--stone);border-radius:var(--r-card);padding:24px;transition:border-color .3s var(--ease),transform .3s var(--ease)}
a.card{text-decoration:none;display:block}
a.card:hover,.card.hov:hover{border-color:var(--forest);transform:translateY(-4px)}
.card h3{font-size:22px;letter-spacing:-.015em;line-height:1.25;margin-bottom:8px;color:var(--forest)}
[dir=rtl] .card h3{letter-spacing:0}
.card p{color:var(--muted);font-size:15px;margin:0}
.card-tint{background:var(--mist);border-color:transparent}
.card-bone{background:var(--bone);border-color:transparent}
.ico{width:44px;height:44px;border-radius:12px;background:var(--mist);display:grid;place-items:center;margin-bottom:18px;color:var(--forest)}
.ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card .more{display:inline-flex;gap:6px;margin-top:16px;font-size:14px;color:var(--forest)}
.card .more .arr{transition:transform .25s var(--ease)}
a.card:hover .more .arr{transform:translateX(4px)}
[dir=rtl] .card .more .arr{transform:scaleX(-1)}
[dir=rtl] a.card:hover .more .arr{transform:scaleX(-1) translateX(4px)}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(64px,10vw,120px) 0 0;text-align:center}
.hero h1{max-width:980px;margin:22px auto 0}
.hero .lead{max-width:640px;margin:22px auto 0;font-size:clamp(16px,1.7vw,19px)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-note{margin-top:18px;font-size:13px;color:var(--sage)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease) forwards}
@keyframes rise{to{transform:none}}
.fade-in{opacity:0;animation:fade .9s var(--ease) forwards}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.skyline{position:relative;margin-top:clamp(40px,6vw,72px);height:clamp(130px,19vw,230px)}
.skyline svg{position:absolute;inset:auto 0 0 0;width:100%;height:100%}
.skyline .ln{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.skyline .win{fill:var(--mint);opacity:0;animation:blink .4s ease forwards}
@keyframes blink{to{opacity:1}}
.pin{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:drop .7s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes drop{0%{opacity:0;transform:translateY(-60px) scale(.6)}100%{opacity:1;transform:none}}
.ring{transform-box:fill-box;transform-origin:center;fill:none;stroke:var(--mint);stroke-width:1.5;opacity:0;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
.deco{position:absolute;pointer-events:none;color:var(--mint)}
.deco svg{fill:none;stroke:currentColor;stroke-width:3}
.deco .blk{fill:var(--mint);stroke:none}
.deco-1{top:56px;left:-30px;width:180px;animation:float 9s ease-in-out infinite}
.deco-2{top:120px;right:-20px;width:160px;animation:float 11s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(3deg)}}
@media (max-width:760px){.deco{opacity:.55}.deco-1{width:110px;top:20px;left:-40px}.deco-2{width:100px;right:-46px;top:60px}}

/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--stone);background:var(--cream);padding:16px 0;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-t{display:inline-flex;gap:10px;animation:marq 38s linear infinite;padding-inline-end:10px}
.marq:hover .marq-t{animation-play-state:paused}
[dir=rtl] .marq-t{animation-name:marqr}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marqr{to{transform:translateX(50%)}}
.marq .pill{font-size:14px;padding:8px 16px;background:#fff;border-color:var(--stone);color:var(--forest)}
.marq .pill i{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block}

/* offers */
.offer{position:relative;padding:32px;border-radius:28px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.offer .tag{align-self:flex-start}
.offer h3{font-size:clamp(28px,3vw,36px);letter-spacing:-.03em;line-height:1.1;color:inherit;margin:0}
[dir=rtl] .offer h3{letter-spacing:0;line-height:1.35}
.offer .price{font-size:clamp(40px,5vw,56px);letter-spacing:-.04em;line-height:1}
.offer .price small{font-size:16px;letter-spacing:0;color:var(--muted);margin-inline-start:6px}
.offer.dark .price small{color:var(--sage)}
.offer ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:9px}
.offer li{position:relative;padding-inline-start:28px;font-size:15px}
.offer li::before{content:"";position:absolute;inset-inline-start:0;top:.32em;width:16px;height:16px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23004737' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.offer.dark li::before{background-color:var(--mint)}
.offer .btn{margin-top:auto;align-self:flex-start}
.offer.light{background:#fff;border:1px solid var(--stone)}
.offer .url{font-size:13.5px;padding:8px 12px;border-radius:var(--r-chip);background:var(--bone);color:var(--forest);align-self:flex-start;direction:ltr}
.offer.dark .url{background:rgba(255,251,236,.08);color:var(--mint)}
.offer .best{font-size:14px;color:var(--muted);border-top:1px solid var(--stone);padding-top:14px;margin-top:4px}
.offer.dark .best{color:var(--sage);border-color:rgba(204,218,215,.2)}
.offer .spacer{flex:1}

/* phone demo */
.demo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.demo{grid-template-columns:1fr}.phone{width:min(260px,72vw)}}
.steps-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.steps-list li{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:var(--r-card);border:1px solid var(--stone);background:#fff;transition:border-color .4s,background .4s}
.steps-list li .n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stone);font-size:14px;transition:all .4s}
.steps-list li h3{font-size:18px;margin:4px 0 4px;color:var(--forest)}
.steps-list li p{margin:0;color:var(--muted);font-size:15px}
.steps-list li.act{border-color:var(--forest);background:var(--mist)}
.steps-list li.act .n{background:var(--forest);border-color:var(--forest);color:var(--mint)}
.phone-wrap{display:grid;place-items:center;position:relative}
.phone-wrap::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--forest)}
.phone{position:relative;width:min(300px,78vw);aspect-ratio:9/17;border-radius:42px;background:var(--loam);padding:10px;box-shadow:var(--shadow)}
.ph-s{position:relative;height:100%;border-radius:33px;background:var(--cream);overflow:hidden;padding:44px 14px 14px;display:flex;flex-direction:column;gap:12px;font-size:12px}
.ph-s::before{content:"";position:absolute;top:12px;left:50%;width:84px;height:22px;border-radius:12px;background:var(--loam);transform:translateX(-50%)}
.ph-q{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--stone);border-radius:999px;padding:10px 14px;font-size:13px;min-height:42px}
.ph-q .g{width:18px;height:18px;flex:none}
.ph-q .typed{white-space:nowrap;overflow:hidden}
.caret{width:1.5px;height:16px;background:var(--forest);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ph-card{background:#fff;border:1px solid var(--stone);border-radius:18px;overflow:hidden;opacity:.15;transform:translateY(16px) scale(.97);transition:all .6s var(--ease)}
.s2 .ph-card,.s3 .ph-card,.s4 .ph-card{opacity:1;transform:none}
.ph-map{height:92px;background:var(--mist);position:relative;overflow:hidden}
.ph-map svg{position:absolute;inset:0;width:100%;height:100%}
.ph-map .rd{stroke:#fff;stroke-width:6;fill:none}
.ph-map .rd2{stroke:#fff;stroke-width:3;fill:none}
.ph-map svg.ph-pin{position:absolute;inset:auto;left:50%;top:22px;width:26px;height:34px;transform:translateX(-50%) translateY(-30px);opacity:0;transition:all .5s cubic-bezier(.3,1.6,.5,1) .25s}
.s2 .ph-map svg.ph-pin,.s3 .ph-map svg.ph-pin,.s4 .ph-map svg.ph-pin{transform:translateX(-50%);opacity:1}
.ph-b{padding:12px 14px 14px}
.ph-name{font-size:16px;color:var(--forest);letter-spacing:-.01em}
.ph-meta{color:var(--muted);font-size:11.5px;margin-top:2px}
.ph-open{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--forest)}
.ph-open i{width:7px;height:7px;border-radius:50%;background:#1aa060}
.ph-act{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.ph-act span{border:1px solid var(--stone);border-radius:999px;padding:6px 4px;text-align:center;font-size:11px;color:var(--forest);transition:all .3s}
.s3 .ph-act .wa,.s4 .ph-act .wa{background:var(--wa);border-color:var(--wa);color:var(--loam);transform:scale(1.06)}
.ph-chat{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.bub{max-width:82%;padding:9px 12px;border-radius:16px;font-size:12px;line-height:1.4;opacity:0;transform:translateY(10px) scale(.95);transition:all .45s var(--ease)}
.bub.me{align-self:flex-end;background:#dcf8c6;border-end-end-radius:4px}
.bub.them{align-self:flex-start;background:#fff;border:1px solid var(--stone);border-end-start-radius:4px}
[dir=rtl] .bub.me{align-self:flex-start}[dir=rtl] .bub.them{align-self:flex-end}
.s4 .bub.me{opacity:1;transform:none}
.s4 .bub.them{opacity:1;transform:none;transition-delay:1.1s}
.tap{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(0,71,55,.25);border:2px solid var(--forest);opacity:0;pointer-events:none}
.s3 .tap{animation:tap 1s ease .4s}
@keyframes tap{0%{opacity:0;transform:scale(1.6)}40%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1)}}

/* how it works */
.how{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.how::before{content:"";position:absolute;top:31px;inset-inline:8% 8%;height:2px;background:var(--stone)}
.how::after{content:"";position:absolute;top:31px;inset-inline-start:8%;width:0;height:2px;background:var(--forest);transition:width 1.6s var(--ease) .2s}
.how.in::after{width:84%}
.how .st{position:relative;padding-top:4px}
.how .num{position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:var(--cream);border:1px solid var(--forest);display:grid;place-items:center;font-size:22px;color:var(--forest);margin-bottom:22px;transition:background .4s,color .4s}
.how.in .st:nth-child(1) .num{transition-delay:.2s}.how.in .st:nth-child(2) .num{transition-delay:.9s}.how.in .st:nth-child(3) .num{transition-delay:1.6s}
.how.in .num{background:var(--forest);color:var(--mint)}
.how h3{font-size:22px;color:var(--forest);margin-bottom:8px;letter-spacing:-.015em}
.how p{color:var(--muted);margin:0}
@media (max-width:760px){.how{grid-template-columns:1fr;gap:28px}.how::before,.how::after{display:none}}

/* industries */
.ind{position:relative;overflow:hidden;min-height:210px;display:flex!important;flex-direction:column}
.ind .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:auto;padding-bottom:28px}
[dir=rtl] .ind .k{letter-spacing:0}
.ind .art{position:absolute;inset-inline-end:-10px;top:-10px;width:110px;height:110px;color:var(--mist);transition:transform .5s var(--ease),color .4s}
.ind .art svg{width:100%;height:100%;fill:currentColor}
a.ind:hover .art{transform:rotate(-8deg) scale(1.08);color:var(--mint)}

/* featured */
.biz{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.biz .ph{aspect-ratio:16/10;background:var(--forest);position:relative;overflow:hidden}
.biz .ph svg{position:absolute;inset:0;width:100%;height:100%}
.biz .bd{padding:18px 20px 20px}
.biz .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.biz.open .ph{background:var(--bone);display:grid;place-items:center}
.biz.open .plus{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--forest);display:grid;place-items:center;color:var(--forest);font-size:28px;transition:transform .4s var(--ease)}
a.biz.open:hover .plus{transform:rotate(90deg);background:var(--mint);border-style:solid}
.tag-sample{position:absolute;top:12px;inset-inline-start:12px;background:var(--iris);color:#fff;font-size:11px;padding:4px 10px;border-radius:999px;letter-spacing:.04em;z-index:2}

/* why */
.why .card{background:transparent;border-color:rgba(204,218,215,.22)}
.why .card h3{color:var(--cream)}
.why .card p{color:var(--sage)}
.why .ico{background:rgba(86,240,159,.12);color:var(--mint)}

/* faq */
.faq{border-top:1px solid var(--stone)}
.faq details{border-bottom:1px solid var(--stone)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font-size:clamp(17px,1.8vw,20px);letter-spacing:-.01em;color:var(--forest)}
[dir=rtl] .faq summary{letter-spacing:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--stone);position:relative;transition:transform .35s var(--ease),background .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--forest);transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.faq details[open] summary .pm{background:var(--mint);border-color:var(--mint)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq .ans{padding:0 0 24px;color:var(--muted);max-width:720px}
.faq details[open] .ans{animation:fade .45s var(--ease)}

/* cta panel */
.cta-panel{position:relative;overflow:hidden;border-radius:clamp(28px,5vw,60px);padding:clamp(48px,8vw,96px) clamp(24px,6vw,72px);text-align:center}
.cta-panel h2{max-width:760px;margin:0 auto}
.cta-panel .lead{max-width:560px;margin:18px auto 30px}
.cta-panel .phone-num{margin-top:16px;font-size:14px;color:var(--sage);direction:ltr;unicode-bidi:isolate}
.cta-panel .orb{position:absolute;border-radius:50%;border:2px solid var(--mint);opacity:.35;animation:orb 7s ease-in-out infinite}
.cta-panel .orb.a{width:260px;height:260px;left:-80px;bottom:-120px}
.cta-panel .orb.b{width:160px;height:160px;right:-40px;top:-50px;animation-delay:-3s}
@keyframes orb{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* page hero (inner) */
.phero{padding:clamp(56px,8vw,96px) 0 clamp(48px,6vw,72px);position:relative;overflow:hidden}
.phero h1{margin-top:18px;max-width:900px}
.phero .lead{max-width:680px;margin-top:20px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--sage);margin-bottom:6px}
.crumbs a{color:var(--sage);text-decoration:none}
.crumbs a:hover{color:var(--mint)}
.phero .deco-2{top:40px}

/* compare table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--stone);border-radius:var(--r-card);background:#fff}
table.cmp{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
.cmp th,.cmp td{padding:16px 20px;text-align:start;border-bottom:1px solid var(--stone)}
.cmp thead th{font-size:17px;color:var(--forest);background:var(--bone)}
.cmp tbody th{color:var(--muted);width:34%}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp .ok{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mist);color:var(--forest)}
.cmp code{font-family:inherit;font-size:13.5px;background:var(--bone);padding:3px 8px;border-radius:6px;direction:ltr;display:inline-block}

/* forms */
.form{display:grid;gap:14px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.form .row2{grid-template-columns:1fr}}
.fld label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:#fff;border:1px solid var(--stone);border-radius:14px;padding:13px 15px;font-size:16px;transition:border-color .2s,box-shadow .2s;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2399b5af' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:12px;background-position:right 15px center;padding-inline-end:38px}
[dir=rtl] .fld select{background-position:left 15px center}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px var(--mist)}
.fld.err input,.fld.err select,.fld.err textarea{border-color:#c0392b}
.fld .em{display:none;color:#b0301f;font-size:12.5px;margin-top:5px}
.fld.err .em{display:block}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13px;color:var(--muted)}
.form-panel{background:#fff;border:1px solid var(--stone);border-radius:28px;padding:clamp(22px,4vw,40px)}

/* directory */
.dir-tools{display:grid;gap:14px;margin-bottom:28px}
.search{position:relative}
.search input{width:100%;padding:16px 20px;padding-inline-start:50px;border:1px solid var(--stone);border-radius:999px;background:#fff;font-size:16px}
.search input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px var(--mist)}
.search svg{position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--sage);fill:none;stroke-width:1.6}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.empty{border:1.5px dashed var(--sage);border-radius:var(--r-card);padding:36px;text-align:center;color:var(--muted)}
.empty .btn{margin-top:18px}

/* blog */
.post-card{display:flex!important;flex-direction:column;gap:12px;min-height:100%}
.post-card .meta{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.post-card h3{font-size:21px;margin:0}
.post-card p{flex:1}
.post-hero{padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px)}
.post-hero h1{margin-top:16px}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;font-size:14px;color:var(--sage)}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start}
@media (max-width:980px){.post-layout{grid-template-columns:1fr}.toc{display:none}}
.answer{background:var(--mist);border-radius:var(--r-card);padding:24px 26px;margin-bottom:28px}
.answer .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);margin-bottom:8px}
[dir=rtl] .answer .k{letter-spacing:0}
.answer p{margin:0;font-size:18px;line-height:1.55;color:var(--loam)}
.keys{border:1px solid var(--stone);border-radius:var(--r-card);padding:22px 26px;margin-bottom:40px;background:#fff}
.keys h2{font-size:18px;color:var(--forest);margin-bottom:10px}
.keys ul{margin:0;padding-inline-start:20px;color:var(--muted)}
.keys li{margin:6px 0}
.prose{font-size:17.5px;line-height:1.75;color:#1d2f2a}
[dir=rtl] .prose{font-size:18px;line-height:1.95}
.prose h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.025em;line-height:1.2;color:var(--forest);margin:2.1em 0 .6em}
[dir=rtl] .prose h2{letter-spacing:0;line-height:1.45}
.prose h3{font-size:20px;color:var(--forest);margin:1.6em 0 .5em}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-inline-start:1.3em}
.prose li{margin:.45em 0}
.prose li::marker{color:var(--forest)}
.prose a{color:var(--forest);text-decoration:none;border-bottom:1.5px solid var(--mint)}
.prose a:hover{background:var(--mist)}
.toc{position:sticky;top:96px;border-inline-start:1px solid var(--stone);padding-inline-start:20px;font-size:14px}
.toc .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
[dir=rtl] .toc .k{letter-spacing:0}
.toc a{display:block;padding:6px 0;color:var(--muted);text-decoration:none;line-height:1.4;transition:color .2s}
.toc a:hover,.toc a.on{color:var(--forest)}
.toc a.on{position:relative}
.toc a.on::before{content:"";position:absolute;inset-inline-start:-21px;top:6px;bottom:6px;width:2px;background:var(--forest)}
.toc .btn{margin-top:20px;width:100%;font-size:14px}
.post-faq{margin-top:56px}
.post-faq>h2{margin-bottom:10px}
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--mint);transform-origin:0 50%;transform:scaleX(0);z-index:60}
[dir=rtl] .progress{transform-origin:100% 50%}
.related{margin-top:72px}

/* sample profile */
.sample-bar{background:var(--iris);color:#fff;text-align:center;font-size:14px;padding:10px var(--gut)}
.sample-bar a{color:#fff}
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:180px 180px;gap:10px;border-radius:var(--r-card);overflow:hidden}
.gal>div{background:var(--forest);position:relative;overflow:hidden}
.gal>div:first-child{grid-row:span 2}
.gal svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:700px){.gal{grid-template-columns:1fr 1fr;grid-template-rows:200px 120px 120px}.gal>div:first-child{grid-column:span 2;grid-row:auto}}
.prof{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;margin-top:40px;align-items:start}
@media (max-width:900px){.prof{grid-template-columns:1fr}}
.hours{width:100%;border-collapse:collapse;font-size:15px}
.hours td{padding:10px 0;border-bottom:1px solid var(--stone)}
.hours td:last-child{text-align:end;color:var(--muted)}
.menu-l{list-style:none;padding:0;margin:0}
.menu-l li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--stone)}
.menu-l li span:last-child{color:var(--muted)}
.mapf{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--mist);text-decoration:none}
.mapf svg{position:absolute;inset:0;width:100%;height:100%}
.mapf .lbl{position:absolute;bottom:12px;inset-inline-start:12px;background:#fff;border:1px solid var(--stone);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--forest)}
.side{display:grid;gap:14px;position:sticky;top:90px}
.listed{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-radius:var(--r-card);padding:20px 24px;margin-top:48px}

/* footer */
.ftr{background:var(--forest);color:var(--cream);padding:72px 0 28px;margin-top:0}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ftr-top{grid-template-columns:1fr}}
.ftr .logo img{height:44px}
.ftr p{color:var(--sage);font-size:14px;margin-top:16px;max-width:320px}
.ftr h4{font-size:16px;margin-bottom:14px;color:var(--cream)}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ftr ul a{color:var(--sage);text-decoration:none;font-size:14px;transition:color .2s}
.ftr ul a:hover{color:var(--mint)}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:22px;border-top:1px solid rgba(204,218,215,.18);font-size:13px;color:var(--sage)}
.ftr-bot a{color:var(--sage)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* floating whatsapp */
.fab{position:fixed;bottom:18px;inset-inline-end:18px;z-index:40;display:flex;align-items:center;gap:0;height:56px;padding:0 16px;border-radius:999px;background:var(--wa);color:var(--loam);text-decoration:none;box-shadow:0 6px 18px rgba(3,32,25,.18);transition:gap .35s var(--ease),padding .35s var(--ease);overflow:hidden;transform:translateY(90px);animation:fabin .6s var(--ease) 1.2s forwards}
@keyframes fabin{to{transform:none}}
.fab svg{width:26px;height:26px;flex:none}
.fab .t{max-width:0;overflow:hidden;white-space:nowrap;font-size:15px;transition:max-width .45s var(--ease)}
.fab:hover .t,.fab.peek .t{max-width:220px}
.fab:hover,.fab.peek{gap:10px;padding:0 20px 0 16px}
.fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);animation:pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}

/* cookie notice */
.cnote{position:fixed;bottom:18px;inset-inline-start:18px;z-index:45;max-width:360px;background:var(--loam);color:var(--cream);border-radius:18px;padding:16px 18px;font-size:13.5px;line-height:1.5;display:none;gap:14px;align-items:center;animation:fade .5s var(--ease)}
.cnote.show{display:flex}
.cnote a{color:var(--mint)}
.cnote button{flex:none;background:var(--mint);color:var(--loam);border:0;border-radius:999px;padding:8px 16px;cursor:pointer}
@media (max-width:560px){.cnote{inset-inline:12px;bottom:86px;max-width:none}}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}

/* legal */
.legal h2{font-size:24px;color:var(--forest);margin:1.8em 0 .5em;letter-spacing:-.02em}
[dir=rtl] .legal h2{letter-spacing:0}

/* 404 */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.nf .big{font-size:clamp(90px,18vw,180px);letter-spacing:-.06em;line-height:1;color:var(--forest)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .marq-t{animation:none}
}
.toc a.btn{display:flex;color:var(--loam)}
th{font-weight:400}