/* AZATCO — brand styles. Layout utilities come from Tailwind; this file holds the brand motifs.
   Motif: the slanted "blades" of the Z logo (parallelograms, diagonal cuts). */

:root{
  --ink:#08183B; --royal:#1747B8; --azure:#2F6BFF; --gold:#D9A62E; --gold-2:#F0C75A;
  --steel:#E4E9F1; --mist:#F3F5F9; --slate:#44526F;
  --sk:14px;           /* slant used by buttons */
  --d:1;               /* direction multiplier: 1 = LTR, -1 = RTL */
  --ease:cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"]{ --d:-1; }
html{ scroll-padding-top:92px; }
body{ line-height:1.75; }
[dir="rtl"] body{ line-height:1.9; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
[dir="rtl"] .rtl-flip{ transform:scaleX(-1); }

.skip-link{ position:absolute; inset-inline-start:12px; top:-60px; background:var(--gold); color:var(--ink); padding:10px 16px; z-index:100; font-weight:600; }
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--azure); outline-offset:3px; }

/* ---------- Buttons: slanted parallelogram ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; font-family:'Readex Pro',sans-serif; font-weight:600;
  padding:.8rem 1.9rem; font-size:.97rem; line-height:1.2; cursor:pointer; border:0;
  transition:transform .25s var(--ease), background-color .25s, color .25s, filter .25s;
  clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%);
}
[dir="rtl"] .btn{ clip-path:polygon(0 0,calc(100% - var(--sk)) 0,100% 100%,var(--sk) 100%); }
.btn-lg{ padding:1rem 2.3rem; font-size:1.05rem; }
.btn-gold{ background:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 55%,var(--gold) 100%); color:var(--ink); }
.btn-gold:hover{ filter:brightness(1.07); transform:translateY(-2px); }
.btn-blue{ background:var(--royal); color:#fff; }
.btn-blue:hover{ background:#0f3590; transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn-ghost:hover{ background:#fff; color:var(--ink); }
.btn[disabled]{ opacity:.6; cursor:wait; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--steel); transition:box-shadow .3s; }
.site-header.is-scrolled{ box-shadow:0 8px 28px -14px rgba(8,24,59,.35); }
.nav-link{ position:relative; padding:.55rem .95rem; font-weight:500; font-size:.97rem; color:var(--ink); transition:color .2s; }
.nav-link::after{ content:""; position:absolute; inset-inline:.95rem; bottom:.1rem; height:3px; background:var(--gold);
  transform:scaleX(0) skewX(calc(-28deg * var(--d))); transform-origin:center; transition:transform .3s var(--ease); }
.nav-link:hover{ color:var(--royal); }
.nav-link:hover::after, .nav-link.is-current::after{ transform:scaleX(1) skewX(calc(-28deg * var(--d))); }
.nav-link.is-current{ color:var(--royal); font-weight:600; }
.lang-switch{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border:1.5px solid var(--steel); border-radius:999px; font-size:.9rem; font-weight:500; transition:border-color .2s, background .2s; }
.lang-switch:hover{ border-color:var(--royal); background:var(--mist); }

.drawer{ position:fixed; inset:0; z-index:80; background:rgba(8,24,59,.6); }
.drawer[hidden]{ display:none; }
.drawer-panel{ position:absolute; inset-block:0; inset-inline-end:0; width:min(88vw,380px); background:var(--ink); padding:1.5rem; overflow-y:auto; animation:drawer-in .35s var(--ease); }
@keyframes drawer-in{ from{ transform:translateX(calc(100% * var(--d))); } to{ transform:none; } }
.drawer-link{ color:#fff; font-family:'Readex Pro',sans-serif; font-size:1.25rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.14); }
.drawer-link.is-current{ color:var(--gold); }

/* ---------- Hero (home) ---------- */
.hero{ position:relative; min-height:min(90vh,860px); display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--ink); isolation:isolate; }
.hero-slides{ position:absolute; inset:0; z-index:-3; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; }
.hero-slide.is-on{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.07); transition:transform 10s linear; }
.hero-slide.is-on img{ transform:scale(1); }
.hero::before{ content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(100deg,rgba(8,24,59,.96) 0%,rgba(8,24,59,.86) 36%,rgba(8,24,59,.38) 66%,rgba(8,24,59,.08) 100%); }
[dir="rtl"] .hero::before{ background:linear-gradient(-100deg,rgba(8,24,59,.96) 0%,rgba(8,24,59,.86) 36%,rgba(8,24,59,.38) 66%,rgba(8,24,59,.08) 100%); }
.hero-blade{ position:absolute; z-index:-1; inset-block:-10%; inset-inline-start:52%; width:min(9vw,120px);
  background:linear-gradient(180deg,rgba(47,107,255,.55),rgba(23,71,184,.15)); transform:skewX(calc(-28deg * var(--d))); pointer-events:none; }
