/* ==== TheNibras "Deep Harbour" tokens, from thenibras-brand-guidelines.html (v3). ==== */
:root{
  --navy:#0C1F33; --navy2:#16344F; --blue:#2C6B99; --blueLt:#7FB3D5;
  --beige:#DCCFBC; --grey:#E6EAEF; --grey2:#C6CED8;
  --serif:'Times New Roman', Times, 'Liberation Serif', Tinos, serif;
  --arabic:'Cairo', sans-serif;
}
[data-theme="light"]{
  --bg:#ffffff; --surface:var(--grey); --surface-2:var(--beige);
  --ink:#101820; --ink-soft:#43505E; --ink-faint:#5F6B78;
  --line:#E2E6EB; --line-strong:var(--grey2);
  --head:var(--navy); --accent:var(--blue); --frame:#101820;
}
[data-theme="dark"]{
  --bg:#0A1826; --surface:#12293E; --surface-2:#1B2A33;
  --ink:#E6EDF4; --ink-soft:#9FB2C4; --ink-faint:#7E93A6;
  --line:#1A2C3C; --line-strong:#22384B;
  --head:#E6EDF4; --accent:#7FB3D5; --frame:#050c13;
}
@font-face{font-family:"Cairo";font-weight:400;font-display:swap;src:url(/assets/fonts/cairo-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";font-weight:400;font-display:swap;src:url(/assets/fonts/cairo-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cairo";font-weight:600;font-display:swap;src:url(/assets/fonts/cairo-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";font-weight:600;font-display:swap;src:url(/assets/fonts/cairo-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cairo";font-weight:700;font-display:swap;src:url(/assets/fonts/cairo-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";font-weight:700;font-display:swap;src:url(/assets/fonts/cairo-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink-soft);font-family:var(--serif);font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
html[data-lang=ar] body,html[data-lang=ar] h1,html[data-lang=ar] h2,html[data-lang=ar] h3,html[data-lang=ar] .btn,html[data-lang=ar] button,html[data-lang=ar] .wordmark{font-family:var(--arabic)}
html[data-lang=ar] body{line-height:1.9}
i,em,cite,address,dfn,var{font-style:normal}
html[data-lang=en] .ar,html[data-lang=ar] .en{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--serif);color:var(--head);font-weight:700;letter-spacing:-.015em;line-height:1.14;text-wrap:balance}
html[data-lang=ar] h1,html[data-lang=ar] h2,html[data-lang=ar] h3{letter-spacing:0;line-height:1.4}
h2{font-size:clamp(29px,3.3vw,43px);margin:18px 0 15px}
h3{font-size:23px}
section{padding:104px 0;position:relative}
section + section{border-top:1px solid var(--line)}
:focus-visible{outline:3px solid var(--blueLt);outline-offset:3px}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:#fff;color:var(--navy);padding:10px 14px;z-index:100}
.skip:focus{inset-inline-start:12px}

.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";height:1px;width:44px;background:var(--accent);opacity:.45}
html[data-lang=ar] .eyebrow{letter-spacing:0;font-size:14px;text-transform:none}
.lede{font-size:18px;color:var(--ink-soft);max-width:58ch;margin-top:6px}

/* buttons: square, serif, weight 700, 50px min height (brand button rules) */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 30px;min-height:50px;font-size:15.5px;line-height:1.25;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:0;transition:.22s;font-family:var(--serif);text-align:center;background:none;color:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--head)}
[data-theme="dark"] .btn-primary{color:#0A1826}
[data-theme="dark"] .btn-primary:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-onDark:hover{background:#fff;color:var(--navy)}
.on-navy .btn-primary{background:var(--blue);color:#fff}
.on-navy .btn-primary:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:10px 22px;min-height:42px;font-size:14.5px}
.theme-toggle{background:transparent;border:1px solid var(--line-strong);width:42px;height:42px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;border-radius:0}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}
.badge{display:inline-block;line-height:0;transition:opacity .2s}
.badge:hover{opacity:.85}
.badge img{height:52px;width:auto}

/* header */
header.top{position:sticky;top:0;z-index:60;background:var(--grey);border-bottom:1px solid var(--grey2)}
[data-theme="dark"] header.top{background:var(--surface);border-bottom-color:var(--line-strong)}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 32px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:32px;height:auto}
.brand-name{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--head);letter-spacing:-.01em;line-height:1}
html[data-lang=ar] .brand-name{font-family:var(--arabic)}
.mark.md{display:none}
[data-theme="dark"] .mark.ml{display:none}
[data-theme="dark"] .mark.md{display:block}
.nav-links{display:none;gap:26px;margin-inline-start:10px}
.nav-links a{font-size:16px;color:var(--ink-soft);position:relative;padding:3px 0}
.nav-links a::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;height:1.5px;width:0;background:var(--accent);transition:.25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.tools{display:flex;align-items:center;gap:10px}
@media(min-width:860px){.nav-links{display:flex}}

