/* DiaTools landing (owner-chosen design «الف»). Uses the diamind-1 tokens (--ink, --navy, --mint, --muted, --ice). */
.dtl{color:var(--ink);background:#fff}
.dtl-wrap{max-width:1180px;margin-inline:auto;padding-inline:24px;box-sizing:border-box}
.dtl h1,.dtl h2,.dtl p{margin:0}
.dtl-hero{position:relative;isolation:isolate;overflow:hidden;padding:150px 0 90px;background:linear-gradient(145deg,#061a36 0%,#0b356c 57%,#096f7c 100%);color:#fff}
.dtl-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;animation:dtlOrb 9s ease-in-out infinite alternate}
.dtl-orb--one{width:460px;height:460px;top:-180px;left:-140px;background:radial-gradient(circle,#29d7c0,transparent 68%);opacity:.4}
.dtl-orb--two{width:380px;height:380px;bottom:-200px;right:30%;background:radial-gradient(circle,#2c84ff,transparent 68%);opacity:.3;animation-duration:11s}
.dtl-hero__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.dtl-hero__copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.dtl-pill{align-self:flex-start;font-size:13px;font-weight:700;color:#bff3ec;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px}
.dtl-hero h1{font-size:clamp(34px,4vw,54px);line-height:1.25;font-weight:900;letter-spacing:-1px;color:#fff}
.dtl-grad{background:linear-gradient(90deg,#fff,#61e0d0,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:dtlGrad 5s ease-in-out infinite}
.dtl-hero__copy>p{font-size:17px;line-height:2;color:#c5d2e3}
.dtl-actions{display:flex;gap:12px;flex-wrap:wrap}
.dtl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:16px;font-weight:800;text-decoration:none!important;transition:transform .2s ease,background .2s ease}
.dtl-btn:hover{transform:translateY(-2px)}
.dtl-btn--cta{background:linear-gradient(105deg,#12a997,#41d8c6,#1387b4,#12a997);background-size:260% 100%;color:#042b31!important;animation:dtlBtn 4s linear infinite,dtlGlow 2.4s ease-in-out infinite}
.dtl-btn--glass{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff!important}
.dtl-btn--link{color:#bff3ec!important;padding-inline:12px}
.dtl-btn--block{display:flex;width:100%;box-sizing:border-box}
.dtl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dtl-stats span{padding:12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:12px;color:#c5d2e3}
.dtl-stats b{display:block;font-size:20px;color:#fff}
.dtl-demo{margin:0;border-radius:26px;background:#f7fbff;box-shadow:0 35px 90px rgba(0,0,0,.35);overflow:hidden;color:var(--ink);min-width:0}
.dtl-demo__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid #e3eaf4;font-size:12px;color:var(--muted)}
.dtl-demo__bar i{width:9px;height:9px;border-radius:50%;background:#41d8c6}.dtl-demo__bar i:first-child{background:#ff6b6b}.dtl-demo__bar i:nth-child(2){background:#ffc857}
.dtl-demo__bar span{margin-inline-start:8px}
.dtl-demo__body{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:330px}
.dtl-scan{display:flex;flex-direction:column;gap:9px;padding:18px;background:#eef2f8;border-inline-end:1px solid #e3eaf4}
.dtl-scan small,.dtl-sheet small{font-size:11px;color:var(--muted)}
.dtl-scan b{font-size:11px;color:#0b6f66}
.dtl-scan__paper{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(7,29,60,.08);overflow:hidden}
.dtl-scan__paper>i{height:8px;border-radius:4px;background:#cfd9e8}.dtl-l1{width:60%}.dtl-l2{width:40%;background:#e0e7f1!important}
.dtl-scan__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px}.dtl-scan__grid i{height:10px;border-radius:2px;background:#edf1f7}.dtl-scan__grid i:nth-child(-n+3){background:#dbe4f0}
.dtl-scan__line{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#41d8c6,transparent);box-shadow:0 0 18px #41d8c6;animation:dtlScan 3.2s ease-in-out infinite}
.dtl-sheet{display:flex;flex-direction:column;gap:8px;padding:18px;min-width:0}
.dtl-sheet__head,.dtl-sheet__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font-size:12.5px}
.dtl-sheet__head{background:var(--navy);color:#fff;font-weight:700;border-radius:8px 8px 0 0}
.dtl-sheet__head span,.dtl-sheet__row span{padding:9px 10px}
.dtl-sheet__row{border-bottom:1px solid #e3eaf4;animation:dtlRow 6.4s ease infinite}
.dtl-r2{animation-delay:.5s}.dtl-r3{animation-delay:1s}.dtl-r4{animation-delay:1.5s}
.dtl-sheet__note{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff6e5;color:#7c5a12;font-size:12px;animation:dtlRow 6.4s ease infinite}
.dtl-section{padding:88px 0}
.dtl-section--tint{background:#f4f7fc}
.dtl-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.dtl-head span{font-size:13px;font-weight:700;color:#0b6f66}
.dtl-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:900;line-height:1.3}
.dtl-head p{font-size:15px;line-height:2;color:var(--muted)}
.dtl-head--center{align-items:center;text-align:center;max-width:760px;margin-inline:auto}
.dtl-head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.dtl-head--split>div{display:flex;flex-direction:column;gap:10px}
.dtl-head--split p{max-width:430px;font-size:14px}
.dtl-pipeline{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dtl-pipeline::before{content:"";position:absolute;top:34px;right:12%;left:12%;height:3px;border-radius:3px;background:linear-gradient(90deg,#1bae9f 0 30%,rgba(27,174,159,.15) 30% 100%);background-size:200% 100%;animation:dtlFlow 2.4s linear infinite}
.dtl-pipeline li{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;background:#fff;border:1.5px solid rgba(14,58,120,.1);animation:dtlStep 4s ease-in-out infinite}
.dtl-pipeline li:nth-child(2){animation-delay:1s}.dtl-pipeline li:nth-child(3){animation-delay:2s}.dtl-pipeline li:nth-child(4){animation-delay:3s}
.dtl-pipeline b,.dtl-steps b{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800}
.dtl-pipeline li:last-child b,.dtl-b-mint{background:linear-gradient(135deg,#12a997,#41d8c6)!important;color:#042b31!important}
.dtl-pipeline strong{font-size:16px}
.dtl-pipeline span{font-size:13px;line-height:1.9;color:var(--muted)}
.dtl-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dtl-group{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;border:1px solid rgba(14,58,120,.1);background:#fff;box-shadow:0 10px 30px rgba(7,29,60,.05);transition:transform .25s ease,box-shadow .25s ease}
.dtl-group:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(7,29,60,.1)}
.dtl-group header{display:flex;justify-content:space-between;align-items:center}
.dtl-group header strong{font-size:17px}
.dtl-group header span{font-size:12px;font-weight:700;color:#0b6f66;background:#dff7f3;padding:3px 10px;border-radius:999px}
.dtl-group p{font-size:12.5px;line-height:1.8;color:var(--muted)}
.dtl-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dtl-group li{font-size:12px;padding:5px 10px;border-radius:9px;background:#f2f5fa;color:var(--navy)}
.dtl-group--dark{justify-content:center;background:linear-gradient(145deg,#061a36,#0b356c);border:0;color:#fff}
.dtl-group--dark p{color:#c5d2e3;font-size:13px;line-height:2}
.dtl-install{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:start}
.dtl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.dtl-steps li{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:18px;background:#fff}
.dtl-steps b{width:38px;height:38px;border-radius:11px;background:var(--ice);color:var(--navy)}
.dtl-steps span{font-size:13px;line-height:1.9;color:var(--muted)}
.dtl-steps strong{display:block;margin-bottom:4px;font-size:15px;color:var(--ink)}
.dtl-download{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px;padding:30px;border-radius:26px;background:linear-gradient(145deg,#061a36 0%,#0b356c 60%,#096f7c 100%);color:#fff;box-shadow:0 30px 70px rgba(7,29,60,.25)}
.dtl-download>strong{font-size:26px}
.dtl-tag{align-self:flex-start;font-size:12px;font-weight:700;color:#042b31;background:#61e0d0;padding:4px 12px;border-radius:999px}
.dtl-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;font-size:13px}
.dtl-facts span{padding:12px;border-radius:12px;background:rgba(255,255,255,.08)}
.dtl-facts small{display:block;font-size:11px;color:#c5d2e3}
.dtl-sha{font-size:11.5px;color:#c5d2e3}
.dtl-download__wait{font-size:14px;line-height:1.9;color:#c5d2e3}
.dtl-final{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:44px 48px;border-radius:28px;background:linear-gradient(120deg,#0b356c,#096f7c);color:#fff}
.dtl-final h2{font-size:clamp(24px,2.6vw,32px);font-weight:900;color:#fff;margin-bottom:8px}
.dtl-final span{color:#c5d2e3}
/* «Free» badge and the four-tool rotating demo (16 s cycle, 4 s per tool). */
.dtl-pill--free{color:#042b31;background:linear-gradient(105deg,#61e0d0,#41d8c6);border-color:transparent}
.dtl-tabs{display:flex;gap:6px;padding:12px 16px 0;flex-wrap:wrap}
.dtl-tabs span{font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;background:#eef2f8;color:var(--muted);animation:dtlTab 16s infinite}
.dtl-t2{animation-delay:4s!important}.dtl-t3{animation-delay:8s!important}.dtl-t4{animation-delay:12s!important}
.dtl-slides{position:relative;height:300px;margin:12px 16px 18px}
.dtl-slide{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;background:#fff;border:1px solid #e3eaf4;opacity:0;animation:dtlSlide 16s infinite}
.dtl-s2{animation-delay:4s}.dtl-s3{animation-delay:8s}.dtl-s4{animation-delay:12s}
.dtl-slide small{font-size:12px;font-weight:700;color:#0b6f66}
.dtl-fix,.dtl-match{display:grid;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#f7fbff;font-size:14px}
.dtl-fix{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.dtl-fix i,.dtl-pdf>i{font-style:normal;color:#1bae9f;font-weight:800}
.dtl-bad{color:#b54848;text-decoration:line-through;text-decoration-color:rgba(181,72,72,.5)}
.dtl-good{color:#0b6f66;font-weight:700}
.dtl-match{grid-template-columns:repeat(2,minmax(0,1fr)) auto}
.dtl-ok,.dtl-warn{font-size:11.5px;padding:4px 10px;border-radius:999px}
.dtl-ok{background:#dff7f3;color:#0b6f66}.dtl-warn{background:#fff3dc;color:#8a5a00}
.dtl-pdf{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.dtl-pdf .dtl-scan__paper{height:170px;box-sizing:border-box}
.dtl-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:10px;border-radius:10px;border:1px solid #e3eaf4}
.dtl-mini b{height:14px;border-radius:3px;background:var(--navy)}.dtl-mini em{height:12px;border-radius:3px;background:#dff7f3}
.dtl-bars{flex:1;display:flex;align-items:flex-end;gap:14px;padding:10px 6px 0;border-bottom:2px solid #e3eaf4}
.dtl-bars span{flex:1;height:var(--h);border-radius:8px 8px 0 0;background:linear-gradient(180deg,#41d8c6,#0e3a78);transform-origin:bottom;animation:dtlBar 16s infinite 12s}
/* Growth timeline: bars widen with the tool count. */
.dtl-growth{list-style:none;margin:0 auto;padding:0;max-width:900px;display:flex;flex-direction:column;gap:14px}
.dtl-growth li{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;row-gap:4px;padding:20px 22px;border-radius:20px;background:#fff;border:1px solid rgba(14,58,120,.1);overflow:hidden}
.dtl-growth li::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:linear-gradient(90deg,rgba(27,174,159,.08),rgba(27,174,159,0));pointer-events:none}
.dtl-growth b{grid-row:span 2;align-self:center;font-size:34px;font-weight:900;color:#1bae9f;text-align:center}
.dtl-growth strong{font-size:16px}
.dtl-growth span{font-size:13px;line-height:1.9;color:var(--muted)}
.dtl-growth li:last-child{border-color:rgba(27,174,159,.45);box-shadow:0 16px 40px rgba(27,174,159,.12)}
@keyframes dtlSlide{0%{opacity:0}4%,25%{opacity:1}29%,100%{opacity:0}}
@keyframes dtlTab{0%,25%{background:#0e3a78;color:#fff}27%,100%{background:#eef2f8;color:var(--muted)}}
@keyframes dtlBar{0%{transform:scaleY(.2)}6%,100%{transform:scaleY(1)}}
@keyframes dtlOrb{to{transform:translate(40px,30px)}}
@keyframes dtlGrad{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes dtlBtn{to{background-position:-260% 0}}
@keyframes dtlGlow{0%,100%{box-shadow:0 14px 35px rgba(28,190,170,.25)}50%{box-shadow:0 14px 45px rgba(28,190,170,.55)}}
@keyframes dtlScan{0%,100%{top:6%}50%{top:88%}}
@keyframes dtlRow{0%,8%{opacity:0;transform:translateX(18px)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dtlFlow{to{background-position:-200% 0}}
@keyframes dtlStep{0%,100%{border-color:rgba(14,58,120,.1)}50%{border-color:#1bae9f}}
@media(max-width:1020px){.dtl-hero__grid,.dtl-install{grid-template-columns:1fr}.dtl-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.dtl-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.dtl-pipeline::before{display:none}.dtl-download{position:static}}
@media(max-width:620px){.dtl-slides{height:330px}.dtl-match{grid-template-columns:minmax(0,1fr) auto}.dtl-match span:first-child{display:none}.dtl-growth li{grid-template-columns:56px minmax(0,1fr)}.dtl-growth b{font-size:26px}.dtl-hero{padding:112px 0 64px}.dtl-section{padding:64px 0}.dtl-wrap{padding-inline:16px}.dtl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dtl-actions .dtl-btn{flex:1 1 100%}.dtl-groups,.dtl-pipeline{grid-template-columns:1fr}.dtl-demo__body{grid-template-columns:1fr}.dtl-scan{border-inline-end:0;border-bottom:1px solid #e3eaf4}.dtl-scan__paper{min-height:120px}.dtl-final{padding:30px 24px}.dtl-final .dtl-btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.dtl *,.dtl *::before{animation:none!important;transition:none!important}.dtl-s1{opacity:1}.dtl-t1{background:#0e3a78!important;color:#fff!important}.dtl-grad{color:#61e0d0;background:none}}