.hero-blade::after{ content:""; position:absolute; inset-block:0; inset-inline-start:calc(100% + 16px); width:7px; background:linear-gradient(180deg,var(--gold-2),var(--gold)); }
.hero-copy > *{ opacity:0; transform:translateY(22px); animation:rise .9s var(--ease) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.15s; }
.hero-copy > *:nth-child(2){ animation-delay:.35s; }
.hero-copy > *:nth-child(3){ animation-delay:.55s; }
.hero-copy > *:nth-child(4){ animation-delay:.75s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.hero-dots{ position:absolute; inset-block-end:28px; inset-inline-start:0; inset-inline-end:0; }
.hero-dot{ width:34px; height:7px; background:rgba(255,255,255,.4); transform:skewX(calc(-28deg * var(--d))); border:0; padding:0; cursor:pointer; transition:background .3s, width .3s var(--ease); }
.hero-dot.is-on{ background:var(--gold); width:56px; }
.hero-dot:focus-visible{ outline-color:#fff; }

/* ---------- Ticker ---------- */
.ticker{ background:var(--ink); color:#fff; overflow:hidden; border-block:1px solid rgba(255,255,255,.1); }
.ticker-track{ display:flex; width:max-content; animation:tick 60s linear infinite; }
[dir="rtl"] .ticker-track{ animation-name:tick-rtl; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{ display:flex; align-items:center; gap:2rem; padding:1.15rem 2rem 1.15rem 0; white-space:nowrap; font-family:'Readex Pro',sans-serif; font-size:1.05rem; }
[dir="rtl"] .ticker-item{ padding:1.15rem 0 1.15rem 2rem; }
.ticker-item i{ display:block; width:11px; height:11px; background:var(--gold); transform:skewX(calc(-28deg * var(--d))); }
@keyframes tick{ to{ transform:translateX(-50%); } }
@keyframes tick-rtl{ to{ transform:translateX(50%); } }

/* ---------- Service bays (home) ---------- */
.bays{ display:flex; min-height:600px; --bs:64px; }
.bay{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; color:#fff; display:block;
  clip-path:polygon(var(--bs) 0,100% 0,calc(100% - var(--bs)) 100%,0 100%);
  transition:flex-grow .7s var(--ease); }
[dir="rtl"] .bay{ clip-path:polygon(0 0,calc(100% - var(--bs)) 0,100% 100%,var(--bs) 100%); }
.bay + .bay{ margin-inline-start:calc(var(--bs) * -1 + 10px); }
.bay.is-active{ flex-grow:2.6; }
.bay-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.bay.is-active .bay-img{ transform:scale(1.05); }
.bay::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,24,59,.1) 20%,rgba(8,24,59,.92) 100%); transition:background .5s; }
.bay:not(.is-active)::before{ background:linear-gradient(180deg,rgba(8,24,59,.45),rgba(8,24,59,.9)); }
.bay-body{ position:absolute; z-index:2; inset-inline:0; bottom:0; padding:2rem 2.2rem 2.4rem calc(var(--bs) + 1.2rem); }
[dir="rtl"] .bay-body{ padding:2rem calc(var(--bs) + 1.2rem) 2.4rem 2.2rem; }
.bay-inner{ width:min(440px,70vw); }
.bay-ic{ display:inline-grid; place-items:center; width:52px; height:52px; background:var(--gold); color:var(--ink); margin-bottom:1rem;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); }
[dir="rtl"] .bay-ic{ clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%); }
.bay-text{ opacity:0; max-height:0; transform:translateY(12px); transition:opacity .5s .1s, max-height .6s var(--ease), transform .5s .1s; }
.bay.is-active .bay-text{ opacity:1; max-height:260px; transform:none; }
.bay-more{ display:inline-flex; gap:.5rem; align-items:center; color:var(--gold-2); font-weight:600; margin-top:1rem; }
@media (max-width:900px){
  .bays{ flex-direction:column; min-height:0; gap:14px; }
  .bay,[dir="rtl"] .bay{ clip-path:none; min-height:380px; flex:none; }
  .bay + .bay{ margin:0; }
  .bay-body,[dir="rtl"] .bay-body{ padding:1.6rem; }
  .bay-inner{ width:auto; }
  .bay-text{ opacity:1; max-height:none; transform:none; }
}

