*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:#FFFFFF}
  a{text-decoration:none}
  i.ph,i.ph-fill,i.ph-bold,i.ph-duotone{display:inline-flex;line-height:1}
  summary{list-style:none;cursor:pointer}
  summary::-webkit-details-marker{display:none}
  details[open] .chev{transform:rotate(45deg)}
  .faq-item[open]{border-color:#CFE0FF !important;box-shadow:0 16px 36px -26px rgba(29,106,255,.5)}
  .faq-item[open] .faq-tog{transform:rotate(135deg);background:#1D6AFF;color:#fff}
  .faq-item:not([open]):hover{border-color:#D3DEEF !important}
  .faq-item:not([open]):hover .faq-tog{background:#E6EDF7}
  input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
  input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:#E3EAF6}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-8px;width:24px;height:24px;border-radius:50%;background:#1D6AFF;border:4px solid #fff;box-shadow:0 4px 12px rgba(29,106,255,.5)}
  input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:#E3EAF6}
  input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#1D6AFF;border:4px solid #fff;box-shadow:0 4px 12px rgba(29,106,255,.5)}
  input[type=range].calc-range::-webkit-slider-runnable-track{background:#E3EAF6}
  input[type=range].calc-range::-moz-range-track{background:#E3EAF6}
  .calc-field:focus-within{border-color:#1D6AFF !important;background:#fff !important;box-shadow:0 0 0 4px rgba(29,106,255,.09),0 10px 24px -16px rgba(29,106,255,.5)}
  .calc-field:focus-within .cf-ico{background:#1D6AFF !important;color:#fff !important}
  .calc-field:hover{border-color:#D3DEEF}
  .cf-input::-webkit-outer-spin-button,.cf-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .cf-input{-moz-appearance:textfield}
  .cf-input::placeholder{color:#B6C0D2;font-weight:600}
  .calc-go:hover{transform:translateY(-2px);box-shadow:0 24px 42px -12px rgba(29,106,255,.7),inset 0 1px 0 rgba(255,255,255,.25)}
  .calc-go:active{transform:scale(.985)}
  /* Statement fields */
  .fld{position:relative;display:flex;align-items:center;gap:15px;padding:19px 8px;cursor:text;border-radius:14px;transition:background .25s}
  .fld-wrap{border-radius:14px;transition:background .25s}
  .fld-wrap + .fld-wrap{border-top:1px solid #EFF2F7}
  .fld-wrap.invalid .fld-ico{background:#FDECEC !important;color:#E5484D !important}
  .fld-err{display:inline-flex;align-items:center;gap:5px;color:#E5484D;font-size:11.5px;font-weight:600;background:#FDECEC;padding:5px 11px;border-radius:8px;margin:-2px 64px 12px}
  .fld::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;height:2px;width:0;background:linear-gradient(90deg,#1D6AFF,#38BDF8 55%,#10B981);border-radius:2px;transition:width .5s cubic-bezier(.22,1,.36,1)}
  .fld:focus-within::after{width:100%}
  .fld-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#5A6A85;background:#F4F7FC;transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s,background .3s}
  .fld:focus-within .fld-ico{color:#fff;background:linear-gradient(145deg,#1D6AFF,#1450C8);transform:scale(1.06) rotate(-3deg);box-shadow:0 12px 22px -10px rgba(29,106,255,.7)}
  .fld-input{width:100%;border:none;outline:none;background:transparent;font-family:'Tajawal',sans-serif;font-size:24px;font-weight:800;color:#0A1733;text-align:left;letter-spacing:-.5px;transition:color .25s}
  .fld:focus-within .fld-input{color:#1D6AFF}
  .fld-input::-webkit-outer-spin-button,.fld-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .fld-input{-moz-appearance:textfield}
  .fld-input::placeholder{color:#C2CCDB;font-weight:700}
  /* Boxed inputs */
  .cinput{background:#F8FAFD;border:1.5px solid #E7ECF3;border-radius:16px;padding:13px 16px 12px;transition:border-color .22s,background .22s,box-shadow .22s}
  .cinput:focus-within{border-color:#1D6AFF;background:#fff;box-shadow:0 0 0 4px rgba(29,106,255,.09)}
  .cinput.invalid{border-color:#F1B6B6;background:#FEF5F5}
  .cinput-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .cinput-head i{font-size:17px;color:#9AA6BC;transition:color .22s}
  .cinput:focus-within .cinput-head i{color:#1D6AFF}
  .cinput.invalid .cinput-head i{color:#E5484D}
  .cinput-head .t{font-size:13px;font-weight:700;color:#3C4A63}
  .cinput-head .opt{font-size:11px;font-weight:600;color:#AEB8C8;margin-inline-start:auto}
  .cinput-row{display:flex;align-items:baseline;gap:6px}
  .cinput-row input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:'Tajawal',sans-serif;font-size:23px;font-weight:800;color:#0A1733;text-align:right;letter-spacing:-.4px}
  .cinput-row input::-webkit-outer-spin-button,.cinput-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .cinput-row input{-moz-appearance:textfield}
  .cinput-row input::placeholder{color:#C7D0DE}
  .cinput-row .cur{font-size:12.5px;color:#9AA6BC;font-weight:700;flex-shrink:0}
  .cinput-err{display:flex;align-items:center;gap:5px;color:#E5484D;font-size:11.5px;font-weight:600;margin-top:7px}
  .calc-go{position:relative;overflow:hidden}
  /* expanding shell */
  .calc-shell{display:inline-flex;vertical-align:top;text-align:right;max-width:100%;background:#fff;border:1px solid #E6EDFB;border-radius:30px;overflow:hidden;box-shadow:0 44px 90px -50px rgba(10,23,51,.5);transition:box-shadow .6s ease}
  .calc-shell.open{box-shadow:0 54px 110px -46px rgba(10,23,51,.6)}
  .calc-inputs{width:560px;max-width:94vw;flex-shrink:0;box-sizing:border-box}
  .calc-results{flex:0 0 auto;overflow:hidden}
  .calc-results-inner{position:relative;width:560px;max-width:94vw;box-sizing:border-box;opacity:1;animation:calcReveal .8s cubic-bezier(.22,1,.36,1)}
  @keyframes calcReveal{from{transform:translateX(48px) scale(.97)}to{transform:none}}
  /* Sheen sweep on reveal */
  .calc-results-inner::before{content:"";position:absolute;top:0;bottom:0;width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-14deg);animation:crSheen 1.5s cubic-bezier(.22,1,.36,1) .25s 1 both;pointer-events:none;z-index:2}
  @keyframes crSheen{from{transform:translateX(120%) skewX(-14deg)}to{transform:translateX(-220%) skewX(-14deg)}}
  /* Result emphasis */
  .cr-amount{display:inline-block;animation:crPop .7s cubic-bezier(.34,1.56,.64,1) .15s both}
  @keyframes crPop{0%{transform:scale(.6)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
  /* Pulsing ring */
  .cr-ring{animation:crRing 2.8s ease-in-out infinite}
  @keyframes crRing{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.18);opacity:.9}}
  /* Dim fields while results are shown */
  .calc-dimwrap{transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),filter .5s ease;margin-bottom:30px}
  .calc-dimwrap.dimmed{opacity:.5;transform:scale(.985);filter:saturate(.85)}
  .calc-dimwrap.dimmed:hover,.calc-dimwrap.dimmed:focus-within{opacity:1;transform:none;filter:none}
  @media(max-width:760px){.calc-shell{flex-direction:column}.calc-inputs{width:100%}.calc-results-inner{width:100%}.calc-dimwrap.dimmed{opacity:1;transform:none;filter:none}@keyframes calcReveal{from{transform:translateY(30px) scale(.98)}to{transform:none}}}
  [data-reveal]{opacity:0;transform:translateY(40px);filter:blur(4px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1),filter .9s ease;will-change:opacity,transform}
  [data-reveal].in{opacity:1;transform:none;filter:blur(0)}
  [data-reveal][data-rv="right"]{transform:translateX(56px)}
  [data-reveal][data-rv="left"]{transform:translateX(-56px)}
  [data-reveal][data-rv="scale"]{transform:scale(.92)}
  [data-reveal][data-rv="rise"]{transform:translateY(64px)}
  [data-reveal].in[data-rv]{transform:none}
  .rsr{display:inline-block;width:.86em;height:.86em;background:currentColor;-webkit-mask:url("assets/img/img-02b0fe79a4.svg") center/contain no-repeat;mask:url("assets/img/img-02b0fe79a4.svg") center/contain no-repeat;vertical-align:-.05em}
  @media(prefers-reduced-motion:reduce){[data-reveal]{transition:opacity .4s ease;transform:none;filter:none}}
  /* ===== MOBILE ===== */
  @media(max-width:820px){
    .nav-links,.nav-login{display:none !important}
    header nav{padding:12px 16px !important;gap:12px !important}
    header nav img{height:38px !important}
    section > div,footer > div{padding-left:18px !important;padding-right:18px !important}
    [style*="grid-template-columns"]{grid-template-columns:1fr !important}
    [style*="grid-column"]{grid-column:auto !important}
    [style*="grid-row"]{grid-row:auto !important}
    h1{font-size:34px !important;line-height:1.3 !important;letter-spacing:-.5px !important}
    h2{font-size:28px !important;line-height:1.3 !important;letter-spacing:-.4px !important}
    section{padding-top:0 !important}
    section > div{padding-top:60px !important;padding-bottom:60px !important}
    video{max-width:84vw !important;height:auto !important}
    .calc-results-inner,.calc-inputs{width:100% !important;padding:30px 22px !important}
    .faq-item summary{padding:17px 16px !important}
    .faq-item summary span[style*="font-size:17.5px"]{font-size:15.5px !important}
    .faq-item div[style*="padding:0 22px 22px 78px"]{padding:0 18px 20px !important}
    [data-reveal][style*="position:sticky"]{position:static !important}

    /* ===== MOBILE REFINEMENTS ===== */
    /* 1) Hide hero device visual */
    .hero-visual{display:none !important}

    /* 2) Trust logos — single row layout */
    .partners-row{gap:9px 8px !important;justify-content:center !important}
    .partners-row .ptitle{flex:0 0 100% !important;text-align:center !important;white-space:normal !important;font-size:11.5px !important;letter-spacing:.2px !important;margin-bottom:4px;opacity:1 !important;clip-path:none !important;text-shadow:none !important}
    .partners-row .ptitle br{display:none !important}
    .partners-row .pdiv{display:none !important}
    .partners-row .scan-blue,.partners-row .scan-green{display:none !important}
    .partners-row .plogo{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;animation:none !important;height:auto !important;max-height:20px !important;max-width:15.5vw !important}

    /* 3) Compact chat launcher */
    .qlauncher{gap:9px !important}
    .qav{width:56px !important;height:56px !important;padding:2.5px !important}
    .qav > span{width:12px !important;height:12px !important;bottom:3px !important;inset-inline-start:3px !important;border-width:2.5px !important}
    .qbubble{font-size:13px !important;padding:9px 14px !important;border-radius:14px 14px 3px 14px !important}
  }
  @media(max-width:480px){
    h1{font-size:29px !important}
    h2{font-size:24px !important}
    .footer-cols{grid-template-columns:1fr 1fr !important}
  }
  .navlink{position:relative}
  .navlink::after{content:"";position:absolute;bottom:-6px;inset-inline-start:0;width:0;height:2px;border-radius:2px;background:#1D6AFF;transition:width .3s}
  .navlink:hover::after{width:100%}
  .navlink:hover{color:#0A1733}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  @keyframes floatyB{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes qPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 14px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
  @keyframes qPanelIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes qBubbleIn{from{opacity:0;transform:translateX(14px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes qDot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
  .qlauncher{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .qlauncher:hover{transform:translateY(-3px) scale(1.03)}
  .qbubble{animation:qBubbleIn .5s cubic-bezier(.22,1,.36,1) both}
  .qpanel{animation:qPanelIn .42s cubic-bezier(.22,1,.36,1) both}
  .qsend:hover{transform:scale(1.06)}
  .qchip:hover{background:#E9F8F1 !important;border-color:#13C04D !important;color:#0B7A53 !important}
  .qchip-hi:hover{background:#0E9E44 !important;border-color:#0E9E44 !important;color:#fff !important;transform:translateY(-1px)}
  @keyframes pedgeShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @keyframes pedgeBreathe{0%,100%{opacity:.45}50%{opacity:.9}}
  .pedge{position:absolute;left:0;width:100%;height:76px;pointer-events:none;z-index:0;background-repeat:no-repeat;background-size:150% 100%;filter:blur(50px);-webkit-mask-image:radial-gradient(70% 56% at 50% 50%,#000 42%,transparent 85%);mask-image:radial-gradient(70% 56% at 50% 50%,#000 42%,transparent 85%);animation:pedgeShift 40s ease-in-out infinite,pedgeBreathe 20s ease-in-out infinite}
  .pedge-top{top:-66px;background-image:linear-gradient(90deg,transparent,rgba(29,106,255,.62),rgba(56,189,248,1),rgba(16,185,129,1),rgba(29,106,255,.62),transparent)}
  @keyframes sealGlow{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.06);opacity:1}}
  @keyframes chartDraw{to{stroke-dashoffset:0}}
  .step-card{opacity:0;transform:translateY(54px)}
  .step-card.in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
  .step-inner{will-change:transform;transition:box-shadow .4s ease}
  .step-card:hover .step-inner{box-shadow:0 34px 70px -34px rgba(10,23,51,.4)}
  .step-card.in .step-line{animation:chartDraw 1.5s cubic-bezier(.4,0,.2,1) .25s forwards}
  @keyframes f1{0%{opacity:0;transform:translateX(12px)}6%{opacity:1;transform:translateX(0)}90%{opacity:1;transform:translateX(0)}97%{opacity:0;transform:translateX(12px)}100%{opacity:0}}
  @keyframes f2{0%,16%{opacity:0;transform:translateX(12px)}24%{opacity:1;transform:translateX(0)}90%{opacity:1;transform:translateX(0)}97%{opacity:0;transform:translateX(12px)}100%{opacity:0}}
  @keyframes fbadge{0%,40%{opacity:0;transform:translateY(8px) scale(.9)}50%{opacity:1;transform:translateY(0) scale(1)}90%{opacity:1}97%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:0}}
  @keyframes numA{0%,38%{opacity:1}50%,88%{opacity:0}100%{opacity:1}}
  @keyframes numB{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
  @keyframes calcThumb{0%{left:22%}50%{left:78%}100%{left:22%}}
  @keyframes calcFill{0%{width:22%}50%{width:78%}100%{width:22%}}
  @keyframes payScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
  .pay-scroll{animation:payScroll 12s linear infinite}
  .pay-clip:hover .pay-scroll{animation-play-state:paused}
  .prod-scroll{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px 4px 28px;-ms-overflow-style:none;scrollbar-width:none}
  .prod-scroll::-webkit-scrollbar{display:none}
  .prod-card{scroll-snap-align:center;flex:0 0 372px;position:relative;border-radius:24px;overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}
  .prod-card:hover{transform:translateY(-8px)}
  .prod-card:hover .prod-line{stroke-dashoffset:0 !important}
  .prod-card:hover .prod-pill{box-shadow:0 18px 38px -18px rgba(10,23,51,.4)}
  .prod-arrow{width:52px;height:52px;border-radius:50%;border:none;background:#1D6AFF;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;box-shadow:0 14px 30px -10px rgba(29,106,255,.55);transition:transform .25s,background .25s;flex-shrink:0}
  .prod-arrow:hover{transform:scale(1.08);background:#1556d6}
  [data-reveal] .seal-img{transform:scale(.86) rotate(-6deg);opacity:0;transition:transform 1.1s cubic-bezier(.22,1,.36,1) .15s,opacity 1.1s ease .15s}
  [data-reveal].in .seal-img{transform:scale(1) rotate(0);opacity:1}
  @keyframes morphCard{
    0%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.66);filter:blur(6px);width:var(--dot);border-radius:50%;background-color:rgba(255,255,255,0);box-shadow:0 0 0 0 rgba(10,23,51,0);border-color:rgba(234,240,251,0)}
    5%{opacity:1}
    25%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0);width:var(--dot);border-radius:50%;background-color:rgba(255,255,255,0);box-shadow:0 0 0 0 rgba(10,23,51,0);border-color:rgba(234,240,251,0)}
    39%{transform:translate(0,0) scale(1);filter:blur(0);width:var(--w);border-radius:16px;background-color:rgba(255,255,255,1);box-shadow:0 24px 46px -18px rgba(10,23,51,.32);border-color:rgba(234,240,251,1)}
    84%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0);width:var(--w);border-radius:16px;background-color:rgba(255,255,255,1);box-shadow:0 24px 46px -18px rgba(10,23,51,.32);border-color:rgba(234,240,251,1)}
    92%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0);width:var(--dot);border-radius:50%;background-color:rgba(255,255,255,0);box-shadow:0 0 0 0 rgba(10,23,51,0);border-color:rgba(234,240,251,0)}
    100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.66);filter:blur(6px);width:var(--dot);border-radius:50%}
  }
  @keyframes morphLabel{
    0%,40%{opacity:0;transform:translateX(10px)}
    52%,84%{opacity:1;transform:translateX(0)}
    91%,100%{opacity:0;transform:translateX(10px)}
  }
  @keyframes badgePulse{
    0%,24%{box-shadow:0 0 0 0 var(--ring)}
    40%{box-shadow:0 0 0 8px rgba(0,0,0,0)}
    100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
  }
  .morphcard{box-sizing:border-box;display:flex;align-items:center;gap:11px;height:56px;padding:0 9px;overflow:hidden;border:1px solid transparent;background:#fff;will-change:width,transform,opacity,filter}
  .morphcard .mc-badge{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;animation:badgePulse 11.5s ease-in-out infinite}
  .morphcard .mc-text{white-space:nowrap;animation:morphLabel 11.5s ease-in-out infinite}
  .partners-row{position:relative}
  .partners-row .scan-blue,.partners-row .scan-green{position:absolute;top:50%;width:96px;height:96px;margin-top:-48px;border-radius:50%;filter:blur(1px);opacity:0;pointer-events:none;z-index:5;will-change:left,opacity}
  .partners-row .scan-blue{background:radial-gradient(circle,rgba(29,106,255,.34) 0%,rgba(29,106,255,.18) 32%,rgba(29,106,255,.06) 55%,transparent 74%)}
  .partners-row .scan-green{background:radial-gradient(circle,rgba(16,185,129,.36) 0%,rgba(16,185,129,.19) 32%,rgba(16,185,129,.06) 55%,transparent 74%)}
  .partners-row .plogo{opacity:0;transform:translateY(12px) scale(.94);filter:grayscale(1);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),filter .6s ease}
  .partners-row .plogo.on{opacity:.62;transform:none}
  .partners-row .plogo.flash{opacity:1 !important;filter:drop-shadow(0 0 13px rgba(29,106,255,.85)) grayscale(0) !important;transform:scale(1.08) !important}
  .partners-row .plogo:hover{opacity:1 !important;filter:grayscale(0) !important}
  .partners-row .ptitle{opacity:0;clip-path:inset(0 100% 0 0);will-change:clip-path,opacity}