@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--blue:#1379d9;--ink:#212121;--muted:#5e5e5e;--line:#9e9e9e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Outfit,system-ui,sans-serif}html[lang="ar"] body,[dir="rtl"] body{font-family:Cairo,system-ui,sans-serif!important}p{color:var(--muted);line-height:1.63}h1,h2,h3,p{margin-top:0}a{text-decoration:none;color:inherit}.wrap{width:min(1280px,calc(100% - 48px));margin:auto}.section{padding:80px 0;overflow:hidden}.hero{position:relative;min-height:min(828px,100svh);display:grid;place-items:center;padding:70px 24px;text-align:center;overflow:hidden}.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.7}.hero-content{position:relative;z-index:1;max-width:832px}.hero h1{margin:20px 0 16px;font-size:clamp(44px,7vw,80px);line-height:1;letter-spacing:-.025em}.hero p{max-width:606px;margin:0 auto 20px;font-size:20px}.hero small{display:block;margin-top:20px;color:#9e9e9e}.eyebrow{display:inline-flex;width:max-content;padding:8px 16px;border-radius:999px;background:#ececec;color:var(--blue);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.eyebrow.outline{background:#fff;border:1px solid #09090b;color:#5e5e5e}.eyebrow.light{background:#fff}.actions{display:flex;justify-content:center;gap:16px}.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;padding:0 32px;border-radius:999px;font-weight:600}.primary{background:var(--blue);color:#fff}.primary:hover{background:#1069bd}.secondary{border:1px solid #09090b;background:#fff}.intro{display:flex;max-width:672px;flex-direction:column;gap:12px}.intro.center{margin:auto;align-items:center;text-align:center}.intro h2{margin:0;font-size:clamp(36px,5vw,44px);line-height:1.1;letter-spacing:-.025em}.intro em{color:#aaa;font-style:normal}.intro p{margin:0;font-size:18px}.card,.soft{position:relative;border-radius:24px;padding:20px}.card{border:1px solid var(--line);background:#fff}.card h3,.soft h3{margin:18px 0 6px;font-size:20px}.card p,.soft p{margin:0}.problem-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:56px}.scattered{grid-row:span 2}.problem-grid>article:nth-child(4),.problem-grid>article:nth-child(5){grid-column:auto}.files{height:155px;display:flex;align-items:flex-end;justify-content:space-around;margin-bottom:28px}.files i{width:18%;height:145px;border:1px solid #d8d8d8;border-radius:12px;box-shadow:0 3px 10px #0001}.files i:nth-child(2){height:136px;background:#ececec;border-color:#acc9e4}.files i:nth-child(3){height:126px}.files i:nth-child(4){height:100px}.icon{display:inline-grid;width:44px;height:44px;place-items:center;border-radius:16px;background:#fff}.icon.dark{background:#212121;color:#fff}.icon.red,.red-text{color:#f44336;background:#fff0ef}.icon.blue,.blue-text{color:var(--blue);background:#eaf4fd}.icon.green,.green-text{color:#4caf50;background:#eaf7eb}.icon.orange,.orange-text{color:#ff9800;background:#fff4e2}.icon.teal,.teal-text{color:#0b92a3;background:#e5f8fa}.icon.gold,.gold-text{color:#c99a0e;background:#fff7d8}.dark-card,.dark-section{background:#212121;color:#fff}.dark-card p,.dark-section p{color:#bbb}.orange{background:#fff4e2}.badge{position:absolute;right:20px;top:20px;padding:8px 16px;border-radius:999px;font-size:12px}.badge.red{background:#fff0ef;color:#f44336}.solution{display:grid;grid-template-columns:533px 1fr;align-items:center;gap:64px}.checks{padding:0;list-style:none}.checks li{display:flex;gap:10px;margin:16px 0;color:#5e5e5e}.checks li:before{content:'✓';display:grid;width:24px;height:24px;flex:none;place-items:center;border-radius:50%;background:#5ea1e0;color:white}.solution-art{position:relative;min-height:650px}.solution-art img{position:absolute;width:100%;height:100%;object-fit:contain}.metric{position:absolute;padding:16px 20px;border:1px solid #ececec;border-radius:16px;background:#fffd;box-shadow:0 8px 20px #0001}.metric small,.metric strong{display:block}.metric strong{font-size:24px}.metric.one{bottom:8%;left:7%}.metric.two{top:18%;right:0}.metric.two strong{color:var(--blue)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.feature-grid .card{min-height:186px}.audience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}.soft{min-height:184px;border:1px solid #0000000d}.soft.gray{background:#ececec}.soft.blue-bg{background:#eaf4fd}.soft.green-bg{background:#eaf7eb}.audience-grid article:last-child{grid-column:1/-1;width:50%;margin:auto}.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px;text-align:center}.steps:before{content:'';position:absolute;left:10%;right:10%;top:28px;border-top:1px solid #1379d9}.steps article{position:relative}.steps b{display:grid;width:56px;height:56px;margin:auto;place-items:center;border-radius:12px;background:#fff;color:var(--blue);font-size:24px}.steps small{display:block;margin-top:8px;color:var(--blue);text-transform:uppercase}.steps h3{font-size:18px}.steps p{font-size:14px}.benefits{display:grid;grid-template-columns:495px 1fr;gap:20px;margin-top:40px}.big-blue{min-height:392px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;border-radius:24px;background:var(--blue);color:#fff}.big-blue strong{font-size:72px}.big-blue p{color:#d9e4ef}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mini-grid strong{font-size:40px}.mini-grid .wide{grid-column:1/-1}.security-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:28px}.security-grid article{grid-column:span 2;min-height:210px;padding:28px 20px;border:1px solid #ffffff1a;border-radius:24px;background:#ffffff0a}.security-grid article:nth-child(-n+2){grid-column:span 3}.pricing{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:24px;max-width:1024px;margin:36px auto 0}.plan{min-height:498px;display:flex;flex-direction:column;padding:24px;border:1px solid #09090b;border-radius:24px}.plan>strong{font-size:40px}.plan ul{padding:0;list-style:none;color:#5e5e5e}.plan li{margin:12px 0}.plan li:before{content:'✓';margin-right:10px;color:var(--blue)}.plan .button{margin-top:auto}.recommended{position:relative;background:#212121;color:#fff}.recommended>span{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:7px 16px;border-radius:999px;background:var(--blue);font-size:12px}.recommended p,.recommended li,.recommended small{color:#bbb}.light-button{background:#fff;color:#212121}.faq{max-width:742px;margin:32px auto;padding:20px;border:1px solid #ececec;border-radius:24px;box-shadow:0 2px 8px #0000000f}.faq article{border-bottom:1px solid #e5e5e5}.faq article:last-child{border:0}.faq button{width:100%;min-height:64px;display:flex;justify-content:space-between;align-items:center;border:0;background:none;font:inherit;text-align:left;cursor:pointer}.faq button b{color:var(--blue);transition:.2s}.faq p{display:none;padding:0 32px 20px 0;margin:0;color:var(--blue)}.faq .open p{display:block}.faq .open button b{transform:rotate(180deg)}.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0s)}.reveal.left{transform:translateX(-56px)}.reveal.right{transform:translateX(56px)}.reveal.delay-1{--reveal-delay:.04s}.reveal.delay-2{--reveal-delay:.08s}.reveal.delay-3{--reveal-delay:.12s}.reveal.delay-4{--reveal-delay:.16s}.reveal.visible{opacity:1;transform:none}.glitch-letter{position:relative;display:inline-block}.glitch-letter.active:before,.glitch-letter.active:after{content:attr(data-char);position:absolute;inset:0}.glitch-letter.active:before{color:#1379d9;transform:translate(3px,-2px);clip-path:inset(0 0 55% 0)}.glitch-letter.active:after{color:#f44336;transform:translate(-3px,2px);clip-path:inset(60% 0 5% 0)}
@media(max-width:900px){.solution,.benefits{grid-template-columns:1fr}.feature-grid,.pricing{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.steps:before{display:none}.security-grid{grid-template-columns:1fr 1fr}.security-grid article,.security-grid article:nth-child(-n+2){grid-column:auto}.solution-art{min-height:500px}}@media(max-width:620px){.section{padding:60px 0}.wrap{width:min(100% - 32px,1280px)}.actions{flex-direction:column}.problem-grid,.feature-grid,.audience-grid,.pricing,.mini-grid,.steps,.security-grid{grid-template-columns:1fr}.audience-grid article:last-child{grid-column:auto;width:100%}.solution-art{min-height:400px}.hero p{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

.hero-content>.outline{animation:hero-enter .6s cubic-bezier(.22,1,.36,1) both}
.hero-content>h1{animation:hero-enter .7s .05s cubic-bezier(.22,1,.36,1) both}
.hero-content>p{animation:hero-enter .7s .15s cubic-bezier(.22,1,.36,1) both}
.hero-content>.actions{animation:hero-enter .7s .25s cubic-bezier(.22,1,.36,1) both}
.hero-content>small{animation:hero-fade .6s .45s both}
.glitch-word{display:inline-block;white-space:nowrap}.glitch-space{white-space:pre}
.glitch-letter.active{animation:glitch-slice .36s infinite steps(3,jump-none)}
.glitch-letter.active:before{z-index:-1;opacity:.9;animation:glitch-a .32s infinite steps(2,jump-none)}
.glitch-letter.active:after{z-index:-2;opacity:.9;animation:glitch-b .4s infinite steps(2,jump-none)}
@keyframes hero-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
@keyframes glitch-a{0%,100%{transform:translate(0);clip-path:inset(0 0 62% 0)}50%{transform:translate(3px,-2px);clip-path:inset(55% 0 12% 0)}}
@keyframes glitch-b{0%,100%{transform:translate(0);clip-path:inset(58% 0 8% 0)}50%{transform:translate(-3px,2px);clip-path:inset(8% 0 70% 0)}}
@keyframes glitch-slice{0%,88%,100%{transform:translate(0)}90%{transform:translateX(-2px)}94%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.hero-content>*{animation:none!important}.glitch-letter,.glitch-letter:before,.glitch-letter:after{animation:none!important}}

/* Figma fidelity refinements — presentation only; animation rules remain unchanged. */
.figma-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:16px;flex:none}
.figma-icon img{display:block;width:20px;height:20px}
.inline-icon{width:14px;height:14px;margin-right:4px}.icon img{display:block;width:20px;height:20px}.steps b img{display:block;width:24px;height:24px}
.card-top,.stat-line{display:flex;align-items:center;justify-content:space-between;width:100%}
.micro-badge{padding:8px 16px;border-radius:999px;background:inherit;font-size:11.5px;font-weight:600;line-height:17px;white-space:nowrap}
.audience-grid{max-width:1200px;margin-left:auto;margin-right:auto;grid-template-columns:repeat(2,592px);justify-content:center;gap:20px 16px}
.audience-card{min-height:186px;display:flex;flex-direction:column;align-items:flex-start;padding:20px;border:0}
.audience-card h3{margin:20px 0 8px;font-size:20px;line-height:28px}.audience-card p{font-size:14px;line-height:22.75px}
.audience-card.legal,.audience-card.procurement{width:592px}
.audience-card.finance,.audience-card.operations{width:480px}
.audience-card.finance{justify-self:end}
.audience-card.operations{justify-self:start}
.audience-card.executive{grid-column:1/-1;width:592px!important;justify-self:center}
.audience-card.legal,.audience-card.legal .figma-icon,.audience-card.legal .micro-badge{background:rgba(255,152,0,.08)}.audience-card.legal .micro-badge{color:#ff9800}
.audience-card.procurement,.audience-card.procurement .figma-icon{background:rgba(19,121,217,.08)}
.audience-card.finance,.audience-card.finance .figma-icon{background:rgba(76,175,80,.16)}
.audience-card.operations{border:1px solid rgba(158,158,158,.24);background:#fff}.audience-card.operations .figma-icon{background:#ececec}.audience-card.operations p{color:#9e9e9e}
.audience-card.executive{background:#ececec}.audience-card.executive .figma-icon,.audience-card.executive .micro-badge{background:#fff}.audience-card.executive .micro-badge{color:#1379d9}
.benefits{align-items:stretch}.big-blue{position:relative;justify-content:space-between;box-shadow:0 8px 24px -8px #09090b14,0 1px 2px #09090b0a}.benefit-icon{display:grid;width:80px;height:80px;place-items:center;border-radius:27px;background:#ffffff26}.benefit-icon img{width:40px;height:40px}.big-blue strong{line-height:72px;letter-spacing:-1.8px}.big-blue h3{margin:0;font-size:20px;line-height:28px}.big-blue p{margin:0}
.benefit-mini{display:flex;flex-direction:column;justify-content:center;gap:24px;border-color:#09090b0d}.benefit-mini .stat-line img{width:24px;height:24px}.benefit-mini h3{margin:0 0 6px;font-size:16px}.benefit-mini p{font-size:14px;line-height:22.75px}.renewal{display:block;padding:20px;background:rgba(76,175,80,.08)}.renewal-icon{display:grid;width:56px;height:56px;place-items:center;border-radius:16px;background:rgba(76,175,80,.16)}.renewal-icon img{width:28px;height:28px}.renewal h3{margin:20px 0 6px;font-size:18px}.renewal p{font-size:14px;line-height:22.75px}
.dark-section{position:relative}.dark-section:after{content:"";position:absolute;z-index:0;top:-38px;right:-138px;width:700px;height:400px;border-radius:50%;background:#1379d9;filter:blur(60px);opacity:.2;pointer-events:none}.dark-section>.wrap{position:relative;z-index:1}
.security-grid article{display:flex;flex-direction:column;justify-content:space-between;height:220px;padding:20px;backdrop-filter:blur(12px)}.security-icon{display:grid;width:48px;height:48px;place-items:center;border:1px solid #ffffff1a;border-radius:16px;background:#ffffff0d}.security-icon img{width:24px;height:24px}.security-grid h3{margin:0 0 8px;font-size:18px;line-height:28px}.security-grid p{margin:0;font-size:14px;line-height:22.75px}
@media(max-width:1248px){.audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.audience-card.legal,.audience-card.procurement,.audience-card.finance,.audience-card.operations{width:100%}.audience-card.executive{width:50%!important}}
@media(max-width:900px){.audience-grid{grid-template-columns:repeat(2,1fr)}.audience-card.legal,.audience-card.procurement,.audience-card.finance,.audience-card.operations,.audience-card.executive{grid-column:auto}.audience-card.executive{width:100%!important}.audience-card.executive{grid-column:1/-1}}
@media(max-width:620px){.audience-grid{grid-template-columns:1fr}.audience-card.executive{grid-column:auto}.micro-badge{padding:7px 10px;font-size:15px}}
.intro.center .blue-text{display:block;background:transparent!important;color:#1379d9;font-weight:400}
.eyebrow{text-transform:none}.eyebrow.outline{text-transform:uppercase}

@media(max-width:620px){
  .audience-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px 10px;margin-top:28px}
  .audience-card,.audience-card.legal,.audience-card.procurement,.audience-card.finance,.audience-card.operations,.audience-card.executive{width:max-content!important;min-height:48px;display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;cursor:pointer}
  .audience-card .figma-icon{width:40px;height:40px;border-radius:50%}
  .audience-card .figma-icon img{width:20px;height:20px}
  .audience-card .card-top{width:auto}
  .audience-card .micro-badge,.audience-card p{display:none}
  .audience-card h3{margin:0;font-size:14px;line-height:20px;white-space:nowrap}
  .audience-card.is-active{width:100%!important;min-height:206px;display:block;padding:20px;border-radius:24px;cursor:default}
  .audience-card.is-active .figma-icon{width:44px;height:44px;border-radius:16px}
  .audience-card.is-active .card-top{width:100%}
  .audience-card.is-active .micro-badge{display:inline-flex}
  .audience-card.is-active h3{margin:28px 0 8px;font-size:20px;line-height:28px;white-space:normal}
  .audience-card.is-active p{display:block;font-size:14px;line-height:22.75px}
}

@media(max-width:620px){
  .security-section{padding:20px 0 28px}
  .security-section>.wrap{width:calc(100% - 12px)}
  .security-section .intro{gap:10px}
  .security-section .intro h2{font-size:20px;line-height:24px}
  .security-section .intro p{font-size:15px;line-height:18px}
  .security-section .security-grid{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:18px}
  .security-section .security-grid article{width:max-content;min-height:48px;height:auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;cursor:pointer}
  .security-section .security-icon{width:40px;height:40px;flex:none;border-radius:50%}
  .security-section .security-icon img{width:20px;height:20px}
  .security-section .security-grid article h3{margin:0;font-size:14px;line-height:20px;white-space:nowrap}
  .security-section .security-grid article p{display:none}
  .security-section .security-grid article.is-active{width:100%;min-height:180px;display:block;padding:20px;border-radius:20px;cursor:default}
  .security-section .security-grid article.is-active .security-icon{width:48px;height:48px;border-radius:16px}
  .security-section .security-grid article.is-active .security-icon img{width:24px;height:24px}
  .security-section .security-grid article.is-active h3{margin:20px 0 8px;font-size:18px;line-height:28px;white-space:normal}
  .security-section .security-grid article.is-active p{display:block;font-size:14px;line-height:22.75px}
}

@media(max-width:620px){
  #pricing{padding:20px 0 12px}
  #pricing>.wrap{width:calc(100% - 12px)}
  #pricing .intro{gap:10px}
  #pricing .intro h2{max-width:260px;font-size:20px;line-height:24px}
  #pricing .intro p{max-width:240px;font-size:15px;line-height:16px}
  #pricing .pricing{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
  #pricing .plan{min-height:0;padding:14px;border-color:rgba(158,158,158,.35);border-radius:16px}
  #pricing .plan h3{margin:0 0 18px;font-size:14px}
  #pricing .plan-base-price{margin-bottom:2px}
  #pricing .plan-base-price s{font-size:18px}
  #pricing .plan-base-price small{font-size:15px}
  #pricing .plan-price-row strong{font-size:28px;line-height:32px}
  #pricing .plan-price-row small{font-size:15px}
  #pricing .plan>p{max-width:230px;margin:20px 0 12px;font-size:15px;line-height:20px}
  #pricing .plan ul{margin:0;padding:0}
  #pricing .plan li{margin:8px 0;font-size:15px;line-height:20px}
  #pricing .plan .button{height:40px;min-height:40px;margin-top:14px;font-size:15px}
  #pricing .plan-discount-reason{max-width:none;margin-top:18px!important;font-size:15px!important;text-align:center}
  #pricing .recommended>span{top:14px;right:14px;left:auto;transform:none;padding:4px 8px;font-size:9px}
  .faq-section{padding:22px 0 28px;background:#fafafa;border-top:1px solid #ececec}
  .faq-section>.wrap{width:calc(100% - 12px)}
  .faq-section .intro{gap:8px}
  .faq-section .intro h2{font-size:16px;line-height:20px}
  .faq-section .intro p{font-size:15px;line-height:20px;color:#1379d9}
  .faq-section .faq{margin-top:18px;padding:10px 14px;border-radius:16px}
  .faq-section .faq article:nth-child(3),.faq-section .faq article:nth-child(n+5){display:none}
  .faq-section .faq button{min-height:50px;font-size:15px}
  .faq-section .faq p{padding:0 24px 14px 0;font-size:15px;line-height:20px}
}

/* The Problem — exact Figma card composition. */
.problem-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;gap:20px}
.problem-grid .scattered{grid-column:span 4;grid-row:span 2;min-height:392px}
.problem-grid>article:nth-child(2),.problem-grid>article:nth-child(3){grid-column:span 2;min-height:186px}
.problem-grid>article:nth-child(4),.problem-grid>article:nth-child(5){grid-column:span 3;min-height:186px}
.files{height:145px;margin:0 0 28px;padding:0 8px;align-items:center}
.files i{display:grid;place-items:center;width:18%;border-color:#d8d8d8;background:#fff}
.files i img{display:block;width:32px;height:32px;opacity:.65}
.files i:nth-child(2) img{filter:invert(39%) sepia(95%) saturate(1230%) hue-rotate(184deg) brightness(88%) contrast(92%);opacity:1}
.scattered .icon.dark img{filter:brightness(0) invert(1)}
.scattered h3{margin-top:20px;font-size:24px;line-height:32px}.scattered p{font-size:16px;line-height:24px}
.dark-card{overflow:hidden}.dark-card:after{content:"";position:absolute;right:-40px;top:-64px;width:160px;height:160px;border-radius:50%;background:rgba(244,67,54,.3);filter:blur(28px)}.dark-card>*{position:relative;z-index:1}
.approval-status,.visibility-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.approval-lines{display:flex;flex:1;gap:20px}.approval-lines i{height:8px;flex:1;border-radius:999px;background:#d9e4ef}.approval-status small{color:#bbb;white-space:nowrap}
.mini-chart{height:40px;display:flex;align-items:flex-end;gap:5px;opacity:.7}.mini-chart i{display:block;width:8px;border-radius:2px;background:#eeb45e}.mini-chart i:nth-child(1){height:16px}.mini-chart i:nth-child(2){height:28px}.mini-chart i:nth-child(3){height:20px}.mini-chart i:nth-child(4){height:36px}.mini-chart i:nth-child(5){height:12px}
.slow-card h3,.visibility-card h3{margin-top:20px}
@media(max-width:760px){.problem-grid{grid-template-columns:1fr}.problem-grid .scattered,.problem-grid>article:nth-child(2),.problem-grid>article:nth-child(3),.problem-grid>article:nth-child(4),.problem-grid>article:nth-child(5){grid-column:auto;grid-row:auto}.approval-status{align-items:flex-start}.approval-lines{display:none}}

@media(max-width:620px){
  .problem-section{padding:24px 0}
  .section>.wrap{width:calc(100% - 14px)}
  .intro{max-width:100%;gap:8px}
  .intro h2{font-size:20px;line-height:24px;letter-spacing:-.4px}
  .intro p{font-size:15px;line-height:18px}
  .eyebrow{padding:8px 16px;font-size:12px;line-height:16px}
  .problem-grid{margin-top:28px;gap:16px}
  .problem-grid .card{min-height:0;padding:23px;border-color:rgba(158,158,158,.4);border-radius:20px}
  .problem-grid .scattered{min-height:227px}
  .files{height:65px;margin:0 0 26px;padding:0;justify-content:space-between}
  .files i{width:56px!important;height:65px!important;border-radius:7px}
  .files i:nth-child(4){display:none}
  .files i img{width:16px;height:16px}
  .scattered>.icon{display:none}
  .scattered h3,.problem-grid .card h3{margin:0 0 8px;font-size:20px;line-height:24px}
  .scattered p,.problem-grid .card p{font-size:14px;line-height:18px}
  .problem-grid>article:nth-child(2){min-height:166px}
  .problem-grid>article:nth-child(3){min-height:173px}
  .problem-grid>article:nth-child(4){min-height:186px}
  .problem-grid .icon{width:44px;height:44px;margin-bottom:24px;border-radius:14px}
  .problem-grid .icon img{width:20px;height:20px}
  .problem-grid .badge{top:26px;right:23px;padding:8px 14px}
  .approval-status{align-items:center;margin-bottom:24px;gap:8px}
  .approval-status .icon{margin:0}
  .approval-lines{display:flex;gap:5px}
  .approval-lines i{height:8px}
  .approval-status small{font-size:15px}
  .visibility-top{margin-bottom:24px}
  .visibility-top .icon{margin:0}
}

/* Key Features — Figma uses color on text only, never a title highlight. */
.feature-grid{max-width:1208px;margin-left:auto;margin-right:auto}
.feature-grid .card{min-height:186px;padding:20px;border-color:rgba(158,158,158,.24);border-radius:24px}
.feature-grid .icon{width:48px;height:48px;border-radius:16px}
.feature-grid .icon img{width:24px;height:24px}
.feature-grid .card h3{margin:20px 0 4px;background:transparent!important;font-size:18px;font-weight:700;line-height:28px}
.feature-grid .card p{font-size:14px;line-height:22.75px;color:#212121}
.feature-grid .icon.blue{background:rgba(19,121,217,.08)}.feature-grid .icon.red{background:rgba(244,67,54,.08)}.feature-grid .icon.green{background:rgba(76,175,80,.16)}.feature-grid .icon.orange{background:rgba(255,152,0,.12)}.feature-grid .icon.teal{background:rgba(11,146,163,.12)}.feature-grid .icon.gold{background:rgba(255,193,7,.16)}
.feature-grid .icon.blue img{filter:invert(39%) sepia(91%) saturate(1110%) hue-rotate(181deg) brightness(84%) contrast(98%)}
.feature-grid .icon.red img{filter:invert(35%) sepia(90%) saturate(2176%) hue-rotate(339deg) brightness(103%) contrast(91%)}
.feature-grid .icon.green img{filter:invert(59%) sepia(28%) saturate(1065%) hue-rotate(73deg) brightness(94%) contrast(88%)}
.feature-grid .icon.orange img{filter:invert(66%) sepia(90%) saturate(2571%) hue-rotate(358deg) brightness(101%) contrast(103%)}
.feature-grid .icon.teal img{filter:invert(45%) sepia(78%) saturate(936%) hue-rotate(144deg) brightness(87%) contrast(91%)}
.feature-grid .icon.gold img{filter:invert(63%) sepia(90%) saturate(675%) hue-rotate(7deg) brightness(88%) contrast(92%)}
.feature-grid .blue-text{color:#1379d9}.feature-grid .red-text{color:#f44336}.feature-grid .green-text{color:#4caf50}.feature-grid .orange-text{color:#ff9800}.feature-grid .teal-text{color:#0b92a3}.feature-grid .gold-text{color:#c99a0e}
.features-action{display:flex;justify-content:center;margin-top:56px}
.all-features-button{display:inline-flex;height:50px;min-width:208px;align-items:center;justify-content:center;gap:10px;padding:0 28px;border:1px solid rgba(9,9,11,.18);border-radius:999px;background:#fff;color:#212121;font-size:14px;font-weight:600;transition:background-color .2s,border-color .2s}
.all-features-button img{width:16px;height:16px}.all-features-button:hover{border-color:#09090b;background:#f7f7f7}

@media(max-width:620px){
  #features{padding:40px 0}
  #features>.wrap{width:calc(100% - 14px)}
  #features .intro{align-items:center;text-align:center;gap:16px}
  #features .intro h2{max-width:330px;font-size:28px;line-height:32px}
  #features .intro p{max-width:350px;font-size:15px;line-height:24px}
  #features .feature-grid{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px}
  #features .feature-grid .card{width:max-content;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px}
  #features .feature-grid .card .icon{width:40px;height:40px;flex:none;border-radius:50%}
  #features .feature-grid .card .icon img{width:20px;height:20px}
  #features .feature-grid .card h3{margin:0;font-size:16px;line-height:24px;white-space:nowrap}
  #features .feature-grid .card p{display:none}
  #features .feature-grid .card{cursor:pointer;transition:width .3s,min-height .3s,padding .3s,border-radius .3s}
  #features .feature-grid .card.is-active{width:100%;min-height:220px;display:block;padding:24px;border-radius:24px;cursor:default}
  #features .feature-grid .card.is-active .icon{width:56px;height:56px;border-radius:16px}
  #features .feature-grid .card.is-active .icon img{width:28px;height:28px}
  #features .feature-grid .card.is-active h3{margin:28px 0 12px;font-size:20px;line-height:28px;white-space:normal}
  #features .feature-grid .card.is-active p{display:block;font-size:16px;line-height:26px}
  #features .features-action{margin-top:32px}
  #features .all-features-button{width:100%;height:72px;border:2px solid #212121;font-size:20px}
  #features .all-features-button img{display:none}
}

/* How It Works — isolated colors and geometry from the Figma frame. */
.how-it-works{min-height:470px;padding:50px 0 42px;background:radial-gradient(ellipse 360px 230px at 50% 18%,rgba(19,121,217,.11),transparent 72%),#212121}
.how-it-works:after{display:none}
.how-it-works .intro{gap:12px}
.how-it-works .eyebrow.light{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#1379d9}
.how-it-works .intro h2{color:#fff}
.how-it-works .intro p{color:#9e9e9e}
.how-it-works .steps{margin-top:40px;align-items:start}
.how-it-works .steps:before{top:28px;background:rgba(19,121,217,.65);border:0;height:1px}
.how-it-works .steps article{margin-top:0!important}
.how-it-works .steps article:nth-child(even){margin-top:40px!important}
.how-it-works .steps b{width:56px;height:56px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04)}
.how-it-works .steps b img{width:24px;height:24px;filter:invert(39%) sepia(91%) saturate(1110%) hue-rotate(181deg) brightness(84%) contrast(98%)}
.how-it-works .steps small{margin-top:4px;color:#1379d9;font-size:12px;font-weight:600;letter-spacing:.1em}
.how-it-works .steps h3{margin:2px 0 4px;font-size:18px;line-height:28px;color:#fff}
.how-it-works .steps p{max-width:205px;margin:0 auto;color:#9e9e9e;font-size:14px;line-height:22.75px}
@media(max-width:900px){.how-it-works .steps article:nth-child(even){margin-top:0!important}}
.solution-highlight{color:#1379d9}

@media(max-width:620px){
  .how-it-works{min-height:0;padding:20px 16px 28px}
  .how-it-works>.wrap{width:100%}
  .how-it-works:before{top:0;width:100%;height:250px}
  .how-it-works .intro{max-width:100%;gap:10px}
  .how-it-works .intro h2{font-size:20px;line-height:24px;white-space:nowrap}
  .how-it-works .intro p{max-width:320px;font-size:15px;line-height:18px}
  .how-it-works .steps{display:grid;grid-template-columns:1fr;row-gap:34px;margin-top:28px}
  .how-it-works .steps:before{display:none}
  .how-it-works .steps article{width:100%;margin:0!important}
  .how-it-works .steps b{width:56px;height:56px}
  .how-it-works .steps small{margin-top:8px}
  .how-it-works .steps h3{margin:8px 0;font-size:18px;line-height:24px}
  .how-it-works .steps p{max-width:330px;font-size:14px;line-height:20px}
}

@media(max-width:620px){
  #solution{padding:24px 0 48px}
  #solution>.solution{width:calc(100% - 22px);display:grid;grid-template-columns:1fr;gap:0}
  #solution .solution>div:first-child{display:contents}
  #solution .intro{order:1}
  #solution .intro .eyebrow{text-transform:uppercase}
  #solution .solution-art{order:2;min-height:420px;margin-top:8px}
  #solution .checks{order:3;margin:18px 0 0}
  #solution .solution>div:first-child>.button{order:4;width:100%;height:56px;margin-top:22px;font-size:18px}
  #solution .checks li{align-items:flex-start;gap:16px;margin:24px 0;font-size:18px;line-height:26px}
  #solution .checks li:before{width:40px;height:40px;margin-top:0;font-size:20px}
  #solution .metric{padding:14px 20px;border-radius:14px}
  #solution .metric small{font-size:15px}
  #solution .metric strong{font-size:24px}
  #solution .metric.one{left:8%;bottom:8%}
  #solution .metric.two{right:-11px;top:20%}
}

.site-footer{padding:72px 24px 24px;background:#212121;color:#fff}.footer-wrap{width:min(1216px,100%);margin:auto}.footer-newsletter{display:flex;align-items:center;justify-content:space-between;padding-bottom:40px;border-bottom:1px solid #ffffff14}.footer-newsletter h2{margin:0 0 8px;font-size:24px}.footer-newsletter p,.footer-brand p{margin:0;color:#bbb;font-size:13px;line-height:20px}.footer-newsletter form{display:flex;gap:12px}.footer-newsletter input{width:280px;height:46px;padding:0 16px;border:1px solid #ffffff38;border-radius:6px;background:#ffffff05;color:#fff}.footer-newsletter button{height:46px;padding:0 25px;border:0;border-radius:999px;background:#1379d9;color:#fff;font-weight:600}.footer-newsletter button span{margin-left:10px;font-size:20px}.footer-main{display:grid;grid-template-columns:2.6fr repeat(4,1fr);gap:48px;padding:48px 0}.footer-logo{display:inline-flex;align-items:center;text-decoration:none}.footer-logo .footer-brand-logo{gap:5px}.footer-logo .cm-brand-logo__mark{width:32px;height:28px}.footer-logo .cm-brand-logo__word{font-family:inherit;font-size:20px;letter-spacing:-.04em}.footer-brand p{max-width:260px;margin-top:24px}.social-links{display:flex;gap:14px;margin-top:20px}.social-links a,.social-links>span{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:#303030;transition:transform .2s ease,background-color .2s ease}.social-links a:hover{transform:translateY(-2px);background:#383838}.social-links svg{display:block;width:15px;height:15px;fill:currentColor}.social-links .facebook{color:#4b9cff}.social-links .whatsapp{color:#25d366}.social-links .instagram{color:#ff4057}.social-links .linkedin{color:#0a66c2}.social-links .youtube{color:#ff0033}.footer-column{display:flex;flex-direction:column;gap:14px}.footer-column h3{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.footer-column a,.footer-bottom a{color:#bbb;font-size:13px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid #ffffff14}.footer-bottom p{margin:0;color:#bbb;font-size:12px}.footer-bottom div{display:flex;gap:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:620px){.site-footer{padding:28px 7px 18px}.footer-wrap{width:100%;display:flex;flex-direction:column}.footer-main{display:contents}.footer-brand{order:1;padding-bottom:28px;border-bottom:1px solid #ffffff14}.footer-newsletter{order:2;display:block;padding:28px 0;border-bottom:1px solid #ffffff14}.footer-column{gap:10px;margin-top:26px}.footer-column:nth-of-type(1){order:3}.footer-column:nth-of-type(2){order:4}.footer-column:nth-of-type(3){order:5}.footer-column:nth-of-type(4){order:6}.footer-bottom{order:7}.footer-logo .cm-brand-logo__mark{width:27px;height:24px}.footer-logo .cm-brand-logo__word{font-size:16px}.footer-brand p{max-width:280px;margin-top:16px;font-size:15px;line-height:20px}.social-links{margin-top:16px}.social-links a,.social-links>span{width:24px;height:24px}.social-links svg{width:13px;height:13px}.footer-newsletter h2{font-size:18px;line-height:23px}.footer-newsletter p{font-size:15px;line-height:20px}.footer-newsletter form{display:block;margin-top:18px}.footer-newsletter input,.footer-newsletter button{width:100%;height:42px}.footer-newsletter button{margin-top:8px}.footer-column h3{font-size:15px}.footer-column a{font-size:15px}.footer-bottom{display:block;margin-top:28px;padding-top:20px}.footer-bottom p{font-size:15px}.footer-bottom div{gap:18px;margin-top:14px}.footer-bottom a{font-size:15px}}

/* Primary navigation */
.site-header{position:fixed;z-index:20;top:0;right:0;left:0;height:86px;border-bottom:1px solid #ececec;background:#fff}
body{padding-top:86px}
.navbar{width:min(1280px,calc(100% - 48px));height:100%;display:flex;align-items:center;margin:auto}
.navbar-logo{display:inline-flex;align-items:center;flex:none}
.navbar-logo .navbar-brand-logo{gap:5px}
.navbar-logo .cm-brand-logo__mark{width:31px;height:29px}
.navbar-logo .cm-brand-logo__word{font-family:inherit;font-size:20px;letter-spacing:-.035em}
.nav-panel{display:flex;align-items:center;justify-content:space-between;flex:1;margin-left:174px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{position:relative;color:#555;font-size:15px;font-weight:500;line-height:86px;white-space:nowrap;transition:color .2s ease}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-links a.active:after{content:"";position:absolute;right:0;bottom:27px;left:0;height:1.5px;background:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:38px}
.nav-logout-form{margin:0}
.nav-sign-in,.nav-sign-out{font-size:15px;font-weight:600;white-space:nowrap}
.nav-sign-out{padding:0;border:0;background:none;color:inherit;font-family:inherit;cursor:pointer}
.nav-trial{min-width:168px;height:46px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:0 20px;border-radius:999px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;transition:background-color .2s ease,transform .2s ease}
.nav-trial:hover{background:#1069bd;transform:translateY(-1px)}
.nav-trial span{font-size:27px;font-weight:400;line-height:1}
.nav-toggle{display:none}
.plan .contact-price{display:block;margin-top:14px;font-size:32px;line-height:1.15}
.plan-base-price{display:flex;align-items:baseline;gap:7px;margin-bottom:2px;color:#ff3b30}
.plan-base-price s{font-size:22px;font-weight:500;text-decoration-thickness:2px}
.plan-base-price small{color:inherit}
.plan-price-row{display:flex;align-items:baseline;gap:7px}
.plan-price-row strong{font-size:40px}
.plan-price-row small{color:#888}
.plan-discount-reason{margin:auto 0 0!important;color:#ff3b30!important;font-size:15px;text-align:center;text-transform:uppercase}
.plan-discount-reason+.button{margin-top:18px}
.recommended .plan-base-price,.recommended .plan-base-price small,.recommended .plan-discount-reason{color:#ff4b42!important}
.newsletter-form{position:relative}.newsletter-form button:disabled{cursor:wait;opacity:.7}.newsletter-message{position:absolute;top:calc(100% + 7px);left:0!important;max-width:none!important;margin:0!important;color:#bbb!important;font-size:13px!important;line-height:18px!important}.newsletter-message:empty{display:none}.newsletter-message.success{color:#69d58a!important}.newsletter-message.error{color:#ff7d78!important}

@media(max-width:1120px){
  .nav-panel{margin-left:70px}
  .nav-links{gap:22px}
  .nav-actions{gap:22px}
}

@media(max-width:900px){
  .site-header{height:72px}
  body{padding-top:72px}
  .navbar{width:calc(100% - 32px);justify-content:space-between}
  .navbar-logo .cm-brand-logo__mark{width:29px;height:27px}
  .navbar-logo .cm-brand-logo__word{font-size:18px}
  .nav-toggle{width:42px;height:42px;display:grid;align-content:center;gap:5px;padding:0 10px;border:0;border-radius:10px;background:#f4f4f4;cursor:pointer}
  .nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:#212121;transition:transform .2s ease,opacity .2s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-panel{position:absolute;top:72px;right:0;left:0;display:none;margin:0;padding:16px;background:#fff;border-bottom:1px solid #ececec;box-shadow:0 12px 24px #00000012}
  .site-header.nav-open .nav-panel{display:block}
  .nav-links{display:flex;align-items:stretch;flex-direction:column;gap:0}
  .nav-links a{padding:12px 8px;line-height:24px}
  .nav-links a.active:after{right:auto;bottom:8px;left:8px;width:38px}
  .nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .nav-actions>.nav-trial:only-child{grid-column:1/-1}
  .nav-sign-in,.nav-sign-out,.nav-trial{height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px}
  .nav-sign-in,.nav-sign-out{width:100%;border:1px solid #d8d8d8}.nav-logout-form{width:100%}
  .nav-trial{min-width:0}
}
@media(max-width:620px){.newsletter-message{position:static;grid-column:1/-1;margin-top:8px!important;font-size:15px!important;line-height:20px!important}}
@media(max-width:620px){
  .eyebrow,.badge,.recommended>span,.micro-badge,#pricing .recommended>span,.how-it-works .steps small,.footer-column h3,.footer-bottom p,.newsletter-message{font-size:15px!important}
}

/* Home hero: keep every child inside the mobile viewport. */
.hero-content{width:min(100%,832px);min-width:0}
.hero canvas{display:block;max-width:100%;pointer-events:none}

@media(max-width:620px){
  html,body{max-width:100%;overflow-x:clip}
  .hero{
    width:100%;
    min-height:calc(100svh - 76px);
    padding:48px 14px;
  }
  .hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .hero-content>.eyebrow.outline{
    width:fit-content;
    max-width:100%;
    margin-inline:auto;
    justify-content:center;
    padding:8px 12px;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
  }
  .hero-content>.eyebrow.outline .inline-icon{flex:0 0 auto}
  .hero h1{
    width:100%;
    max-width:100%;
    margin:22px auto 18px;
    font-size:clamp(34px,10.5vw,42px);
    line-height:1.08;
    letter-spacing:-.035em;
    overflow-wrap:break-word;
  }
  .hero .glitch-word{max-width:100%}
  .hero p{
    width:100%;
    max-width:340px;
    margin-inline:auto;
    font-size:16px;
    line-height:1.55;
    overflow-wrap:anywhere;
  }
  .hero .actions{
    width:100%;
    max-width:340px;
    margin-inline:auto;
    gap:12px;
  }
  .hero .actions .button{
    width:100%;
    min-width:0;
    padding-inline:18px;
    font-size:15px;
  }
  .hero small{
    max-width:340px;
    margin:18px auto 0;
    padding-inline:4px;
    font-size:15px;
    line-height:1.5;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media(max-width:360px){
  .hero{padding-inline:12px}
  .hero h1{font-size:33px}
  .hero-content>.eyebrow.outline{padding-inline:10px;letter-spacing:.065em}
}