/* ---------- Slanted media frames ---------- */
.frame{ position:relative; overflow:hidden; clip-path:polygon(12% 0,100% 0,88% 100%,0 100%); }
[dir="rtl"] .frame{ clip-path:polygon(0 0,88% 0,100% 100%,12% 100%); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame-sm{ clip-path:polygon(7% 0,100% 0,93% 100%,0 100%); }
[dir="rtl"] .frame-sm{ clip-path:polygon(0 0,93% 0,100% 100%,7% 100%); }
@media (max-width:1023px){ .frame,[dir="rtl"] .frame,.frame-sm,[dir="rtl"] .frame-sm{ clip-path:none; } }
.gold-edge{ position:relative; }
.gold-edge::after{ content:""; position:absolute; inset-block:0; inset-inline-end:7%; width:6px; background:var(--gold); transform:skewX(calc(-8deg * var(--d))); }
@media (max-width:1023px){ .gold-edge::after{ display:none; } }

/* ---------- Dark sections ---------- */
.on-ink{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.on-ink::before{ content:""; position:absolute; inset:0; background:url('../img/art/grid.svg') center/520px; opacity:.5; pointer-events:none; }
.rule-list > li{ display:flex; gap:1.2rem; padding:1.35rem 0; border-top:1px solid rgba(255,255,255,.16); }
.rule-list > li:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.ic-tile{ flex:none; display:grid; place-items:center; width:50px; height:50px; background:rgba(217,166,46,.16); color:var(--gold-2); }
.ic-tile-light{ background:rgba(23,71,184,.09); color:var(--royal); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--ink); isolation:isolate; }
.cta-band-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.cta-band-shade{ position:absolute; inset:0; z-index:-2; background:linear-gradient(95deg,rgba(8,24,59,.95),rgba(8,24,59,.78) 55%,rgba(8,24,59,.5)); }
[dir="rtl"] .cta-band-shade{ background:linear-gradient(-95deg,rgba(8,24,59,.95),rgba(8,24,59,.78) 55%,rgba(8,24,59,.5)); }
.cta-route{ position:absolute; inset-inline:0; bottom:0; width:100%; height:70%; z-index:-1; fill:none; }
[dir="rtl"] .cta-route{ transform:scaleX(-1); }
.cta-route path{ stroke:var(--gold); stroke-width:3; stroke-dasharray:3 16; stroke-linecap:round; opacity:.8; animation:route 3s linear infinite; }
@keyframes route{ to{ stroke-dashoffset:-57; } }

/* ---------- Page hero ---------- */
.page-hero{ position:relative; display:flex; align-items:center; min-height:420px; padding:5rem 0 6rem; overflow:hidden; background:var(--ink); isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),0 100%); }
[dir="rtl"] .page-hero{ clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px)); }
.page-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.page-hero-shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,rgba(8,24,59,.94),rgba(8,24,59,.72) 55%,rgba(8,24,59,.3)); }
[dir="rtl"] .page-hero-shade{ background:linear-gradient(-100deg,rgba(8,24,59,.94),rgba(8,24,59,.72) 55%,rgba(8,24,59,.3)); }
.crumbs{ display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.75); font-size:.95rem; }
.crumbs a:hover{ color:var(--gold-2); }
.crumb-sep{ width:8px; height:14px; background:var(--gold); transform:skewX(calc(-28deg * var(--d))); }

