/* Generated by tools/build-site.js from css/ind/*.css — the industry looks, for the banner on /clients/. Do not edit. */
/* Restaurants & cafés: a printed menu on cream paper — a plate under the headline, steam rising, a gingham edge.
   Palette: UI UX Pro Max "Restaurant/Food Service" (#DC2626 red, #A16207 mustard, #450A0A ink) on warm paper. Font: Lalezar. */
body.skin-restaurants{--bg:#FBF3E4;--card:#FFFAF0;--card-2:#F4E6CF;--border:#E3CFAE;--fg:#3B0D0C;--secondary-fg:#5A2A22;--muted:#73493D;
  --primary:#C8102E;--on-primary:#FFFFFF;--accent:#A16207;--i-font:"Lalezar";--i-w:400;--i-r:6px;--peak:#1D4ED8;color-scheme:light}
.skin-restaurants .ih h1{color:var(--primary);font-size:clamp(44px,7vw,96px);line-height:1.1}
html[lang=en] .skin-restaurants .ih h1{line-height:1}
.skin-restaurants .ih::after{content:"";position:absolute;inset:auto 0 0;height:40px;z-index:-1;
  background:repeating-linear-gradient(90deg,rgba(200,16,46,.5) 0 20px,transparent 20px 40px),repeating-linear-gradient(0deg,rgba(200,16,46,.5) 0 20px,transparent 20px 40px),#FFFAF0}
.skin-restaurants .plate circle{fill:none;stroke:var(--fg);stroke-opacity:.1;stroke-width:3}
.skin-restaurants .plate circle + circle{fill:#FFFAF0;stroke-opacity:.14}
.skin-restaurants .cutlery path{fill:none;stroke:var(--fg);stroke-opacity:.22;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.skin-restaurants .steam path{fill:none;stroke:var(--primary);stroke-opacity:.5;stroke-width:6;stroke-linecap:round;animation:rs-steam 3.2s ease-in-out infinite}
.skin-restaurants .steam path:nth-child(2){animation-delay:.5s}
.skin-restaurants .steam path:nth-child(3){animation-delay:1s}
@keyframes rs-steam{0%{opacity:0;transform:translateY(20px)}35%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
/* clients: the menu card */
.skin-restaurants .ir-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;max-width:1000px;margin:0 auto;padding:clamp(24px,3vw,40px) clamp(16px,3vw,48px);
  background:var(--card);border:4px double var(--fg);border-radius:4px}
.skin-restaurants .ir-list li{justify-content:center;background:none;border:0;border-bottom:2px dotted var(--border);border-radius:0;padding:8px 10px;font:400 22px/1.3 "Lalezar",var(--font-body);color:var(--fg)}
.skin-restaurants .ir-list img{width:36px;height:36px}
/* services: recipe cards */
.skin-restaurants .is-list li{border:2px dashed var(--border);background:var(--card)}
.skin-restaurants .is-ico{border-radius:50%}
.skin-restaurants .is-list h3{color:var(--primary)}
/* closing call: an order ticket with notches */
.skin-restaurants .ic-box{border:2px dashed var(--border);background:radial-gradient(circle at 0 50%,var(--bg) 16px,transparent 17px),radial-gradient(circle at 100% 50%,var(--bg) 16px,transparent 17px),var(--card)}
.skin-restaurants .im-list a{border-color:var(--accent);color:var(--fg)}
@media (max-width:900px){ .skin-restaurants .ir-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px} }
@media (max-width:520px){ .skin-restaurants .ir-list li{font-size:19px} }
/* phones: the plate sits behind the words, the cutlery steps aside */
@media (max-width:700px){
  .skin-restaurants .cutlery{display:none}
  .skin-restaurants .ih-art .art{width:150vw;max-height:none}
  .skin-restaurants .ih-lead{color:var(--secondary-fg)}
}

/* Entertainment & kids areas: a toy box — chunky ink outlines, offset shadows, balloons bobbing, confetti.
   Palette: UI UX Pro Max "Kids Learning" (#2563EB, #F59E0B, #EC4899) on cream. Font: Baloo Bhaijaan 2. */
body.skin-entertainment{--bg:#FFF7E6;--card:#FFFFFF;--card-2:#FFF0CC;--border:#1E1B4B;--fg:#1E1B4B;--secondary-fg:#312E81;--muted:#4C4A73;
  --primary:#F59E0B;--on-primary:#1E1B4B;--accent:#DB2777;--i-font:"Baloo Bhaijaan 2";--i-w:800;--i-r:22px;--peak:#1D4ED8;color-scheme:light}
.skin-entertainment .btn{border:3px solid var(--fg);box-shadow:4px 4px 0 var(--fg);font-weight:700}
html[dir=rtl] .skin-entertainment .btn{box-shadow:-4px 4px 0 var(--fg)}
.skin-entertainment .btn-ghost{background:#fff}
.skin-entertainment .btn:active{transform:translate(2px,2px);box-shadow:none}
.skin-entertainment .ih h1{font-size:clamp(44px,7vw,92px);line-height:1.1}
.skin-entertainment .ih h1{text-shadow:3px 3px 0 #FBCFE8}
.skin-entertainment .ih-art .art{width:min(1240px,100vw)}
.skin-entertainment .bl ellipse{stroke:var(--fg);stroke-width:4}
.skin-entertainment .b0 ellipse,.skin-entertainment .b0 .k{fill:#EC4899}
.skin-entertainment .b1 ellipse,.skin-entertainment .b1 .k{fill:#2563EB}
.skin-entertainment .b2 ellipse,.skin-entertainment .b2 .k{fill:#F59E0B}
.skin-entertainment .b3 ellipse,.skin-entertainment .b3 .k{fill:#14B8A6}
.skin-entertainment .b4 ellipse,.skin-entertainment .b4 .k{fill:#8B5CF6}
.skin-entertainment .bl .k{stroke:var(--fg);stroke-width:3;stroke-linejoin:round}
.skin-entertainment .bl .s{fill:none;stroke:var(--fg);stroke-width:2.5;stroke-opacity:.6}
.skin-entertainment .bl{animation:en-bob 4.2s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
@keyframes en-bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-22px) rotate(2deg)}}
.skin-entertainment .bl{transform-box:fill-box;transform-origin:50% 100%}
.skin-entertainment .cf{transform-box:fill-box;transform-origin:center;animation:en-cf 2.6s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
.skin-entertainment .c0{fill:#EC4899}.skin-entertainment .c1{fill:#2563EB}.skin-entertainment .c2{fill:#F59E0B}.skin-entertainment .c3{fill:#14B8A6}
@keyframes en-cf{0%,100%{opacity:.35}50%{opacity:1}}
/* clients: tokens with a hard shadow, each its own colour */
.skin-entertainment .ir-list li{border:3px solid var(--fg);box-shadow:4px 4px 0 var(--fg);font-size:19px}
.skin-entertainment .ir-list li:nth-child(4n+1){background:#FCE7F3}
.skin-entertainment .ir-list li:nth-child(4n+2){background:#DBEAFE}
.skin-entertainment .ir-list li:nth-child(4n+3){background:#FEF3C7}
.skin-entertainment .ir-list li:nth-child(4n+4){background:#CCFBF1}
.skin-entertainment .ir-logos img{border:3px solid var(--fg)}
/* services: tilted toy cards */
.skin-entertainment .is-list li{border:3px solid var(--fg);box-shadow:6px 6px 0 var(--fg)}
.skin-entertainment .is-list li:nth-child(odd){rotate:-1deg}
.skin-entertainment .is-list li:nth-child(even){rotate:1deg}
.skin-entertainment .is-list li:nth-child(1) .is-ico{background:#EC4899;color:#fff}
.skin-entertainment .is-list li:nth-child(2) .is-ico{background:#2563EB;color:#fff}
.skin-entertainment .is-list li:nth-child(4) .is-ico{background:#14B8A6;color:#06302B}
.skin-entertainment .is-ico{border:3px solid var(--fg)}
.skin-entertainment .ic-box{border:3px solid var(--fg);box-shadow:8px 8px 0 var(--fg);background:#DBEAFE}
.skin-entertainment .ic-goal span{color:#BE185D}
.skin-entertainment .im-list a{border:2px solid var(--fg);background:#fff;color:var(--fg)}
.skin-entertainment .g-item{border:3px solid var(--fg)}
/* phones: the balloons float above the headline instead of beside it */
@media (max-width:700px){
  .skin-entertainment .ih-art{place-items:start center;padding-top:calc(var(--hd-h) + 4px)}
  .skin-entertainment .ih-art .art{width:116vw;max-height:none;opacity:.9}
  .skin-entertainment .ih{padding-top:calc(var(--hd-h) + 150px)}
}

/* Car sales & dealers: a showroom at night — graphite, a speedometer sweeping under the headline, licence plates.
   Palette: UI UX Pro Max "Automotive/Car Dealership" (#1E293B, #DC2626). Font: Changa. */
body.skin-car-sales{--bg:#0B0E13;--card:#121821;--card-2:#18202B;--border:#262F3B;--fg:#F1F5F9;--secondary-fg:#CBD5E1;--muted:#8B95A5;
  --primary:#DC2626;--on-primary:#FFFFFF;--accent:#F87171;--i-font:"Changa";--i-w:800;--i-r:4px}
.skin-car-sales .ih{padding-bottom:clamp(150px,22vw,300px)}
.skin-car-sales .ih h1{font-size:clamp(42px,6.4vw,88px);line-height:1.1}
.skin-car-sales .ih-lead{color:#AEB7C4}
.skin-car-sales .ih-art{place-items:end center}
.skin-car-sales .ih-art .art{width:min(1060px,108vw);max-height:62%;margin-bottom:-1%}
.skin-car-sales .arc{fill:none;stroke:#2A3442;stroke-width:3}
.skin-car-sales .arc.red{stroke:var(--primary);stroke-width:7}
.skin-car-sales .tk{stroke:#334050;stroke-width:3}
.skin-car-sales .tk.big{stroke:#8B95A5;stroke-width:5}
.skin-car-sales .needle path{fill:var(--primary)}
.skin-car-sales .needle circle{fill:#18202B;stroke:#8B95A5;stroke-width:4}
.skin-car-sales .needle{transform-box:view-box;transform-origin:500px 520px;transform:rotate(-86deg)}
.skin-car-sales .alive .needle{animation:cs-rev 2.6s var(--ease-out) .3s forwards,cs-idle 2.2s ease-in-out 2.9s infinite alternate}
@keyframes cs-rev{0%{transform:rotate(-86deg)}55%{transform:rotate(70deg)}100%{transform:rotate(38deg)}}
@keyframes cs-idle{from{transform:rotate(38deg)}to{transform:rotate(44deg)}}
/* clients: Egyptian licence plates */
.skin-car-sales .ir-list li{flex-direction:column;gap:0;min-width:190px;padding:0 0 8px;border-radius:8px;background:#F8FAFC;color:#0B0E13;border:3px solid #0B0E13;box-shadow:0 0 0 2px #94A3B8;font-size:20px;overflow:hidden}
.skin-car-sales .ir-list li::before{content:"مصر  EGYPT";display:block;align-self:stretch;margin-bottom:8px;padding:3px 0;background:#1D4ED8;color:#fff;font:700 11px/1.2 var(--font-body);letter-spacing:.2em;text-align:center}
.skin-car-sales .ir-list img{width:30px;height:30px;margin-bottom:4px}
/* services: chamfered panels with a red edge */
.skin-car-sales .is-list li{border:0;background:linear-gradient(var(--primary),var(--primary)) top/100% 3px no-repeat,var(--card);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.skin-car-sales .is-ico{background:transparent;border:2px solid var(--primary);color:var(--fg)}
.skin-car-sales .ic-box{border:0;background:linear-gradient(90deg,var(--primary) 0 6px,transparent 6px calc(100% - 6px),var(--primary) calc(100% - 6px)),var(--card)}
@media (max-width:640px){ .skin-car-sales .ir-list li{min-width:150px;font-size:17px} }

/* Car after-sales: the workshop — turning gears, a wrench, key tags on a board, stitched panels.
   Palette: UI UX Pro Max "Construction" accent (#EA580C) on workshop black. Font: Rubik Black. */
body.skin-car-aftersales{--bg:#111315;--card:#1A1D21;--card-2:#22262B;--border:#2E3339;--fg:#F3F4F6;--secondary-fg:#D1D5DB;--muted:#9CA3AF;
  --primary:#EA580C;--on-primary:#111315;--accent:#FB923C;--i-font:"Rubik";--i-w:900;--i-r:10px}
.skin-car-aftersales .ih h1{font-size:clamp(40px,6vw,82px);line-height:1.15}
.skin-car-aftersales .ih::after{content:"";position:absolute;inset:auto 0 0;height:24px;z-index:-1;background:conic-gradient(#2E3339 25%,transparent 0 50%,#2E3339 0 75%,transparent 0) 0 0/24px 24px}
.skin-car-aftersales .ih-art .art{width:min(1100px,110vw);opacity:.9}
.skin-car-aftersales .g1,.skin-car-aftersales .g2{fill:none;stroke:#3A4048;stroke-width:3;transform-box:fill-box;transform-origin:center}
.skin-car-aftersales .g1{animation:ca-spin 26s linear infinite}
.skin-car-aftersales .g2{animation:ca-spin 18s linear infinite reverse}
.skin-car-aftersales .hub{fill:var(--card-2);stroke:#4B5563;stroke-width:3}
.skin-car-aftersales .wrench path{fill:none;stroke:var(--primary);stroke-opacity:.65;stroke-width:6;stroke-linejoin:round}
.skin-car-aftersales .bolt{fill:none;stroke:#6B7280;stroke-width:4}
@keyframes ca-spin{to{transform:rotate(360deg)}}
/* clients: key tags hanging on the board */
.skin-car-aftersales .ir-list li{border:2px solid var(--primary);border-radius:12px 12px 12px 28px;background:var(--card);padding-inline-start:16px}
.skin-car-aftersales .ir-list li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--primary);flex-shrink:0}
.skin-car-aftersales .ir-list li:nth-child(odd){rotate:-2deg}
.skin-car-aftersales .ir-list li:nth-child(even){rotate:2deg}
/* services: stitched panels with rivets */
.skin-car-aftersales .is-list li{outline:2px dashed #3A4048;outline-offset:-10px;
  background:radial-gradient(circle 4px at 16px 16px,#4B5563 98%,transparent),radial-gradient(circle 4px at calc(100% - 16px) 16px,#4B5563 98%,transparent),
  radial-gradient(circle 4px at 16px calc(100% - 16px),#4B5563 98%,transparent),radial-gradient(circle 4px at calc(100% - 16px) calc(100% - 16px),#4B5563 98%,transparent),var(--card)}
@media (max-width:700px){ .skin-car-aftersales .ih-art .art{opacity:.45} }
.skin-car-aftersales .ic-box{outline:2px dashed #3A4048;outline-offset:-12px}

/* Real estate: the architect's sheet — a blueprint grid, a skyline that draws itself floor by floor, plan labels.
   Palette: UI UX Pro Max "Real Estate/Property" (#0F766E, #0369A1, #134E4A). Font: El Messiri. */
body.skin-real-estate{--bg:#F3F7F6;--card:#FFFFFF;--card-2:#E6EFED;--border:#C9DAD6;--fg:#0B3B36;--secondary-fg:#134E4A;--muted:#46655F;
  --primary:#0F766E;--on-primary:#FFFFFF;--accent:#0369A1;--i-font:"El Messiri";--i-w:700;--i-r:2px;--peak:#1D4ED8;color-scheme:light}
.skin-real-estate .ih{padding-bottom:clamp(170px,26vw,330px);
  background:linear-gradient(rgba(15,118,110,.08) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(15,118,110,.08) 1px,transparent 1px) 0 0/32px 32px}
.skin-real-estate .ih h1{font-size:clamp(42px,6.4vw,86px);line-height:1.2}
.skin-real-estate .ih-art{place-items:end center}
.skin-real-estate .ih-art .art{width:min(1240px,104vw);max-height:46%}
.skin-real-estate .gd{stroke:var(--fg);stroke-width:3}
.skin-real-estate .bd{fill:var(--bg);stroke:var(--primary);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1}
.skin-real-estate .wn{fill:var(--accent);opacity:0}
.skin-real-estate .dim path{fill:none;stroke:var(--muted);stroke-width:1.5}
.js.ready .skin-real-estate .bd{animation:re-draw 1.4s var(--ease-out) forwards;animation-delay:var(--d)}
.skin-real-estate .alive .wn{animation:re-lit .5s ease forwards;animation-delay:var(--d)}
@keyframes re-draw{to{stroke-dashoffset:0}}
@keyframes re-lit{to{opacity:.32}}
/* clients and services: plan labels with corner ticks */
.skin-real-estate .ir-list li,.skin-real-estate .is-list li{border-color:var(--border);
  background:linear-gradient(var(--primary),var(--primary)) 0 0/12px 2px,linear-gradient(var(--primary),var(--primary)) 0 0/2px 12px,
  linear-gradient(var(--primary),var(--primary)) 100% 0/12px 2px,linear-gradient(var(--primary),var(--primary)) 100% 0/2px 12px,
  linear-gradient(var(--primary),var(--primary)) 0 100%/12px 2px,linear-gradient(var(--primary),var(--primary)) 0 100%/2px 12px,
  linear-gradient(var(--primary),var(--primary)) 100% 100%/12px 2px,linear-gradient(var(--primary),var(--primary)) 100% 100%/2px 12px,var(--card);background-repeat:no-repeat}
.skin-real-estate .is-ico{border-radius:2px}
/* closing call: a dark blueprint */
.skin-real-estate .ic-box{--fg:#F0FDFA;--muted:#A7D3CC;--accent:#5EEAD4;border:0;color:var(--fg);
  background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/28px 28px,#0B3B36}
.skin-real-estate .ic-box .btn-ghost{background:transparent;color:#F0FDFA;border-color:#2D6B63}
.skin-real-estate .ic-box .btn-primary{background:#F0FDFA;color:#0B3B36}

/* Smart home: a control app — a house sending wifi, devices linked in, tiles with switches.
   Palette: UI UX Pro Max "Smart Home/IoT Dashboard" (#0F172A, #1E293B, #22C55E). Font: Readex Pro. */
body.skin-smart-home{--bg:#0B1220;--card:#111A2E;--card-2:#16213A;--border:#22304D;--fg:#E2E8F0;--secondary-fg:#CBD5E1;--muted:#94A3B8;
  --primary:#22C55E;--on-primary:#052E14;--accent:#4ADE80;--i-font:"Readex Pro";--i-w:700;--i-r:20px}
.skin-smart-home .ih{align-content:center;gap:8px}
.skin-smart-home .ih-art{position:relative;inset:auto;z-index:0}
.skin-smart-home .ih-art .art{width:min(400px,78vw)}
.skin-smart-home .ih h1{font-size:clamp(38px,5.6vw,74px);line-height:1.2}
.skin-smart-home .house,.skin-smart-home .door{fill:none;stroke:#CBD5E1;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.skin-smart-home .wifi path{fill:none;stroke:var(--primary);stroke-width:9;stroke-linecap:round;opacity:.2;animation:sh-wifi 2.4s ease-in-out infinite}
.skin-smart-home .wifi circle{fill:var(--primary)}
.skin-smart-home .wifi .w2{animation-delay:.25s}.skin-smart-home .wifi .w3{animation-delay:.5s}
@keyframes sh-wifi{0%,100%{opacity:.18}40%,60%{opacity:1}}
.skin-smart-home .links path{fill:none;stroke:#2B3B5E;stroke-width:3;stroke-dasharray:6 10;animation:sh-flow 1.2s linear infinite}
@keyframes sh-flow{to{stroke-dashoffset:-16}}
.skin-smart-home .dev circle{fill:var(--card);stroke:var(--border);stroke-width:3}
.skin-smart-home .dev path,.skin-smart-home .dev rect{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* clients: device tiles, each one "on" */
.skin-smart-home .ir-list li::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
/* services: tiles with a switch in the on position */
.skin-smart-home .is-list li{position:relative;padding-top:56px}
.skin-smart-home .is-list li::before{content:"";position:absolute;top:20px;inset-inline-end:20px;width:46px;height:26px;border-radius:13px;
  background:radial-gradient(circle 9px at calc(100% - 13px) 50%,#fff 96%,transparent),var(--primary)}
html[dir=ltr] .skin-smart-home .is-list li::before{background:radial-gradient(circle 9px at calc(100% - 13px) 50%,#fff 96%,transparent),var(--primary)}
.skin-smart-home .is-ico{background:var(--card-2);color:var(--accent);border:1px solid var(--border)}

/* Furniture & carpets: a warm living room — an arched window behind the words, a lamp and an armchair, arch-topped cards.
   Palette: UI UX Pro Max "Home Decoration & Interior Design" (#78716C stone, #D97706 amber) on linen and walnut. Font: Markazi Text. */
body.skin-furniture{--bg:#F4EDE4;--card:#FBF7F1;--card-2:#EDE3D6;--border:#DCCBB6;--fg:#3A2618;--secondary-fg:#4E3524;--muted:#6E5644;
  --primary:#8A4B1F;--on-primary:#FFF8F0;--accent:#B45309;--i-font:"Markazi Text";--i-w:700;--i-r:18px;--peak:#1D4ED8;color-scheme:light}
.skin-furniture .ih h1{font-size:clamp(50px,7.6vw,104px);line-height:1.05}
.skin-furniture .ih-lead{color:var(--secondary-fg)}
.skin-furniture .ih-art .art{width:min(820px,100vw);max-height:96%}
.skin-furniture .arch{fill:var(--card);stroke:var(--border);stroke-width:3}
.skin-furniture .mull{stroke:#E9DDCC;stroke-width:4}
.skin-furniture .rug{fill:#E6D3BC}
.skin-furniture .lamp path,.skin-furniture .chair path{fill:none;stroke:var(--primary);stroke-opacity:.45;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.skin-furniture .lamp path:last-child{fill:#F2D9B8;fill-opacity:.7}
.js.ready .skin-furniture .chair{animation:fu-in 1.2s var(--ease-out) .4s backwards}
.js.ready .skin-furniture .lamp{animation:fu-in 1.2s var(--ease-out) .6s backwards}
@keyframes fu-in{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
/* clients: plaques with an arched top */
.skin-furniture .ir-list li{flex-direction:column;gap:6px;min-width:150px;padding:18px 22px 14px;border-radius:999px 999px 12px 12px;border-color:var(--border);font:700 24px/1.2 "Markazi Text",var(--font-body)}
/* services: arch-topped cards */
.skin-furniture .is-list li{border-radius:240px 240px 18px 18px/140px 140px 18px 18px;padding-top:56px}
.skin-furniture .is-ico{border-radius:50%;background:var(--card-2);color:var(--primary)}
.skin-furniture .ic-box{border-radius:300px 300px 22px 22px/160px 160px 22px 22px;padding-top:80px}
@media (max-width:700px){
  .skin-furniture .ih-art .art{width:130vw}
  .skin-furniture .lamp,.skin-furniture .chair{display:none}
  .skin-furniture .ic-box{border-radius:180px 180px 18px 18px/90px 90px 18px 18px}
}

/* Interior design: a studio mood board — white space, hairlines that draw a circle, an arch and a golden-ratio spiral,
   a strip of material swatches. Palette: UI UX Pro Max "Architecture / Interior" (#171717, #A16207). Font: Reem Kufi. */
body.skin-interior-design{--bg:#FFFFFF;--card:#FAFAF9;--card-2:#F5F5F4;--border:#E7E5E4;--fg:#171717;--secondary-fg:#292524;--muted:#5F5F5F;
  --primary:#171717;--on-primary:#FFFFFF;--accent:#A16207;--i-font:"Reem Kufi";--i-w:500;--i-r:0px;--peak:#1D4ED8;color-scheme:light}
.skin-interior-design .btn{border-radius:0}
.skin-interior-design .btn-ghost{background:#fff;border-color:#171717}
.skin-interior-design .ih h1{font-size:clamp(44px,6.6vw,92px);line-height:1.15}
html[lang=en] .skin-interior-design .ih h1{letter-spacing:.01em}
.skin-interior-design .ih-art .art{width:min(1000px,100vw)}
.skin-interior-design .ln{fill:none;stroke:#171717;stroke-opacity:.2;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.skin-interior-design .ln.gold{stroke:var(--accent);stroke-opacity:.8;stroke-width:2}
.js.ready .skin-interior-design .ln{animation:id-draw 2.4s var(--ease-in-out) forwards}
.js.ready .skin-interior-design .ln:nth-child(2){animation-delay:.3s}
.js.ready .skin-interior-design .ln:nth-child(3){animation-delay:.6s}
.js.ready .skin-interior-design .ln:nth-child(4){animation-delay:1s}
@keyframes id-draw{to{stroke-dashoffset:0}}
/* the material swatches under the buttons */
.skin-interior-design .ih-copy::after{content:"";width:220px;height:22px;margin-top:10px;
  background:linear-gradient(90deg,#B4643A 0 18%,#fff 18% 20.5%,#8A9A7B 20.5% 38.5%,#fff 38.5% 41%,#D9C4A3 41% 59%,#fff 59% 61.5%,#3F3F3F 61.5% 79.5%,#fff 79.5% 82%,#A16207 82%)}
/* clients: names set apart by hairlines */
.skin-interior-design .ir-list{gap:0}
.skin-interior-design .ir-list li{background:none;border:0;border-radius:0;font:500 24px/1.3 "Reem Kufi",var(--font-body);padding:6px 28px}
.skin-interior-design .ir-list li + li{border-inline-start:1px solid var(--border)}
/* services: numbered hairline frames */
.skin-interior-design .is-list{counter-reset:s;gap:0;border-top:1px solid var(--border);border-inline-start:1px solid var(--border)}
.skin-interior-design .is-list li{background:#fff;border:0;border-bottom:1px solid var(--border);border-inline-end:1px solid var(--border);border-radius:0}
.skin-interior-design .is-list li::before{counter-increment:s;content:"0" counter(s);font:500 14px "Reem Kufi",var(--font-body);color:var(--accent);letter-spacing:.24em}
.skin-interior-design .is-ico{background:none;border:1px solid var(--fg);color:var(--fg);border-radius:0}
.skin-interior-design .ic-box{background:#fff;border-color:var(--fg)}
.skin-interior-design .im-list a{border-radius:0}
@media (max-width:700px){ .skin-interior-design .ir-list li{font-size:20px;padding:6px 16px} }

/* Fabrics & textiles: the cloth shop — a woven texture, three rolls standing, a stitch line sewing itself, pinked swatches.
   Palette: madder, indigo and saffron dyes on natural linen. Font: Gulzar. */
body.skin-fabrics{--bg:#F5EFE6;--card:#FFFBF5;--card-2:#EFE5D6;--border:#DDCDB5;--fg:#2A1E3F;--secondary-fg:#3B2D55;--muted:#625675;
  --primary:#9F1239;--on-primary:#FFFFFF;--accent:#3730A3;--i-font:"Gulzar";--i-w:400;--i-r:6px;--peak:#1D4ED8;color-scheme:light}
.skin-fabrics .ih{padding-bottom:clamp(170px,24vw,300px);
  background:repeating-linear-gradient(0deg,rgba(42,30,63,.045) 0 2px,transparent 2px 7px),repeating-linear-gradient(90deg,rgba(159,18,57,.045) 0 2px,transparent 2px 7px)}
.skin-fabrics .ih h1{font-size:clamp(42px,6vw,80px);line-height:1.6}
.skin-fabrics .sx-head h2,.skin-fabrics .ic h2{line-height:1.6}
.skin-fabrics .ih-art{place-items:end center}
.skin-fabrics .ih-art .art{width:min(900px,100vw);max-height:44%}
.skin-fabrics .roll rect,.skin-fabrics .roll ellipse{stroke:rgba(42,30,63,.25);stroke-width:2}
.skin-fabrics .r1 rect{fill:#9F1239}.skin-fabrics .r1 ellipse{fill:#BE3155}
.skin-fabrics .r2 rect{fill:#3730A3}.skin-fabrics .r2 ellipse{fill:#5149C4}
.skin-fabrics .r3 rect{fill:#D97706}.skin-fabrics .r3 ellipse{fill:#F0A23A}
.skin-fabrics .drape{fill:#9F1239;opacity:.16}
.skin-fabrics .stitch{fill:none;stroke:var(--fg);stroke-opacity:.45;stroke-width:3;stroke-dasharray:12 9;animation:fa-sew 1.4s linear infinite}
@keyframes fa-sew{to{stroke-dashoffset:-21}}
.skin-fabrics .roll{transform-box:fill-box;transform-origin:50% 100%}
.js.ready .skin-fabrics .roll{animation:fa-up .9s var(--ease-out) backwards}
.js.ready .skin-fabrics .r2{animation-delay:.12s}.js.ready .skin-fabrics .r3{animation-delay:.24s}
@keyframes fa-up{from{transform:scaleY(.6);opacity:0}}
/* clients: swatches with pinked edges, each a different dye */
.skin-fabrics .ir-list li{border:0;border-radius:0;padding:14px 26px;font-size:20px;
  -webkit-mask:radial-gradient(6px at 50% 0,#0000 98%,#000) 50% 0/12px 51% repeat-x,radial-gradient(6px at 50% 100%,#0000 98%,#000) 50% 100%/12px 51% repeat-x;
  mask:radial-gradient(6px at 50% 0,#0000 98%,#000) 50% 0/12px 51% repeat-x,radial-gradient(6px at 50% 100%,#0000 98%,#000) 50% 100%/12px 51% repeat-x}
.skin-fabrics .ir-list li:nth-child(4n+1){background:#9F1239;color:#fff}
.skin-fabrics .ir-list li:nth-child(4n+2){background:#3730A3;color:#fff}
.skin-fabrics .ir-list li:nth-child(4n+3){background:#F0A23A;color:#2A1E3F}
.skin-fabrics .ir-list li:nth-child(4n+4){background:var(--card);color:var(--fg)}
/* services: a stitched seam inside every card */
.skin-fabrics .is-list li,.skin-fabrics .ic-box{outline:2px dashed var(--border);outline-offset:-10px}
.skin-fabrics .is-ico{border-radius:50%}

/* Home appliances & electronics: the store after dark — appliances drawn in line light, status LEDs, a dot-matrix headline.
   Palette: deep navy with cyan and lime indicator lights. Font: Handjet. */
body.skin-electronics{--bg:#070B12;--card:#0E1522;--card-2:#131C2C;--border:#1E2A3D;--fg:#E6F1FF;--secondary-fg:#C7D6EA;--muted:#8DA2BF;
  --primary:#22D3EE;--on-primary:#04121A;--accent:#A3E635;--i-font:"Handjet";--i-w:700;--i-r:12px}
.skin-electronics .ih{padding-bottom:clamp(150px,20vw,260px)}
.skin-electronics .ih h1{font-size:clamp(54px,8.4vw,116px);line-height:1;letter-spacing:.02em}
.skin-electronics .sx-head h2{font-size:clamp(38px,5vw,64px)}
.skin-electronics .ih-art{place-items:end center;padding-bottom:3vh}
.skin-electronics .ih-art .art{width:min(1100px,100vw);max-height:34%}
.skin-electronics .ap rect,.skin-electronics .ap path,.skin-electronics .ap circle:not(.led){fill:none;stroke:#2B3A52;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.js.ready .skin-electronics .ap :not(.led){animation:el-draw 1.6s var(--ease-out) forwards,el-on .6s ease 1.6s forwards}
.js.ready .skin-electronics .ap:nth-child(2) :not(.led){animation-delay:.2s,1.8s}
.js.ready .skin-electronics .ap:nth-child(3) :not(.led){animation-delay:.4s,2s}
.js.ready .skin-electronics .ap:nth-child(4) :not(.led){animation-delay:.6s,2.2s}
@keyframes el-draw{to{stroke-dashoffset:0}}
@keyframes el-on{to{stroke:#3E6E8C}}
.skin-electronics .led{fill:var(--accent);animation:el-blink 2s steps(1,end) infinite}
.skin-electronics .ap:nth-child(2) .led{animation-delay:.5s;fill:var(--primary)}
.skin-electronics .ap:nth-child(3) .led{animation-delay:1s}
@keyframes el-blink{50%{opacity:.2}}
/* clients: shelf labels with viewfinder corners */
.skin-electronics .ir-list li,.skin-electronics .is-list li{border-color:var(--border);
  background:linear-gradient(var(--primary),var(--primary)) 0 0/14px 2px,linear-gradient(var(--primary),var(--primary)) 0 0/2px 14px,
  linear-gradient(var(--primary),var(--primary)) 100% 100%/14px 2px,linear-gradient(var(--primary),var(--primary)) 100% 100%/2px 14px,var(--card);background-repeat:no-repeat}
.skin-electronics .ir-list li{font:700 26px/1 "Handjet",var(--font-body);letter-spacing:.03em}
.skin-electronics .is-list h3{font-size:clamp(26px,2.4vw,32px)}
.skin-electronics .is-ico{background:#04121A;border:1px solid var(--primary);color:var(--primary)}

/* Gyms & fitness: a gym poster — a barbell loaded across the headline, hazard-orange stripes, skewed panels.
   Palette: UI UX Pro Max "Fitness/Gym App" (#F97316, #1F2937) pushed to black. Font: Jomhuria (ultra-heavy display). */
body.skin-fitness{--bg:#0A0A0A;--card:#141414;--card-2:#1C1C1C;--border:#2A2A2A;--fg:#FAFAFA;--secondary-fg:#E5E5E5;--muted:#A3A3A3;
  --primary:#F97316;--on-primary:#0A0A0A;--accent:#FB923C;--i-font:"Jomhuria";--i-w:400;--i-r:0px}
.skin-fitness .ih h1{font-size:clamp(92px,13.5vw,200px);line-height:.82}
.skin-fitness .sx-head h2{font-size:clamp(64px,8vw,104px);line-height:.9}
.skin-fitness .ic h2{font-size:clamp(60px,7vw,96px);line-height:.9}
.skin-fitness .is-list h3{font-size:clamp(40px,3.6vw,52px);line-height:.95}
.skin-fitness .btn{border-radius:0;transform:skewX(-8deg)}
.skin-fitness .btn > *{display:inline-block;transform:skewX(8deg)}
.skin-fitness .btn:active{transform:skewX(-8deg) scale(.97)}
.skin-fitness .ih-art .art{width:min(1400px,108vw);max-height:none}
.skin-fitness .bar{fill:#262626}
.skin-fitness .plates rect{fill:#1A1A1A;stroke:#333;stroke-width:3}
.skin-fitness .plates .col{fill:var(--primary);stroke:none}
.skin-fitness .alive .plates.l{animation:fi-l 1s var(--ease-out) backwards}
.skin-fitness .alive .plates.r{animation:fi-r 1s var(--ease-out) backwards}
@keyframes fi-l{from{transform:translateX(-160px);opacity:0}}
@keyframes fi-r{from{transform:translateX(160px);opacity:0}}
.skin-fitness .ih::after{content:"";position:absolute;inset:auto -5% 18px;height:44px;z-index:-1;transform:rotate(-2deg);
  background:repeating-linear-gradient(-45deg,var(--primary) 0 22px,#0A0A0A 22px 44px);background-size:62px 100%;animation:fi-run 1.6s linear infinite}
@keyframes fi-run{to{background-position:62px 0}}
/* clients: names in big poster type, split by orange slashes */
.skin-fitness .ir-list{gap:4px 0;align-items:center}
.skin-fitness .ir-list li{background:none;border:0;border-radius:0;font:400 56px/1 "Jomhuria",var(--font-body);padding:0 6px}
.skin-fitness .ir-list li + li::before{content:"/";color:var(--primary);margin-inline-end:18px}
.skin-fitness .ir-list img{width:46px;height:46px}
/* services: skewed panels with an orange edge */
.skin-fitness .is-list li{transform:skewX(-6deg);border:0;border-inline-start:6px solid var(--primary);background:var(--card)}
.skin-fitness .is-list li > *{transform:skewX(6deg)}
.skin-fitness .is-ico{border-radius:0}
.skin-fitness .ic-box{border:0;border-top:6px solid var(--primary);border-radius:0}
@media (max-width:700px){
  .skin-fitness .ih-art .art{width:122vw}
  .skin-fitness .ir-list li{font-size:44px}
  .skin-fitness .is-list li,.skin-fitness .is-list li > *{transform:none}
}

/* Clinics & medical centers: calm and clean — a heartbeat line running under the words, a cross in a soft tile,
   appointment cards. Palette: UI UX Pro Max "Medical Clinic" (#0891B2, #16A34A, #134E4A). Font: Tajawal. */
body.skin-healthcare{--bg:#F2FAFB;--card:#FFFFFF;--card-2:#E6F4F6;--border:#CFE6EA;--fg:#0E3A44;--secondary-fg:#164E5A;--muted:#46666E;
  --primary:#0E7490;--on-primary:#FFFFFF;--accent:#15803D;--i-font:"Tajawal";--i-w:800;--i-r:24px;--peak:#1D4ED8;color-scheme:light}
.skin-healthcare .ih{padding-bottom:clamp(120px,16vw,200px);
  background:radial-gradient(circle at 12% 28%,#DDF0F3 0 140px,transparent 141px),radial-gradient(circle at 88% 72%,#E2F4E8 0 180px,transparent 181px)}
.skin-healthcare .ih h1{font-size:clamp(42px,6vw,82px);line-height:1.2}
.skin-healthcare .ih-copy::before{content:"";width:64px;height:64px;border-radius:18px;
  background:linear-gradient(#fff,#fff) center/28px 8px no-repeat,linear-gradient(#fff,#fff) center/8px 28px no-repeat,var(--primary)}
.skin-healthcare .ih-art{place-items:end center;padding-bottom:4vh}
.skin-healthcare .ih-art .art{width:min(1200px,110vw);max-height:30%}
.skin-healthcare .ecg-base{fill:none;stroke:var(--primary);stroke-opacity:.16;stroke-width:4;stroke-linejoin:round}
.skin-healthcare .ecg{fill:none;stroke:var(--primary);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.22 .78;animation:hc-beat 3.2s linear infinite}
@keyframes hc-beat{from{stroke-dashoffset:.22}to{stroke-dashoffset:-.78}}
/* clients: appointment cards */
.skin-healthcare .ir-list li{border-radius:16px;border-inline-start:5px solid var(--primary);box-shadow:0 10px 28px -20px rgba(14,58,68,.4)}
/* services: soft white cards */
.skin-healthcare .is-list li{border:0;box-shadow:0 14px 40px -26px rgba(14,58,68,.45)}
.skin-healthcare .is-ico{border-radius:18px}
.skin-healthcare .ic-box{border:0;box-shadow:0 20px 60px -34px rgba(14,58,68,.5)}

/* Pharmacies: the green cross on the corner — an LED cross lighting up from its centre, capsules drifting,
   prescription labels. Palette: UI UX Pro Max "Pharmacy/Drug Store" (#15803D, #0369A1, #14532D). Font: Almarai. */
body.skin-pharmacies{--bg:#F3FBF5;--card:#FFFFFF;--card-2:#E3F4E8;--border:#C9E7D2;--fg:#12361F;--secondary-fg:#1B4A2B;--muted:#46634F;
  --primary:#15803D;--on-primary:#FFFFFF;--accent:#0369A1;--i-font:"Almarai";--i-w:800;--i-r:22px;--peak:#1D4ED8;color-scheme:light}
.skin-pharmacies .btn{border-radius:999px}
.skin-pharmacies .ih{align-content:center;gap:4px}
.skin-pharmacies .ih-art{position:relative;inset:auto;z-index:0}
.skin-pharmacies .ih-art .art{width:min(640px,96vw)}
.skin-pharmacies .ih h1{font-size:clamp(42px,6vw,82px);line-height:1.2}
.skin-pharmacies .px{fill:#D5ECDC;animation:ph-led 2.8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ph-led{0%,100%{fill:#D5ECDC}30%,60%{fill:var(--primary)}}
.skin-pharmacies .cap rect{fill:#fff;stroke:var(--border);stroke-width:3}
.skin-pharmacies .cap .half{fill:var(--primary);stroke:none}
.skin-pharmacies .cap path{stroke:var(--border);stroke-width:2}
.skin-pharmacies .cap.c1 .half,.skin-pharmacies .cap.c3 .half{fill:var(--accent)}
.skin-pharmacies .cap{animation:ph-float 5s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
@keyframes ph-float{to{translate:0 -14px}}
/* clients: prescription labels */
.skin-pharmacies .ir-list li{border-radius:12px}
.skin-pharmacies .ir-list li::before{content:"Rx";padding:2px 7px;border-radius:6px;background:var(--primary);color:#fff;font:800 13px/1.4 "Almarai",sans-serif}
/* services: a capsule holds each icon */
.skin-pharmacies .is-ico{width:96px;height:48px;border-radius:24px;background:linear-gradient(90deg,var(--primary) 50%,var(--card-2) 50%);color:#fff}
html[dir=rtl] .skin-pharmacies .is-ico{background:linear-gradient(270deg,var(--primary) 50%,var(--card-2) 50%)}
.skin-pharmacies .is-ico svg{width:22px;height:22px;translate:-22px 0}
html[dir=rtl] .skin-pharmacies .is-ico svg{translate:22px 0}
.skin-pharmacies .im-list a{border-color:var(--border)}

/* Beauty salons: the nail bar — a fan of painted tips, polish colours, soft blush cards with a berry edge.
   Palette: UI UX Pro Max "Wardrobe" berry (#BE185D, #D97706) on blush. Font: Playpen Sans Arabic. */
body.skin-salons{--bg:#FFF6F3;--card:#FFFFFF;--card-2:#FBE7E2;--border:#F1D3CC;--fg:#4A1426;--secondary-fg:#5E1E33;--muted:#7D4F5B;
  --primary:#9D174D;--on-primary:#FFFFFF;--accent:#B7791F;--i-font:"Playpen Sans Arabic";--i-w:700;--i-r:28px;--peak:#1D4ED8;color-scheme:light}
.skin-salons .btn{border-radius:999px}
.skin-salons .ih{align-content:center;gap:8px}
.skin-salons .ih-art{position:relative;inset:auto;z-index:0}
.skin-salons .ih-art .art{width:min(420px,84vw)}
.skin-salons .ih h1{font-size:clamp(38px,5.6vw,76px);line-height:1.3}
.skin-salons .nail path:first-child{stroke:rgba(74,20,38,.25);stroke-width:3;transform-box:fill-box;transform-origin:50% 100%}
.skin-salons .n0 path:first-child{fill:#9D174D}
.skin-salons .n1 path:first-child{fill:#E11D48}
.skin-salons .n2 path:first-child{fill:#F472B6}
.skin-salons .n3 path:first-child{fill:#FBCFE8}
.skin-salons .n4 path:first-child{fill:#B7791F}
.skin-salons .nail .sh{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:7;stroke-linecap:round}
.skin-salons .alive .nail path{animation:sa-up .9s var(--ease-out) backwards;animation-delay:var(--d)}
@keyframes sa-up{from{transform:translateY(60px);opacity:0}}
/* clients: chips with a painted nail mark */
.skin-salons .ir-list li::before{content:"";width:12px;height:18px;border-radius:7px 7px 3px 3px;background:var(--primary);flex-shrink:0}
.skin-salons .ir-list li:nth-child(3n+2)::before{background:#F472B6}
.skin-salons .ir-list li:nth-child(3n+3)::before{background:var(--accent)}
/* services: soft cards with a berry top edge */
.skin-salons .is-list li{border:0;border-top:5px solid var(--primary);box-shadow:0 14px 40px -28px rgba(74,20,38,.5)}
.skin-salons .is-ico{border-radius:50%;background:var(--card-2);color:var(--primary)}
.skin-salons .ic-box{background:var(--card-2);border:0}

/* Barbershops: the old-school shop — two barber poles turning, the headline in a framed sign, black signboards.
   Palette: barber red and navy on aged paper. Font: Rakkas. */
body.skin-barbershops{--bg:#F1E9DA;--card:#FBF7EF;--card-2:#E9DFCB;--border:#CDBFA5;--fg:#1A1A1A;--secondary-fg:#2B2B2B;--muted:#564E43;
  --primary:#B91C1C;--on-primary:#FFFFFF;--accent:#1E3A8A;--i-font:"Rakkas";--i-w:400;--i-r:4px;--peak:#1D4ED8;color-scheme:light}
.skin-barbershops .btn{border-radius:4px}
.skin-barbershops .ih::before,.skin-barbershops .ih::after{content:"";position:absolute;top:24%;bottom:14%;width:44px;border-radius:22px;border:4px solid #1A1A1A;z-index:-1;
  background:repeating-linear-gradient(-45deg,#B91C1C 0 16px,#FBF7EF 16px 32px,#1E3A8A 32px 48px,#FBF7EF 48px 64px);background-size:100% 90.5px;animation:bb-pole 2.4s linear infinite}
.skin-barbershops .ih::before{inset-inline-start:clamp(14px,6vw,120px)}
.skin-barbershops .ih::after{inset-inline-end:clamp(14px,6vw,120px)}
@keyframes bb-pole{to{background-position:0 90.5px}}
.skin-barbershops .ih-copy{padding:clamp(28px,4vw,48px) clamp(20px,4vw,56px);background:var(--card);border:3px solid #1A1A1A;outline:1px solid #1A1A1A;outline-offset:7px;max-width:820px}
.skin-barbershops .ih h1{font-size:clamp(42px,6.4vw,88px);line-height:1.15}
.skin-barbershops .ih-art{position:relative;inset:auto;z-index:0;order:-1}
.skin-barbershops .ih-art .art{width:120px}
.skin-barbershops .ih{gap:6px;align-content:center}
.skin-barbershops .scissors circle,.skin-barbershops .scissors path,.skin-barbershops .orn{fill:none;stroke:#1A1A1A;stroke-width:9;stroke-linecap:round}
/* clients: black signboards */
.skin-barbershops .ir-list li{background:#1A1A1A;color:#F1E9DA;border:0;font:400 24px/1.2 "Rakkas",var(--font-body);box-shadow:inset 0 0 0 3px #1A1A1A,inset 0 0 0 5px #F1E9DA}
/* services: double-ruled cards */
.skin-barbershops .is-list li,.skin-barbershops .ic-box{border:4px double #1A1A1A}
.skin-barbershops .is-ico{border-radius:50%;background:var(--accent);color:#fff}
.skin-barbershops .is-list li:nth-child(even) .is-ico{background:var(--primary)}
.skin-barbershops .im-list a{border-color:#1A1A1A;color:#1A1A1A}
@media (max-width:700px){
  .skin-barbershops .ih::before,.skin-barbershops .ih::after{width:18px;border-width:2px;top:auto;bottom:24px;height:120px}
}
/* phones, during the story: the scissors stay small so the framed sign fits on one screen */
@media (max-width:700px){ .skin-barbershops .is-story .ih.stack .ih-art .art{width:90px;height:auto} }

/* Cosmetics: the vanity table — an eyeshadow palette whose pans pop in, a lipstick, swatch dots.
   Palette: UI UX Pro Max "Beauty/Spa/Wellness" (#EC4899, #8B5CF6, #831843) on lavender. Font: Marhey. */
body.skin-cosmetics{--bg:#FBF4FF;--card:#FFFFFF;--card-2:#F3E8FF;--border:#E9D5FF;--fg:#3B0D3A;--secondary-fg:#4C1D4B;--muted:#6E4D6C;
  --primary:#A21CAF;--on-primary:#FFFFFF;--accent:#DB2777;--i-font:"Marhey";--i-w:700;--i-r:28px;--peak:#1D4ED8;color-scheme:light}
.skin-cosmetics .btn{border-radius:999px}
.skin-cosmetics .ih{align-content:center;gap:8px}
.skin-cosmetics .ih-art{position:relative;inset:auto;z-index:0}
.skin-cosmetics .ih-art .art{width:min(480px,86vw)}
.skin-cosmetics .ih h1{font-size:clamp(40px,5.8vw,80px);line-height:1.25}
.skin-cosmetics .compact > rect{fill:#fff;stroke:var(--border);stroke-width:5}
.skin-cosmetics .pan{stroke:#fff;stroke-width:4;transform-box:fill-box;transform-origin:center}
.skin-cosmetics .p0{fill:#F9A8D4}.skin-cosmetics .p1{fill:#FDBA74}.skin-cosmetics .p2{fill:#C4B5FD}
.skin-cosmetics .p3{fill:#A21CAF}.skin-cosmetics .p4{fill:#FB7185}.skin-cosmetics .p5{fill:#FDE68A}
.skin-cosmetics .alive .pan{animation:co-pop .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:var(--d)}
@keyframes co-pop{from{transform:scale(.2);opacity:0}}
.skin-cosmetics .tube{fill:#3B0D3A}.skin-cosmetics .ring{fill:#B7791F}.skin-cosmetics .bullet{fill:#DB2777}
.skin-cosmetics .stick{animation:co-tilt 4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes co-tilt{from{rotate:-3deg}to{rotate:3deg}}
/* services: pill cards, each icon in a pigment circle */
.skin-cosmetics .is-ico{border-radius:50%}
.skin-cosmetics .is-list li:nth-child(1) .is-ico{background:#F9A8D4;color:#3B0D3A}
.skin-cosmetics .is-list li:nth-child(2) .is-ico{background:#C4B5FD;color:#3B0D3A}
.skin-cosmetics .is-list li:nth-child(3) .is-ico{background:#FDBA74;color:#3B0D3A}
.skin-cosmetics .is-list li{border-color:var(--border)}
.skin-cosmetics .ic-box{background:linear-gradient(var(--card-2),var(--card-2))}

/* Perfumes: a boutique at night — a faceted bottle with mist rising from the atomiser, gold hairlines, calligraphy.
   Palette: aubergine black, champagne gold and rose. Font: Aref Ruqaa. */
body.skin-perfumes{--bg:#120B0F;--card:#1C1217;--card-2:#24171E;--border:#3A2A31;--fg:#F7EDE6;--secondary-fg:#EADBD2;--muted:#BFA9A0;
  --primary:#C9A227;--on-primary:#120B0F;--accent:#F2A7B6;--i-font:"Aref Ruqaa";--i-w:700;--i-r:2px}
.skin-perfumes .btn{border-radius:2px}
.skin-perfumes .btn-ghost{background:transparent;border-color:rgba(201,162,39,.5)}
.skin-perfumes .ih{align-content:center;gap:6px}
.skin-perfumes .ih::before{content:"";position:absolute;inset:calc(var(--hd-h) + 16px) clamp(12px,3vw,40px) 24px;border:1px solid rgba(201,162,39,.35);pointer-events:none}
.skin-perfumes .ih-art{position:relative;inset:auto;z-index:0}
.skin-perfumes .ih-art .art{width:min(190px,40vw)}
.skin-perfumes .ih h1{font-size:clamp(44px,6.4vw,90px);line-height:1.35}
.skin-perfumes .sx-head h2,.skin-perfumes .ic h2{line-height:1.4}
.skin-perfumes .body{fill:#2A1A22;stroke:var(--primary);stroke-width:3}
.skin-perfumes .facet{fill:none;stroke:var(--primary);stroke-opacity:.7;stroke-width:2}
.skin-perfumes .capx{fill:var(--primary)}
.skin-perfumes .neck{fill:#3A2A31;stroke:var(--primary);stroke-width:1.5}
.skin-perfumes .label{fill:none;stroke:var(--primary);stroke-width:1.5}
.skin-perfumes .mist circle{fill:var(--accent);animation:pf-mist 3.6s ease-out infinite;animation-delay:var(--d)}
@keyframes pf-mist{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}100%{opacity:0;transform:translate(-36px,-30px)}}
/* clients: one line, set in calligraphy, divided by small diamonds */
.skin-perfumes .ir-list{gap:0}
.skin-perfumes .ir-list li{background:none;border:0;font:700 28px/1.4 "Aref Ruqaa",var(--font-body);color:var(--primary)}
.skin-perfumes .ir-list li + li::before{content:"";width:7px;height:7px;rotate:45deg;background:var(--border);margin-inline-end:14px}
/* services: double gold frames */
.skin-perfumes .is-list li,.skin-perfumes .ic-box{border:1px solid rgba(201,162,39,.4);outline:1px solid rgba(201,162,39,.2);outline-offset:-8px;background:var(--card)}
.skin-perfumes .is-ico{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.skin-perfumes .im-list a{border-color:rgba(201,162,39,.35)}

/* Fintech: the dashboard — a growth line drawing across a chart grid, a card floating over it, amber figures.
   Palette: UI UX Pro Max "Fintech/Crypto" (#F59E0B, #8B5CF6, #0F172A). Font: Alexandria. */
body.skin-fintech{--bg:#0B1020;--card:#121A33;--card-2:#18213F;--border:#24305A;--fg:#F8FAFC;--secondary-fg:#CBD5E1;--muted:#94A3B8;
  --primary:#F59E0B;--on-primary:#0B1020;--accent:#A78BFA;--i-font:"Alexandria";--i-w:800;--i-r:16px}
.skin-fintech .ih{padding-bottom:clamp(170px,24vw,300px)}
.skin-fintech .ih h1{font-size:clamp(38px,5.6vw,76px);line-height:1.2}
.skin-fintech .ih-art{place-items:end center}
.skin-fintech .ih-art .art{width:min(980px,104vw);max-height:46%}
.skin-fintech .grid line{stroke:#1B2546;stroke-width:1.5}
.skin-fintech .line{fill:none;stroke:var(--primary);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.skin-fintech .alive .line{animation:ft-draw 2.2s var(--ease-out) .3s forwards}
@keyframes ft-draw{to{stroke-dashoffset:0}}
.skin-fintech .card > rect:first-child{fill:var(--card-2);stroke:#33427A;stroke-width:2}
.skin-fintech .chip{fill:var(--primary)}
.skin-fintech .nfc,.skin-fintech .num{fill:none;stroke:var(--muted);stroke-width:5;stroke-linecap:round}
.skin-fintech .mark{fill:var(--accent)}
.skin-fintech .card{animation:ft-float 6s ease-in-out infinite alternate}
@keyframes ft-float{from{transform:translateY(8px) rotate(-1deg)}to{transform:translateY(-10px) rotate(1deg)}}
.skin-fintech .card{transform-box:fill-box;transform-origin:center}
/* clients: confirmed transactions */
.skin-fintech .ir-list li::after{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(245,158,11,.16);color:var(--primary);font-size:13px}
/* services: panels on a faint ledger grid */
.skin-fintech .is-list li{background:linear-gradient(rgba(36,48,90,.45) 1px,transparent 1px) 0 0/100% 30px,var(--card)}
.skin-fintech .is-ico{background:rgba(245,158,11,.14);color:var(--primary);border:1px solid rgba(245,158,11,.35)}

/* AI projects: a network thinking — layers of nodes, signals travelling along the links, bracketed panels.
   Palette: UI UX Pro Max "AI/Chatbot Platform" (#7C3AED, #0891B2) on near-black violet. Font: Beiruti. */
body.skin-ai{--bg:#0C0A1A;--card:#15122A;--card-2:#1C1836;--border:#2A2550;--fg:#EEEAFE;--secondary-fg:#D6D0F5;--muted:#A39FC0;
  --primary:#8B5CF6;--on-primary:#FFFFFF;--accent:#22D3EE;--i-font:"Beiruti";--i-w:800;--i-r:14px}
.skin-ai .ih h1{font-size:clamp(44px,6.6vw,92px);line-height:1.1}
.skin-ai .ih-art .art{width:min(1100px,112vw);opacity:.85}
.skin-ai .edges line{stroke:#342D6B;stroke-width:1.5}
.skin-ai .pl{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:.06 1.2;stroke-dashoffset:.06;animation:ai-sig 2.8s linear infinite;animation-delay:var(--d)}
@keyframes ai-sig{to{stroke-dashoffset:-1.2}}
.skin-ai .nd{fill:var(--card);stroke:var(--primary);stroke-width:3}
.skin-ai .nd:nth-child(3n){animation:ai-node 3s ease-in-out infinite}
@keyframes ai-node{50%{fill:#3B2A7A}}
.skin-ai .ih-copy{padding:20px;background:radial-gradient(closest-side,rgba(12,10,26,.92) 55%,transparent)}
/* clients: terminal lines */
.skin-ai .ir-list li::before{content:"›";color:var(--accent);font-weight:800}
/* services: panels with bracket corners */
.skin-ai .is-list li,.skin-ai .ic-box{border-color:transparent;
  background:linear-gradient(var(--primary),var(--primary)) 0 0/18px 2px,linear-gradient(var(--primary),var(--primary)) 0 0/2px 18px,
  linear-gradient(var(--primary),var(--primary)) 100% 0/18px 2px,linear-gradient(var(--primary),var(--primary)) 100% 0/2px 18px,
  linear-gradient(var(--primary),var(--primary)) 0 100%/18px 2px,linear-gradient(var(--primary),var(--primary)) 0 100%/2px 18px,
  linear-gradient(var(--primary),var(--primary)) 100% 100%/18px 2px,linear-gradient(var(--primary),var(--primary)) 100% 100%/2px 18px,var(--card);background-repeat:no-repeat}
.skin-ai .is-ico{background:var(--card-2);color:var(--accent);border:1px solid var(--border)}

/* Law firms: a classical portico in gold line, the scales at its peak, parchment and navy, formal square frames.
   Palette: UI UX Pro Max "Legal Services" (#1E3A8A navy, #B45309 gold, #0F172A). Font: Amiri. */
body.skin-law{--bg:#F7F5F0;--card:#FFFFFF;--card-2:#EFEBE2;--border:#D9D2C3;--fg:#0F1B3D;--secondary-fg:#1E2A4F;--muted:#47516B;
  --primary:#1E3A8A;--on-primary:#FFFFFF;--accent:#A14A08;--i-font:"Amiri";--i-w:700;--i-r:0px;--peak:#1D4ED8;color-scheme:light}
.skin-law .btn{border-radius:0}
.skin-law .btn-ghost{background:transparent;border-color:var(--fg)}
.skin-law .ih{align-content:center;gap:8px}
.skin-law .ih-art{position:relative;inset:auto;z-index:0}
.skin-law .ih-art .art{width:min(340px,72vw)}
.skin-law .ih h1{font-size:clamp(42px,6vw,82px);line-height:1.35}
.skin-law .ih h1::after{content:"";display:block;width:140px;height:9px;margin:16px auto 0;
  background:linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat,linear-gradient(45deg,transparent 35%,var(--accent) 35% 65%,transparent 65%) center/9px 9px no-repeat}
.skin-law .ped{fill:var(--card-2)}
.skin-law .ped,.skin-law .ent,.skin-law .col rect,.skin-law .step{stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.skin-law .ent,.skin-law .col rect,.skin-law .step{fill:var(--card)}
.skin-law .col path{stroke:var(--accent);stroke-opacity:.45;stroke-width:1.5}
.skin-law .scales path{fill:none;stroke:var(--primary);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.skin-law .col{transform-box:fill-box;transform-origin:50% 100%}
.skin-law .alive .col{animation:lw-rise .9s var(--ease-out) backwards}
.skin-law .alive .col:nth-of-type(2){animation-delay:.06s}.skin-law .alive .col:nth-of-type(3){animation-delay:.12s}
.skin-law .alive .col:nth-of-type(4){animation-delay:.18s}.skin-law .alive .col:nth-of-type(5){animation-delay:.24s}.skin-law .alive .col:nth-of-type(6){animation-delay:.3s}
@keyframes lw-rise{from{transform:scaleY(0)}}
/* clients: a formal directory between gold rules */
.skin-law .ir-list{flex-direction:column;align-items:center;gap:0;max-width:640px;margin:0 auto;border-top:1px solid var(--accent)}
.skin-law .ir-list li{width:100%;justify-content:center;background:none;border:0;border-bottom:1px solid var(--accent);font:700 26px/1.6 "Amiri",serif;color:var(--primary)}
/* services: square frames, a double hairline */
.skin-law .is-list li,.skin-law .ic-box{border:1px solid var(--border);outline:1px solid var(--border);outline-offset:-7px}
.skin-law .is-ico{background:transparent;border:1.5px solid var(--accent);color:var(--accent)}
.skin-law .is-list h3{color:var(--primary)}
.skin-law .im-list a{border-radius:0}

/* Personal branding: a magazine cover — a portrait in a red spot, crop marks, a turning ring of type, heavy editorial rules.
   Palette: UI UX Pro Max "Portfolio/Personal" (#18181B on #FAFAFA) with one editorial red. Font: Alyamama. */
body.skin-personal-branding{--bg:#F6F4EF;--card:#FFFFFF;--card-2:#ECE9E1;--border:#D6D1C4;--fg:#111111;--secondary-fg:#222222;--muted:#555555;
  --primary:#E11D48;--on-primary:#FFFFFF;--accent:#BE123C;--i-font:"Alyamama";--i-w:900;--i-r:0px;--peak:#1D4ED8;color-scheme:light}
.skin-personal-branding .btn{border-radius:0}
.skin-personal-branding .btn-ghost{background:transparent;border:2px solid var(--fg)}
.skin-personal-branding .ih{align-content:center;gap:4px}
.skin-personal-branding .ih-art{position:relative;inset:auto;z-index:0}
.skin-personal-branding .ih-art .art{width:min(280px,62vw)}
.skin-personal-branding .ih h1{font-size:clamp(48px,7.4vw,104px);line-height:1.05}
.skin-personal-branding .spot{fill:var(--primary)}
.skin-personal-branding .sil{fill:#111}
.skin-personal-branding .crop path{fill:none;stroke:#111;stroke-width:4}
.skin-personal-branding .ringp{fill:none}
.skin-personal-branding .ringt{font:700 21px/1 "Montserrat",sans-serif;letter-spacing:.24em;fill:#111;transform-box:view-box;transform-origin:300px 300px;animation:pb-turn 30s linear infinite}
@keyframes pb-turn{to{transform:rotate(360deg)}}
/* clients: cover lines */
.skin-personal-branding .ir-list li{background:none;border:0;border-bottom:4px solid var(--fg);border-radius:0;font:900 26px/1.2 "Alyamama",var(--font-body);padding-inline:4px}
/* services: editorial columns with big red numbers */
.skin-personal-branding .is-list{counter-reset:s}
.skin-personal-branding .is-list li{background:none;border:0;border-top:4px solid var(--fg);border-radius:0}
.skin-personal-branding .is-list li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:900 54px/1 "Alyamama",var(--font-body);color:var(--primary)}
.skin-personal-branding .is-ico{display:none}
.skin-personal-branding .ic-box{background:#111;border:0;--fg:#F6F4EF;--muted:#BDBDBD;--accent:#FB7185;color:#F6F4EF}
.skin-personal-branding .ic-box .btn-ghost{border-color:#F6F4EF;color:#F6F4EF}

/* Tourism & travel: a postcard of Egypt — the sun going down behind the pyramids, waves, a flight path drawing itself,
   boarding-pass cards. Palette: UI UX Pro Max "Travel/Tourism Agency" (#0EA5E9, #EA580C, #0C4A6E). Font: Ruwudu. */
body.skin-tourism{--bg:#EFF8FF;--card:#FFFFFF;--card-2:#E0F2FE;--border:#BAE6FD;--fg:#0C4A6E;--secondary-fg:#075985;--muted:#3F6884;
  --primary:#C2410C;--on-primary:#FFFFFF;--accent:#0369A1;--i-font:"Ruwudu";--i-w:700;--i-r:16px;--peak:#1D4ED8;color-scheme:light}
.skin-tourism .ih{padding-bottom:clamp(180px,26vw,330px)}
.skin-tourism .ih h1{font-size:clamp(44px,6.4vw,88px);line-height:1.45}
.skin-tourism .sx-head h2{line-height:1.45}
.skin-tourism .ih-art{place-items:end center}
.skin-tourism .ih-art .art{width:min(1200px,112vw);max-height:50%}
.skin-tourism .sun{fill:#FDBA74}
.skin-tourism .alive .sun{animation:to-sun 2.4s var(--ease-out) backwards}
@keyframes to-sun{from{transform:translateY(60px)}}
.skin-tourism .pyr{stroke:#C79A55;stroke-width:2;stroke-linejoin:round}
.skin-tourism .p1{fill:#F2D49B}.skin-tourism .p2{fill:#E9C27E}.skin-tourism .p3{fill:#DDB06B}
.skin-tourism .sea{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.skin-tourism .route{fill:none;stroke:var(--accent);stroke-opacity:.25;stroke-width:2.5;stroke-dasharray:8 10}
.skin-tourism .route-on{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.skin-tourism .alive .route-on{animation:to-fly 3s var(--ease-in-out) .4s forwards}
@keyframes to-fly{to{stroke-dashoffset:0}}
.skin-tourism .plane path{fill:var(--fg)}
.skin-tourism .plane{opacity:0}
.skin-tourism .alive .plane{animation:to-land .4s ease 3.2s forwards}
@keyframes to-land{to{opacity:1}}
/* services and clients: boarding passes with side notches and a tear line */
.skin-tourism .is-list li,.skin-tourism .ir-list li{border:0;background:radial-gradient(circle at 0 50%,var(--bg) 14px,transparent 15px),radial-gradient(circle at 100% 50%,var(--bg) 14px,transparent 15px),var(--card);
  box-shadow:0 12px 32px -24px rgba(12,74,110,.5)}
.skin-tourism .is-list p{padding-top:12px;border-top:2px dashed var(--border)}
.skin-tourism .is-ico{border-radius:50%;background:var(--accent)}
.skin-tourism .ic-box{border:0;background:var(--card);box-shadow:0 18px 50px -32px rgba(12,74,110,.6)}

/* Import & export: the port — containers stacking up on the dock, a shipping route flowing across, corrugated panels.
   Palette: UI UX Pro Max "Logistics/Delivery" (#2563EB, #EA580C, #1E40AF). Font: Cairo Black. */
body.skin-import-export{--bg:#F2F6FC;--card:#FFFFFF;--card-2:#E3ECF9;--border:#C7D6EE;--fg:#0F2547;--secondary-fg:#1A3563;--muted:#4A5C78;
  --primary:#1D4ED8;--on-primary:#FFFFFF;--accent:#C2410C;--i-font:"Cairo";--i-w:900;--i-r:4px;--peak:#1D4ED8;color-scheme:light}
.skin-import-export .ih{padding-bottom:clamp(180px,26vw,320px)}
.skin-import-export .ih h1{font-size:clamp(40px,6vw,82px);line-height:1.25}
.skin-import-export .ih-art{place-items:end center}
.skin-import-export .ih-art .art{width:min(1200px,110vw);max-height:48%}
.skin-import-export .route{fill:none;stroke:var(--muted);stroke-opacity:.5;stroke-width:3;stroke-dasharray:10 12;animation:ie-flow 1.6s linear infinite}
@keyframes ie-flow{to{stroke-dashoffset:-22}}
.skin-import-export .ct rect{stroke:rgba(15,37,71,.35);stroke-width:2}
.skin-import-export .ct line{stroke:rgba(255,255,255,.28);stroke-width:3}
.skin-import-export .c0 rect{fill:#1D4ED8}.skin-import-export .c1 rect{fill:#EA580C}.skin-import-export .c2 rect{fill:#0F766E}.skin-import-export .c3 rect{fill:#0F2547}
.skin-import-export .dock{stroke:var(--fg);stroke-width:5;stroke-linecap:round}
.skin-import-export .alive .ct{animation:ie-drop .7s var(--ease-out) backwards}
.skin-import-export .alive .ct:nth-of-type(3),.skin-import-export .alive .ct:nth-of-type(4){animation-delay:.08s}
.skin-import-export .alive .ct:nth-of-type(5),.skin-import-export .alive .ct:nth-of-type(6){animation-delay:.25s}
.skin-import-export .alive .ct:nth-of-type(7){animation-delay:.42s}
@keyframes ie-drop{from{transform:translateY(-70px);opacity:0}}
/* services: corrugated container tops */
.skin-import-export .is-list li,.skin-import-export .ic-box{border-top:12px solid transparent;border-image:repeating-linear-gradient(90deg,var(--primary) 0 12px,#1E40AF 12px 16px) 12 0 0 0 / 12px 0 0 0}
.skin-import-export .is-list li:nth-child(even){border-image:repeating-linear-gradient(90deg,#EA580C 0 12px,#C2410C 12px 16px) 12 0 0 0 / 12px 0 0 0}
.skin-import-export .is-ico{border-radius:4px}

/* Factories & manufacturing: the plant floor — hazard tape running, gears turning, chimneys smoking, stencilled labels.
   Palette: UI UX Pro Max "Construction" steel (#64748B) with safety yellow. Font: Noto Kufi Arabic Black. */
body.skin-factories{--bg:#15171A;--card:#1E2125;--card-2:#262A2F;--border:#33383E;--fg:#F2F2F2;--secondary-fg:#D4D4D4;--muted:#A0A4A8;
  --primary:#FACC15;--on-primary:#15171A;--accent:#FB923C;--i-font:"Noto Kufi Arabic";--i-w:900;--i-r:2px}
.skin-factories .btn{border-radius:2px}
.skin-factories .ih{padding-bottom:clamp(160px,22vw,280px)}
.skin-factories .ih h1{font-size:clamp(38px,5.6vw,78px);line-height:1.3}
.skin-factories .ih::after{content:"";position:absolute;inset:auto 0 0;height:18px;z-index:-1;background:repeating-linear-gradient(-45deg,#FACC15 0 20px,#15171A 20px 40px);
  background-size:56.57px 100%;animation:fa-belt 2s linear infinite}
@keyframes fa-belt{to{background-position:56.57px 0}}
.skin-factories .ih-art{place-items:end center;padding-bottom:18px}
.skin-factories .ih-art .art{width:min(1200px,110vw);max-height:50%}
.skin-factories .sky{fill:var(--card);stroke:var(--border);stroke-width:3;stroke-linejoin:round}
.skin-factories .g1,.skin-factories .g2{fill:none;stroke:#454B53;stroke-width:3;transform-box:fill-box;transform-origin:center}
.skin-factories .g1{animation:fa-spin 20s linear infinite}
.skin-factories .g2{animation:fa-spin 13s linear infinite reverse}
.skin-factories .hub{fill:var(--card-2);stroke:#5B626B;stroke-width:3}
@keyframes fa-spin{to{transform:rotate(360deg)}}
.skin-factories .smoke circle{fill:#3A3F46;animation:fa-smoke 3.8s ease-out infinite;animation-delay:var(--d)}
@keyframes fa-smoke{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.9}100%{opacity:0;transform:translateY(-90px) scale(1.8)}}
.skin-factories .smoke circle{transform-box:fill-box;transform-origin:center}
/* clients: stencilled labels on safety yellow */
.skin-factories .ir-list li{background:var(--primary);color:#15171A;border:0;font:900 19px/1.3 "Noto Kufi Arabic",var(--font-body);letter-spacing:.02em}
/* services: hazard-taped panels with bolts in the corners */
.skin-factories .is-list li,.skin-factories .ic-box{border-top:10px solid transparent;border-image:repeating-linear-gradient(-45deg,#FACC15 0 12px,#15171A 12px 24px) 10 0 0 0 / 10px 0 0 0;
  background:radial-gradient(circle 4px at 16px 26px,#5B626B 98%,transparent),radial-gradient(circle 4px at calc(100% - 16px) 26px,#5B626B 98%,transparent),var(--card)}
.skin-factories .is-ico{border-radius:2px}