/* Supporting pages (services, Arabic, case studies). Same tokens and type as the homepage. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#FbFbFa;--bg2:#F1F1EF;--ink:#0B0B0A;--ink2:#33332f;--muted:#8c8c86;--muted2:#bdbdb7;
  --line:#e3e3df;--line2:#cfcfc9;
  --sans:'Switzer',system-ui,sans-serif;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0B0B0A;--bg2:#141413;--ink:#F4F4F2;--ink2:#c7c7c2;--muted:#8c8c86;--muted2:#494946;
  --line:#262624;--line2:#34342f;color-scheme:dark;
}
html{font-size:16px;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bg);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.frame{position:fixed;inset:11px;border:1.5px solid var(--ink);border-radius:15px;z-index:50;pointer-events:none}
.top{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;padding:2.2rem 2.7rem 1.4rem;background:linear-gradient(var(--bg) 72%,transparent)}
.logo{font-weight:800;font-size:1.45rem;letter-spacing:-.05em;line-height:1;display:flex;align-items:center}
.logo .cur{display:inline-block;width:.12em;height:.82em;background:var(--ink);margin-left:.05em;transform:translateY(.05em);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.nav{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}

main{max-width:1100px;margin:0 auto;padding:2.5rem 2.7rem 2rem}
.lbl{font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
h1{font-weight:700;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1;letter-spacing:-.04em;margin:1.1rem 0 1.8rem;max-width:15ch}
.lead{font-size:clamp(1.1rem,1.9vw,1.42rem);line-height:1.45;letter-spacing:-.01em;max-width:780px}
.lead b{font-weight:700}
section{margin-top:5.5rem}
h2{font-weight:700;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.04;letter-spacing:-.03em;margin:.7rem 0 2rem}
h3{font-weight:600;font-size:1.08rem;line-height:1.25;letter-spacing:-.02em}
p{color:var(--ink2);max-width:720px}
p+p{margin-top:1rem}

.meta{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin:2.4rem 0 0;font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.meta b{display:block;margin-top:.3rem;font-size:.95rem;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.grid>div{background:var(--bg);padding:1.7rem 1.6rem}
.grid p{font-size:.93rem;line-height:1.6;margin-top:.55rem}
.grid .ix{display:block;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}

.panel{background:#0B0B0A;color:#F4F4F2;border-radius:24px;padding:3rem 2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
html[data-theme="dark"] .panel{border:1px solid var(--line)}
.panel h3{font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#bdbdb7;margin-bottom:1rem}
.panel.two{grid-template-columns:repeat(2,1fr)}
.dots{list-style:none}
.dots li{font-size:.92rem;line-height:1.55;padding:.55rem 0;border-bottom:1px solid #211f18;display:flex;gap:.65rem;color:#dcd9d0}
.dots li:last-child{border-bottom:none}
.dots li::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;margin-top:.62rem;flex-shrink:0}
.plain.dots li{color:var(--ink2);border-color:var(--line)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--bg);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.13)}
.card img{aspect-ratio:16/11;object-fit:cover;object-position:top center;background:var(--bg2);width:100%}
.card div{padding:1.3rem 1.3rem 1.5rem}
.card .ix{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h3{margin-top:.45rem}
.card span.go{display:block;margin-top:1rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}

.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.brands div{background:var(--bg);padding:1.2rem 1.3rem;font-weight:600;font-size:.95rem}
.brands small{display:block;font-weight:500;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}

.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.shots figure{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--bg2)}
.shots img{width:100%;height:auto}
.shots figcaption{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.8rem 1rem;background:var(--bg);border-top:1px solid var(--line)}

.faq{border-top:1px solid var(--line)}
.faq div{padding:1.5rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:2rem}
.faq p{font-size:.95rem}

.stack{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
.stack div{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.stack span{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:center}

.more{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.more a{border-bottom:1px solid var(--line2);padding-bottom:.2rem}
.more a:hover{border-color:var(--ink)}

.cta{text-align:center;padding:7rem 0 3rem}
.cta h2{font-size:clamp(2.1rem,5vw,3.9rem);margin:0 auto;max-width:14ch}
.cbtn{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.4rem;padding:1.05rem 2.4rem;background:var(--ink);color:var(--bg);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border-radius:40px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.cbtn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.cbtn svg{width:13px;height:13px}
.contact-sub{margin-top:1.6rem;font-size:.62rem;color:var(--muted);letter-spacing:.06em}
.contact-sub a{color:var(--ink);border-bottom:1px solid var(--line)}

footer{margin-top:3rem;padding:2rem 2.7rem 2.6rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:.58rem;color:var(--muted);letter-spacing:.06em;flex-wrap:wrap;gap:1rem}
footer .f-links{display:flex;gap:1.4rem;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* Arabic */
[dir="rtl"] body{font-family:'IBM Plex Sans Arabic',var(--sans)}
[dir="rtl"] .lbl,[dir="rtl"] .meta,[dir="rtl"] .nav,[dir="rtl"] .grid .ix,[dir="rtl"] .panel h3,[dir="rtl"] .card .ix,[dir="rtl"] .more,[dir="rtl"] .cbtn,[dir="rtl"] footer{letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .lead{letter-spacing:0;line-height:1.3}
[dir="rtl"] .nav{align-items:flex-start}
[dir="rtl"] .cbtn svg{transform:scaleX(-1)}
[dir="rtl"] .latin{direction:ltr;unicode-bidi:isolate}


/* Packages */
.pkgs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.pkg{border:1px solid var(--line);border-radius:15px;padding:1.9rem 1.8rem;display:flex;flex-direction:column;background:var(--bg)}
.pkg:first-child{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pkg .ix{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pkg h3{margin-top:.7rem;font-size:1.3rem}
.pkg .price{font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.03em;margin-top:.6rem;line-height:1.1}
.pkg .sub{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}
.pkg p{font-size:.93rem;margin:1rem 0 .6rem}
.pkg .dots li{font-size:.88rem;padding:.4rem 0}
.pkg-cta{margin-top:auto;padding-top:1.3rem;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.pkg-cta:hover{text-decoration:underline}

/* Comparison table */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:15px}
.tbl table{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:start;font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.tbl td{padding:1rem 1.2rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2);line-height:1.55}
.tbl tr:last-child td{border-bottom:none}
.tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}

/* Cost calculator */
.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;border:1px solid var(--line);border-radius:15px;padding:1.6rem;background:var(--bg2)}
.calc label{display:flex;flex-direction:column;gap:.45rem;font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.calc input,.calc select{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:.7rem .8rem;width:100%}
.calc input:focus,.calc select:focus{outline:2px solid var(--ink);outline-offset:1px}
.calc-out{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:.6rem}
.calc-out div{background:var(--bg);padding:1rem;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.calc-out b{display:block;margin-top:.4rem;font-size:1.15rem;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.calc-out .t{background:var(--ink);color:var(--bg)}
.calc-out .t b{color:var(--bg)}
.calc-out small{font-weight:400;font-size:.75rem;opacity:.75}
[dir="rtl"] .calc label,[dir="rtl"] .calc-out div,[dir="rtl"] .pkg .ix,[dir="rtl"] .pkg .sub,[dir="rtl"] .tbl th,[dir="rtl"] .pkg-cta{letter-spacing:0}

@media(max-width:860px){
  .pkgs{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr 1fr}
  .calc-out{grid-template-columns:1fr 1fr}
  .calc-out .t{grid-column:1/-1}
  .tbl td:first-child{white-space:normal}
  .top{padding:1.7rem 1.6rem 1rem}
  main{padding:1.6rem 1.6rem 1rem}
  .grid,.cards,.shots,.panel,.panel.two,.stack,.faq div{grid-template-columns:1fr}
  .brands{grid-template-columns:repeat(2,1fr)}
  .panel{padding:2.2rem 1.6rem;gap:1.2rem}
  footer{padding:1.8rem 1.6rem 2.4rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}