/* ---------- Services page ---------- */
.chip-row a{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; border:1.5px solid var(--steel); font-weight:500; font-size:.95rem; transition:all .2s; background:#fff; }
.chip-row a:hover{ border-color:var(--royal); color:var(--royal); background:var(--mist); }
.svc{ scroll-margin-top:96px; }
.checks li{ display:flex; gap:.8rem; align-items:flex-start; padding:.55rem 0; border-bottom:1px solid var(--steel); }
.checks svg{ color:var(--royal); flex:none; margin-top:.4rem; }

/* ---------- Sector tiles ---------- */
.tile{ position:relative; overflow:hidden; color:#fff; min-height:420px; display:flex; align-items:flex-end; isolation:isolate;
  clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,44px 100%,0 calc(100% - 44px)); }
[dir="rtl"] .tile{ clip-path:polygon(44px 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%,0 44px); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,24,59,.05) 25%,rgba(8,24,59,.94)); }

/* ---------- About ---------- */
.vm{ position:relative; padding:3rem 2.4rem; color:#fff; }
.value{ position:relative; padding:0 1.6rem; }
@media (min-width:1024px){
  .value + .value::before{ content:""; position:absolute; inset-block:6px; inset-inline-start:0; width:2px; background:var(--steel); transform:skewX(calc(-20deg * var(--d))); }
}

/* ---------- Contact ---------- */
.info-row{ display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 0; border-bottom:1px solid var(--steel); }
.form-panel{ background:#fff; border-top:6px solid var(--gold); box-shadow:0 30px 60px -30px rgba(8,24,59,.35); }
.field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; }
.field input,.field select,.field textarea{ width:100%; border:1.5px solid #cfd7e4; background:#fff; padding:.8rem 1rem; font:inherit; color:var(--ink); transition:border-color .2s, box-shadow .2s; border-radius:2px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--royal); box-shadow:0 0 0 4px rgba(23,71,184,.14); }
.field .opt{ font-weight:400; color:var(--slate); font-size:.85rem; }
.hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ padding:.9rem 1.1rem; font-weight:500; display:none; }
.form-status.ok{ display:block; background:#e8f6ee; color:#0d5b30; border-inline-start:5px solid #1a9b55; }
.form-status.err{ display:block; background:#fdecec; color:#8a1c1c; border-inline-start:5px solid #d23b3b; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#fff; position:relative; }
.site-footer::before{ content:""; position:absolute; inset-inline:0; top:0; height:6px; background:linear-gradient(90deg,var(--royal),var(--azure) 45%,var(--gold)); }
.foot-h{ font-family:'Readex Pro',sans-serif; font-weight:600; font-size:1.05rem; }
.foot-a{ color:rgba(255,255,255,.8); transition:color .2s; }
.foot-a:hover{ color:var(--gold-2); }
.wa-fab{ position:fixed; inset-inline-end:18px; bottom:18px; z-index:60; width:56px; height:56px; display:grid; place-items:center; background:#1faa59; color:#fff; border-radius:50%; box-shadow:0 12px 28px -8px rgba(0,0,0,.45); transition:transform .25s var(--ease); }
.wa-fab:hover{ transform:scale(1.08); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-copy > *{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }
}