/* hero */
.hero{padding:0;background:linear-gradient(148deg,var(--navy) 0%,var(--navy2) 52%,var(--blue) 100%);color:#fff;overflow:hidden;border-top:none!important}
.hero::after{content:"";position:absolute;inset-inline-end:-12%;top:-32%;width:660px;height:660px;border-radius:50%;background:radial-gradient(circle,rgba(127,179,213,.28),transparent 62%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-top:64px;padding-bottom:72px}
.hero .eyebrow{color:var(--blueLt)}
.hero .eyebrow::after{background:var(--blueLt)}
.hero h1{color:#fff;font-size:clamp(37px,6.4vw,62px);margin:22px 0 24px;letter-spacing:-.022em;line-height:1.06}
html[data-lang=ar] .hero h1{line-height:1.3;letter-spacing:0}
.hero .sub{font-size:19px;color:#CFDCE8;max-width:46ch;margin-bottom:6px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.facts{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;border-top:1px solid rgba(255,255,255,.22)}
.facts li{padding:18px 16px 18px 0;padding-inline:0 16px;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px;color:#A8BED2;line-height:1.45}
.facts b{display:block;font-size:26px;color:#fff;font-weight:700;line-height:1.2;margin-bottom:2px}
.hero-visual{position:relative;max-width:520px;width:100%;margin:0 auto;aspect-ratio:1/1.12}
.hero-visual .phone{position:absolute;width:56%}
.hero-visual .phone.a{inset-inline-start:2%;top:0}
.hero-visual .phone.b{inset-inline-end:2%;bottom:0;width:52%}
.grid2{display:grid;gap:56px;align-items:center}
@media(min-width:900px){.hero .wrap{padding-top:96px;padding-bottom:104px}.hero .grid2{grid-template-columns:1.15fr .85fr;gap:56px}.facts{grid-template-columns:repeat(4,1fr)}.facts li{border-bottom:0;padding-inline:0 20px}}

/* device frame (hardware silhouette only; the UI around it is square) */
.phone{z-index:1}
.phone .screen{position:relative;aspect-ratio:600/1260;background:var(--frame);border-radius:11.5% / 5.6%;padding:2.6%;box-shadow:0 0 0 1.5px rgba(127,179,213,.28) inset}
.phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:9.4% / 4.5%;background:#0A0A0A;display:block}
.phone .screen::after{content:"";position:absolute;top:2.6%;inset-inline:0;margin-inline:auto;width:27%;height:2.4%;background:var(--frame);border-radius:99px;margin-top:1.4%}

/* why: hairline grid */
.why{background:var(--bg)}
.why h2{max-width:16em}
.why .lede{max-width:56ch}
.pillars{display:grid;margin-top:56px;border-top:1px solid var(--line-strong)}
.pillar{padding:30px 0;border-bottom:1px solid var(--line)}
.pillar .ico{color:var(--accent);margin-bottom:14px}
.pillar h3{margin:0 0 10px}
@media(min-width:860px){.pillars{grid-template-columns:repeat(3,1fr)}.pillar{padding:36px 42px 8px;border-bottom:0;border-inline-start:1px solid var(--line)}.pillar:first-child{padding-inline-start:0;border-inline-start:none}.pillar:last-child{padding-inline-end:0}}

/* features */
.feature{padding:96px 0;background:var(--bg)}
.feature.alt{background:var(--surface)}
.feature .lede{margin-top:6px}
.ticks{margin-top:28px;display:grid;gap:0;border-top:1px solid var(--line-strong)}
.ticks li{position:relative;padding:14px 0;padding-inline-start:30px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:1.15em;width:11px;height:11px;border:2.5px solid var(--accent)}
.visual{display:flex;justify-content:center;align-items:flex-start;gap:5%;padding:8px 0}
.visual .phone{width:min(46%,250px)}
.visual .phone.b{margin-top:12%}
.visual .phone.solo{width:min(62%,300px)}
@media(max-width:899px){.visual{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;justify-content:flex-start;gap:14px;padding:6px 0 10px;margin-inline:-32px;padding-inline:32px;scroll-padding-inline:32px}.visual .phone{flex:0 0 68%;max-width:280px;width:68%;scroll-snap-align:start}.visual .phone.b{margin-top:0}.visual .phone.solo{flex-basis:68%;width:68%;margin-inline:auto;scroll-snap-align:center}.visual::-webkit-scrollbar{display:none}}
@media(min-width:900px){.feature .grid2{grid-template-columns:.9fr 1.1fr}.feature.flip .grid2{grid-template-columns:1.1fr .9fr}.feature.flip .copy{order:2}.feature.flip .visual{order:1}.visual .phone{width:min(45%,280px)}.visual .phone.solo{width:min(58%,300px)}}

/* tracks */
.tracks{background:var(--surface)}
.tracks .head{max-width:640px}
.tl{margin-top:48px;display:grid;border-top:1px solid var(--line-strong)}
.tl li{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:22px;font-weight:700;color:var(--head)}
html[data-lang=ar] .tl li{font-size:19px}
.tl .n{font-size:13px;letter-spacing:.24em;color:var(--accent);font-weight:700;min-width:30px}
@media(min-width:760px){.tl{grid-template-columns:1fr 1fr;column-gap:56px}}

/* partners (navy band) */
.partners{background:var(--navy);color:#fff}
[data-theme="dark"] .partners{background:#12293E}
.partners h2{color:#fff}
.partners .eyebrow{color:var(--blueLt)}
.partners .eyebrow::after{background:var(--blueLt)}
.partners .lede{color:#CFDCE8;font-size:18px}
.pts{margin-top:28px;border-top:1px solid rgba(255,255,255,.28)}
.pts li{position:relative;padding:14px 0;padding-inline-start:30px;border-bottom:1px solid rgba(255,255,255,.14);font-size:17px;color:#E6EDF4}
.pts li::before{content:"";position:absolute;inset-inline-start:2px;top:1.15em;width:11px;height:11px;border:2.5px solid var(--blueLt)}
.partners .cta{margin-top:36px}
.pgrid{border-top:3px solid var(--blueLt)}
.pcell{padding:30px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.pcell h3{color:#fff;margin-bottom:8px}
html[data-lang=ar] .pcell h3{font-size:21px}
.pcell p{color:#CFDCE8;font-size:16.5px}

/* closing CTA (beige) */
.download{background:var(--surface-2);text-align:center}
[data-theme="dark"] .download{background:#1B2A33}
.download .eyebrow{justify-content:center;color:var(--navy)}
.download .eyebrow::before{content:"";height:1px;width:44px;background:currentColor;opacity:.45}
[data-theme="dark"] .download .eyebrow{color:var(--accent)}
.download .eyebrow::after{background:currentColor}
.download .mark{width:60px;margin:0 auto 22px}
.download h2{max-width:16em;margin-inline:auto}
.download p.s{margin:8px auto 0;max-width:34em;color:var(--ink-soft);font-size:18px}
[data-theme="light"] .download p.s{color:#2f3b49}
.download .cta{justify-content:center}

/* footer */
footer{background:var(--navy);color:#A8BED2;padding:64px 0 44px;font-size:15.5px;border-top:none}
[data-theme="dark"] footer{background:#07111b}
footer .row{display:grid;gap:32px}
.wordmark{font-family:var(--serif);font-size:28px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2;display:inline-block}
footer .by{margin-top:14px;color:#CFDCE8}
footer .by .wordmark{font-size:inherit;display:inline;letter-spacing:0}
footer .links{display:flex;flex-wrap:wrap;gap:10px 28px}
footer .links a,footer a.mail{color:#fff;border-bottom:1px solid transparent;padding-bottom:2px}
footer .links a:hover,footer a.mail:hover{border-bottom-color:var(--blueLt)}
footer .fine{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);font-size:14px;line-height:1.75;max-width:70ch}
@media(min-width:860px){footer .row{grid-template-columns:1.2fr 1fr;align-items:start}footer .links{justify-content:flex-end}}
@media(max-width:560px){.wrap,.nav{padding-inline:20px}.visual{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}.btn{width:100%}.nav .btn,.hero .cta .badge{width:auto}section{padding:72px 0}.feature{padding:72px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media(min-width:900px){.partners .grid2{grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}}
[data-theme="light"] .download .btn-ghost{border-color:var(--navy);color:var(--navy)}
[data-theme="light"] .download .btn-ghost:hover{background:var(--navy);color:#fff}
.download .mark{display:block}
.download .mark.md{display:none}
[data-theme="dark"] .download .mark.md{display:block}
[data-theme="dark"] .download .mark.ml{display:none}
footer .fine{max-width:90ch}


/* Shawerni: app icon as brand mark */
.brand img.mark{width:36px;height:36px;border-radius:8px;object-fit:cover;background:#0A0A0A}
.download img.mark{width:60px;height:60px;border-radius:14px;object-fit:cover;margin:0 auto 22px;background:#0A0A0A}
.cta-note{margin-top:16px;font-size:14.5px;color:#A8BED2;max-width:46ch}
.download .cta-note{color:var(--ink-soft);margin-inline:auto}

.reach{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.reach a{color:#fff}
footer .reach a.mail,footer .reach a.wa{color:#fff}
.partners .reach{margin-top:28px}
.partners .reach a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.partners .reach a:hover{border-bottom-color:var(--blueLt)}
.partners .reach .lbl{color:#A8BED2;font-size:14.5px}
footer .reach .lbl{color:#A8BED2;font-size:14.5px}