/*
Theme Name: Rayanmand
Theme URI: https://rayanmand.com
Author: Rayanmand Aria
Description: Enterprise block theme for Rayanmand Aria and ARIA.
Version: 1.1.23
Text Domain: rayanmand
Requires at least: 6.6
*/
@font-face{font-family:IRANSans;src:url("assets/fonts/IRANSansWeb_UltraLight.woff2") format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:IRANSans;src:url("assets/fonts/IRANSansWeb_Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:IRANSans;src:url("assets/fonts/IRANSansWeb.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:IRANSans;src:url("assets/fonts/IRANSansWeb_Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:IRANSans;src:url("assets/fonts/IRANSansWeb_Bold.woff2") format("woff2");font-weight:700 900;font-display:swap}
.wp-site-blocks{padding:0!important;overflow-x:clip;overflow-y:visible}.wp-site-blocks>*{margin-block-start:0!important}
:root{--navy:#061c3d;--deep:#00122d;--blue:#075dcc;--teal:#03b8bd;--ink:#071939;--muted:#526987;--line:#dbe6f3;--soft:#f5f8fd;--shell:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#031129}body{margin:0;background:#fff;color:var(--ink);font-family:IRANSans,Tahoma,Arial,sans-serif;font-size:15px;line-height:1.85}.site{overflow-x:clip;overflow-y:visible}.shell{width:min(calc(100% - 96px),var(--shell));margin-inline:auto}a{text-decoration:none;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 25px;border-radius:7px;color:#fff;font-weight:700}.primary{background:linear-gradient(180deg,#0754bd,#033f9e);box-shadow:0 8px 22px rgba(3,63,158,.18)}.outline{border:1px solid #8199b8;background:transparent}.teal{background:linear-gradient(90deg,#049eb2,#08c6bd)}


.hero{padding:20px 0 0;background:radial-gradient(circle at 25% 42%,#022555 0,transparent 31%),var(--deep);color:#fff}.heroGrid{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;min-height:420px;gap:72px}.heroCopy{padding-right:34px;transform:translateY(-10px)}.kicker{display:inline-flex;padding:4px 15px;border:1px solid #254b79;border-radius:999px;background:#08203f;box-shadow:0 0 18px rgba(30,109,215,.2);font-size:14px}.hero h1{margin:7px 0 0;color:#fff;font-size:96px;line-height:1.25;letter-spacing:-3px}.hero h1 em{color:var(--teal);font-style:normal}.hero h2{margin:7px 0 12px;color:#fff;font-size:30px}.heroCopy>p{max-width:575px;margin:0;color:#bdcce0;line-height:2}.heroButtons{display:flex;gap:13px;margin-top:23px}.heroButtons .btn{min-width:158px}.playIcon{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:9px solid #17c8cc}.heroArtwork{display:flex;align-items:center;justify-content:center;height:420px}.heroArtwork img{display:block;width:min(130%,820px);max-width:none;height:auto;mix-blend-mode:screen;transform:translate(55px,-30px) scale(1.15);filter:drop-shadow(0 8px 23px rgba(0,103,255,.16))}
.valueStrip{display:grid;grid-template-columns:repeat(5,1fr);padding:32px 12px;border:1px solid #1d5798;border-radius:19px;background:linear-gradient(100deg,#06214b,#041c40)}.valueStrip article{display:flex;align-items:center;justify-content:center;gap:13px;min-height:72px;padding:2px 14px;border-left:1px solid #234976;direction:rtl}.valueStrip article:last-child{border-left:0}.valueStrip article>div{min-width:0;text-align:right}.valueStrip b,.valueStrip strong,.valueStrip small{display:block}.valueStrip b,.valueStrip strong{color:#fff;font-size:14px;font-weight:700;line-height:1.6}.valueStrip small{color:#9bb0ca;font-size:11px;line-height:1.7}

.lineIcon{position:relative;display:inline-block;flex:0 0 36px;width:36px;height:36px;color:var(--icon,#0fcbd0)}.lineIcon i{position:absolute;display:block;border-color:currentColor}.icon-shield{border:3px solid currentColor;border-radius:4px 4px 14px 14px;transform:scale(.72)}.icon-shield:after{content:"✓";position:absolute;inset:1px;display:grid;place-items:center;font-weight:700}.icon-speed{border:2px solid currentColor;border-radius:50%}.icon-speed:after{content:"";position:absolute;width:13px;height:2px;right:16px;top:17px;background:currentColor;transform:rotate(-55deg);transform-origin:right}.icon-flex i:nth-child(1),.icon-flex i:nth-child(2),.icon-flex i:nth-child(3){right:5px;width:27px;height:2px;background:currentColor}.icon-flex i:nth-child(1){top:7px}.icon-flex i:nth-child(2){top:17px}.icon-flex i:nth-child(3){top:27px}.icon-flex i:after{content:"";position:absolute;top:-4px;width:8px;height:8px;border:2px solid currentColor;border-radius:50%;background:#06214b}.icon-flex i:nth-child(odd):after{left:5px}.icon-flex i:nth-child(2):after{right:5px}.icon-scale:before{content:"↗";position:absolute;inset:-5px 0 0;display:grid;place-items:center;font-size:35px}.icon-integrate{border:3px solid currentColor;border-radius:50%}.icon-integrate:after{content:"";position:absolute;inset:6px;border:2px solid currentColor;border-radius:50%}

.panel{width:calc(100% - 24px);margin:9px auto 0;padding:34px 0;border:1px solid #e2eaf4;border-radius:17px;background:radial-gradient(circle at 13% 45%,rgba(20,101,208,.08),transparent 31%),linear-gradient(135deg,#fff,#f5f8fd)}.sectionHead{text-align:center}.sectionHead h2,.why h2{margin:0;font-size:33px;line-height:1.45}.sectionHead p{margin:2px 0 20px;color:var(--muted)}
.whyGrid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:65px}.whyCopy>p{max-width:630px;margin:9px 0;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.stats article{display:grid;place-items:center;min-height:123px;padding:12px 7px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 7px 22px rgba(18,54,105,.03)}.stats .lineIcon{width:22px;height:22px;transform:scale(.6);color:var(--blue)}.stats b{color:var(--blue);font-size:23px;line-height:1.4}.stats small{color:var(--muted);font-size:10px}.stackSide{display:grid;grid-template-columns:1.15fr .95fr;align-items:center;gap:22px;direction:ltr}.stack{position:relative;height:244px}.stack div{position:absolute;left:50%;display:grid;place-items:center;width:290px;height:100px;border-radius:50%/24%;transform:translateX(-50%);font-weight:700;box-shadow:0 18px 30px rgba(6,45,105,.17)}.stack div:nth-child(1){top:0;z-index:3;background:linear-gradient(#fff,#e8eef7)}.stack div:nth-child(2){top:72px;z-index:2;color:#fff;background:linear-gradient(#2fcdd1,#0399a7)}.stack div:nth-child(3){top:144px;z-index:1;color:#fff;background:linear-gradient(#176fda,#073b91)}.stackSide ul{margin:0;padding:0;direction:rtl;list-style:none}.stackSide li{position:relative;padding:8px 31px 8px 0;color:#334b69;font-size:11px}.stackSide li:before{content:"✓";position:absolute;right:0;display:grid;place-items:center;width:20px;height:20px;border:1px solid #b6cae5;border-radius:50%;background:#fff;color:var(--blue)}

.solutionGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.solutionGrid article{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:151px;padding:16px 19px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center;box-shadow:0 8px 24px rgba(18,54,105,.05)}.solutionGrid article:before{content:none}.solutionGrid .lineIcon{width:32px;height:32px;color:var(--card)}.solutionGrid .orange{--card:#ef9813}.solutionGrid .amber{--card:#df8125}.solutionGrid .teal{--card:#08a2a5}.solutionGrid .blue{--card:#165cc9}.solutionGrid .indigo{--card:#324fc9}.solutionGrid .violet{--card:#713ee8}.solutionGrid h3{margin:2px 0;font-size:17px}.solutionGrid p{margin:0;color:#425c7b;font-size:11px;font-weight:600;line-height:1.75}.solutionGrid a{display:inline-flex;align-items:center;gap:5px;margin-top:2px;color:var(--blue);font-size:10px;font-weight:700;direction:rtl}.solutionGrid a b{font-size:13px;line-height:1;font-weight:700}

.architecture{padding:18px 0 30px;margin-bottom:9px}.architecture .sectionHead p{margin:4px 0 24px}.architectureMap{display:grid;grid-template-columns:1fr 250px 1fr;align-items:center;gap:55px;max-width:1010px;margin:auto}.architectureList{display:grid;gap:9px}.architectureList span{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 15px;border:1px solid #bed0e8;border-radius:6px;background:#fff;font-size:13px;font-weight:600}.architectureList .lineIcon{display:grid;place-items:center;width:21px;height:21px;color:#375b91;font-size:18px}.architectureList .lineIcon:before{line-height:1}.architectureList .icon-process:before{content:"✧"}.architectureList .icon-rules:before{content:"⌘"}.architectureList .icon-permission:before{content:"⌬"}.architectureList .icon-report:before{content:"↗"}.architectureList .icon-integrate:before{content:"⌘"}.architectureList .icon-api:before{content:"◇"}.architectureList .icon-database:before{content:"▣"}.architectureList .icon-location:before{content:"⌾"}.architectureCore{position:relative;display:grid;place-items:center;width:218px;height:218px;margin:auto;border:1px solid rgba(20,185,190,.3);border-radius:50%;background:radial-gradient(circle,#0a9da1 0 40%,rgba(20,194,196,.13) 40.5% 52%,#fff 52.5% 68%,rgba(20,194,196,.08) 68.5% 100%);box-shadow:0 0 0 8px rgba(5,192,195,.035)}.architectureCore:before,.architectureCore:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.architectureCore:before{inset:13px;border:1px solid #18bcc0}.architectureCore:after{inset:31px;border:1px solid rgba(22,189,193,.22)}.architectureOrbit{position:absolute;inset:0;z-index:2;pointer-events:none}.architectureOrbit i{position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px;border:1px solid #fff;border-radius:50%;background:#12aeb3;box-shadow:0 0 0 1px rgba(18,174,179,.14);transform:rotate(0deg) translateY(-95px)}.architectureOrbit i:nth-child(2){transform:rotate(45deg) translateY(-95px)}.architectureOrbit i:nth-child(3){transform:rotate(90deg) translateY(-95px)}.architectureOrbit i:nth-child(4){transform:rotate(135deg) translateY(-95px)}.architectureOrbit i:nth-child(5){transform:rotate(180deg) translateY(-95px)}.architectureOrbit i:nth-child(6){transform:rotate(225deg) translateY(-95px)}.architectureOrbit i:nth-child(7){transform:rotate(270deg) translateY(-95px)}.architectureOrbit i:nth-child(8){transform:rotate(315deg) translateY(-95px)}.architectureLogo{position:relative;z-index:3;display:block;width:118px;height:82px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 5px 9px rgba(0,77,88,.13))}

.cta{width:calc(100% - 24px);margin:0 auto 5px;padding:24px 0 0;border-radius:17px;background:linear-gradient(115deg,#00132f,#062e62);color:#fff;overflow:hidden}.ctaGrid{display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;min-height:245px;}.ctaCopy{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:24px;text-align:center;}.cta h2{margin:0;color:#fff;font-size:26px}.cta p{max-width:500px;margin:12px auto 20px;color:#c7d5e7;font-size:13px;font-weight:600;line-height:2}.ctaCopy>div{display:flex;justify-content:center;gap:18px;width:100%}.dashboard{align-self:end;overflow:hidden;height:220px;border:8px solid #fff;border-bottom:0;border-radius:12px 12px 0 0;background:#fff}.dashboard img{width:100%;height:100%;object-fit:cover;object-position:top center}
footer{padding-top:39px;background:linear-gradient(130deg,#061a34,#031129);color:#fff}.footerGrid{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.15fr;gap:42px}.footerGrid h3,.footerGrid h4{margin:0 0 13px}.footerGrid h3{font-size:22px}.footerGrid h4{color:#08c0c7;font-size:17px;font-weight:800}
.footerLogo {
    width: 245px;
    height: 72px;
    margin-bottom: 8px;
    background: url("assets/images/final-site/rayanmand-aria-header-logo.png") no-repeat right center;
    background-size: contain;
}
.footerGrid p{color:#d0dbea;font-size:13px;line-height:1.9}.footerGrid section>a{display:block;margin:7px 0;color:#e0e8f2;font-size:13px}.footerBottom{margin-top:30px;background:#001127}.footerBottom>div{display:flex;justify-content:center;padding-block:14px;color:#c3d0df;font-size:12px;font-weight:600;text-align:center}

/* آیکون‌ها و تعاملات نهایی */
.lineIcon{overflow:visible}.lineIcon *{vector-effect:non-scaling-stroke}.solutionGrid article{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.solutionGrid article:hover{transform:translateY(-5px);border-color:#bdd3ee;box-shadow:0 16px 35px rgba(18,54,105,.11)}.solutionGrid article:focus-within{outline:2px solid #0a68d8;outline-offset:3px}.solutionGrid .lineIcon{padding:2px;background:none}
.architectureList span{position:relative;transition:border-color .2s ease,transform .2s ease}.architectureList span:hover{transform:translateX(-3px);border-color:#77a5dd}.architectureList.right span:after,.architectureList.left span:after{content:"";position:absolute;top:50%;width:58px;height:1px;background:linear-gradient(90deg,#73abd8,transparent);transform:translateY(-50%)}.architectureList.right span:after{left:-58px}.architectureList.left span:after{right:-58px;transform:translateY(-50%) scaleX(-1)}.architectureList.right span:before,.architectureList.left span:before{content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:#17bac0;transform:translateY(-50%)}.architectureList.right span:before{left:-61px}.architectureList.left span:before{right:-61px}
.footerGrid{position:relative}.footerGrid>section+section{border-right:1px solid rgba(130,157,190,.24);padding-right:28px}.footerBrand strong{display:block;margin-bottom:6px}.footerBrand .footerLogo{filter:brightness(1.12)}

/* هندسهٔ دسکتاپ بر اساس نسبت‌های طرح مرجع ۹۳۵ پیکسلی */
@media(min-width:1101px){
  .shell{width:min(calc(100% - 96px),var(--shell))}
  .hero{padding-top:10px}.heroGrid{grid-template-columns:1fr 1.08fr;min-height:500px;gap:42px}.heroCopy{padding-right:45px;transform:translateY(-5px)}.hero h1{margin-top:2px;font-size:94px;line-height:1.18;letter-spacing:-2px;white-space:nowrap}.hero h2{margin:5px 0 10px;font-size:27px}
  .heroCopy>p{max-width:520px}.heroArtwork{height:445px}.heroArtwork img{width:780px;transform:translate(-2px,20px) scale(1.1);-webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 54%,rgba(0,0,0,.98) 69%,transparent 95%);mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 54%,rgba(0,0,0,.98) 69%,transparent 95%)}
  .valueStrip{min-height:154px;padding:30px 12px}.valueStrip article{min-height:88px;gap:14px}.valueStrip .lineIcon,.valueStrip .siteLineIcon{flex-basis:44px;width:44px;height:44px}
  .why{padding-block:55px}.whyGrid{gap:72px}
  .solutions{padding-block:8px;}.solutions .sectionHead p{margin:0 0 8px;}

  .solutionGrid{
      display:grid;
      grid-template-columns:none;
      grid-auto-flow:column;
      grid-auto-columns:calc((100% - 36px) / 4);
      gap:12px;
      overflow-x:hidden;
      overflow-y:visible;
      scroll-behavior:smooth;
      padding-top:8px;
      padding-bottom:8px;
  }
  .solutionGrid article{
      min-width:0;
      min-height:151px;
      padding-block:14px;
      scroll-snap-align:start;
  }
  .architecture{position:relative;padding:18px 0 30px;margin-bottom:9px}.architecture .shell{position:relative}.architecture .sectionHead p{margin:4px 0 24px}.architectureMap{margin-top:0}
  .ctaGrid{min-height:229px;}
  .panel,.cta{width:85%;margin-left:auto;margin-right:auto;}
  footer{padding-top:20px}.footerBottom{margin-top:20px}
}

/* نمایش فقط آیکون‌های SVG نهایی و حذف تزئینات موقت نسخه‌های قبلی */
.lineIcon::before,.lineIcon::after{content:none!important}.lineIcon{border:0!important;transform:none!important}.solutionGrid .lineIcon{width:34px;height:34px;padding:2px}.architectureList .lineIcon{width:20px;height:20px}.stats .lineIcon{width:18px;height:18px;transform:none!important}
.valueStrip{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.65) 94%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.65) 94%,transparent 100%);border-bottom-color:rgba(29,87,152,.35)}

/* The current Hero artwork has a genuine alpha channel; no blending or mask is needed. */
.heroArtwork img{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}

/* Approved Arya ecosystem artwork: visually merge its pale backdrop into the navy Hero. */
.heroArtwork img{width:min(125%,820px);mix-blend-mode:multiply;transform:translate(32px,-8px) scale(1.08);filter:brightness(2.15) saturate(1.55) drop-shadow(0 8px 23px rgba(0,103,255,.16))}
@media(min-width:1101px){.heroArtwork img{width:780px;transform:translate(12px,10px) scale(1.06)}}

/* Why Aria — exact visual proportions and color roles from the approved reference. */
.why{padding-block:26px;background:linear-gradient(135deg,#fbfdff,#f4f8fe)}
.whyGrid{grid-template-columns:1.02fr .98fr;gap:42px}
.whyCopy h2{font-size:31px;letter-spacing:-.4px}
.whyCopy>p{width:520px;max-width:100%;margin:4px 0 0;color:#3f5878;font-size:12px;line-height:1.9;font-weight:500}
.whyLead span{display:block;width:100%;text-align:right;text-align-last:auto;word-spacing:normal;letter-spacing:0;white-space:nowrap}
.whyLead span:first-child{word-spacing:3px}
.stats{width:min(100%,480px);gap:2px;margin-top:17px}
.stats article{min-height:100px;padding:9px 5px;border-color:#e0e8f2;border-radius:9px;box-shadow:0 6px 18px rgba(18,54,105,.035);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.stats article:hover{transform:translateY(-5px);border-color:#bdd3ee;box-shadow:0 16px 35px rgba(18,54,105,.11)}
.stats .lineIcon{width:17px;height:17px;color:#075dcc}
.stats b{color:#0754be;font-size:19px;line-height:1.2;font-weight:700}
.stats small{color:#243f61;font-size:9px;line-height:1.55;font-weight:700}
.stats article:nth-child(2) .lineIcon,.stats article:nth-child(2) b,.stats article:nth-child(3) .lineIcon,.stats article:nth-child(3) b{color:#079a9d}
.whyVisualGraphic{display:grid;grid-template-columns:minmax(0,1fr) 172px;align-items:center;width:100%;max-width:565px;min-height:258px;justify-self:end;direction:ltr}
.whyStackArt{position:relative;min-width:0;filter:drop-shadow(0 17px 20px rgba(17,77,151,.14))}
.whyStackArt img{display:block;width:100%;height:auto}
.layerLabel{position:absolute;left:7%;z-index:2;display:flex;align-items:center;justify-content:center;min-width:92px;height:25px;padding:2px 11px;border:1px solid rgba(117,154,199,.38);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 5px 15px rgba(20,75,145,.12);color:#102d58;font-size:9px;font-weight:700;direction:rtl;backdrop-filter:blur(5px)}
.layerOrganization{top:18%}.layerPlatform{top:47%;border-color:rgba(5,174,181,.42);color:#087a82}.layerInfrastructure{top:75%;border-color:rgba(10,87,203,.42);color:#0754b8}
.whyBenefits{position:relative;margin:0;padding:0;direction:rtl;list-style:none}
.whyBenefits::before{content:"";position:absolute;right:11px;top:15px;bottom:15px;width:1px;background:linear-gradient(#8fb8e8,rgba(143,184,232,.2))}
.whyBenefits li{position:relative;z-index:1;min-height:38px;padding:7px 34px 7px 0;color:#193b63;font-size:11px;font-weight:600;line-height:1.65;white-space:nowrap;transform-origin:right center;transition:transform .22s ease,color .22s ease}
.whyBenefits li:hover{z-index:3;color:#0754b8;transform:scale(1.055)}
.whyBenefits li::before{content:"✓";position:absolute;right:0;top:6px;display:grid;place-items:center;width:23px;height:23px;border:1px solid #8eb6e6;border-radius:50%;background:linear-gradient(145deg,#fff,#edf5ff);color:#075dcc;font-size:12px;font-weight:800;box-shadow:0 5px 14px rgba(20,75,145,.13),inset 0 0 0 3px rgba(255,255,255,.75);transition:box-shadow .22s ease,border-color .22s ease,background .22s ease}
.whyBenefits li:hover::before{border-color:#5f9fdf;background:linear-gradient(145deg,#fff,#e2f1ff);box-shadow:0 8px 20px rgba(15,88,180,.22),0 0 0 4px rgba(7,93,204,.06),inset 0 0 0 3px rgba(255,255,255,.8)}
.whyBenefits li::after{content:"";position:absolute;right:-39px;top:18px;width:35px;border-top:1px solid #8fb8e8}





/* New Aria brand mark in the architecture diagram. */
.architectureLogo{width:110px;height:102px;filter:drop-shadow(0 5px 9px rgba(0,77,88,.18))}

/* Transparent Arya ecosystem artwork. */
.heroArtwork .heroModulesArtwork{width:min(132%,860px);height:auto;max-width:none;mix-blend-mode:normal;transform:translate(18px,4px);filter:drop-shadow(0 14px 30px rgba(0,145,210,.16));-webkit-mask-image:none;mask-image:none}
@media(min-width:1101px){.heroArtwork .heroModulesArtwork{width:800px;transform:translate(6px,10px)}}



/* Solutions slider controls */
.solutionSlider{
    position:relative;
    padding:0 48px 34px;
}

/* Arrow buttons are vertically centered against the card track,
   excluding the 34px area reserved for pagination dots. */
.solutionArrow{
    position:absolute;
    top:calc((100% - 34px) / 2);
    z-index:5;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid #d7e2ef;
    border-radius:50%;
    background:#fff;
    color:#13b8c7;
    box-shadow:0 4px 14px rgba(18,52,86,.08);
    cursor:pointer;
    font-size:0;
    line-height:1;
    transform:translateY(-50%);
    transition:
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease,
        opacity .2s ease;
}

/* Use pseudo-elements instead of the literal button glyphs so the
   arrows sit visually in the exact center of the circles. */
.solutionArrow::before{
    display:block;
    font-family:Arial,sans-serif;
    font-size:30px;
    font-weight:400;
    line-height:1;
    transform:translateY(-1px);
}

.solutionArrowLeft{
    left:3px;
}

.solutionArrowLeft::before{
    content:"›";
}

.solutionArrowRight{
    right:3px;
}

.solutionArrowRight::before{
    content:"‹";
}

.solutionArrow:hover{
    color:#075dcc;
    border-color:#9ebfe2;
    box-shadow:0 9px 24px rgba(18,54,105,.2);
    transform:translateY(-50%) scale(1.08);
}

.solutionArrow:disabled{
    opacity:.28;
    cursor:default;
    box-shadow:0 4px 14px rgba(18,52,86,.05);
}

.solutionArrow:disabled:hover{
    color:#13b8c7;
    border-color:#d7e2ef;
    transform:translateY(-50%);
}

.solutionDots{
    position:absolute;
    right:0;
    bottom:7px;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:14px;
}

.solutionDot{
    width:10px;
    height:10px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#bdcadb;
    cursor:pointer;
    transition:
        background-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.solutionDot:hover{
    background:#7f9fbe;
    transform:scale(1.15);
}

.solutionDot.is-active{
    background:#079eae;
    transform:scale(1.2);
    box-shadow:0 0 0 3px rgba(7,158,174,.10);
}

/* =========================================================
   Shared Header / Desktop + Mobile Drawer
   ========================================================= */
.header{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    height:80px;
    background:var(--deep);
    color:#fff;
    box-shadow:0 2px 10px rgba(0,18,45,.08);
}
.headerInner{height:80px}
.header .officialLogo{
    display:block;
    width:265px;
    height:70px;
    margin:0;
    background:url("assets/images/final-site/rayanmand-aria-header-logo.png") center/contain no-repeat;
    mix-blend-mode:normal;
}
.mainMenuLinks a{
    position:relative;
    color:#e1e9f4;
    font-size:15px;
    white-space:nowrap;
    transition:color .2s ease;
}
.mainMenuLinks a:hover{color:#fff}
.mainMenuLinks a.active{color:#10c4c9}
.mainMenuLinks a.active::after{
    content:"";
    position:absolute;
    right:0;
    left:0;
    bottom:-13px;
    height:2px;
    background:#10c4c9;
}
.menuDemoButton{
    width:134px;
    min-height:40px;
    height:40px;
    padding:6px 18px;
    border-radius:7px;
    font-size:14px;
}
.mobileMenuToggle,.mobileMenuClose,.mobileMenuOverlay{display:none}
body.mobile-menu-open{
    overflow:hidden;
    touch-action:none;
    overscroll-behavior:none;
}

/* Desktop: logo right, CTA left, links centered independently. */


/* Mobile / tablet drawer */




/* =========================================================
   Phone layout
   ========================================================= */

/* =========================================================
   Final responsive system — approved layouts
   Breakpoints: phone <=600, tablet 601–900, compact desktop 901–1100
   ========================================================= */

/* Desktop header: logo right, links truly centered, CTA left. */
@media(min-width:901px){
    .headerInner{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
        grid-template-areas:"demo links logo";
        align-items:center;
        gap:28px;
        height:80px;
        direction:ltr;
    }
    .header .officialLogo{grid-area:logo;justify-self:end;direction:rtl}
    .mainMenu{display:contents}
    .mainMenuLinks{
        grid-area:links;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:30px;
        min-width:0;
        direction:rtl;
    }
    .menuDemoButton{grid-area:demo;justify-self:start;margin:0;direction:rtl}
}

/* Compact desktop / landscape tablet widths. */
@media(min-width:901px) and (max-width:1100px){
    .heroGrid{gap:25px}
    .heroCopy{padding-right:10px}
    .whyGrid{gap:22px}
    .whyVisualGraphic{grid-template-columns:minmax(0,1fr) 168px}
    .whyBenefits li{font-size:10px}

    /* Four-card solutions carousel at 1024px, same paging model as desktop. */
    .solutions{padding-block:8px}
    .solutionSlider{position:relative;padding:0 48px 34px}
    .solutionGrid{
        display:grid;
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:calc((100% - 36px) / 4);
        gap:12px;
        overflow-x:hidden;
        overflow-y:visible;
        padding:8px 0;
        scroll-behavior:smooth;
    }
    .solutionGrid article{min-width:0;min-height:145px;padding:12px 10px}
    .solutionArrow{display:grid}
    .solutionDots{display:flex}

    /* Keep all four footer sections on one row. */
    footer{padding-top:24px}
    .footerGrid{
        grid-template-columns:1.4fr .8fr .9fr 1.1fr;
        gap:24px;
        align-items:start;
    }
    .footerBrand .footerLogo{width:215px;height:64px}
    .footerBrand strong{font-size:12px}
    .footerGrid p{font-size:11px;line-height:1.8}
    .footerGrid h4{font-size:14px;margin-bottom:10px}
    .footerGrid section>a{margin:5px 0;font-size:11px}
    .footerGrid>section+section{padding-right:18px}
    .footerBottom{margin-top:24px}
}

/* =========================================================
   Narrow desktop bridge — 901px to 960px
   Smooth transition between tablet and compact desktop
   ========================================================= */
@media(min-width:901px) and (max-width:1023px){

    /* Header */
    .headerInner{
        gap:20px;
    }

    .header .officialLogo{
        width:clamp(225px, calc(31.97vw - 63px), 264px);
        height:64px;
    }

    .mainMenuLinks{
        gap:22px;
    }

    .mainMenuLinks a{
        font-size:13px;
    }

    .menuDemoButton{
        width:120px;
        min-height:38px;
        height:38px;
        padding:6px 14px;
        font-size:12px;
    }


    /* Hero */
    .hero{
        padding-top:8px;
    }

    .heroGrid{
        grid-template-columns:1fr 1fr;
        min-height:420px;
        gap:28px;
    }

    .heroCopy{
        padding-right:0;
        transform:none;
    }

    .kicker{
        padding:3px 12px;
        font-size:12px;
    }

    .hero h1{
        margin-top:6px;
        font-size:clamp(68px, calc(21.31vw - 124px), 94px);
        line-height:1.18;
        letter-spacing:-1px;
        white-space:nowrap;
    }

    .hero h2{
        margin:7px 0 8px;
        font-size:clamp(20px, calc(7.38vw - 46.5px), 29px);
        line-height:1.6;
    }

    .heroCopy>p{
        max-width:340px;
        font-size:11px;
        line-height:1.9;
    }

    .heroButtons{
        margin-top:16px;
    }

    .heroButtons .btn{
        min-width:130px;
        min-height:40px;
        padding:6px 16px;
        font-size:12px;
    }

    .heroArtwork{
        height:clamp(360px, calc(47.54vw - 68.4px), 418px);
    }

    .heroArtwork .heroModulesArtwork{
        width:108%;
        max-width:none;
        transform:none;
    }


    /* Five hero benefits */
    .valueStrip{
        padding:22px 8px;
    }

    .valueStrip article{
        min-height:74px;
        gap:8px;
        padding:2px 7px;
    }

    .valueStrip b,
    .valueStrip strong{
        font-size:12px;
        line-height:1.55;
    }

    .valueStrip small{
        font-size:9px;
        line-height:1.6;
    }

    .valueStrip .lineIcon,
    .valueStrip .siteLineIcon{
        flex-basis:32px;
        width:32px;
        height:32px;
    }


    /* Why Aria */
    .whyGrid{
        grid-template-columns:1fr 1fr;
        gap:24px;
    }

    .whyVisualGraphic{
        grid-template-columns:1fr;
        width:100%;
        max-width:330px;
        justify-self:center;
    }

    .whyStackArt{
        width:100%;
        max-width:310px;
        margin:0 auto;
    }

    .whyBenefits{
        display:none;
    }

    .stats{
        width:100%;
        max-width:100%;
    }
}
/* =========================================================
   Shared mobile + tablet behavior
   ========================================================= */
@media(max-width:900px){
    /* Fixed header: reliable inside WordPress block-template wrappers. */
    .header{
        position:fixed;
        top:0;
        right:0;
        left:0;
        z-index:1000;
        width:100%;
        height:64px;
        border:0!important;
        outline:0!important;
        background:var(--deep);
        box-shadow:none!important;
    }
    .wp-site-blocks{padding-top:64px!important}
    html{scroll-padding-top:72px}
    body.admin-bar .header{top:32px}

    /* Remove template-part separator lines around the fixed header. */
    .wp-site-blocks>header.wp-block-template-part,
    .wp-site-blocks>.wp-block-template-part:first-child{
        border:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    .headerInner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        height:64px;
        padding:0 16px;
        gap:0;
    }
    .header .officialLogo{
        flex:0 0 190px;
        width:190px;
        height:52px;
        margin:0;
        transform:none;
    }
    .mobileMenuToggle{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        flex:0 0 42px;
        width:42px;
        height:42px;
        padding:0;
        border:1px solid rgba(255,255,255,.16);
        border-radius:8px;
        background:rgba(255,255,255,.035);
        cursor:pointer;
        transition:background .2s ease,border-color .2s ease;
    }
    .mobileMenuToggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26)}
    .mobileMenuToggle span{display:block;width:20px;height:2px;border-radius:10px;background:#fff}

    .mainMenu{
        position:fixed;
        top:0;
        right:0;
        z-index:1100;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        width:min(84vw,320px);
        height:100dvh;
        padding:86px 22px 26px;
        border-left:1px solid rgba(255,255,255,.08);
        background:radial-gradient(circle at 80% 8%,rgba(8,111,194,.18),transparent 30%),linear-gradient(165deg,#071f43 0%,#00142f 100%);
        box-shadow:-16px 0 45px rgba(0,0,0,.30);
        transform:translateX(105%);
        transition:transform .28s ease;
        overflow-y:auto;
    }
    .mainMenu.is-open{transform:translateX(0)}
    .mainMenu::before{
        content:"";
        position:absolute;
        top:18px;
        right:22px;
        width:170px;
        height:48px;
        background:url('assets/images/final-site/rayanmand-aria-header-logo.png') right center/contain no-repeat;
        pointer-events:none;
    }
    .mainMenuLinks{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        width:100%;
        margin-top:12px;
        padding-top:10px;
    }
    .mainMenuLinks::before{
        content:"";
        position:absolute;
        top:0;
        right:0;
        left:0;
        height:1px;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
    }
    .mainMenuLinks a{
        display:flex;
        align-items:center;
        min-height:54px;
        padding:0 14px;
        border-bottom:1px solid rgba(255,255,255,.07);
        border-radius:7px;
        color:#dce7f4;
        font-size:15px;
        font-weight:500;
        transition:color .2s ease,background .2s ease,padding-right .2s ease;
    }
    .mainMenuLinks a:hover{padding-right:20px;color:#fff;background:rgba(255,255,255,.045)}
    .mainMenuLinks a.active{color:#18c2c8;background:rgba(8,190,197,.07)}
    .mainMenuLinks a.active::after{display:none}
    .mainMenuLinks a.active::before{
        content:"";
        position:absolute;
        right:0;
        top:50%;
        width:3px;
        height:24px;
        border-radius:4px;
        background:#18c2c8;
        transform:translateY(-50%);
    }
    .menuDemoButton{
        width:100%;
        min-height:46px;
        height:46px;
        margin-top:26px;
        border-radius:8px;
        font-size:14px;
        box-shadow:0 10px 25px rgba(3,74,170,.27);
    }
    .mobileMenuClose{
        position:absolute;
        top:20px;
        left:18px;
        display:flex;
        align-items:center;
        justify-content:center;
        width:34px;
        height:34px;
        padding:0;
        border:1px solid rgba(255,255,255,.18);
        border-radius:50%;
        background:rgba(255,255,255,.055);
        color:#fff;
        font-family:Arial,sans-serif;
        font-size:25px;
        line-height:1;
        cursor:pointer;
        transition:background .2s ease,border-color .2s ease,transform .2s ease;
    }
    .mobileMenuClose:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.30);transform:rotate(90deg)}
    .mobileMenuOverlay{
        position:fixed;
        inset:0;
        z-index:1050;
        display:block;
        background:rgba(0,10,28,.66);
        backdrop-filter:blur(3px);
        opacity:0;
        visibility:hidden;
        transition:opacity .28s ease,visibility .28s ease;
    }
    .mobileMenuOverlay.is-open{opacity:1;visibility:visible}

    /* The five desktop hero benefit boxes are intentionally hidden <=900px. */
    .valueStrip{display:none}

    /* Touch-enabled solutions carousel: two cards by default in this range. */
    .solutionSlider{position:relative;padding:0 42px 34px}
    .solutionGrid{
        display:grid;
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:calc((100% - 12px) / 2);
        gap:12px;
        overflow-x:auto;
        overflow-y:visible;
        padding:8px 0;
        scroll-behavior:smooth;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-inline:contain;
        touch-action:pan-x pan-y;
    }
    .solutionGrid::-webkit-scrollbar{display:none}
    .solutionGrid article{min-width:0;scroll-snap-align:none;user-select:none;-webkit-user-select:none}
    .solutionGrid article.solutionPageStart{scroll-snap-align:start;scroll-snap-stop:always}
    .solutionArrow{display:grid;width:32px;height:32px}
    .solutionDots{display:flex}

    .ctaGrid{grid-template-columns:1fr}
    .ctaCopy{text-align:center}
    .ctaCopy>div{justify-content:center}
}

/* =========================================================
   Tablet 601–900
   ========================================================= */
@media(min-width:601px) and (max-width:900px){
    /* Hero: compact two-column layout with no forced empty height. */
    .hero{padding:0}
    .heroGrid{
        grid-template-columns:1fr 1fr;
        min-height:0;
        gap:24px;
        align-items:center;
        padding:10px 0 16px;
    }
    .heroCopy{padding:0;text-align:right;transform:none}
    .hero h1{margin-top:6px;font-size:54px;line-height:1.2;letter-spacing:-1px;white-space:nowrap}
    .hero h2{margin:7px 0 8px;font-size:20px}
    .heroCopy>p{max-width:320px;margin:0;font-size:11px;line-height:1.9}
    .heroButtons{justify-content:flex-start;margin-top:16px}
    .heroButtons .btn{min-width:125px;min-height:40px;padding:6px 16px;font-size:11px}
    .heroArtwork{grid-row:auto;height:auto;min-height:0}
    .heroArtwork .heroModulesArtwork{width:115%;max-width:none;height:auto;transform:none}

    /* Why Aria: intro full width, image left, stats right. */
    .why{padding:24px 0}
    .whyGrid{
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto;
        align-items:center;
        column-gap:28px;
        row-gap:8px;
        direction:ltr;
    }
    .whyCopy,.whyVisualGraphic{display:contents}
    .whyCopy h2{
        grid-column:1/-1;
        grid-row:1;
        margin:0;
        direction:rtl;
        text-align:center;
        font-size:26px;
        line-height:1.45;
    }
    .whyCopy>p{
        grid-column:1/-1;
        grid-row:2;
        width:auto;
        max-width:none;
        margin:6px auto 14px;
        direction:rtl;
        text-align:center;
        font-size:10px;
        line-height:1.8;
        white-space:nowrap;
    }
    .whyLead span{display:inline;width:auto;white-space:nowrap;text-align:center}
    .stats{
        grid-column:2;
        grid-row:3;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
        width:100%;
        margin:0;
        direction:rtl;
    }
    .stats article{min-height:84px;padding:8px 5px}
    .stats .lineIcon{width:16px;height:16px}
    .stats b{font-size:17px}
    .stats small{font-size:8px}
    .whyStackArt{
        grid-column:1;
        grid-row:3;
        width:100%;
        max-width:300px;
        margin:0 auto;
        direction:rtl;
    }
    .whyStackArt img{display:block;width:100%;height:auto}
    .layerLabel{min-width:74px;height:20px;padding:1px 7px;font-size:7px}
    .whyBenefits{display:none}

    /* Solutions: two cards + dots + touch swipe. */
    .solutions{padding:22px 0 18px}
    .solutions .sectionHead h2{font-size:27px;line-height:1.45}
    .solutions .sectionHead p{max-width:460px;margin:4px auto 14px;font-size:10px;line-height:1.8}
    .solutionSlider{padding:0 42px 30px}
    .solutionGrid article{min-height:145px;padding:14px 12px}
    .solutionArrow{width:32px;height:32px}
    .solutionArrowLeft{left:2px}
    .solutionArrowRight{right:2px}
    .solutionArrow::before{font-size:27px}
    .solutionDots{bottom:5px;gap:8px}
    .solutionDot{width:8px;height:8px}
    .solutionGrid h3{font-size:15px}
    .solutionGrid p,.solutionGrid a{font-size:9px}

    /* Architecture: three compact columns. */
    .architecture{padding:24px 0 26px}
    .architecture .sectionHead h2{font-size:27px;line-height:1.45}
    .architecture .sectionHead p{margin:4px auto 18px;font-size:10px;line-height:1.8}
    .architectureMap{
        display:grid;
        grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);
        align-items:center;
        gap:30px;
        width:100%;
        max-width:100%;
        margin:0 auto;
        direction:ltr;
    }
    .architectureList.left{grid-column:1;grid-row:1;direction:rtl}
    .architectureCore{grid-column:2;grid-row:1;width:170px;height:170px;margin:0 auto}
    .architectureCore::before{inset:10px}
    .architectureCore::after{inset:23px}
    .architectureLogo{width:78px;height:66px}
    .architectureOrbit i{transform:rotate(0deg) translateY(-74px)}
    .architectureOrbit i:nth-child(2){transform:rotate(45deg) translateY(-74px)}
    .architectureOrbit i:nth-child(3){transform:rotate(90deg) translateY(-74px)}
    .architectureOrbit i:nth-child(4){transform:rotate(135deg) translateY(-74px)}
    .architectureOrbit i:nth-child(5){transform:rotate(180deg) translateY(-74px)}
    .architectureOrbit i:nth-child(6){transform:rotate(225deg) translateY(-74px)}
    .architectureOrbit i:nth-child(7){transform:rotate(270deg) translateY(-74px)}
    .architectureOrbit i:nth-child(8){transform:rotate(315deg) translateY(-74px)}
    .architectureList.right{grid-column:3;grid-row:1;direction:rtl}
    .architectureList{gap:7px;width:100%;margin-block:0}
    .architectureList span{min-height:38px;padding:6px 9px;font-size:9.5px;line-height:1.5;border-radius:6px}
    .architectureList .lineIcon{width:16px;height:16px;flex:0 0 16px}
    .architectureList.right span::after,.architectureList.left span::after,
    .architectureList.right span::before,.architectureList.left span::before{display:none}

    /* Footer: brand full width, two navigation columns, contact full width. */
    footer{padding-top:24px}
    .footerGrid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px 36px;
    }
    .footerBrand{grid-column:1/-1;text-align:center}
    .footerBrand .footerLogo{width:220px;height:64px;margin:0 auto 8px;background-position:center}
    .footerBrand p{max-width:520px;margin:0 auto;font-size:10px;line-height:1.9}
    .footerGrid>section+section{border-right:0;padding-right:0}
    .footerGrid>section:nth-child(2),.footerGrid>section:nth-child(3){text-align:center}
    .footerGrid h4{margin-bottom:10px;font-size:14px}
    .footerGrid>section:nth-child(2)>a,.footerGrid>section:nth-child(3)>a{margin:4px 0;font-size:10.5px}
    .footerGrid>section:nth-child(4){grid-column:1/-1;padding-top:14px;border-top:1px solid rgba(130,157,190,.18);text-align:center}
    .footerGrid>section:nth-child(4) p{margin:0 0 7px;font-size:10px}
    .footerGrid>section:nth-child(4) a{margin:4px 0;font-size:10.5px}
    .footerBottom{margin-top:16px}
    .footerBottom>div{padding:12px 16px;font-size:9px}
}

/* =========================================================
   Phone <=600
   ========================================================= */
@media(max-width:600px){
    html,body,.wp-site-blocks{width:100%;max-width:100%;overflow-x:hidden!important}
    .site{width:100%;max-width:100%;overflow-x:hidden}
    .shell{width:calc(100% - 28px);max-width:100%;margin-inline:auto}
    img,svg{max-width:100%}
    .panel,.cta{width:calc(100% - 12px)}

    /* Hero */
    .hero{padding:0}
    .heroGrid{grid-template-columns:1fr;min-height:auto;gap:0}
    .heroCopy{width:100%;max-width:100%;padding:34px 14px 28px;transform:none;text-align:center}
    .kicker{padding:3px 12px;font-size:11px;line-height:1.7}
    .hero h1{margin:10px 0 0;font-size:42px;line-height:1.2;letter-spacing:-1px;white-space:normal}
    .hero h2{margin:8px 0;font-size:18px;line-height:1.7}
    .heroCopy>p{max-width:320px;margin:0 auto;font-size:12px;line-height:1.9}
    .heroButtons{justify-content:center;margin-top:18px}
    .heroButtons .btn{min-width:135px;min-height:40px;padding:6px 18px;font-size:12px}
    .heroArtwork{display:none}

    /* Why Aria */
    .why{padding:24px 0}
    .whyGrid{grid-template-columns:1fr;gap:22px;width:100%;max-width:100%;min-width:0}
    .whyCopy{text-align:center;width:100%;max-width:100%;min-width:0}
    .whyCopy h2{margin:0;font-size:26px;line-height:1.45}
    .whyCopy>p{width:100%;max-width:330px;margin:7px auto 0;font-size:11px;line-height:1.9;text-align:center}
    .whyLead,.whyLead span{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center}
    .stats{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        width:100%;
        max-width:100%;
        min-width:0;
        margin:18px auto 0;
    }
    .stats article{min-height:92px;padding:10px 6px}
    .stats .lineIcon{width:18px;height:18px}
    .stats b{font-size:18px}
    .stats small{font-size:8.5px}
    .whyVisualGraphic{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        width:100%;
        max-width:100%;
        min-width:0;
        margin:0 auto;
        justify-items:center;
    }
    .whyStackArt{width:min(100%,270px);max-width:100%;min-width:0;margin:0 auto}
    .whyStackArt img{display:block;width:100%;height:auto}
    .whyBenefits{
        display:grid;
        grid-template-columns:1fr;
        gap:2px;
        width:min(100%,300px);
        max-width:100%;
        min-width:0;
        margin:0 auto;
    }
    .whyBenefits::before,.whyBenefits li::after{display:none}
    .whyBenefits li{min-height:34px;max-width:100%;min-width:0;padding:6px 31px 6px 0;font-size:9.5px;line-height:1.6;white-space:normal;overflow-wrap:anywhere;text-align:right}
    .whyBenefits li::before{top:6px;width:20px;height:20px;font-size:10px}
    .layerLabel{min-width:78px;height:22px;padding:2px 8px;font-size:8px}

    /* Solutions: one card, arrows + touch swipe, no pagination dots. */
    .solutions{padding-top:20px;padding-bottom:18px}
.solutionSlider{padding:0 36px 8px}
.solutionGrid{grid-auto-columns:100%}
.solutionGrid article{min-height:140px;padding:14px 12px}
.solutionArrow{top:50%;width:30px;height:30px}
.solutionArrowLeft{left:3px}
.solutionArrowRight{right:3px}
.solutionArrow::before{font-size:26px}
.solutionDots{display:none}

    /* Architecture */
    .architecture{padding:22px 0 20px}
    .architecture .sectionHead{padding:0 10px}
    .architecture .sectionHead h2{font-size:26px;line-height:1.45}
    .architecture .sectionHead p{max-width:320px;margin:5px auto 18px;font-size:11px;line-height:1.8}
    .architectureMap{display:grid;grid-template-columns:1fr;gap:7px;width:100%;max-width:100%;min-width:0;margin:0 auto}
    .architectureCore{grid-row:1;width:165px;height:165px;margin:0 auto 4px}
    .architectureCore::before{inset:10px}
    .architectureCore::after{inset:24px}
    .architectureOrbit i{transform:rotate(0deg) translateY(-72px)}
    .architectureOrbit i:nth-child(2){transform:rotate(45deg) translateY(-72px)}
    .architectureOrbit i:nth-child(3){transform:rotate(90deg) translateY(-72px)}
    .architectureOrbit i:nth-child(4){transform:rotate(135deg) translateY(-72px)}
    .architectureOrbit i:nth-child(5){transform:rotate(180deg) translateY(-72px)}
    .architectureOrbit i:nth-child(6){transform:rotate(225deg) translateY(-72px)}
    .architectureOrbit i:nth-child(7){transform:rotate(270deg) translateY(-72px)}
    .architectureOrbit i:nth-child(8){transform:rotate(315deg) translateY(-72px)}
    .architectureLogo{width:86px;height:72px}
    .architectureList{grid-template-columns:1fr;gap:7px;width:100%;max-width:320px;min-width:0;margin:0 auto}
    .architectureList span{width:100%;min-width:0;min-height:40px;padding:7px 12px;font-size:11px;line-height:1.6;border-radius:7px;overflow-wrap:anywhere}
    .architectureList .lineIcon{width:18px;height:18px;flex:0 0 18px}
    .architectureList.right,.architectureList.left{direction:rtl}
    .architectureList.right span::after,.architectureList.left span::after,
    .architectureList.right span::before,.architectureList.left span::before{display:none}

    /* CTA */
    .cta{width:calc(100% - 12px);margin:6px auto 8px;padding:0;border-radius:14px}
    .ctaGrid{display:grid;grid-template-columns:1fr;min-height:0;gap:0;padding:0}
    .ctaCopy{width:100%;padding:26px 18px 24px;text-align:center;align-items:center;justify-content:center}
    .cta h2{max-width:300px;margin:0 auto;font-size:22px;line-height:1.65}
    .cta p{max-width:310px;margin:10px auto 18px;font-size:10.5px;line-height:1.9}
    .ctaCopy>div{display:flex;justify-content:center;align-items:center;gap:10px;width:100%}
    .ctaCopy .btn{min-width:118px;min-height:40px;padding:6px 14px;font-size:11px}
    .dashboard{display:none}

    /* Footer */
    footer{padding-top:24px}
    .footerGrid{display:grid;grid-template-columns:1fr;gap:22px;width:calc(100% - 36px);margin:0 auto}
    .footerBrand{text-align:center}
    .footerBrand .footerLogo{width:210px;height:62px;margin:0 auto 8px;background-position:center}
    .footerBrand strong{margin-bottom:8px;font-size:13px}
    .footerBrand p{max-width:310px;margin:0 auto;font-size:10px;line-height:1.9}
    .footerGrid>section+section{padding:18px 0 0;border-right:0;border-top:1px solid rgba(130,157,190,.20)}
    .footerGrid h4{margin:0 0 16px;font-size:14px}
    .footerGrid>section:nth-child(2),.footerGrid>section:nth-child(3){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:4px}
    .footerGrid>section:nth-child(2) h4,
    .footerGrid>section:nth-child(3) h4{
        grid-column:1/-1;
        width:100%;
        text-align:center;
    }
    .footerGrid>section:nth-child(2)>a,.footerGrid>section:nth-child(3)>a{margin:3px 0;font-size:11px}
    .footerGrid>section:nth-child(4){text-align:center}
    .footerGrid>section:nth-child(4) p{margin:0 0 8px;font-size:10px}
    .footerGrid>section:nth-child(4) a{margin:5px 0;font-size:11px}
    .footerBottom{margin-top:22px}
    .footerBottom>div{padding:12px 16px;font-size:9px;line-height:1.8}
}

/* WordPress admin bar is taller on narrow screens. */
@media(max-width:782px){body.admin-bar .header{top:46px}}

/* =========================================================
   INTERNAL PAGES — ABOUT + CONTACT
   Shared visual system
   ========================================================= */

.aboutPage,
.contactPage{
    width:100%;
    background:#f8fbff;
    color:#071f42;
}

.aboutIntro,
.contactIntro{
    position:relative;
    width:100%;
    padding:54px 0 64px;
    background:#f8fbff;
    overflow:hidden;
}

.aboutIntro::before,
.contactIntro::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    top:-210px;
    right:-140px;
    border-radius:50%;
    background:rgba(8,184,197,.055);
    pointer-events:none;
}

.aboutIntro::after,
.contactIntro::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    bottom:-190px;
    left:-100px;
    border-radius:50%;
    background:rgba(25,102,210,.035);
    pointer-events:none;
}

.aboutIntroInner,
.contactIntroInner{
    position:relative;
    z-index:1;
}

/* Shared white content card */
.aboutIntroText,
.contactCard{
    position:relative;
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:20px 46px 34px;
    background:#fff;
    border:1px solid #e0eaf5;
    box-shadow:
        0 16px 44px rgba(7,31,66,.055),
        0 2px 7px rgba(7,31,66,.025);
    overflow:hidden;
}

/* Shared internal-page title */
.aboutIntroTitle,
.contactTitle{
    width:100%;
    margin:0 0 30px;
}

.aboutIntroTitle :is(h1,h2),
.contactTitle h1{
    position:relative;
    display:inline-block;
    margin:0;
    padding:0 0 15px;
    color:#082755;
    font-size:32px;
    font-weight:800;
    line-height:1.4;
}

.aboutIntroTitle :is(h1,h2)::after,
.contactTitle h1::after{
    content:"";
    position:absolute;
    right:50%;
    bottom:0;
    width:100%;
    height:4px;
    transform:translateX(50%);
    border-radius:10px;
    background:#08b8c5;
}

/* =========================================================
   ABOUT CONTENT
   ========================================================= */

.aboutIntroText p{
    margin:0 0 22px;
    color:#344b68;
    font-size:15px;
    font-weight:400;
    line-height:2.15;
    text-align:justify;
}

.aboutIntroText p:last-child{
    margin-bottom:0;
}

/* =========================================================
   CONTACT CONTENT
   ========================================================= */

.contactTitle p{
    max-width:none;
    margin:20px 0 0;
    color:#536982;
    font-size:14px;
    line-height:2;
}

.contactItems{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:26px;
}

.contactItem{
    display:flex;
    align-items:center;
    gap:15px;
    min-height:88px;
    padding:16px 18px;
    background:#fbfdff;
    border:1px solid #e5edf6;
    transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.contactItem:hover{
    transform:translateY(-1px);
    background:#f8fcff;
    border-color:#bcdde8;
    box-shadow:0 7px 20px rgba(7,31,66,.04);
}

.contactItemIcon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:10px;
    background:rgba(8,184,197,.08);
    color:#079eac;
}

.contactItemIcon svg{
    display:block;
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.contactItemContent{
    min-width:0;
}

.contactItemContent span{
    display:block;
    margin-bottom:4px;
    color:#8292a5;
    font-size:10.5px;
}

.contactItemContent p,
.contactItemContent a{
    display:block;
    margin:0;
    color:#173a63;
    font-size:13px;
    font-weight:600;
    line-height:1.85;
    text-decoration:none;
    overflow-wrap:anywhere;
}

.contactItemContent a:hover{
    color:#08aeba;
}

.contactDemo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:24px;
    padding:22px 24px;
    background:linear-gradient(90deg,rgba(8,184,197,.045),rgba(25,102,210,.035));
    border:1px solid #dce9f3;
}

.contactDemoText{
    max-width:700px;
}

.contactDemoText>span{
    display:block;
    margin-bottom:4px;
    color:#08aeba;
    font-size:10.5px;
    font-weight:700;
}

.contactDemoText strong{
    display:block;
    margin-bottom:4px;
    color:#082755;
    font-size:17px;
    line-height:1.7;
}

.contactDemoText p{
    margin:0;
    color:#667a91;
    font-size:11.5px;
    line-height:1.8;
}

.contactDemo .btn{
    flex:0 0 auto;
    min-width:130px;
}

/* =========================================================
   INTERNAL PAGES — TABLET 601–900
   ========================================================= */

@media(min-width:601px) and (max-width:900px){
    .aboutIntro,
    .contactIntro{
        padding:30px 0 38px;
    }

    .aboutIntro::before,
    .contactIntro::before{
        width:300px;
        height:300px;
        top:-190px;
        right:-130px;
    }

    .aboutIntro::after,
    .contactIntro::after{
        width:230px;
        height:230px;
        bottom:-160px;
        left:-100px;
    }

    .aboutIntroText,
    .contactCard{
        width:100%;
        max-width:none;
        padding:20px 28px 26px;
    }

    .aboutIntroTitle,
    .contactTitle{
        margin-bottom:22px;
    }

    .aboutIntroTitle :is(h1,h2),
    .contactTitle h1{
        padding-bottom:11px;
        font-size:26px;
        line-height:1.45;
    }

    .aboutIntroTitle :is(h1,h2)::after,
    .contactTitle h1::after{
        width:100%;
        height:3px;
    }

    .aboutIntroText p{
        margin-bottom:18px;
        font-size:14px;
        line-height:2.05;
        text-align:justify;
    }

    .aboutIntroText p:last-child{
        margin-bottom:0;
    }

    .contactTitle p{
        margin-top:17px;
        font-size:12.5px;
        line-height:1.95;
    }

    .contactItems{
        gap:10px;
        margin-top:20px;
    }

    .contactItem{
        min-height:80px;
        padding:13px 14px;
        gap:11px;
    }

    .contactItemIcon{
        width:38px;
        height:38px;
    }

    .contactItemIcon svg{
        width:18px;
        height:18px;
    }

    .contactItemContent p,
    .contactItemContent a{
        font-size:11.5px;
    }

    .contactDemo{
        gap:18px;
        margin-top:18px;
        padding:18px 20px;
    }

    .contactDemoText strong{
        font-size:15px;
    }

    .contactDemoText p{
        font-size:10.5px;
    }
}

/* =========================================================
   INTERNAL PAGES — MOBILE <=600
   ========================================================= */

@media(max-width:600px){
    .aboutIntro,
    .contactIntro{
        padding:24px 0 30px;
    }

    .aboutIntro::before,
    .contactIntro::before{
        width:230px;
        height:230px;
        top:-155px;
        right:-110px;
    }

    .aboutIntro::after,
    .contactIntro::after{
        width:180px;
        height:180px;
        bottom:-125px;
        left:-85px;
    }

    .aboutIntroText,
    .contactCard{
        width:100%;
        padding:15px 16px 22px;
        box-shadow:
            0 10px 28px rgba(7,31,66,.05),
            0 2px 6px rgba(7,31,66,.02);
    }

    .aboutIntroTitle,
    .contactTitle{
        margin-bottom:18px;
    }

    .aboutIntroTitle :is(h1,h2),
    .contactTitle h1{
        padding-bottom:9px;
        font-size:22px;
        line-height:1.45;
    }

    .aboutIntroTitle :is(h1,h2)::after,
    .contactTitle h1::after{
        width:100%;
        height:3px;
    }

    .aboutIntroText p{
        margin-bottom:15px;
        font-size:12.5px;
        line-height:2.05;
        text-align:justify;
    }

    .aboutIntroText p:last-child{
        margin-bottom:0;
    }

    .contactTitle p{
        margin-top:15px;
        font-size:11.5px;
        line-height:1.9;
    }

    .contactItems{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        margin-top:18px;
    }

    .contactItem{
        min-height:auto;
        padding:12px 13px;
        gap:11px;
    }

    .contactItemIcon{
        width:38px;
        height:38px;
        border-radius:9px;
    }

    .contactItemIcon svg{
        width:18px;
        height:18px;
    }

    .contactItemContent span{
        font-size:9.5px;
    }

    .contactItemContent p,
    .contactItemContent a{
        font-size:11.5px;
        line-height:1.8;
    }

    .contactDemo{
        display:block;
        margin-top:14px;
        padding:17px 15px;
        text-align:center;
    }

    .contactDemoText>span{
        font-size:9.5px;
    }

    .contactDemoText strong{
        margin-bottom:5px;
        font-size:15px;
        line-height:1.7;
    }

    .contactDemoText p{
        margin-bottom:13px;
        font-size:10.5px;
        line-height:1.8;
    }

    .contactDemo .btn{
        min-width:125px;
    }
}



/* =========================================================
   CONTACT — match the approved About page actual rendering
   ========================================================= */

/* About currently renders its white content card directly below the header.
   Match Contact to that real visual result instead of keeping a separate
   padded/tinted outer section. */
.contactPage{
    background:#fff;
}

.contactIntro{
    padding:0;
    background:#fff;
    overflow:visible;
}

.contactIntro::before,
.contactIntro::after{
    display:none;
}

.contactIntroInner{
    position:relative;
    z-index:1;
}

.contactCard{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:20px 46px 34px;
    background:#fff;
    border:1px solid #e0eaf5;
    box-shadow:0 16px 44px rgba(7,31,66,.055),0 2px 7px rgba(7,31,66,.025);
    overflow:hidden;
}

/* Keep Contact content visually quieter so the page reads like About. */
.contactItems{
    margin-top:24px;
}

.contactItem{
    background:#fff;
}

.contactDemo{
    background:#fff;
    border-top:1px solid #e5edf6;
    border-right:0;
    border-bottom:0;
    border-left:0;
    margin-top:24px;
    padding:22px 0 0;
}

@media(min-width:601px) and (max-width:900px){
    .contactIntro{
        padding:0;
    }

    .contactCard{
        max-width:none;
        padding:20px 28px 26px;
    }

    .contactDemo{
        padding:18px 0 0;
    }
}

@media(max-width:600px){
    .contactIntro{
        padding:0;
    }

    .contactCard{
        width:100%;
        padding:15px 16px 22px;
        box-shadow:0 10px 28px rgba(7,31,66,.05),0 2px 6px rgba(7,31,66,.02);
    }

    .contactDemo{
        padding:17px 0 0;
    }
}


/* =========================================================
   DEMO PAGE
   ========================================================= */

.demoPage{
    width:100%;
    background:#f8fbff;
    color:#071f42;
}

.demoIntro{
    position:relative;
    width:100%;
    padding:54px 0 64px;
    background:#f8fbff;
    overflow:hidden;
}

.demoIntro::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    top:-210px;
    right:-140px;
    border-radius:50%;
    background:rgba(8,184,197,.055);
    pointer-events:none;
}

.demoIntro::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    bottom:-190px;
    left:-100px;
    border-radius:50%;
    background:rgba(25,102,210,.035);
    pointer-events:none;
}

.demoIntroInner{
    position:relative;
    z-index:1;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.demoCard{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:20px 46px 36px;

    background:#fff;

    border:1px solid #e0eaf5;

    box-shadow:
        0 16px 44px rgba(7,31,66,.055),
        0 2px 7px rgba(7,31,66,.025);
}


/* =========================================================
   TITLE
   ========================================================= */

.demoTitle{
    width:100%;
    margin:0 0 34px;
}

.demoTitle h1{
    position:relative;
    display:inline-block;

    margin:0;
    padding:0 0 15px;

    color:#082755;

    font-size:32px;
    font-weight:800;
    line-height:1.4;
}

.demoTitle h1::after{
    content:"";
    position:absolute;

    right:50%;
    bottom:0;

    width:100%;
    height:4px;

    transform:translateX(50%);

    border-radius:10px;
    background:#08b8c5;
}

.demoTitle p{
    max-width:760px;
    margin:20px 0 0;

    color:#536982;

    font-size:14px;
    line-height:2;
}


/* =========================================================
   CONTENT
   ========================================================= */

.demoContent{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:34px;
    align-items:start;
}


/* =========================================================
   INFO SIDE
   ========================================================= */

.demoInfo{
    padding:26px 0 0;
}

.demoKicker{
    display:block;

    margin-bottom:8px;

    color:#08aeba;

    font-size:11px;
    font-weight:700;
}

.demoInfo h2{
    margin:0 0 14px;

    color:#082755;

    font-size:22px;
    font-weight:800;
    line-height:1.75;
}

.demoInfo > p{
    margin:0;

    color:#5e7289;

    font-size:13px;
    line-height:2;
}

.demoBenefits{
    display:grid;
    gap:11px;

    margin-top:25px;
}

.demoBenefit{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:42px;

    padding:8px 0;
}

.demoBenefit > span{
    flex:0 0 25px;

    display:grid;
    place-items:center;

    width:25px;
    height:25px;

    border:1px solid #9fd4dc;
    border-radius:50%;

    background:#f2fcfd;
    color:#059ca7;

    font-size:12px;
    font-weight:800;
}

.demoBenefit p{
    margin:0;

    color:#284563;

    font-size:12.5px;
    font-weight:600;
    line-height:1.8;
}


/* =========================================================
   FORM
   ========================================================= */

.demoForm{
    padding:26px;

    background:#fbfdff;
    border:1px solid #e1eaf4;
}

.demoFormRow{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.demoField{
    margin-bottom:16px;
}

.demoField label{
    display:flex;
    align-items:center;
    gap:6px;

    margin-bottom:7px;

    color:#173a63;

    font-size:11.5px;
    font-weight:700;
}

.demoField label small{
    color:#8a9aab;

    font-size:9px;
    font-weight:400;
}

.demoField input,
.demoField textarea{
    display:block;

    width:100%;

    border:1px solid #d7e3ef;
    border-radius:6px;

    background:#fff;
    color:#173a63;

    font-family:IRANSans,Tahoma,Arial,sans-serif;
    font-size:12px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.demoField input{
    height:44px;
    padding:8px 12px;
}

.demoField textarea{
    min-height:112px;
    padding:11px 12px;

    resize:vertical;
    line-height:1.9;
}

.demoField input::placeholder,
.demoField textarea::placeholder{
    color:#9aa9b8;
}

.demoField input:focus,
.demoField textarea:focus{
    border-color:#49b9c3;

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(8,184,197,.08);
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.demoFormFooter{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:4px;
    padding-top:18px;

    border-top:1px solid #e3ebf4;
}

.demoFormFooter p{
    max-width:310px;

    margin:0;

    color:#7a8ca0;

    font-size:10px;
    line-height:1.8;
}

.demoFormFooter .btn{
    flex:0 0 auto;

    min-width:145px;

    border:0;

    font-family:IRANSans,Tahoma,Arial,sans-serif;
    font-size:12px;

    cursor:pointer;
}


/* =========================================================
   TABLET
   601px - 900px
   ========================================================= */

@media(min-width:601px) and (max-width:900px){

    .demoIntro{
        padding:30px 0 38px;
    }

    .demoIntro::before{
        width:300px;
        height:300px;
        top:-190px;
        right:-130px;
    }

    .demoIntro::after{
        width:230px;
        height:230px;
        bottom:-160px;
        left:-100px;
    }

    .demoCard{
        max-width:none;
        padding:20px 24px 28px;
    }

    .demoTitle{
        margin-bottom:26px;
    }

    .demoTitle h1{
        padding-bottom:11px;
        font-size:26px;
        line-height:1.45;
    }

    .demoTitle h1::after{
        height:3px;
    }

    .demoTitle p{
        margin-top:17px;
        font-size:12.5px;
        line-height:1.95;
    }

    .demoContent{
        grid-template-columns:.9fr 1.1fr;
        gap:18px;
    }

    .demoInfo{
        padding-top:14px;
    }

    .demoInfo h2{
        font-size:20px;
        line-height:1.7;
    }

    .demoInfo > p{
        font-size:11.5px;
        line-height:1.9;
    }

    .demoBenefits{
        gap:6px;
        margin-top:16px;
    }

    .demoBenefit{
        min-height:38px;
        padding:5px 0;
    }

    .demoBenefit p{
        font-size:11px;
    }

    .demoForm{
        padding:18px;
    }

    .demoFormRow{
        gap:10px;
    }

    .demoField{
        margin-bottom:12px;
    }

    .demoField label{
        font-size:11px;
    }

    .demoField input{
        height:42px;
        font-size:11.5px;
    }

    .demoField textarea{
        min-height:100px;
        font-size:11.5px;
    }

    .demoFormFooter{
        gap:12px;
        padding-top:15px;
    }

    .demoFormFooter p{
        font-size:9.5px;
    }

    .demoFormFooter .btn{
        min-width:130px;
        min-height:40px;
        padding:6px 14px;
        font-size:10.5px;
    }
}


/* =========================================================
   MOBILE
   <=600px
   ========================================================= */

@media(max-width:600px){

    .demoIntro{
        padding:24px 0 30px;
    }

    .demoIntro::before{
        width:230px;
        height:230px;

        top:-155px;
        right:-110px;
    }

    .demoIntro::after{
        width:180px;
        height:180px;

        bottom:-125px;
        left:-85px;
    }

    .demoCard{
        width:100%;

        padding:15px 16px 22px;

        box-shadow:
            0 10px 28px rgba(7,31,66,.05),
            0 2px 6px rgba(7,31,66,.02);
    }

    .demoTitle{
        margin-bottom:22px;
    }

    .demoTitle h1{
        padding-bottom:9px;

        font-size:22px;
        line-height:1.45;
    }

    .demoTitle h1::after{
        height:3px;
    }

    .demoTitle p{
        margin-top:15px;

        font-size:11.5px;
        line-height:1.9;
    }

    .demoContent{
        display:grid;
        grid-template-columns:1fr;

        gap:22px;
    }

    .demoInfo{
        padding:0;
    }

    .demoKicker{
        font-size:9.5px;
    }

    .demoInfo h2{
        margin-bottom:10px;

        font-size:17px;
        line-height:1.75;
    }

    .demoInfo > p{
        font-size:11px;
        line-height:1.9;
    }

    .demoBenefits{
        gap:5px;

        margin-top:16px;
    }

    .demoBenefit{
        min-height:36px;

        padding:5px 0;
    }

    .demoBenefit > span{
        flex-basis:22px;

        width:22px;
        height:22px;

        font-size:10px;
    }

    .demoBenefit p{
        font-size:10.5px;
    }


    /* Form */

    .demoForm{
        padding:17px 14px;
    }

    .demoFormRow{
        grid-template-columns:1fr;

        gap:0;
    }

    .demoField{
        margin-bottom:13px;
    }

    .demoField label{
        margin-bottom:6px;

        font-size:10.5px;
    }

    .demoField input{
        height:41px;

        font-size:11px;
    }

    .demoField textarea{
        min-height:100px;

        font-size:11px;
    }

    .demoFormFooter{
        display:block;

        padding-top:15px;

        text-align:center;
    }

    .demoFormFooter p{
        max-width:none;

        margin-bottom:13px;

        font-size:9.5px;
    }

    .demoFormFooter .btn{
        min-width:140px;
    }
}

/* =========================================================
   INTERNAL PAGES — FINAL UNIFIED VISUAL SYSTEM
   Demo is the visual reference for About + Contact.
   ========================================================= */

.aboutPage,
.contactPage{
    width:100%;
    background:#f8fbff;
    color:#071f42;
}

.aboutIntro,
.contactIntro{
    position:relative;
    width:100%;
    padding:54px 0 64px;
    background:#f8fbff;
    overflow:hidden;
}

.aboutIntro::before,
.contactIntro::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    top:-210px;
    right:-140px;
    border-radius:50%;
    background:rgba(8,184,197,.055);
    pointer-events:none;
    display:block;
}

.aboutIntro::after,
.contactIntro::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    bottom:-190px;
    left:-100px;
    border-radius:50%;
    background:rgba(25,102,210,.035);
    pointer-events:none;
    display:block;
}

.aboutIntroInner,
.contactIntroInner{
    position:relative;
    z-index:1;
}

.aboutIntroText,
.contactCard{
    position:relative;
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:20px 46px 36px;
    background:#fff;
    border:1px solid #e0eaf5;
    box-shadow:
        0 16px 44px rgba(7,31,66,.055),
        0 2px 7px rgba(7,31,66,.025);
    overflow:hidden;
}

.aboutIntroTitle,
.contactTitle{
    width:100%;
    margin:0 0 34px;
}

.aboutIntroTitle :is(h1,h2),
.contactTitle h1{
    position:relative;
    display:inline-block;
    margin:0;
    padding:0 0 15px;
    color:#082755;
    font-size:32px;
    font-weight:800;
    line-height:1.4;
}

.aboutIntroTitle :is(h1,h2)::after,
.contactTitle h1::after{
    content:"";
    position:absolute;
    right:50%;
    bottom:0;
    width:100%;
    height:4px;
    transform:translateX(50%);
    border-radius:10px;
    background:#08b8c5;
}

.contactTitle p{
    max-width:760px;
    margin:20px 0 0;
    color:#536982;
    font-size:14px;
    line-height:2;
}

/* Contact inner elements use the same light-panel language as Demo form. */
.contactItems{
    margin-top:26px;
}

.contactItem{
    background:#fbfdff;
    border:1px solid #e1eaf4;
}

.contactDemo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:24px;
    padding:22px 24px;
    background:#fbfdff;
    border:1px solid #e1eaf4;
}

/* Tablet — same outer geometry as Demo. */
@media(min-width:601px) and (max-width:900px){
    .aboutIntro,
    .contactIntro{
        padding:30px 0 38px;
    }

    .aboutIntro::before,
    .contactIntro::before{
        width:300px;
        height:300px;
        top:-190px;
        right:-130px;
    }

    .aboutIntro::after,
    .contactIntro::after{
        width:230px;
        height:230px;
        bottom:-160px;
        left:-100px;
    }

    .aboutIntroText,
    .contactCard{
        width:100%;
        max-width:none;
        padding:20px 28px 28px;
    }

    .aboutIntroTitle,
    .contactTitle{
        margin-bottom:26px;
    }

    .aboutIntroTitle :is(h1,h2),
    .contactTitle h1{
        padding-bottom:11px;
        font-size:26px;
        line-height:1.45;
    }

    .aboutIntroTitle :is(h1,h2)::after,
    .contactTitle h1::after{
        width:100%;
        height:3px;
    }

    .contactTitle p{
        margin-top:17px;
        font-size:12.5px;
        line-height:1.95;
    }

    .contactDemo{
        gap:18px;
        margin-top:18px;
        padding:18px 20px;
    }
}

/* Mobile — same outer geometry as Demo. */
@media(max-width:600px){

    .demoIntro{
        padding:18px 0 24px;
    }

    .demoCard{
        padding:14px 14px 20px;
    }

    .demoTitle{
        margin-bottom:16px;
    }

    .demoTitle h1{
        font-size:21px;
        padding-bottom:8px;
    }

    .demoTitle p{
        margin-top:12px;
        font-size:11px;
        line-height:1.85;
    }

    .demoContent{
        gap:14px;
    }

    .demoInfo h2{
        margin-bottom:8px;
        font-size:16px;
        line-height:1.7;
    }

    .demoInfo > p{
        font-size:10.5px;
        line-height:1.85;
    }

    .demoBenefits{
        gap:2px;
        margin-top:11px;
    }

    .demoBenefit{
        min-height:32px;
        padding:3px 0;
    }

    .demoBenefit > span{
        flex-basis:21px;
        width:21px;
        height:21px;
    }

    .demoBenefit p{
        font-size:10px;
    }

    .demoForm{
        padding:15px 12px;
    }
}

/* =========================================================
   MOBILE MENU + WORDPRESS ADMIN BAR FIX
   ========================================================= */

/* WordPress admin bar = 32px */
@media (min-width:783px) and (max-width:900px){

    body.admin-bar .mainMenu{
        top:32px;
        height:calc(100dvh - 32px);
    }

    body.admin-bar .mobileMenuOverlay{
        top:32px;
    }
}


/* WordPress admin bar = 46px */
@media (max-width:782px){

    body.admin-bar .mainMenu{
        top:46px;
        height:calc(100dvh - 46px);
    }

    body.admin-bar .mobileMenuOverlay{
        top:46px;
    }
}

/* Demo form submission state */
.demoHoneypot{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
}

.demoFormStatus{
    margin-top:14px;
    padding:11px 13px;
    border:1px solid transparent;
    border-radius:6px;
    font-size:11px;
    line-height:1.8;
}

.demoFormStatus.is-success{
    border-color:#b9e0cf;
    background:#f2fbf7;
    color:#176548;
}

.demoFormStatus.is-error{
    border-color:#efc4c4;
    background:#fff6f6;
    color:#a33131;
}

.demoForm button[type="submit"]:disabled{
    opacity:.65;
    cursor:wait;
}


/* Demo security — fully local anti-spam challenge */
.demoSecurity{
    display:grid;
    grid-template-columns:minmax(0,1fr) 118px;
    align-items:end;
    gap:12px;
    width:100%;
    margin:4px 0 16px;
    padding:12px 14px;
    border:1px solid #e1eaf4;
    border-radius:8px;
    background:#f8fbff;
}

.demoSecurity label{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin:0;
    color:#173a63;
    font-size:11px;
    font-weight:700;
}

.demoSecurity label span{
    color:#079eac;
    font-size:13px;
    font-weight:800;
}

.demoSecurity input{
    width:100%;
    height:42px;
    padding:7px 10px;
    border:1px solid #d7e3ef;
    border-radius:7px;
    background:#fff;
    color:#173a63;
    font-family:IRANSans,Tahoma,Arial,sans-serif;
    font-size:12px;
    text-align:center;
    outline:none;
}

.demoSecurity input:focus{
    border-color:#49b9c3;
    box-shadow:0 0 0 3px rgba(8,184,197,.08);
}

.demoSecurity input:disabled{
    opacity:.65;
    cursor:wait;
}

@media(max-width:600px){
    .demoSecurity{
        grid-template-columns:1fr;
        gap:8px;
        margin:2px 0 14px;
    }
}

/* =========================================================
   Solutions Cards - 5 Main Business Solutions
   ========================================================= */

.solutionGrid article{
    display:flex;
    flex-direction:column;
    min-height:170px;
    padding:22px 20px 18px;
}

.solutionGrid article i{
    margin-bottom:8px;
}

.solutionGrid article h3{
    margin:0 0 8px;
    line-height:1.6;
}

.solutionGrid article p{
    margin:0;
    min-height:48px;

    font-size:11px;
    line-height:1.9;

    text-align:center;
}

.solutionGrid article a{
    margin-top:auto;
    padding-top:8px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    font-size:10.5px;
    font-weight:700;
}
/* =========================================
   Solution cards icons
   ========================================= */

.solutionGrid article i{
    display:none !important;
}

.solutionGrid article{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:185px;
    padding:22px 20px 18px;
}

.solutionGrid .solutionIcon.dashicons{
    position:relative;

    display:flex !important;
    align-items:center;
    justify-content:center;

    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;

    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;

    flex:0 0 50px;

    margin:0 auto 14px;

    padding:0 !important;

    border:1px solid #d7edf5;
    border-radius:50% !important;

    background:linear-gradient(
        180deg,
        #f4fbff 0%,
        #eaf8fd 100%
    );

    color:#11b8d6;

    box-shadow:0 8px 18px rgba(5,40,80,.06);

    font-size:0 !important;
    line-height:1 !important;
}

.solutionGrid .solutionIcon.dashicons::before{
    position:absolute;
    top:50%;
    left:50%;

    display:block;

    width:26px !important;
    height:26px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:25px !important;
    line-height:26px !important;

    text-align:center;

    transform:translate(-50%,-50%);

    color:#11b8d6;
}

.solutionGrid article h3{
    margin:0 0 8px;
    font-size:18px;
    font-weight:800;
    line-height:1.6;
    color:#0d2e57;
}

.solutionGrid article p{
    margin:0;
    min-height:48px;
    font-size:11px;
    line-height:1.9;
    text-align:center;
    color:#38506c;
}

.solutionGrid article a{
    margin-top:auto;
    padding-top:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:800;
    color:#0b63d9;
    text-decoration:none;
}

.solutionGrid article a:hover{
    color:#084fb0;
}

/* =========================================================
   Unified Aria line icon system
   ========================================================= */

.siteLineIcon{
    width:28px;
    height:28px;
    flex:0 0 28px;

    fill:none;
    stroke:#08aebd;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    overflow:visible;
}

/* Why Aria stats */
.stats article .siteLineIcon{
    width:26px;
    height:26px;
    margin:0 auto 5px;

    stroke:#0871dc;
}

/* Dark Hero benefit strip — keep the approved layout, only replace the icon artwork. */
.valueStrip .siteLineIcon{
    display:block;
    width:36px;
    height:36px;
    flex:0 0 36px;
    margin:0;

    fill:none;
    stroke:#08d0dc;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(min-width:1101px){
    .valueStrip .siteLineIcon{
        width:44px;
        height:44px;
        flex-basis:44px;
    }
}

/* Subtle interaction */
.stats article .siteLineIcon,
.valueStrip .siteLineIcon{
    transition:
        transform .22s ease,
        filter .22s ease;
}

.stats article:hover .siteLineIcon{
    transform:translateY(-2px);
}

.valueStrip article:hover .siteLineIcon{
    transform:scale(1.06);
    filter:drop-shadow(0 4px 8px rgba(8,208,220,.18));
}

/* =========================================================
   Architecture - unified SVG line icons
   ========================================================= */

.architectureList .architectureIcon{
    display:block;
    width:21px;
    height:21px;
    flex:0 0 21px;
    padding:0;

    fill:none;
    stroke:#2e6fa8;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    color:inherit;
    transform:none !important;
}

/* حذف کامل نمادهای متنی قدیمی */
.architectureList .architectureIcon::before,
.architectureList .architectureIcon::after{
    content:none !important;
}

.architectureList span:hover .architectureIcon{
    stroke:#08aeba;
}

/* Tablet */
@media(min-width:601px) and (max-width:900px){
    .architectureList .architectureIcon{
        width:16px;
        height:16px;
        flex-basis:16px;
    }
}

/* Mobile */
@media(max-width:600px){
    .architectureList .architectureIcon{
        width:18px;
        height:18px;
        flex-basis:18px;
    }
}

/* =========================================================
   SOLUTION DETAIL — SALES
   Append to the end of style.css
   ========================================================= */

.solutionDetailPage{
    width:100%;
    background:#f8fbff;
    color:#071f42;
}

.solutionDetailHero{
    position:relative;
    padding:42px 0 34px;
    overflow:hidden;
    background:
        radial-gradient(circle at 88% 2%,rgba(8,184,197,.08),transparent 28%),
        radial-gradient(circle at 8% 85%,rgba(25,102,210,.05),transparent 25%),
        #f8fbff;
}

.solutionDetailHeroCard{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
    align-items:center;
    gap:52px;
    max-width:1080px;
    min-height:390px;
    margin:0 auto;
    padding:44px 50px;
    border:1px solid #dfe9f4;
    background:#fff;
    box-shadow:0 18px 48px rgba(7,31,66,.06),0 2px 7px rgba(7,31,66,.025);
}

.solutionDetailKicker{
    display:inline-block;
    margin-bottom:9px;
    color:#08aeba;
    font-size:11px;
    font-weight:800;
}

.solutionDetailHeroCopy h1{
    margin:0;
    color:#082755;
    font-size:38px;
    line-height:1.5;
    font-weight:900;
    letter-spacing:-.5px;
}

.solutionDetailHeroCopy>p{
    max-width:520px;
    margin:16px 0 0;
    color:#536982;
    font-size:13.5px;
    line-height:2.05;
}

.solutionDetailHeroActions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:25px;
}

.solutionDetailHeroActions .btn{
    min-width:135px;
}

.solutionDetailOutlineButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:135px;
    min-height:46px;
    padding:8px 20px;
    border:1px solid #b7cbe2;
    border-radius:7px;
    color:#174b82;
    font-size:12px;
    font-weight:700;
    transition:border-color .2s ease,color .2s ease,background .2s ease;
}

.solutionDetailOutlineButton:hover{
    border-color:#77a8d5;
    background:#f6fbff;
    color:#075dcc;
}

/* Hero visual */
.solutionDetailHeroVisual{
    position:relative;
    width:390px;
    height:300px;
    max-width:100%;
    margin:0 auto;
}

.solutionDetailHeroVisual::before,
.solutionDetailHeroVisual::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    border:1px solid rgba(8,174,186,.18);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.solutionDetailHeroVisual::before{
    width:220px;
    height:220px;
}

.solutionDetailHeroVisual::after{
    width:285px;
    height:285px;
    border-style:dashed;
}

.solutionDetailHub{
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    display:grid;
    place-items:center;
    width:108px;
    height:108px;
    border-radius:50%;
    background:linear-gradient(145deg,#0bb7bd,#087fa0);
    box-shadow:0 14px 34px rgba(8,148,166,.23),0 0 0 12px rgba(8,184,197,.07);
    transform:translate(-50%,-50%);
}

.solutionDetailHub svg{
    width:48px;
    height:48px;
    fill:none;
    stroke:#fff;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.solutionDetailNode{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:125px;
    min-height:44px;
    padding:8px 11px;
    border:1px solid #d4e4f2;
    border-radius:9px;
    background:rgba(255,255,255,.97);
    color:#173a63;
    box-shadow:0 8px 22px rgba(18,54,105,.055);
    font-size:10.5px;
    font-weight:700;
}

.solutionDetailNode svg{
    flex:0 0 21px;
    width:21px;
    height:21px;
    fill:none;
    stroke:#079eac;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.nodeCorporate{top:24px;right:0}
.nodeRetail{top:24px;left:0}
.nodeDistribution{bottom:25px;right:0}
.nodeHotel{bottom:25px;left:0}

.solutionDetailNode::after{
    content:"";
    position:absolute;
    top:50%;
    width:36px;
    border-top:1px solid #83bed0;
}

.nodeCorporate::after,
.nodeDistribution::after{left:-36px}

.nodeRetail::after,
.nodeHotel::after{right:-36px}


/* Areas */
.solutionDetailAreas{
    padding:30px 0 54px;
    background:#f8fbff;
}

.solutionDetailSectionHead{
    max-width:720px;
    margin:0 auto 20px;
    text-align:center;
}

.solutionDetailSectionHead>span{
    display:block;
    margin-bottom:5px;
    color:#08aeba;
    font-size:10.5px;
    font-weight:800;
}

.solutionDetailSectionHead h2{
    margin:0;
    color:#082755;
    font-size:30px;
    line-height:1.5;
}

.solutionDetailSectionHead p{
    margin:8px 0 0;
    color:#60758d;
    font-size:12px;
    line-height:1.9;
}

.solutionDetailAnchorNav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    max-width:900px;
    margin:0 auto 24px;
}

.solutionDetailAnchorNav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:5px 16px;
    border:1px solid #d5e4f1;
    border-radius:999px;
    background:#fff;
    color:#315272;
    font-size:10.5px;
    font-weight:700;
    transition:border-color .2s ease,color .2s ease,background .2s ease;
}

.solutionDetailAnchorNav a:hover{
    border-color:#8cc9d2;
    background:#f4fcfd;
    color:#078f9a;
}

.solutionDetailAreaGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    max-width:1080px;
    margin:0 auto;
}

.solutionDetailAreaCard{
    scroll-margin-top:110px;
    padding:24px 26px 26px;
    border:1px solid #dfe9f4;
    background:#fff;
    box-shadow:0 8px 26px rgba(18,54,105,.04);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.solutionDetailAreaCard:hover{
    transform:translateY(-3px);
    border-color:#bdd9e8;
    box-shadow:0 15px 34px rgba(18,54,105,.075);
}

.solutionDetailAreaHeader{
    display:flex;
    align-items:center;
    gap:13px;
    padding-bottom:15px;
    border-bottom:1px solid #e8eef5;
}

.solutionDetailAreaIcon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid #d7edf5;
    border-radius:12px;
    background:linear-gradient(180deg,#f4fbff,#eaf8fd);
    color:#08aeba;
}

.solutionDetailAreaIcon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.solutionDetailAreaHeader>div:last-child>span{
    display:block;
    color:#8da0b5;
    font-family:Arial,sans-serif;
    font-size:9px;
    line-height:1.2;
}

.solutionDetailAreaHeader :is(h2,h3){
    margin:2px 0 0;
    color:#0c2f59;
    font-size:18px;
    line-height:1.55;
}

.solutionDetailFeatureList{
    display:grid;
    gap:0;
    margin:17px 0 0;
    padding:0;
    list-style:none;
}

.solutionDetailFeatureList--twoColumns{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
}

.solutionDetailFeatureList li{
    position:relative;
    min-height:34px;
    padding:6px 28px 6px 4px;
    border-bottom:1px solid #eff3f7;
    color:#38516f;
    font-size:11.5px;
    line-height:1.8;
    font-weight: bold;
}

.solutionDetailFeatureList li:last-child{
    border-bottom:0;
}

.solutionDetailFeatureList li::before{
    content:"✓";
    position:absolute;
    top:7px;
    right:0;
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    border:1px solid #a9d7dc;
    border-radius:50%;
    background:#f4fcfd;
    color:#079eac;
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:700;
}


/* CTA */
.solutionDetailCta{
    padding:0 0 54px;
    background:#f8fbff;
}

.solutionDetailCtaInner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    max-width:1080px;
    margin:0 auto;
    padding:28px 32px;
    border:1px solid #174d86;
    border-radius:13px;
    background:
        radial-gradient(circle at 12% 50%,rgba(8,184,197,.16),transparent 30%),
        linear-gradient(115deg,#00152f,#073362);
    color:#fff;
}

.solutionDetailCtaInner>div>span{
    display:block;
    margin-bottom:5px;
    color:#18c6cd;
    font-size:10px;
    font-weight:800;
}

.solutionDetailCtaInner h2{
    margin:0;
    color:#fff;
    font-size:22px;
    line-height:1.7;
}

.solutionDetailCtaInner p{
    margin:5px 0 0;
    color:#c5d4e6;
    font-size:11px;
    line-height:1.9;
}

.solutionDetailCtaInner>.btn{
    flex:0 0 auto;
    min-width:135px;
}


/* Tablet */
@media(min-width:601px) and (max-width:900px){
    .solutionDetailHero{padding:28px 0 24px}

    .solutionDetailHeroCard{
        grid-template-columns:1fr .9fr;
        gap:24px;
        min-height:315px;
        padding:28px 26px;
    }

    .solutionDetailHeroCopy h1{font-size:27px}
    .solutionDetailHeroCopy>p{font-size:11px;line-height:1.95}
    .solutionDetailHeroActions{margin-top:18px}
    .solutionDetailHeroActions .btn,
    .solutionDetailOutlineButton{min-width:112px;min-height:40px;padding:6px 13px;font-size:10px}

    .solutionDetailHeroVisual{width:300px;height:240px}
    .solutionDetailHeroVisual::before{width:165px;height:165px}
    .solutionDetailHeroVisual::after{width:215px;height:215px}
    .solutionDetailHub{width:84px;height:84px}
    .solutionDetailHub svg{width:36px;height:36px}

    .solutionDetailNode{
        min-width:103px;
        min-height:37px;
        padding:6px 8px;
        font-size:8.5px;
    }

    .solutionDetailNode svg{flex-basis:17px;width:17px;height:17px}
    .solutionDetailNode::after{width:24px}
    .nodeCorporate::after,.nodeDistribution::after{left:-24px}
    .nodeRetail::after,.nodeHotel::after{right:-24px}

    .solutionDetailAreas{padding:24px 0 38px}
    .solutionDetailSectionHead h2{font-size:25px}
    .solutionDetailSectionHead p{font-size:10.5px}
    .solutionDetailAnchorNav{margin-bottom:18px}
    .solutionDetailAnchorNav a{min-height:33px;padding:4px 12px;font-size:9px}

    .solutionDetailAreaGrid{gap:12px}
    .solutionDetailAreaCard{padding:18px 18px 20px}
    .solutionDetailAreaHeader{gap:10px;padding-bottom:12px}
    .solutionDetailAreaIcon{width:39px;height:39px}
    .solutionDetailAreaIcon svg{width:19px;height:19px}
    .solutionDetailAreaHeader :is(h2,h3){font-size:15px}
    .solutionDetailFeatureList{margin-top:13px}
    .solutionDetailFeatureList li{min-height:31px;padding:5px 24px 5px 2px;font-size:9.5px}
    .solutionDetailFeatureList li::before{top:6px;width:17px;height:17px;font-size:9px}

    .solutionDetailCta{padding-bottom:38px}
    .solutionDetailCtaInner{padding:22px 24px}
    .solutionDetailCtaInner h2{font-size:18px}
    .solutionDetailCtaInner p{font-size:9.5px}
    .solutionDetailCtaInner>.btn{min-width:120px;min-height:40px;font-size:10px}
}


/* Phone */
@media(max-width:600px){
    .solutionDetailHero{padding:18px 0}

    .solutionDetailHeroCard{
        display:grid;
        grid-template-columns:1fr;
        gap:22px;
        min-height:0;
        padding:24px 17px 20px;
    }

    .solutionDetailHeroCopy{text-align:center}
    .solutionDetailKicker{font-size:9.5px}
    .solutionDetailHeroCopy h1{font-size:24px;line-height:1.6}
    .solutionDetailHeroCopy>p{max-width:330px;margin:10px auto 0;font-size:10.5px;line-height:1.9}
    .solutionDetailHeroActions{justify-content:center;margin-top:16px}
    .solutionDetailHeroActions .btn,
    .solutionDetailOutlineButton{min-width:115px;min-height:39px;padding:5px 12px;font-size:10px}

    .solutionDetailHeroVisual{width:280px;height:235px}
    .solutionDetailHeroVisual::before{width:155px;height:155px}
    .solutionDetailHeroVisual::after{width:205px;height:205px}
    .solutionDetailHub{width:80px;height:80px}
    .solutionDetailHub svg{width:34px;height:34px}

    .solutionDetailNode{
        min-width:94px;
        min-height:35px;
        padding:5px 7px;
        gap:5px;
        font-size:8px;
    }

    .solutionDetailNode svg{flex-basis:15px;width:15px;height:15px}
    .solutionDetailNode::after{display:none}
    .nodeCorporate{top:18px;right:0}
    .nodeRetail{top:18px;left:0}
    .nodeDistribution{bottom:18px;right:0}
    .nodeHotel{bottom:18px;left:0}

    .solutionDetailAreas{padding:22px 0 30px}
    .solutionDetailSectionHead{margin-bottom:14px}
    .solutionDetailSectionHead>span{font-size:9px}
    .solutionDetailSectionHead h2{font-size:23px}
    .solutionDetailSectionHead p{max-width:330px;margin:6px auto 0;font-size:10px;line-height:1.85}

    .solutionDetailAnchorNav{
        gap:6px;
        margin-bottom:14px;
    }

    .solutionDetailAnchorNav a{
        min-height:31px;
        padding:4px 10px;
        font-size:8.5px;
    }

    .solutionDetailAreaGrid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .solutionDetailAreaCard{
        scroll-margin-top:78px;
        padding:16px 14px 18px;
    }

    .solutionDetailAreaHeader{gap:10px;padding-bottom:11px}
    .solutionDetailAreaIcon{width:38px;height:38px;border-radius:10px}
    .solutionDetailAreaIcon svg{width:18px;height:18px}
    .solutionDetailAreaHeader :is(h2,h3){font-size:15px}
    .solutionDetailFeatureList{margin-top:11px}
    .solutionDetailFeatureList--twoColumns{grid-template-columns:1fr}
    .solutionDetailFeatureList li{min-height:30px;padding:5px 24px 5px 1px;font-size:9.5px;line-height:1.75}
    .solutionDetailFeatureList li::before{top:6px;width:16px;height:16px;font-size:8px}

    .solutionDetailCta{padding-bottom:28px}
    .solutionDetailCtaInner{
        display:block;
        padding:22px 17px;
        text-align:center;
    }

    .solutionDetailCtaInner h2{font-size:17px;line-height:1.7}
    .solutionDetailCtaInner p{font-size:9.5px}
    .solutionDetailCtaInner>.btn{min-width:120px;margin-top:14px;min-height:39px;font-size:10px}
}


/* =========================================================
   ARIA SOLUTION PAGES — SHARED DESIGN SYSTEM
   Sales / Supply Chain / Finance / Human Resources / Services
   ========================================================= */

/*
   Shared tokens for all solution pages.
   Responsive breakpoints only change these values; the actual component
   rules remain defined once below.
*/
:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage){
    --solution-areas-padding-top:34px;
    --solution-areas-padding-bottom:22px;

    --solution-card-gap:18px;
    --solution-card-padding:26px 28px 28px;
    --solution-card-radius:16px;
    --solution-card-shadow:0 5px 18px rgba(7,31,66,.025);
    --solution-card-hover-shadow:0 12px 30px rgba(18,54,105,.06);

    --solution-card-header-gap:14px;
    --solution-card-header-padding-bottom:16px;

    --solution-icon-size:46px;
    --solution-icon-radius:12px;
    --solution-icon-svg-size:22px;

    --solution-card-title-size:19px;

    --solution-feature-grid:repeat(3,minmax(0,1fr));
    --solution-feature-column-gap:28px;
    --solution-feature-margin-top:15px;
    --solution-feature-min-height:36px;
    --solution-feature-padding-y:7px;
    --solution-feature-font-size:11.5px;

    --solution-cta-radius:16px;
    --solution-cta-shadow:0 10px 28px rgba(3,34,72,.08);
}


/* =========================================================
   Shared compact text hero
   Keep both class names for backward compatibility with current HTML.
   ========================================================= */

.salesTextHero,
.solutionTextHero{
    position:relative;
    max-width:1080px;
    margin:0 auto 26px;
    padding:34px 38px 30px;
    overflow:hidden;
    border:1px solid #174d86;
    border-radius:14px;
    background:
        radial-gradient(circle at 12% 50%,rgba(8,184,197,.15),transparent 30%),
        radial-gradient(circle at 92% 5%,rgba(40,115,210,.13),transparent 28%),
        linear-gradient(115deg,#00152f,#073362);
    color:#fff;
    text-align:center;
    box-shadow:0 14px 34px rgba(7,31,66,.08);
}

.salesTextHero::before,
.solutionTextHero::before{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    top:-145px;
    right:-70px;
    border:1px solid rgba(24,198,205,.13);
    border-radius:50%;
    pointer-events:none;
}

.salesTextHero::after,
.solutionTextHero::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    bottom:-125px;
    left:-55px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
    pointer-events:none;
}

.salesTextHeroKicker,
.solutionTextHeroKicker{
    position:relative;
    z-index:1;
    display:block;
    margin-bottom:6px;
    color:#18c6cd;
    font-size:10.5px;
    font-weight:800;
}

.salesTextHero h1,
.solutionTextHero h1{
    position:relative;
    z-index:1;
    margin:0;
    color:#fff;
    font-size:34px;
    font-weight:900;
    line-height:1.55;
    letter-spacing:-.35px;
}

.salesTextHero p,
.solutionTextHero p{
    position:relative;
    z-index:1;
    max-width:760px;
    margin:10px auto 0;
    color:#c8d7e8;
    font-size:12px;
    line-height:1.95;
}

.salesTextHero .solutionDetailAnchorNav,
.solutionTextHero .solutionDetailAnchorNav{
    position:relative;
    z-index:1;
    margin:20px auto 0;
}

.salesTextHero .solutionDetailAnchorNav a,
.solutionTextHero .solutionDetailAnchorNav a{
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.055);
    color:#e9f2fb;
}

.salesTextHero .solutionDetailAnchorNav a:hover,
.solutionTextHero .solutionDetailAnchorNav a:hover{
    border-color:rgba(24,198,205,.55);
    background:rgba(24,198,205,.10);
    color:#fff;
}


/* =========================================================
   Shared solution capability cards
   ========================================================= */

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreas{
    padding-top:var(--solution-areas-padding-top);
    padding-bottom:var(--solution-areas-padding-bottom);
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreaGrid{
    grid-template-columns:1fr;
    align-items:start;
    gap:var(--solution-card-gap);
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreaCard{
    width:100%;
    padding:var(--solution-card-padding);
    overflow:hidden;
    border:1px solid #dfe9f4;
    border-radius:var(--solution-card-radius);
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
    box-shadow:var(--solution-card-shadow);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreaCard:hover{
    transform:translateY(-2px);
    border-color:#bfd9e8;
    box-shadow:var(--solution-card-hover-shadow);
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreaHeader{
    gap:var(--solution-card-header-gap);
    padding-bottom:var(--solution-card-header-padding-bottom);
    border-bottom:1px solid #e6edf5;
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreaIcon{
    width:var(--solution-icon-size);
    height:var(--solution-icon-size);
    border-radius:var(--solution-icon-radius);
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreaIcon svg{
    width:var(--solution-icon-svg-size);
    height:var(--solution-icon-svg-size);
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailAreaHeader :is(h2,h3){
    font-size:var(--solution-card-title-size);
    line-height:1.65;
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailFeatureList,
:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailFeatureList--twoColumns,
:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailFeatureList--distribution,
:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailFeatureList--hotel{
    display:grid;
    grid-template-columns:var(--solution-feature-grid);
    column-gap:var(--solution-feature-column-gap);
    margin-top:var(--solution-feature-margin-top);
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailFeatureList li{
    min-height:var(--solution-feature-min-height);
    padding-top:var(--solution-feature-padding-y);
    padding-bottom:var(--solution-feature-padding-y);
    color:#314d6b;
    font-size:var(--solution-feature-font-size);
    line-height:1.8;
    font-weight:700;
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailCta{
    padding-top:0;
    padding-bottom:var(--solution-areas-padding-bottom);
}

:where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage) .solutionDetailCtaInner{
    margin-top:0;
    border-radius:var(--solution-cta-radius);
    box-shadow:var(--solution-cta-shadow);
}


/* Finance may contain capability groups without listed items. */
.solutionDetailAreaCard--empty{
    min-height:auto;
}

.solutionDetailEmptyState{
    margin-top:16px;
    padding:13px 15px;
    border:1px dashed #d7e2ee;
    border-radius:7px;
    background:#fbfdff;
    color:#75879b;
    font-size:11px;
    font-weight:600;
    line-height:1.8;
    text-align:center;
}


/* Keep the approved card focus behavior from the home-page solutions slider. */
.solutionGrid article,
.solutionGrid article:focus,
.solutionGrid article:focus-visible,
.solutionGrid article:focus-within{
    outline:none !important;
    box-shadow:0 8px 18px rgba(18,54,105,.05);
}

.solutionGrid a:focus,
.solutionGrid a:focus-visible{
    outline:none !important;
}


/* =========================================================
   Solution pages — Tablet 601–900
   ========================================================= */

@media(min-width:601px) and (max-width:900px){
    :where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage){
        --solution-areas-padding-top:26px;
        --solution-areas-padding-bottom:18px;

        --solution-card-gap:14px;
        --solution-card-padding:20px 20px 22px;
        --solution-card-radius:13px;
        --solution-card-shadow:0 4px 15px rgba(7,31,66,.025);

        --solution-card-header-gap:11px;
        --solution-card-header-padding-bottom:13px;

        --solution-icon-size:41px;
        --solution-icon-radius:11px;
        --solution-icon-svg-size:20px;

        --solution-card-title-size:16px;

        --solution-feature-grid:repeat(2,minmax(0,1fr));
        --solution-feature-column-gap:18px;
        --solution-feature-margin-top:13px;
        --solution-feature-min-height:33px;
        --solution-feature-padding-y:6px;
        --solution-feature-font-size:10.5px;

        --solution-cta-radius:13px;
        --solution-cta-shadow:0 8px 24px rgba(3,34,72,.07);
    }

    .salesTextHero,
    .solutionTextHero{
        margin-bottom:20px;
        padding:26px 24px 24px;
    }

    .salesTextHero h1,
    .solutionTextHero h1{
        font-size:27px;
    }

    .salesTextHero p,
    .solutionTextHero p{
        max-width:600px;
        font-size:10.5px;
    }

    .salesTextHero .solutionDetailAnchorNav,
    .solutionTextHero .solutionDetailAnchorNav{
        margin-top:16px;
    }
}


/* =========================================================
   Solution pages — Mobile <=600
   ========================================================= */

@media(max-width:600px){
    :where(.solutionDetailPage,.salesDetailPage,.supplyChainDetailPage,.financeDetailPage,.humanResourcesDetailPage,.servicesDetailPage){
        --solution-areas-padding-top:18px;
        --solution-areas-padding-bottom:14px;

        --solution-card-gap:12px;
        --solution-card-padding:17px 14px 18px;
        --solution-card-radius:12px;
        --solution-card-shadow:0 4px 14px rgba(7,31,66,.025);

        --solution-card-header-gap:10px;
        --solution-card-header-padding-bottom:12px;

        --solution-icon-size:39px;
        --solution-icon-radius:10px;
        --solution-icon-svg-size:18px;

        --solution-card-title-size:15px;

        --solution-feature-grid:1fr;
        --solution-feature-column-gap:0;
        --solution-feature-margin-top:11px;
        --solution-feature-min-height:31px;
        --solution-feature-padding-y:5px;
        --solution-feature-font-size:9.5px;

        --solution-cta-radius:12px;
        --solution-cta-shadow:0 7px 20px rgba(3,34,72,.065);
    }

    .salesTextHero,
    .solutionTextHero{
        margin-bottom:16px;
        padding:22px 15px 20px;
        border-radius:12px;
    }

    .salesTextHeroKicker,
    .solutionTextHeroKicker{
        font-size:9px;
    }

    .salesTextHero h1,
    .solutionTextHero h1{
        font-size:23px;
        line-height:1.65;
    }

    .salesTextHero p,
    .solutionTextHero p{
        max-width:320px;
        margin-top:7px;
        font-size:9.5px;
        line-height:1.85;
    }

    .salesTextHero .solutionDetailAnchorNav,
    .solutionTextHero .solutionDetailAnchorNav{
        margin-top:14px;
    }

    .salesTextHero .solutionDetailAnchorNav a,
    .solutionTextHero .solutionDetailAnchorNav a{
        min-height:30px;
        padding:4px 9px;
        font-size:8.5px;
    }

    .solutionDetailEmptyState{
        font-size:9.5px;
    }
}


/* =========================================================
   ABOUT PAGE — FINAL VISUAL REFINEMENT
   v1.1.19
   Keeps the existing About markup/content intact and only
   improves visual hierarchy, spacing, and responsive polish.
   ========================================================= */

/* Desktop / compact desktop */
@media(min-width:901px){

    .aboutIntro{
        padding:48px 0 58px;
    }

    .aboutIntro .shell{
        width:min(calc(100% - 96px),1240px);
    }

    .aboutIntroText{
        max-width:1180px;
        padding:34px 58px 42px;
        border-radius:18px;
        background:
            radial-gradient(
                circle at 92% 8%,
                rgba(8,184,197,.055),
                transparent 24%
            ),
            #fff;
        box-shadow:
            0 20px 55px rgba(7,31,66,.07),
            0 2px 8px rgba(7,31,66,.025);
    }

    .aboutIntroTitle{
        margin-bottom:28px;
        text-align:right;
    }

    .aboutIntroTitle :is(h1,h2){
        padding-bottom:13px;
        font-size:36px;
        line-height:1.4;
    }

    .aboutIntroTitle :is(h1,h2)::after{
        right:0;
        width:72px;
        height:4px;
        transform:none;
    }

    .aboutIntroText p{
        max-width:none;
        margin:0 0 20px;
        color:#344b68;
        font-size:15px;
        font-weight:400;
        line-height:2.2;
        text-align:justify;
    }

    .aboutIntroText p:first-of-type{
        margin-bottom:24px;
        padding:18px 22px;
        border-right:4px solid #08b8c5;
        border-radius:8px;
        background:#f7fbff;
        color:#173b63;
        font-weight:500;
        line-height:2.15;
    }

    .aboutIntroText p:last-child{
        margin-bottom:0;
    }
}

/* Tablet */
@media(min-width:601px) and (max-width:900px){

    .aboutIntroText{
        border-radius:14px;
    }

    .aboutIntroTitle{
        text-align:right;
    }

    .aboutIntroTitle :is(h1,h2)::after{
        right:0;
        width:58px;
        transform:none;
    }

    .aboutIntroText p:first-of-type{
        margin-bottom:20px;
        padding:15px 17px;
        border-right:3px solid #08b8c5;
        border-radius:7px;
        background:#f7fbff;
        color:#173b63;
        font-weight:500;
    }
}

/* Mobile */
@media(max-width:600px){

    .aboutIntro{
        padding:18px 0 24px;
    }

    .aboutIntroText{
        border-radius:12px;
    }

    .aboutIntroTitle{
        margin-bottom:16px;
        text-align:right;
    }

    .aboutIntroTitle :is(h1,h2){
        padding-bottom:8px;
        font-size:21px;
    }

    .aboutIntroTitle :is(h1,h2)::after{
        right:0;
        width:48px;
        height:3px;
        transform:none;
    }

    .aboutIntroText p{
        margin-bottom:14px;
        font-size:12.5px;
        line-height:2.05;
    }

    .aboutIntroText p:first-of-type{
        margin-bottom:17px;
        padding:13px 14px;
        border-right:3px solid #08b8c5;
        border-radius:7px;
        background:#f7fbff;
        color:#173b63;
        font-weight:500;
        line-height:2;
    }
}
/* =========================================================
   ABOUT PAGE — APPROACH SECTION
   v1.1.20
   ========================================================= */

.aboutApproach{
    position:relative;
    padding:0 0 56px;
    background:#f8fbff;
}

.aboutApproachInner{
    max-width:1180px;
    margin:0 auto;
}

.aboutApproachHead{
    max-width:760px;
    margin:0 auto 24px;
    text-align:center;
}

.aboutApproachKicker{
    display:block;
    margin-bottom:5px;
    color:#08aeba;
    font-size:10.5px;
    font-weight:800;
}

.aboutApproachHead h2{
    margin:0;
    color:#082755;
    font-size:30px;
    font-weight:900;
    line-height:1.55;
}

.aboutApproachHead p{
    margin:8px auto 0;
    color:#60758d;
    font-size:12px;
    line-height:1.95;
}

.aboutApproachGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.aboutApproachCard{
    position:relative;
    min-height:218px;
    padding:26px 24px 24px;
    overflow:hidden;
    border:1px solid #dfe9f4;
    border-radius:14px;
    background:
        radial-gradient(circle at 88% 8%,rgba(8,184,197,.055),transparent 28%),
        #fff;
    box-shadow:0 9px 28px rgba(18,54,105,.045);
    text-align:right;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.aboutApproachCard:hover{
    transform:translateY(-4px);
    border-color:#b9d9e9;
    box-shadow:0 17px 38px rgba(18,54,105,.085);
}

.aboutApproachIcon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin-bottom:16px;
    border:1px solid #d7edf5;
    border-radius:50%;
    background:linear-gradient(180deg,#f4fbff,#eaf8fd);
    color:#08aeba;
}

.aboutApproachIcon svg{
    display:block;
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.aboutApproachCard h3{
    margin:0 0 8px;
    color:#0d2e57;
    font-size:18px;
    font-weight:800;
    line-height:1.65;
}

.aboutApproachCard p{
    margin:0;
    color:#536982;
    font-size:11.5px;
    line-height:2;
}

@media(min-width:601px) and (max-width:900px){

    .aboutApproach{
        padding-bottom:38px;
    }

    .aboutApproachHead{
        max-width:620px;
        margin-bottom:20px;
    }

    .aboutApproachHead h2{
        font-size:26px;
    }

    .aboutApproachHead p{
        max-width:560px;
        font-size:11.5px;
        line-height:1.95;
    }

    .aboutApproachGrid{
        grid-template-columns:1fr;
        gap:12px;

        max-width:620px;
        margin:0 auto;
    }

    .aboutApproachCard{
        display:grid;
        grid-template-columns:52px 1fr;
        grid-template-areas:
            "icon title"
            "icon text";

        align-items:start;

        min-height:0;

        padding:18px 20px;

        text-align:right;
    }

    .aboutApproachIcon{
        grid-area:icon;

        width:44px;
        height:44px;

        margin:2px 0 0 14px;
    }

    .aboutApproachIcon svg{
        width:21px;
        height:21px;
    }

    .aboutApproachCard h3{
        grid-area:title;

        margin:0 0 5px;

        font-size:16px;
        line-height:1.7;
    }

    .aboutApproachCard p{
        grid-area:text;

        margin:0;

        font-size:11.5px;
        line-height:1.95;
    }
}

@media(max-width:600px){

    .aboutApproach{
        padding:0 0 30px;
    }

    .aboutApproachInner{
        width:100%;
    }

    .aboutApproachHead{
        max-width:330px;
        margin-bottom:16px;
    }

    .aboutApproachKicker{
        font-size:9px;
    }

    .aboutApproachHead h2{
        font-size:22px;
        line-height:1.6;
    }

    .aboutApproachHead p{
        margin-top:6px;
        font-size:10px;
        line-height:1.85;
    }

    .aboutApproachGrid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .aboutApproachCard{
        min-height:0;
        padding:18px 16px;
        border-radius:11px;
        text-align:right;
    }

    .aboutApproachIcon{
        width:40px;
        height:40px;
        margin-bottom:11px;
    }

    .aboutApproachIcon svg{
        width:19px;
        height:19px;
    }

    .aboutApproachCard h3{
        margin-bottom:6px;
        font-size:15px;
    }

    .aboutApproachCard p{
        font-size:10.5px;
        line-height:1.9;
    }
}

/* =========================================================
   ABOUT PAGE — continuous background fix
   ========================================================= */

.aboutPage{
    position:relative;
    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(8,184,197,.055),
            transparent 20%
        ),
        radial-gradient(
            circle at 8% 94%,
            rgba(25,102,210,.035),
            transparent 20%
        ),
        #f8fbff;
}

/* Both About sections live on the same background surface */
.aboutIntro,
.aboutApproach{
    background:transparent;
}

/* Remove the old section-level circles that create visible seams */
.aboutIntro::before,
.aboutIntro::after{
    display:none;
}

/* Reduce the empty visual gap between intro and approach */
.aboutIntro{
    padding-bottom:30px;
}

.aboutApproach{
    padding-top:8px;
}


/* Tablet */
@media(min-width:601px) and (max-width:900px){

    .aboutIntro{
        padding-bottom:24px;
    }

    .aboutApproach{
        padding-top:4px;
    }
}


/* Mobile */
@media(max-width:600px){

    .aboutIntro{
        padding-bottom:18px;
    }

    .aboutApproach{
        padding-top:2px;
    }
}

.aboutIntroText{
    box-shadow:
        0 4px 14px rgba(7,31,66,.025);
}

/* =========================================================
   CONTACT PAGE — FINAL VISUAL REFINEMENT
   ========================================================= */

@media(min-width:901px){

    .contactIntro{
        padding:48px 0 58px;
    }

    .contactIntro .shell{
        width:min(calc(100% - 96px),1240px);
    }

    .contactCard{
        max-width:1180px;
        padding:34px 46px 38px;

        border-radius:18px;

        background:
            radial-gradient(
                circle at 92% 8%,
                rgba(8,184,197,.045),
                transparent 24%
            ),
            #fff;

        box-shadow:
            0 4px 14px rgba(7,31,66,.025);
    }

    .contactTitle{
        margin-bottom:30px;
    }

    .contactTitle h1{
        padding-bottom:13px;
        font-size:36px;
    }

    .contactTitle h1::after{
        right:0;
        width:72px;
        height:4px;
        transform:none;
    }

    .contactTitle p{
        margin-top:16px;
        font-size:14px;
        line-height:2;
    }


    /* Contact info cards */
    .contactItems{
        gap:14px;
        margin-top:28px;
    }

    .contactItem{
        min-height:82px;
        padding:16px 18px;

        border-radius:12px;

        background:#fbfdff;
        border:1px solid #dfe9f4;

        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    .contactItem:hover{
        transform:translateY(-2px);

        border-color:#bcdde8;

        box-shadow:
            0 8px 22px rgba(7,31,66,.045);
    }

    .contactItemIcon{
        width:44px;
        height:44px;

        border-radius:12px;
    }


    /* Demo CTA */
    .contactDemo{
        margin-top:20px;
        padding:22px 24px;

        border-radius:12px;

        background:
            linear-gradient(
                90deg,
                rgba(8,184,197,.055),
                rgba(25,102,210,.025)
            );

        border:1px solid #dce9f3;
    }
}

/* =========================================================
   CONTACT — Mobile CTA final fix
   ========================================================= */

@media(max-width:600px){

    .contactDemo{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        width:100%;
        gap:14px;

        margin-top:18px;
        padding:20px 16px;

        border-radius:11px;

        text-align:center;
    }

    .contactDemoText{
        width:100%;
        max-width:none;
        min-width:0;
        text-align:center;
    }

    .contactDemoText > span{
        display:block;
        width:100%;

        margin-bottom:5px;

        font-size:9.5px;
        line-height:1.7;
        text-align:center;
    }

    .contactDemoText strong{
        display:block;
        width:100%;

        margin:0 0 6px;

        font-size:15px;
        line-height:1.8;

        text-align:center;
    }

    .contactDemoText p{
        width:100%;
        max-width:280px;

        margin:0 auto;

        font-size:10.5px;
        line-height:1.9;

        text-align:center;
    }

    .contactDemo .btn{
        align-self:center;

        width:auto;
        min-width:145px;
        min-height:42px;

        margin:0 auto;

        padding:7px 18px;
    }
}

/* =========================================================
   DEMO PAGE — FINAL DESKTOP VISUAL REFINEMENT
   ========================================================= */

@media(min-width:901px){

    .demoIntro{
        padding:48px 0 58px;
    }

    .demoIntro .shell{
        width:min(calc(100% - 96px),1240px);
    }

    .demoCard{
        max-width:1180px;
        padding:34px 46px 38px;

        border-radius:18px;

        background:
            radial-gradient(
                circle at 92% 8%,
                rgba(8,184,197,.045),
                transparent 24%
            ),
            #fff;

        box-shadow:
            0 4px 14px rgba(7,31,66,.025);
    }

    .demoTitle{
        margin-bottom:30px;
    }

    .demoTitle h1{
        padding-bottom:13px;
        font-size:36px;
    }

    .demoTitle h1::after{
        right:0;
        width:72px;
        height:4px;
        transform:none;
    }

    .demoTitle p{
        margin-top:16px;
        font-size:14px;
        line-height:2;
    }

    .demoContent{
        gap:44px;
    }

    .demoForm{
        padding:24px 26px;

        border-radius:12px;

        background:#fbfdff;

        border:1px solid #dfe9f4;

        box-shadow:
            0 8px 24px rgba(7,31,66,.035);
    }

    .demoField input,
    .demoField textarea{
        border-radius:8px;
    }

    .demoBenefit{
        border-radius:8px;
    }
}

/* =========================================================
   DEMO PAGE — TABLET FINAL LAYOUT
   601px - 900px
   ========================================================= */

@media(min-width:601px) and (max-width:900px){

    .demoContent{
        display:grid;
        grid-template-columns:1fr;
        gap:24px;
    }

    /* توضیحات ابتدا، فرم بعد از آن */
    .demoInfo{
        order:1;
        width:100%;
        padding:0;
    }

    .demoForm{
        order:2;

        width:100%;
        max-width:620px;

        margin:0 auto;
        padding:22px 24px;

        border-radius:12px;
    }

    .demoKicker{
        font-size:10.5px;
    }

    .demoInfo h2{
        margin-bottom:10px;

        font-size:21px;
        line-height:1.75;
    }

    .demoInfo > p{
        max-width:650px;

        font-size:12px;
        line-height:2;
    }


    /* مزایای جلسه دمو در تبلت 2×2 */
    .demoBenefits{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));

        column-gap:24px;
        row-gap:7px;

        margin-top:18px;
    }

    .demoBenefit{
        min-height:40px;
        padding:5px 0;
    }

    .demoBenefit p{
        font-size:11px;
        line-height:1.8;
    }


    /* فرم */
    .demoFormRow{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .demoField{
        margin-bottom:14px;
    }

    .demoField label{
        font-size:11.5px;
    }

    .demoField input{
        height:44px;
        font-size:12px;
    }

    .demoField textarea{
        min-height:110px;
        font-size:12px;
    }


    /* Local security challenge */
    .demoSecurity{
        margin:5px 0 16px;
    }


    /* پایین فرم */
    .demoFormFooter{
        gap:16px;
        padding-top:16px;
    }

    .demoFormFooter p{
        font-size:10px;
        line-height:1.8;
    }

    .demoFormFooter .btn{
        min-width:145px;
        min-height:42px;

        padding:7px 16px;

        font-size:11px;
    }
}