:root{--red:#c72030;--turquoise:#009fb2}*{box-sizing:border-box}html{min-height:100%;background:#075b67}body{margin:0;min-height:100vh;color:#fff;font-family:Almarai,Tahoma,Arial,sans-serif;font-size:16px;line-height:1.7;background:radial-gradient(ellipse at 0% 10%,#009fb2 0%,transparent 48%),radial-gradient(ellipse at 100% 32%,#c72030 0%,transparent 52%),radial-gradient(ellipse at 0% 88%,#008fa3 0%,transparent 53%),linear-gradient(155deg,#006573 0%,#163d49 48%,#871f30 100%);background-attachment:fixed}main{width:min(calc(100% - 36px),660px);margin:0 auto;padding:46px 0 35px}header{text-align:center;padding:5px 0 32px}.logo{display:block;width:150px;height:150px;object-fit:contain;border-radius:50%;margin:0 auto 17px;box-shadow:0 10px 45px #002a3640}h1{font-weight:800;font-size:36px;line-height:1.5;margin:0;text-shadow:0 2px 12px #001f3940}header p{font-size:15px;letter-spacing:3px;margin:5px 0 0}h2{font-size:35px;font-weight:400;text-align:center;line-height:1.5;margin:30px 0 21px}.links{display:grid;gap:21px}.pill{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;gap:8px;align-items:center;min-height:91px;padding:13px 16px;color:#fff;text-decoration:none;border:1px solid #ffffffc9;border-radius:60px;background:linear-gradient(110deg,#ffffff2e,#ffffff25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #ffffff15,0 5px 22px #001c2710;transition:background .18s,transform .18s;text-shadow:0 1px 5px #00263265;-webkit-tap-highlight-color:transparent}.pill:hover{background:#ffffff38;transform:translateY(-2px)}.pill:focus-visible{outline:3px solid white;outline-offset:5px;background:#ffffff38}.button-logo{display:block;width:58px;height:58px;border-radius:50%;object-fit:contain;border:1px solid #ffffffbd}.label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:22px;font-weight:400;text-align:center;min-width:0;line-height:1.7}.chevron{font-family:Arial,sans-serif;font-size:37px;line-height:1;font-weight:400;flex-shrink:0}.platform{filter:brightness(0) invert(1);flex-shrink:0}.customer{border-width:1.5px;background:linear-gradient(110deg,#c7203070,#ffffff24)}.customer .label{font-size:19px}.customer bdi{display:block;font-weight:700;letter-spacing:1px;font-size:22px}.customer small{display:block;font-size:13px;color:#fff}.customer .spacer{display:none}.customer{grid-template-columns:minmax(0,1fr) 58px;min-height:108px}.customer .label{padding-right:58px}footer{text-align:center;font-size:14px;padding-top:38px;opacity:.88}@media(min-width:760px){main{padding-top:60px}.logo{width:170px;height:170px}header{padding-bottom:38px}h1{font-size:42px}.pill{min-height:105px;padding:16px 19px;grid-template-columns:66px minmax(0,1fr) 66px}.button-logo{width:66px;height:66px}.label{font-size:26px}.customer{grid-template-columns:minmax(0,1fr) 66px}.customer .label{padding-right:66px;font-size:22px}.customer bdi{font-size:24px}.links{gap:26px}h2{font-size:42px;margin:37px 0 24px}}@media(max-width:380px){main{width:calc(100% - 28px);padding-top:30px}.pill{padding:12px 12px;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px;min-height:80px}.button-logo{width:44px;height:44px}.label{font-size:18px;gap:8px}.customer{grid-template-columns:minmax(0,1fr) 44px}.customer .label{padding-right:44px;font-size:17px}.customer bdi{font-size:20px}.platform{width:21px;height:21px}h1{font-size:31px}.chevron{font-size:29px}}@media(prefers-reduced-motion:reduce){.pill{transition:none}.pill:hover{transform:none}}

/* Night skyline: turquoise light at left, brand red at right. */
html{background:#321a32}body{position:relative;isolation:isolate;background:radial-gradient(ellipse at 0% 40%,#087f94 0%,transparent 60%),radial-gradient(ellipse at 100% 70%,#c72030 0%,transparent 58%),linear-gradient(145deg,#063044 0%,#36182f 50%,#7b162d 100%);background-attachment:fixed}body:before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:1100px;background-image:linear-gradient(180deg,transparent 0%,transparent 66%,#301b3200 78%,#301b32 100%),url('night-skyline.png');background-size:100% 100%,cover;background-position:center top;background-repeat:no-repeat;pointer-events:none}main{padding-top:80px}header{display:flex;align-items:center;justify-content:center;min-height:275px;padding:0 0 35px}header h1{margin:0;width:100%;line-height:0}.horizontal-logo{display:block;width:98%;max-width:600px;height:auto;margin:auto;filter:drop-shadow(0 3px 12px #07122290)}.pill{background:linear-gradient(110deg,#ffffff36,#ffffff27);border-color:#ffffffe0;box-shadow:inset 0 1px 0 #ffffff2a,0 8px 25px #06102416;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}.customer{background:linear-gradient(110deg,#ffffff3b,#ffffff2c)}.pill:hover{background:#ffffff49}@media(min-width:760px){main{padding-top:110px}header{min-height:330px;padding-bottom:40px}body:before{height:1200px;background-size:100% 100%,cover;background-position:center 35%}}@media(max-width:600px){body:before{height:900px;background-size:100% 100%,auto 900px}main{padding-top:62px}header{min-height:258px;padding-bottom:30px}}@media(max-width:380px){main{padding-top:50px}header{min-height:240px;padding-bottom:25px}.horizontal-logo{width:100%}body:before{height:830px;background-size:100% 100%,auto 830px}}
/* Mobile button proportions follow the supplied 720px-wide reference. */
@media(max-width:759px){
  main{width:91.666667%;max-width:660px}
  .links{gap:clamp(18px,5vw,36px)}
  .pill{
    --button-logo-size:clamp(37px,10.555556vw,76px);
    grid-template-columns:var(--button-logo-size) minmax(0,1fr) var(--button-logo-size);
    gap:clamp(4px,1.111111vw,8px);
    min-height:clamp(56px,15.555556vw,112px);
    padding:clamp(8px,2.222222vw,16px) clamp(9px,2.5vw,18px);
  }
  .button-logo{width:var(--button-logo-size);height:var(--button-logo-size)}
  .label{font-size:clamp(16px,4.444444vw,28px);line-height:1.5;gap:clamp(6px,1.666667vw,12px)}
  .chevron{font-size:clamp(26px,7.222222vw,44px)}
  .platform{width:clamp(18px,5vw,30px);height:clamp(18px,5vw,30px)}
  .customer{grid-template-columns:minmax(0,1fr) var(--button-logo-size);padding-block:5px}
  .customer .label{padding-right:var(--button-logo-size);font-size:clamp(14px,3.888889vw,24px);line-height:1.3}
  .customer bdi{font-size:clamp(16px,4.444444vw,28px)}
  .customer small{font-size:clamp(12px,3.333333vw,18px)}
}

/* Brand description below the horizontal logo. */
header{flex-direction:column}
header .brand-tagline{color:#fff;font-size:clamp(14px,3.6vw,18px);font-weight:400;line-height:1.8;letter-spacing:normal;margin:16px 0 0;text-align:center}