/* Al Radwan — shared styles for inner pages (products, contact).
   Mirrors the design tokens used by index.html so pages stay visually consistent. */
:root{
  --abyss:#071a21; --deep:#0c3540;
  --ground:#eaf1f2; --surface:#ffffff; --surface-2:#f3f8f8;
  --ink:#0a2129; --ink-soft:#4a636a; --line:#d8e4e5;
  --glacier:#127c8c; --glacier-deep:#0b5765; --ice:#cfe1e3;
  /* brand palette */
  --brand-yellow:#FCCC09; --brand-yellow-deep:#E0B400;
  --brand-red:#DA2127; --brand-red-deep:#B0181D;
  /* accent alias: red carries actions + light-surface accents (yellow fails contrast on white) */
  --coral:var(--brand-red); --coral-deep:var(--brand-red-deep);
  --steel:#7c9aa0;
  --shadow:0 1px 2px rgba(7,26,33,.04),0 12px 34px -18px rgba(7,26,33,.28);
  --shadow-lg:0 1px 2px rgba(7,26,33,.05),0 40px 80px -40px rgba(7,26,33,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Tajawal",system-ui,"Segoe UI",sans-serif;background:var(--ground);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Reem Kufi","Tajawal",serif;font-weight:600;line-height:1.25;text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--coral);color:#fff}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px;border-radius:4px}
.wrap{width:min(1400px,94vw);margin-inline:auto}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--glacier);font-weight:500}

