/* Template robo. */
:root{--fb:'Almarai';--fh:'Changa';--bg:#EEF2F6;--ink:#1C2B3F;--ink2:#56677E;--line:#D3DCE6;--acc:#FF6B1A;--blue:#2B4C7E;--yel:#FFC53D;--steel:#C9D3DF;--nav-bg:rgba(255,255,255,.94);--nav-solid:#fff;--demo-bg:#1C2B3F;--r-in:8px;--po-bg:#2B4C7E;--po-acc:#FFC53D}
.nav{border-bottom:3px solid var(--ink)}
.brand>span{font-family:var(--fh);font-size:20px}
.brand small{font-family:var(--fb);color:var(--acc);opacity:1;font-weight:700}
.robo .btn{border-radius:10px}
.robo .cta,.robo .b1,form .btn{background:var(--acc);color:#fff;box-shadow:0 5px 0 #B9480C}
.robo .b1:active,.robo .cta:active{transform:translateY(3px);box-shadow:0 2px 0 #B9480C}
.robo .b2{background:var(--ink);color:#fff;box-shadow:0 5px 0 #0B1626}
.kick{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-family:var(--fh);font-size:16px}
.kick::before{content:"";width:26px;height:6px;border-radius:3px;background:var(--acc)}
.sec-h h2{font-size:42px;font-weight:800}

/* hero */
.hero{padding:60px 0 0;text-align:center;background:radial-gradient(circle at 50% 120%,#fff 0 35%,transparent 36%),radial-gradient(#CBD5E0 1.5px,transparent 1.6px) 0 0/26px 26px,var(--bg);position:relative;overflow:hidden}
.hero-t{max-width:820px;margin:0 auto}
.tape{display:inline-block;background:var(--yel);color:var(--ink);font-weight:800;font-size:14px;padding:7px 18px;border:2px solid var(--ink);border-radius:4px;transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--ink)}
.hero h1{font-size:64px;font-weight:800;margin:22px 0 14px;line-height:1.2}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero-t>p{font-size:18px;color:var(--ink2);margin:0 auto;max-width:640px}
.hero-b{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.bench{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:36px;margin-top:40px;padding-bottom:40px}
.nuts{display:flex;flex-direction:column;gap:18px;align-items:flex-end}.nuts:last-child{align-items:flex-start}
.nut{width:150px;height:130px;display:grid;place-content:center;text-align:center;background:var(--blue);color:#fff;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.nuts:last-child .nut{background:var(--acc)}.nuts .nut:nth-child(2){background:var(--ink)}
.nut b{font-family:var(--fh);font-size:32px;line-height:1.1}.nut span{font-size:13px;opacity:.9;padding:0 22px}
.dock{width:400px;height:400px;border-radius:50%;padding:16px;background:#fff;border:3px dashed var(--steel);position:relative}
.dock::before,.dock::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:var(--yel);border:3px solid var(--ink);top:50%;margin-top:-11px}
.dock::before{left:-13px}.dock::after{right:-13px}
.bot{width:100%;height:100%;border-radius:50%;background:center/cover}
.hazard{height:18px;background:repeating-linear-gradient(-45deg,var(--yel) 0 18px,var(--ink) 18px 36px)}

/* cards */
.card{background:#fff;border:2px solid var(--ink);border-radius:8px;padding:22px}
.lv{grid-template-columns:repeat(3,1fr);gap:24px}
.lv .card{position:relative;padding-top:34px;box-shadow:6px 6px 0 var(--steel);
 background:radial-gradient(circle,#B9C4D2 3.5px,transparent 4px) 8px calc(100% - 8px)/14px 14px no-repeat,radial-gradient(circle,#B9C4D2 3.5px,transparent 4px) calc(100% - 8px) calc(100% - 8px)/14px 14px no-repeat,#fff}
.lv .card::before{content:"";position:absolute;inset:0 0 auto;height:12px;background:repeating-linear-gradient(-45deg,var(--yel) 0 12px,var(--ink) 12px 24px);border-radius:6px 6px 0 0}
.lv-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hex{width:58px;height:52px;display:grid;place-items:center;background:var(--acc);color:#fff;font-family:var(--fh);font-size:26px;font-weight:800;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.lv .card:nth-child(2) .hex{background:var(--blue)}.lv .card:nth-child(3) .hex{background:var(--ink)}
.lv .ag{background:var(--bg);color:var(--blue);border:1.5px solid var(--blue);border-radius:99px;padding:3px 12px;font-size:13px}
.lv h3{font-size:26px;margin:16px 0 6px}.lv p{margin:0;color:var(--ink2)}
.panels{grid-template-columns:repeat(3,1fr)}
.panels .card{background:var(--blue);border-color:var(--blue);color:#fff}
.panels .ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--acc);margin-bottom:12px}.panels .ic .i{width:26px;height:26px}
.panels h3{font-size:22px;color:#fff;margin-bottom:4px}.panels p{margin:0;color:#D6E1F0}
.info{background:#fff}

/* sections */
.ben{background:#fff}
.bc{padding:0;overflow:hidden;box-shadow:6px 6px 0 var(--steel)}.bh{height:200px;background-color:var(--bg);border-bottom:2px solid var(--ink)}
.bc h3{font-size:24px;padding:18px 20px 8px}.bc .ticks{padding:0 20px 22px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}.ticks li{display:flex;gap:10px}
.ticks .i{width:26px;height:26px;padding:5px;border-radius:6px;background:var(--acc);color:#fff}
.ticks b{display:block;font-family:var(--fh);font-size:18px}.ticks span{color:var(--ink2)}
.quote{font-family:var(--fh);font-weight:700;color:var(--blue)}
.season{background:var(--bg)}
.tl{padding-top:34px}
.tl::before{content:"";position:absolute;top:10px;inset-inline:0;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 22px,var(--yel) 22px 44px)}
.tl>div{border:2px solid var(--ink);border-radius:8px}
.tl>div::before{content:"";position:absolute;top:-36px;inset-inline-start:20px;width:20px;height:20px;border-radius:50%;background:var(--acc);border:4px solid var(--ink)}
.tl small{color:var(--acc);font-family:var(--fh)}
.tl .now{background:var(--acc);border-color:var(--ink);color:#fff}.tl .now small{color:var(--yel)}.tl .now p{color:#FFE9DC}
.why{background:#fff}
.why-v{border-radius:50%;aspect-ratio:1;min-height:0;border:12px solid var(--bg);box-shadow:0 0 0 3px var(--ink)}
.course{background:var(--ink);color:#fff}.course .sec-h h2{color:#fff}.course .kick{color:var(--yel)}
.facts div{background:rgba(255,255,255,.07);border-radius:8px}.facts b{color:#fff}.facts span{color:#B8C4D6}.facts .i{color:var(--yel)}
.learn{color:var(--ink)}.learn .ticks .i{background:var(--blue)}
.gl{background:var(--bg)}.gal div{border:2px solid var(--ink);border-radius:8px}
.fq{background:#fff}.faqs details{border:2px solid var(--ink);border-radius:8px}.faqs summary::after{color:var(--acc)}
.robo .portal{--po-bg:#2B4C7E;--po-acc:#FFC53D}
.bk{background:var(--blue);color:#fff}.bk .sec-h h2{color:#fff}.bk .sec-h p{color:#D6E1F0}.bk .kick{color:var(--yel)}.bk form{color:var(--ink);box-shadow:8px 8px 0 #1C2B3F}
input,select,textarea{border:2px solid var(--line)}
.ct{background:var(--bg)}.soc a{border:2px solid var(--ink);border-radius:8px}
footer{background:var(--ink);color:#B8C4D6;border-top:6px solid var(--acc)}

@media (max-width:900px){
 .hero{padding-top:40px}.hero h1{font-size:38px}
 .bench{grid-template-columns:1fr 1fr;gap:16px}.dock{grid-column:1/-1;grid-row:1;width:280px;height:280px;margin:0 auto}
 .nuts,.nuts:last-child{align-items:center}.nut{width:130px;height:112px}.nut b{font-size:26px}
 .lv,.panels{grid-template-columns:1fr}.sec-h h2{font-size:30px}
 .tl{padding-top:0}.tl::before,.tl>div::before{display:none}
 .why-v{max-width:320px;margin:0 auto;width:100%}
}