/* Sadek-IT — layout.css */
.wrap{width:min(1200px,calc(100% - 64px));margin:auto}
.header{position:sticky;top:0;z-index:50;background:#070c14f5;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{font-size:1.7rem;font-weight:850;letter-spacing:-.06em;white-space:nowrap}
.logo span{color:var(--cyan)}
.logo img{width:150px;display:block}
.navlinks{display:flex;align-items:center;gap:26px;font-size:.88rem}
.navlinks>a,.navlinks summary{color:#b9c5d6}
.navlinks>a:hover,.navlinks a[aria-current=page],.navlinks summary:hover{color:var(--cyan)}
.navlinks details{position:relative}
.navlinks summary{cursor:pointer;list-style:none}
.navlinks summary:after{content:"⌄";margin-left:8px}
.dropdown{position:absolute;top:38px;left:-20px;width:260px;padding:12px;background:#101b2a;border:1px solid var(--line);border-radius:12px;box-shadow:0 25px 50px #0008}
.dropdown a{display:block;padding:10px 12px;border-radius:7px}
.dropdown a:hover{background:#20304a}
.navlinks .nav-cta{border:1px solid #465b75;padding:10px 15px;border-radius:8px;color:var(--text)}
.menubtn{display:none;background:none;color:white;border:1px solid var(--line);border-radius:8px;padding:8px 14px}
.hero{padding:72px 0 36px;position:relative}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 20%,#11346266,transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.04fr 1fr;gap:60px;align-items:center}
.hero .lead{font-size:1.12rem;max-width:650px}
.hero-note{display:flex;gap:22px;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.hero-proof{position:relative;padding:14px 0 44px}
.hero-proof .browser{transform:rotate(-2deg)}
.trustline .wrap{display:flex;gap:25px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#b6c2d4;font-size:.9rem}
.section{padding-block:76px}
.section.alt{background:#0a111d;border-block:1px solid #182538}
.section-top{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:44px}
.section-top h2{max-width:700px;margin-bottom:0}
.section-top p{max-width:360px;margin:0}
.grid{display:grid;gap:24px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:start}
.footer{padding:65px 0 22px;border-top:1px solid var(--line);background:#060a11}
.footgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:35px}
.footgrid h3{font-size:.85rem;letter-spacing:0;margin:8px 0 22px}
.footgrid a:not(.logo){display:block;font-size:.82rem;color:#a9b7c9;margin:10px 0}
.footgrid a:hover{color:var(--cyan)}
.footgrid p{font-size:.86rem;max-width:210px;margin-top:18px}
.footbottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:40px;padding-top:22px;font-size:.75rem;color:#8a9bb2}
.pagehero{max-width:100%}
.pagehero h1{font-size:clamp(2.6rem,5vw,4.5rem);max-width:920px;text-wrap:balance;margin-inline:0 auto}
.pagehero .lead{max-width:760px;margin-inline:0 auto}
.pagehero .lead:last-child{margin-bottom:0}
@media (max-width:1050px){.navlinks{gap:15px;font-size:.8rem}}
@media (max-width:1050px){.hero-grid{gap:35px}}
@media (max-width:1050px){.footgrid{grid-template-columns:1.5fr repeat(2,1fr)}}
@media (max-width:1050px){.wrap{width:calc(100% - 48px)}}
@media (max-width:800px){.nav{min-height:74px;flex-wrap:wrap}}
@media (max-width:800px){.menubtn{display:block}}
@media (max-width:800px){.navlinks{display:none;width:100%;padding-bottom:24px;flex-direction:column;align-items:stretch;gap:14px;font-size:.95rem}}
@media (max-width:800px){.navlinks.open{display:flex}}
@media (max-width:800px){.dropdown{position:static;width:100%;margin-top:10px}}
@media (max-width:800px){.hero{padding:46px 0 24px}}
@media (max-width:800px){.hero-grid,.split{grid-template-columns:1fr;gap:35px}}
@media (max-width:800px){.hero-proof{max-width:570px;width:100%;margin:10px auto 0}}
@media (max-width:800px){.section-top{display:block}}
@media (max-width:800px){.section-top p{margin-top:22px}}
@media (max-width:800px){.trustline .wrap{justify-content:start}}
@media (max-width:800px){.footgrid{grid-template-columns:1fr 1fr}}
@media (max-width:800px){.footgrid>div:first-child{grid-column:1/-1}}
@media (max-width:800px){.footbottom{display:block}}
@media (max-width:800px){.footbottom span{display:block;margin-top:8px}}
@media (max-width:520px){.wrap{width:calc(100% - 36px)}}
@media (max-width:520px){.hero h1{font-size:2.65rem}}
@media (max-width:520px){.hero .lead{font-size:1rem}}
@media (max-width:520px){.hero-note{gap:10px;font-size:.78rem}}
@media (max-width:520px){.footgrid{gap:25px}}
.footer .logo img{width:160px;display:block}
.nav .logo img{width:150px;max-height:50px;object-fit:contain}
.hero-capture{display:block}
.hero-capture:hover img{transform:scale(1.018)}
@media (max-width:800px){.section{padding-block:52px}}
@media (max-width:800px){.section-top{margin-bottom:32px}}
@media (max-width:520px){.hero{padding:36px 0 18px}}
@media (max-width:520px){.section{padding-block:42px}}
@media (max-width:520px){.section-top{margin-bottom:24px}}
@media (prefers-reduced-motion:reduce){.hero-capture:hover img{transform:none!important}}
.navlinks .nav-cta:hover{background:#102630;border-color:var(--cyan)}
.split>.network-diagram{padding:26px;margin:0}
.split>.network-diagram .network-sites{grid-template-columns:1fr}
.split>.network-diagram .network-link>span{font-size:0}
.split>.network-diagram .network-link>span:before{content:"↕";font-size:1.5rem}
.split>.network-diagram .network-site{padding:20px}
.split>.network-diagram .network-site ul{font-size:.8rem}
.split>.network-diagram .site-code{float:right}
.split>*{min-width:0}
@media (max-width:520px){.pagehero h1{font-size:clamp(2rem,8vw,2.65rem)}}
.navlinks{font-family:"Source Sans 3",sans-serif}
.logo img{height:auto}
.hero:before{background:none}
.section-top h2{line-height:1.2}
.about-hero .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:90px}
.about-hero h1{font-size:clamp(2.6rem,5vw,4.7rem)}
.about-hero .lead{color:var(--cyan);font-size:1.2rem}
.about-hero .portrait{aspect-ratio:1;max-height:none;object-fit:cover;border-radius:12px;filter:none}
.hero-capture img{transition-duration:.3s}
.footer{background:#080f16}
.footgrid a{padding-block:5px}
@media (max-width:1050px){.about-hero .hero-grid{gap:45px}}
@media (max-width:800px){.about-hero .hero-grid{grid-template-columns:1fr}}
@media (max-width:800px){.about-hero .portrait{max-width:500px}}
@media (max-width:520px){.section-top h2{font-size:1.9rem}}
@media (max-width:520px){.footgrid{gap:26px 18px}}
@media (max-width:520px){.footer a{overflow-wrap:anywhere}}