/* header (solid variant for inner pages) */
/* transparent over the dark page-head, frosted once scrolled (matches homepage) */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,backdrop-filter .35s}
header.scrolled{background:color-mix(in oklab,var(--ground) 66%,transparent);backdrop-filter:blur(16px) saturate(1.35);border-bottom-color:var(--line)}
/* top state: light controls over the dark banner */
header .brand .name{color:#fff}
header .nav-links a{color:rgba(226,242,244,.85)}
header .nav-links a:hover{color:#fff}
header .nav-links a.active{color:#fff}
header .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#eaf6f7}
header .langs{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
header .langs a{color:rgba(226,242,244,.8)}
header .langs a.on{background:#fff;color:var(--abyss)}
/* scrolled state: themed controls on the frosted bar */
header.scrolled .brand .name{color:var(--ink)}
header.scrolled .nav-links a{color:var(--ink-soft)}
header.scrolled .nav-links a:hover,header.scrolled .nav-links a.active{color:var(--ink)}
header.scrolled .burger{background:var(--surface);border-color:var(--line);color:var(--ink)}
header.scrolled .langs{background:var(--surface-2);border-color:var(--line)}
header.scrolled .langs a{color:var(--ink-soft)}
header.scrolled .langs a.on{background:var(--ink);color:var(--ground)}
.nav{display:flex;align-items:center;gap:2rem;height:74px}
.brand-logo{height:52px;width:auto;display:block}
.nav-links{display:flex;gap:1.7rem;font-size:.95rem;font-weight:500}
.nav-links a{position:relative;padding:.3rem 0;color:var(--ink-soft);transition:color .2s}
.nav-links a::after{content:"";position:absolute;bottom:-2px;right:0;width:0;height:2px;background:var(--coral);transition:width .28s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after,.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:1rem}
.langs{display:flex;gap:.15rem;font-family:"IBM Plex Mono",monospace;font-size:.7rem;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.25rem}
.langs a{display:inline-flex;align-items:center;gap:.32rem;padding:.2rem .55rem;border-radius:999px;color:var(--ink-soft);letter-spacing:.05em}
.langs .flag{font-size:.9rem;line-height:1}
.langs a.on{background:var(--ink);color:var(--ground)}
.burger{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:none;place-items:center;cursor:pointer;color:var(--ink);flex:none}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:"Tajawal";font-weight:700;font-size:.95rem;padding:.7rem 1.35rem;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .25s,background .2s}
.btn:active{transform:translateY(1px)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 22px -10px var(--coral)}
.btn-coral:hover{background:var(--coral-deep)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--glacier);color:var(--glacier)}

/* page hero */
.page-head{position:relative;background:radial-gradient(120% 130% at 18% 120%,#12586a 0%,#0b3644 36%,#082733 64%,#05181f 100%);color:#e9f5f6;padding:calc(74px + clamp(3rem,6vw,5rem)) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.page-head h1{font-size:clamp(2.1rem,4.6vw,3.4rem);color:#f3fbfb;margin:.9rem 0 .8rem}
.page-head p{color:#bcd6da;max-width:52ch}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:#8fb3b8}
.crumbs a:hover{color:var(--brand-yellow)}

section{padding:clamp(3rem,6vw,5rem) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.2rem}
.h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600}

/* filter chips */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.chip{font-family:"Tajawal";font-size:.92rem;font-weight:500;padding:.5rem 1.15rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--glacier);color:var(--glacier)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.chip .n{font-family:"IBM Plex Mono",monospace;font-size:.72rem;opacity:.7;margin-inline-start:.35rem}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .25s,border-color .2s}
.card[hidden]{display:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--glacier)}
.card:hover .card-img{transform:scale(1.05)}
.card-img{aspect-ratio:2/1;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--ice);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card-body{padding:1rem 1.15rem 1.25rem}
.card h3{font-size:1.05rem;font-weight:700;font-family:"Tajawal";color:var(--ink)}
.tag{display:inline-block;font-size:.72rem;font-weight:500;margin-top:.5rem;padding:.12rem .6rem;border-radius:999px;border:1px solid var(--line)}
.tag.fresh{color:var(--glacier);background:var(--surface-2)}
.tag.frozen{color:#2f6d8a;background:#eef5f8}
.empty{padding:3rem;text-align:center;color:var(--ink-soft);grid-column:1/-1}

/* footer */
footer{background:var(--abyss);color:#a7c6cb;padding:4rem 0 2rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-logo{height:66px;width:auto;display:block;margin-bottom:.3rem}
.foot-brand p{margin-top:1rem;max-width:34ch;font-size:.92rem;color:#8fb3b8}
.foot-col h5{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#5f868c;margin-bottom:1.1rem}
.foot-col a{display:block;color:#c3dee2;font-size:.95rem;padding:.28rem 0;transition:color .2s}
.foot-col a:hover{color:var(--brand-yellow)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.8rem;font-size:.82rem;color:#6f9298}
.foot-note{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.08em;color:var(--brand-yellow);border:1px dashed rgba(252,204,9,.45);padding:.35rem .8rem;border-radius:8px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:60;background:var(--abyss);color:#eaf6f7;display:flex;flex-direction:column;padding:2rem;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);visibility:hidden}
.mmenu.open{transform:none;visibility:visible}
.mmenu a{font-family:"Reem Kufi";font-size:1.6rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mmenu .close{align-self:flex-start;font-size:2rem;background:none;border:none;color:#fff;cursor:pointer;margin-bottom:1.5rem}

@media (max-width:920px){
  .nav-links{display:none}
  .burger{display:grid}
  .grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:1rem}
  /* keep ALL languages tappable on phones — just make them compact */
  .langs{gap:.05rem;padding:.2rem}
  .langs a{padding:.18rem .42rem;font-size:.66rem;gap:.22rem}
  .langs .flag{font-size:.78rem}
  .foot-top{grid-template-columns:1fr}
}

/* language bubble: pushed to the far end of the nav row + animated */
.nav-right{margin-inline-start:auto}
.langs{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.langs:hover{box-shadow:0 6px 18px -8px rgba(7,26,33,.35)}
.langs a{position:relative;transition:color .25s ease,background .3s ease,transform .22s cubic-bezier(.2,.7,.2,1)}
.langs a:hover{transform:translateY(-1.5px)}
.langs a:active{transform:translateY(0) scale(.96)}
.langs .flag{transition:transform .28s cubic-bezier(.2,.7,.2,1);display:inline-block}
.langs a:hover .flag{transform:scale(1.22) rotate(-8deg)}
.langs a.on{animation:langPop .34s cubic-bezier(.2,.9,.3,1.25)}
@keyframes langPop{0%{transform:scale(.86)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.langs a,.langs .flag{transition:none}.langs a.on{animation:none}}