/* Tajalli Tech website — page-level layout (consumes ../../styles.css tokens + components) */

/* ---------- circular photo frames + EPC decor (winners from exploration) ---------- */
.photo-circle{position:relative}
.photo-circle .ph{position:relative;z-index:1;border-radius:50%;overflow:hidden;aspect-ratio:1;width:min(420px,92%);margin:0 auto;box-shadow:var(--shadow-lg)}
.photo-circle .ph img{width:100%;height:100%;object-fit:cover;display:block}
.photo-circle .under{position:absolute;z-index:0;pointer-events:none;opacity:.5;user-select:none}
.photo-circle .over{position:absolute;z-index:2;pointer-events:none;opacity:.8;user-select:none}
@media(max-width:640px){.photo-circle .under,.photo-circle .over{transform:scale(.72)}}

/* page-hero decorative accent */
.pagehero .deco{position:absolute;pointer-events:none;opacity:.3;user-select:none}

/* ---------- screen number chip (for design review conversations) ---------- */
.screen-chip{position:fixed;left:14px;bottom:14px;z-index:99;background:var(--gray-950);color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:600;padding:6px 12px;border-radius:999px;opacity:.82;pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--grad-glow), var(--grad-dawn);margin-top:-77px;padding-top:77px}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(108,168,72,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(108,168,72,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(880px 580px at 72% 28%,#000,transparent 80%);mask-image:radial-gradient(880px 580px at 72% 28%,#000,transparent 80%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:84px}
.hero h1{font-size:var(--text-display);font-weight:var(--weight-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.hero h1 em{font-style:normal;color:var(--green-600);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;background:rgba(252,204,60,.45);z-index:-1;border-radius:3px}
.hero .lead{font-size:var(--text-lead);color:var(--text-muted);max-width:520px;margin:24px 0 30px;text-wrap:pretty}
.hero .acts{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hero .trust{display:flex;align-items:center;gap:20px;margin-top:36px;flex-wrap:wrap}
.hero .trust .ht{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--green-700)}
.hero .trust .ht svg{color:var(--green-500);flex:none}
.hero .trust .sep{width:1px;height:20px;background:var(--border-line)}

/* hero visual */
.hero-visual{position:relative}
.hero-photo{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/4.4;box-shadow:var(--shadow-xl)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.float-card{position:absolute;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--border-line)}
.float-card .fi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--bg-tint);color:var(--green-600)}
.float-card .fi.sun{background:var(--sun-100);color:var(--sun-600)}
.float-card b{font-family:var(--font-display);font-size:17px;color:var(--ink);display:block;line-height:1.15}
.float-card small{font-size:12px;color:var(--text-muted)}
.float-1{top:26px;left:-30px}
.float-2{bottom:-20px;right:22px}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px;padding-top:52px;padding-bottom:64px}
  .hero-visual{max-width:460px;width:100%;margin:0 auto}
  .float-1{left:-6px}
}
@media(max-width:520px){.float-1{display:none}}

/* ---------- trust strip ---------- */
.strip{background:#fff;border-top:1px solid var(--border-line);border-bottom:1px solid var(--border-line)}
.strip .row{display:flex;align-items:center;justify-content:center;gap:36px;padding-top:26px;padding-bottom:26px;flex-wrap:wrap}
.strip .lbl{font-size:11.5px;letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-muted);font-weight:700}
.strip .names{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}
.strip .names span{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--gray-400);transition:color var(--dur-fast)}
.strip .names span:hover{color:var(--green-600)}

/* ---------- generic section ---------- */
.section{padding:var(--section-pad) 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:48px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);margin-top:48px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);margin-top:48px}
@media(max-width:960px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid3,.grid4,.grid2{grid-template-columns:1fr}}

/* ---------- why choose us ---------- */
.why{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
@media(max-width:920px){.why{grid-template-columns:1fr;gap:40px}}
.why .ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;padding:0}
@media(max-width:480px){.why .ticks{grid-template-columns:1fr}}
.why .ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:700;font-size:14.5px;color:var(--ink)}
.why .ticks .t{width:23px;height:23px;border-radius:50%;background:var(--green-500);color:#fff;display:grid;place-items:center;flex:none;margin-top:1px}
.why-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3.4;position:relative}
.why-photo img{width:100%;height:100%;object-fit:cover}
.why-stats{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap}

/* ---------- testimonials / faq ---------- */
.faq-wrap{max-width:760px;margin:48px auto 0}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin-top:48px;align-items:start}
@media(max-width:920px){.contact-grid{grid-template-columns:1fr}}
.cform{background:#fff;border:1px solid var(--border-line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-sm)}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.cform .row2{grid-template-columns:1fr}}
.cform .tt-field{margin-top:16px}
.cform .tt-field:first-child{margin-top:0}
.info-card{background:var(--grad-field);border-radius:var(--radius-lg);padding:34px;color:#fff}
.info-card h3{color:#fff;font-size:22px;margin-bottom:8px}
.info-card>p{color:var(--text-inverse-soft);font-size:14.5px}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.info-row:last-of-type{border-bottom:0}
.info-row .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none;color:var(--sun-300)}
.info-row b{display:block;font-size:14.5px;color:#fff}
.info-row span{color:var(--text-inverse-soft);font-size:13.5px}

/* ---------- services page ---------- */
.pagehero{position:relative;background:var(--grad-field);color:#fff;overflow:hidden;margin-top:-77px;padding-top:77px}
.pagehero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;-webkit-mask-image:radial-gradient(700px 340px at 75% 40%,#000,transparent 80%);mask-image:radial-gradient(700px 340px at 75% 40%,#000,transparent 80%)}
.pagehero .inner{position:relative;padding-top:58px;padding-bottom:64px}
.pagehero h1{color:#fff;font-size:var(--text-h1);max-width:760px}
.pagehero p{color:var(--text-inverse-soft);font-size:var(--text-lead);margin-top:14px;max-width:620px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-inverse-soft);font-weight:600;margin-bottom:18px}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}

/* category tabs (services) */
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:42px 0 8px}
.cat-tabs button{font-family:var(--font-body);font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--border-line);background:#fff;color:var(--gray-600);cursor:pointer;transition:all var(--dur-fast)}
.cat-tabs button:hover{border-color:var(--green-400);color:var(--green-700)}
.cat-tabs button.on{background:var(--green-700);border-color:var(--green-700);color:#fff}

/* footer fab — brand green chat button */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;background:var(--green-500);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-btn);transition:transform var(--dur-fast),background var(--dur-fast)}
.fab:hover{transform:translateY(-3px);background:var(--green-600)}

/* reveal on scroll — visible is the BASE state; .pre is added by JS only to
   below-fold elements, so no-JS, print and exports always show content */
@media (prefers-reduced-motion: no-preference){
  .reveal{transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
  .reveal.pre{opacity:0;transform:translateY(18px)}
}

.tt-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--green-700);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.tt-skip:focus{left:0}
/* Readability: keep long-form prose at a comfortable line length even as the container widens */
.prose p{max-width:72ch}