/* SecureSystems shared stylesheet. One file, all pages, both languages. Direction: pages set / ; AR overrides live at the bottom. */ :root{ --navy:#0E2A47; --panel:#163A5F; --steel:#2E5C8A; --signal:#5B9BD5; --ice:#DCE8F5; --cloud:#F4F8FC; --paper:#FDFDF9; --ink:#12253B; --wa-bg:#E7E2DA; --wa-out:#D9FDD3; --display:'Archivo',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} h1,h2,h3{text-wrap:balance} p{text-wrap:pretty} section[id]{scroll-margin-top:76px} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } body{font-family:var(--body);color:var(--ink);background:var(--cloud);line-height:1.6;font-size:1.0625rem} a{color:inherit} img,svg{max-width:100%} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} /* header: identical layout in both languages (brand start-left, links right) */ header{position:sticky;top:0;z-index:50;background:rgba(14,42,71,.92);backdrop-filter:blur(8px)} .nav{display:flex;align-items:center;justify-content:space-between;height:64px;direction:ltr} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem} .brand img{flex:none} .nav-links{display:flex;align-items:center;gap:26px;list-style:none} .nav-links a{color:var(--ice);text-decoration:none;font-size:.93rem} .nav-links a:hover{color:#fff} .nav-links a[aria-current="page"]{color:#fff;border-bottom:2px solid var(--signal);padding-bottom:3px} .btn{display:inline-block;background:var(--signal);color:var(--navy);font-weight:600;text-decoration:none;padding:.72em 1.4em;border-radius:6px;font-size:.95rem;transition:transform .15s ease,background .15s ease} .btn:hover{background:#7db3e2;transform:translateY(-1px)} .btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--signal);outline-offset:3px} .btn-ghost{background:transparent;color:var(--ice);border:1px solid var(--steel)} .btn-ghost:hover{background:var(--panel);color:#fff} @media (max-width:720px){.nav-links li:not(.nav-cta):not(.nav-lang){display:none}} /* hero */ .hero{background:var(--navy);color:#fff;padding:72px 0 88px;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} h1{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.01em} .hero p.lead{margin:22px 0 32px;color:var(--ice);font-size:1.125rem;max-width:34em} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .hero-slim{padding:64px 0} .hero-slim h1{font-size:clamp(1.9rem,4vw,2.9rem)} /* receipt (home) — the hero centerpiece */ .receipt{background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:clamp(.84rem,.78rem + .35vw,.95rem);width:100%;max-width:420px;margin-inline-start:auto;padding:28px 26px 22px;transform:rotate(1.6deg);box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)} .receipt:hover{transform:rotate(0deg) scale(1.02);box-shadow:0 32px 80px rgba(0,0,0,.45)} .receipt::after{content:"";display:block;height:10px;background: linear-gradient(-45deg,transparent 70%,var(--paper) 71%) 0 0/14px 14px repeat-x, linear-gradient(45deg,transparent 70%,var(--paper) 71%) 0 0/14px 14px repeat-x; margin:14px -26px -22px} .receipt h2{font-family:var(--mono);font-weight:500;font-size:.9rem;text-align:center;letter-spacing:.1em} .receipt .sub{text-align:center;color:var(--steel);font-size:.75rem;margin-bottom:14px} .receipt hr{border:none;border-top:1px dashed #b9c6d4;margin:10px 0} .line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;opacity:0;animation:print .5s ease forwards} .line span:last-child{white-space:nowrap;font-weight:500;font-family:var(--mono);direction:ltr} .line small{display:block;color:var(--steel);font-size:.72rem} .line:nth-child(4){animation-delay:.5s} .line:nth-child(6){animation-delay:1.1s} .line:nth-child(8){animation-delay:1.7s} .total{display:flex;justify-content:space-between;font-weight:600;font-size:1.05rem;color:var(--navy);padding-top:10px;opacity:0;animation:print .5s ease 2.4s forwards} .total span:last-child{font-family:var(--mono);direction:ltr} .receipt .note{margin-top:12px;font-size:.72rem;color:var(--steel);opacity:0;animation:print .5s ease 3s forwards} @keyframes print{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){.line,.total,.receipt .note{opacity:1;animation:none}} @media (max-width:880px){ .hero .wrap{grid-template-columns:1fr;gap:48px} .receipt{margin:0 auto;transform:rotate(1deg);max-width:440px} } /* sections */ section{padding:88px 0} h2.title{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;color:var(--navy);max-width:24em} .section-intro{margin-top:16px;max-width:38em;color:#33506e} /* product cards (home) */ .leaks{background:var(--cloud)} .leak-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px} a.leak{background:#fff;border:1px solid var(--ice);border-radius:10px;padding:30px 28px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease} a.leak:hover{border-color:var(--signal);box-shadow:0 10px 30px rgba(14,42,71,.08);transform:translateY(-2px)} .leak .cost{font-family:var(--mono);font-size:.78rem;color:var(--steel);letter-spacing:.08em;text-transform:uppercase} .leak h3{font-family:var(--display);font-weight:700;font-size:1.22rem;color:var(--navy)} .leak p{color:#33506e;font-size:.98rem} .leak .go{margin-top:auto;align-self:flex-start;display:inline-block;background:var(--navy);color:#fff;font-weight:600;font-size:.92rem;padding:.68em 1.4em;border-radius:6px;transition:background .18s ease,box-shadow .18s ease,transform .18s ease} a.leak:hover .go,a.leak:focus-visible .go{background:var(--steel);box-shadow:0 0 0 2px var(--signal);transform:translateY(-1px)} @media (max-width:760px){.leak-grid{grid-template-columns:1fr}} /* steps */ .how{background:var(--ice)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;counter-reset:step} .step{background:#fff;border-radius:10px;padding:30px 28px} .step h3{font-family:var(--display);font-weight:700;color:var(--navy);font-size:1.1rem;margin-bottom:10px;display:flex;align-items:baseline;gap:10px} .step h3::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--mono);color:var(--signal);font-size:.9rem} .step p{font-size:.97rem;color:#33506e} @media (max-width:760px){.steps{grid-template-columns:1fr}} /* about */ .about{background:#fff} .about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .about p{color:#33506e;margin-top:14px} .about .mark{display:flex;justify-content:center} @media (max-width:760px){.about .wrap{grid-template-columns:1fr}.about .mark{display:none}} /* contact */ .contact{background:var(--navy);color:#fff;text-align:center;padding:96px 0} .contact h2{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(1.9rem,3.8vw,2.8rem)} .contact p{color:var(--ice);margin:18px auto 34px;max-width:34em} .contact .phone{display:block;margin-top:22px;color:var(--ice);font-size:.95rem} .contact .phone a{color:#fff;text-decoration:none;border-bottom:1px solid var(--steel);font-family:var(--mono);direction:ltr;unicode-bidi:embed} /* footer */ footer{background:var(--navy);border-top:1px solid var(--panel);color:#A9C0DB;font-size:.85rem;padding:26px 0} footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} footer a{color:var(--ice);text-decoration:none} /* reveal */ .reveal{opacity:1;transform:none} .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}} /* ---------- product pages ---------- */ .product-hero{background:var(--navy);color:#fff;padding:64px 0} .product-hero .crumb{margin-bottom:20px;font-size:.9rem} .product-hero .crumb a{color:var(--signal);text-decoration:none} .product-hero .crumb a:hover{color:#fff} .product-hero p.lead{margin:20px 0 30px;color:var(--ice);font-size:1.1rem;max-width:36em} .product-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} @media (max-width:880px){.product-grid{grid-template-columns:1fr}} .detail{background:#fff} .detail ul{margin-top:26px;list-style:none;display:grid;gap:16px;max-width:44em} .detail li{padding-inline-start:26px;position:relative;color:#33506e} .detail li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:10px;height:10px;background:var(--signal);border-radius:2px} .detail li strong{color:var(--navy)} /* demo: WhatsApp-style phone */ .demo-wrap{background:var(--ice);padding:88px 0} .demo-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} @media (max-width:880px){.demo-cols{grid-template-columns:1fr}} .demo-note{color:#33506e;max-width:30em;margin-top:14px} .phone{width:min(320px,100%);margin:0 auto;background:var(--wa-bg);border:11px solid var(--navy);border-radius:36px;box-shadow:0 24px 60px rgba(14,42,71,.25);overflow:hidden;position:relative} .phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:84px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);z-index:2} .phone-top{background:var(--panel);color:#fff;padding:20px 16px 12px;display:flex;align-items:center;gap:10px;font-size:.9rem} .phone-top .dot{width:30px;height:30px;border-radius:50%;background:var(--signal);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex:none} .phone-top small{display:block;font-size:.72rem;color:var(--ice)} .chat{padding:16px 12px;min-height:460px;max-height:540px;overflow-y:auto;display:flex;flex-direction:column;gap:8px} .msg{max-width:85%;padding:9px 12px;border-radius:10px;font-size:.9rem;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease} .msg.show{opacity:1;transform:none} .msg.in{background:#fff;align-self:flex-start;border-start-start-radius:2px} .msg.out{background:var(--wa-out);align-self:flex-end;border-start-end-radius:2px} .msg .t{display:block;font-size:.68rem;color:#7a8a99;margin-top:4px;text-align:end} .sys{align-self:center;background:rgba(14,42,71,.08);color:var(--panel);font-size:.75rem;padding:4px 12px;border-radius:12px;opacity:0;transition:opacity .35s ease} .sys.show{opacity:1} .chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-end;justify-content:flex-end;max-width:88%;opacity:0;transition:opacity .35s ease} .chips.show{opacity:1} .chips button{border:1px solid var(--steel);background:#fff;color:var(--navy);padding:7px 15px;border-radius:16px;font-size:.87rem;font-family:inherit;cursor:pointer;transition:background .15s ease,transform .15s ease} .chips button:hover{background:var(--ice);transform:translateY(-1px)} .typing{display:flex;gap:4px;align-self:flex-start;background:#fff;padding:12px 14px;border-radius:10px;border-start-start-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;transition:opacity .25s ease} .typing.show{opacity:1} .typing i{width:7px;height:7px;border-radius:50%;background:#9AAABB;animation:blink 1.2s infinite} .typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s} @keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}} .tick{color:#53BDEB;font-weight:400} .stars{letter-spacing:.15em;color:#E8A33D;font-size:1.05rem} .demo-controls{padding:14px;background:#fff;border-top:1px solid var(--ice);text-align:center} .demo-controls button{border:none;background:var(--navy);color:#fff;padding:.7em 1.5em;border-radius:6px;font-size:.95rem;font-family:inherit;font-weight:600;cursor:pointer;transition:background .15s ease} .demo-controls button:hover{background:var(--panel)} .demo-controls button:disabled{background:var(--steel);cursor:default} /* ---------- Arabic overrides ---------- */ html[lang="ar"]{ --display:'IBM Plex Sans Arabic',system-ui,sans-serif; --body:'IBM Plex Sans Arabic',system-ui,sans-serif; } html[lang="ar"] body{line-height:1.85} html[lang="ar"] h1{font-stretch:normal;letter-spacing:0;font-weight:700;line-height:1.35;font-size:clamp(1.9rem,4.2vw,3rem)} html[lang="ar"] h2.title,html[lang="ar"] .contact h2{font-stretch:normal;font-weight:700;line-height:1.4} html[lang="ar"] .leak .cost{font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:500;font-size:.8rem} html[lang="ar"] .receipt{font-family:var(--body);font-size:clamp(.88rem,.82rem + .35vw,.98rem);transform:rotate(-1.6deg)} html[lang="ar"] .receipt:hover{transform:rotate(0deg) scale(1.02)} html[lang="ar"] .receipt h2{font-family:var(--body);font-weight:700;letter-spacing:0;font-size:1rem} html[lang="ar"] .hero-slim h1{font-size:clamp(1.7rem,3.6vw,2.6rem)}