:root {
  --navy:#092B67; --blue:#0755B7; --red:#DC1525; --yellow:#FFC21C;
  --ink:#152e53; --muted:#64748b; --pale:#F5F8FC; --line:#e0e7f0;
  --radius:18px; --shadow:0 12px 30px rgba(9,43,103,.07);
}
@media(max-width:600px){.topbar .topbar-right{display:none}.topbar .topbar-inner{justify-content:center;text-align:center;min-height:31px}}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body { margin:0; color:var(--ink); background:#fff; font-family:Inter,"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { color:var(--navy); line-height:1.16; letter-spacing:-.035em; }
h1,h2 { text-wrap:balance; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
svg { flex-shrink:0; }
.icon { display:inline-block; width:22px; height:22px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; border-radius:5px; }
.container { width:min(1240px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; left:20px; top:-90px; z-index:100; padding:12px 20px; border-radius:9px; background:white; box-shadow:var(--shadow); color:var(--navy); font-weight:700; }
.skip-link:focus { top:16px; }
.topbar { background:var(--navy); color:#eaf1fe; font-size:11px; letter-spacing:.005em; }
.topbar-inner { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar-inner>span,.topbar-points,.topbar-points>span { display:flex; align-items:center; gap:8px; }
.topbar .icon { width:14px; height:14px; }
.topbar-points { gap:26px; }
.topbar-right b { color:#9db7e2; padding-inline:14px; }
.header { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.98); border-bottom:1px solid #eaf0f7; box-shadow:0 3px 16px rgba(9,43,103,.035); }
.header-inner { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-icon { display:flex; align-items:center; }
.brand-icon svg { width:48px; height:44px; }
.brand-word { color:var(--blue); font-size:25px; line-height:1; font-weight:850; letter-spacing:-.055em; }
.brand-word>span,.footer-intro strong>span { color:var(--red); }
.brand-word small { display:block; color:var(--navy); font-size:9px; font-weight:650; letter-spacing:.015em; margin-top:6px; }
.nav { display:flex; align-items:center; gap:25px; }
.nav>a:not(.btn),.nav-dropdown>summary { position:relative; display:flex; align-items:center; gap:6px; font-size:12px; color:#18335a; font-weight:720; white-space:nowrap; transition:color .18s; }
.nav>a:not(.btn):hover,.nav-dropdown>summary:hover,.nav>a.active:not(.btn) { color:var(--red); }
.nav>a.active:not(.btn)::after { position:absolute; content:""; left:0; right:0; bottom:-32px; height:3px; border-radius:3px; background:var(--red); }
.nav-dropdown { position:relative; }
.nav-dropdown>summary { list-style:none; cursor:pointer; }
.nav-dropdown>summary::-webkit-details-marker { display:none; }
.nav-dropdown>summary .icon { width:14px; height:14px; transition:transform .2s; }
.nav-dropdown[open]>summary .icon { transform:rotate(180deg); }
.dropdown-menu { position:absolute; top:calc(100% + 25px); left:-20px; width:236px; background:white; border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:0 15px 35px rgba(9,43,103,.13); }
.dropdown-menu a { display:flex; align-items:center; gap:12px; padding:11px 12px; color:#23426d; font-size:12px; font-weight:650; border-radius:7px; }
.dropdown-menu a:hover { background:#eff5ff; color:var(--blue); }
.dropdown-menu .icon { width:18px; height:18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; border:1px solid transparent; border-radius:9px; padding:13px 20px; font-size:13px; font-weight:750; line-height:1.35; text-align:center; transition:background .2s,transform .2s,box-shadow .2s,border-color .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(9,43,103,.13); }
.btn .icon { width:20px; height:20px; }
.btn-red { background:var(--red); color:#fff; box-shadow:0 5px 14px rgba(220,21,37,.12); }
.btn-red:hover { background:#c11221; }
.btn-blue { background:var(--blue); color:white; }
.btn-green,.btn-wa { background:#119b53; color:#fff; }
.btn-green:hover,.btn-wa:hover { background:#087c40; }
.btn-outline { background:#fff; color:var(--navy); border-color:#b8c9e2; }
.btn-outline:hover { border-color:var(--blue); background:#f3f7fe; }
.btn-yellow { background:var(--yellow); color:var(--navy); }
.btn-wide { width:100%; }
.nav-cta { min-height:42px; padding:11px 15px; font-size:11px; }
.nav-cta .icon { width:18px; height:18px; }
.menu-toggle { display:none; width:43px; height:43px; border:1px solid var(--line); border-radius:8px; background:white; align-items:center; justify-content:center; flex-direction:column; gap:5px; color:var(--navy); }
.menu-toggle span { display:block; width:18px; height:2px; border-radius:2px; background:var(--navy); }
.hero { position:relative; overflow:hidden; background:linear-gradient(115deg,#f5f9ff 0%,#edf5ff 42%,#f7faff 100%); }
.hero-inner { display:grid; grid-template-columns:1fr 1.03fr; align-items:center; gap:54px; padding-top:66px; padding-bottom:68px; }
.hero-copy { position:relative; z-index:1; min-width:0; }
.eyebrow,.hero-label { display:flex; align-items:center; gap:10px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.12em; line-height:1.5; margin-bottom:18px; }
.eyebrow-line { display:inline-block; width:28px; height:3px; flex-shrink:0; border-radius:3px; background:var(--yellow); }
.hero h1 { font-size:clamp(37px,4.35vw,61px); font-weight:820; line-height:1.09; letter-spacing:-.055em; max-width:590px; }
.hero h1 em { font-style:normal; color:var(--red); }
.hero h1>span { display:block; }
.hero-intro { color:var(--navy); font-size:16px; font-weight:650; margin-top:22px; max-width:490px; line-height:1.6; }
.hero-copy>p:not(.hero-intro) { color:#536987; font-size:14px; line-height:1.8; margin:14px 0 24px; max-width:490px; }
.hero-buttons { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:24px; }
.hero-features { margin-top:22px; display:flex; gap:12px 18px; flex-wrap:wrap; color:#4e6483; font-size:10px; font-weight:650; }
.hero-features>span { display:flex; align-items:center; gap:5px; }
.hero-features b { color:#0a9e57; font-size:14px; }
.hero-features .icon { color:#0a9e57; width:14px; height:14px; }
.hero-visual { position:relative; min-width:0; padding-bottom:20px; }
.hero-visual::before { content:""; position:absolute; width:60%; height:75%; border-radius:20px; right:-13px; bottom:5px; background:var(--yellow); opacity:.9; }
.hero-visual img { position:relative; width:100%; height:auto; aspect-ratio:1.67; object-fit:cover; object-position:31% 50%; border-radius:20px; box-shadow:0 18px 36px rgba(9,43,103,.1); }
.hero-photo-caption { display:flex; align-items:center; gap:9px; position:absolute; bottom:0; left:20px; max-width:calc(100% - 30px); padding:13px 17px; background:white; border:1px solid #edf1f7; border-radius:10px; color:var(--navy); font-size:10px; font-weight:650; box-shadow:0 10px 28px rgba(9,43,103,.08); }
.hero-photo-caption .icon { color:var(--blue); width:20px; height:20px; }
.caption-dot { width:7px; height:7px; background:#13a367; border-radius:50%; }
.trust-line { border-block:1px solid var(--line); background:white; }
.trust-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.trust-row>div { display:flex; align-items:center; justify-content:center; gap:11px; min-height:79px; padding:15px 10px; color:var(--navy); font-size:11px; font-weight:700; }
.trust-row>div+div { border-left:1px solid var(--line); }
.trust-row .icon { color:var(--blue); width:25px; height:25px; }
.section { padding:80px 0; }
.section-heading { max-width:690px; margin-bottom:35px; }
.section-heading.centered { text-align:center; margin-inline:auto; }
.kicker { display:inline-flex; align-items:center; gap:8px; color:var(--red); font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; line-height:1.5; }
.kicker::before { content:""; display:inline-block; width:21px; height:3px; border-radius:3px; background:var(--yellow); }
.section-heading h2 { margin-top:10px; font-size:clamp(27px,3vw,38px); font-weight:780; letter-spacing:-.045em; }
.section-heading p { color:var(--muted); font-size:13px; line-height:1.8; margin-top:12px; }
.section-heading.split { display:flex; justify-content:space-between; align-items:end; gap:30px; max-width:none; }
.section-heading.split p { max-width:390px; }
.service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.service-card { position:relative; min-width:0; background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.service-photo { position:relative; height:145px; background:#eaf0f8; overflow:hidden; }
.service-photo img { width:100%; height:calc(100% + 24px); max-width:none; object-fit:cover; object-position:center top; }
.service-text { position:relative; padding:24px 22px 22px; }
.service-icon { position:absolute; top:-23px; right:19px; display:grid; place-items:center; width:43px; height:43px; border:4px solid white; border-radius:11px; color:var(--blue); background:#eaf2ff; box-shadow:0 3px 10px rgba(9,43,103,.05); }
.service-icon .icon { width:21px; height:21px; }
.service-icon.yellow { color:#a77800; background:#fff5cf; }
.service-icon.red { color:var(--red); background:#fff0f2; }
.service-text h3 { font-size:17px; letter-spacing:-.025em; }
.service-text p { min-height:62px; color:var(--muted); font-size:12px; line-height:1.75; margin-top:10px; }
.service-text a { display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-size:11px; font-weight:750; margin-top:19px; }
.service-text a .icon { width:15px; height:15px; transition:transform .2s; }
.service-text a:hover .icon { transform:translateX(3px); }
.madrasah-banner { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:24px; padding:23px 27px; background:#f1f6ff; border:1px solid #dce9fc; border-radius:12px; }
.madrasah-banner>div { display:flex; align-items:center; gap:17px; }
.madrasah-banner>.icon,.madrasah-banner>div>.icon { width:32px; height:32px; color:var(--blue); }
.madrasah-banner h3 { font-size:16px; letter-spacing:-.02em; }
.madrasah-banner p { color:#5b718f; font-size:12px; margin-top:4px; }
.madrasah-banner a { display:inline-flex; align-items:center; gap:7px; color:var(--blue); font-weight:750; font-size:12px; white-space:nowrap; }
.madrasah-note { margin-top:24px; text-align:center; font-size:12px; color:var(--muted); }
.pricing { position:relative; background:var(--pale); border-block:1px solid #edf1f7; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; align-items:stretch; }
.price-card { position:relative; padding:31px 29px 28px; display:flex; flex-direction:column; min-width:0; background:white; border:1px solid #dfe7f1; border-radius:17px; box-shadow:0 7px 20px rgba(9,43,103,.035); }
.price-card.featured { border:2px solid var(--yellow); padding:30px 28px 27px; background:linear-gradient(150deg,#fffbee,#fff 50%); box-shadow:0 10px 25px rgba(164,113,0,.07); }
.popular { position:absolute; right:22px; top:-13px; padding:5px 11px; color:var(--navy); background:var(--yellow); border-radius:5px; font-size:9px; font-weight:850; letter-spacing:.06em; }
.package-label { display:flex; align-items:center; gap:9px; color:var(--blue); font-weight:800; font-size:11px; letter-spacing:.1em; }
.package-label .icon { width:22px; height:22px; }
.price-card h3 { font-size:16px; margin-top:10px; letter-spacing:-.02em; }
.price { font-size:38px; font-weight:820; letter-spacing:-.055em; line-height:1.2; color:var(--red); margin-top:22px; }
.price-sub { margin-top:6px; color:#71819a; font-size:11px; }
.price-card ul { flex:1; list-style:none; margin:23px 0 25px; padding:20px 0 0; border-top:1px solid #e9edf4; }
.price-card li { position:relative; padding:5px 0 5px 23px; font-size:12px; line-height:1.65; color:#365170; }
.price-card li::before { content:"✓"; position:absolute; top:4px; left:0; color:#0a9b54; font-size:16px; font-weight:800; }
.price-card .btn { margin-top:auto; min-height:46px; font-size:12px; }
.pricing-note { max-width:870px; text-align:center; margin:24px auto 0; color:#6e809a; font-size:10px; line-height:1.8; }
.pricing-note strong { color:#475f81; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.portfolio-card { min-width:0; background:white; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:box-shadow .2s,transform .2s; }
.portfolio-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.project-preview { background:linear-gradient(140deg,#e8f0fb,#f4f7fc); border-bottom:1px solid var(--line); padding:23px 20px 15px; }
.portfolio-card:nth-child(2) .project-preview { background:linear-gradient(140deg,#f8eee9,#fcf7f3); }
.portfolio-card:nth-child(3) .project-preview { background:linear-gradient(140deg,#e6f2ec,#f1f8f3); }
.preview-stage { height:205px; display:flex; align-items:center; justify-content:center; }
.device-frame { width:100%; max-width:340px; border:6px solid #182b48; border-bottom-width:9px; border-radius:10px; background:#fff; overflow:hidden; box-shadow:0 10px 18px rgba(9,43,103,.12); transition:width .2s; }
.browser-bar { height:13px; display:flex; align-items:center; gap:3px; padding:0 7px; background:#f0f3f8; border-bottom:1px solid #e5ebf3; }
.browser-bar i { display:block; width:4px; height:4px; border-radius:50%; background:#c4cdd9; }
.browser-bar i:first-child { background:#e5a3a4; }
.browser-bar i:nth-child(2) { background:#e8cf8c; }
.browser-bar i:nth-child(3) { background:#a1c8b1; }
.project-screenshot { width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; object-position:top center; }
.project-preview[data-device="tablet"] .device-frame { width:148px; max-width:100%; border-width:6px; border-radius:12px; }
.project-preview[data-device="tablet"] .browser-bar { display:none; }
.project-preview[data-device="tablet"] .project-screenshot { aspect-ratio:3/4; }
.project-preview[data-device="mobile"] .device-frame { width:93px; max-width:100%; border-width:5px; border-top-width:8px; border-bottom-width:8px; border-radius:14px; }
.project-preview[data-device="mobile"] .browser-bar { display:none; }
.project-preview[data-device="mobile"] .project-screenshot { aspect-ratio:9/19.5; }
.device-tabs { display:flex; justify-content:center; align-items:center; gap:4px; margin-top:14px; }
.device-tabs button { display:flex; align-items:center; justify-content:center; gap:5px; min-height:31px; padding:6px 9px; border:1px solid transparent; border-radius:6px; background:transparent; color:#697e9b; font-size:9px; font-weight:700; transition:background .15s,color .15s; }
.device-tabs .icon { width:14px; height:14px; }
.device-tabs button:hover { color:var(--blue); background:rgba(255,255,255,.6); }
.device-tabs button[aria-pressed="true"],.device-tabs button.active { color:var(--blue); border-color:#d8e3f3; background:white; box-shadow:0 2px 5px rgba(9,43,103,.04); }
.portfolio-body { padding:25px 24px 26px; }
.type { display:inline-block; color:var(--blue); background:#edf4ff; font-size:9px; padding:4px 8px; border-radius:4px; font-weight:750; line-height:1.45; }
.portfolio-body h3 { margin-top:13px; font-size:19px; letter-spacing:-.03em; }
.portfolio-body p { min-height:56px; color:var(--muted); font-size:12px; line-height:1.75; margin-top:10px; }
.portfolio-body>a { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:21px; padding-top:16px; border-top:1px solid #e9edf4; color:var(--blue); font-size:11px; font-weight:750; overflow-wrap:anywhere; }
.portfolio-body>a .icon { width:16px; height:16px; }
.portfolio-body>a:hover { color:var(--red); }
.portfolio-note { text-align:center; color:#71839d; font-size:10px; margin-top:21px; line-height:1.75; }
.demo { padding-top:0; }
.demo-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:32px 36px; border:1px solid #dce8fa; background:#f0f6ff; border-radius:15px; }
.demo-inner>div { max-width:700px; }
.demo-inner h2 { font-size:25px; margin-top:8px; }
.demo-inner p { color:#607797; font-size:12px; line-height:1.8; margin-top:10px; }
.demo-inner .btn { flex-shrink:0; }
.demo-inner .kicker { color:var(--blue); }
.process { background:var(--pale); border-block:1px solid #edf1f7; }
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; list-style:none; padding:0; margin:0; counter-reset:step; }
.process-grid>li,.process-grid>article { position:relative; padding-top:8px; min-width:0; }
.step-number { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:white; color:var(--blue); border:1px solid #dbe6f6; font-size:15px; font-weight:800; margin-bottom:20px; }
.process-grid>li:not(:last-child)::after,.process-grid>article:not(:last-child)::after { content:""; position:absolute; top:30px; left:62px; width:calc(100% - 52px); height:1px; background:#d7e2f2; }
.process-grid h3 { font-size:16px; line-height:1.4; letter-spacing:-.02em; }
.process-grid p { color:var(--muted); font-size:12px; line-height:1.85; margin-top:10px; }
.faq-inner { max-width:860px; }
.faq details { padding:22px 0; border-bottom:1px solid var(--line); }
.faq details:first-of-type { border-top:1px solid var(--line); }
.faq summary { position:relative; display:block; padding-right:40px; cursor:pointer; color:#1b3b67; font-size:14px; font-weight:700; line-height:1.6; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:-3px; color:var(--blue); font-size:23px; font-weight:400; }
.faq details[open] summary::after { content:"−"; }
.faq details p { max-width:760px; margin-top:13px; color:var(--muted); font-size:12px; line-height:1.9; }
.callout { position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.callout::after { content:""; position:absolute; right:-160px; top:-180px; width:480px; height:480px; border:70px solid rgba(255,255,255,.025); border-radius:50%; pointer-events:none; }
.callout-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:45px; padding:54px 0; }
.callout-inner>div { max-width:740px; }
.callout .kicker { color:var(--yellow); }
.callout .kicker::before { background:var(--yellow); }
.callout h2 { color:white; font-size:clamp(26px,2.7vw,35px); line-height:1.25; letter-spacing:-.04em; margin-top:9px; }
.callout p { color:#c6d6ed; font-size:12px; margin-top:13px; line-height:1.85; }
.callout .btn { flex-shrink:0; }
.footer { padding:56px 0 20px; color:#6e809b; background:#fbfcfe; }
.footer-content { display:grid; grid-template-columns:2fr 1fr 1fr; gap:65px; }
.footer-intro strong { color:var(--blue); font-size:26px; font-weight:850; letter-spacing:-.05em; }
.footer-intro p { max-width:380px; margin-top:13px; font-size:12px; line-height:1.9; }
.footer h3 { color:var(--navy); font-size:12px; font-weight:750; letter-spacing:0; margin-bottom:17px; }
.footer a { display:block; color:#617594; font-size:11px; margin:10px 0; }
.footer a:hover { color:var(--blue); }
.footer-bottom { margin-top:40px; padding-top:21px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; font-size:10px; color:#7c8ca4; }
.floating-wa { position:fixed; bottom:23px; right:23px; z-index:35; display:flex; align-items:center; justify-content:center; gap:9px; padding:13px 17px; border:3px solid white; border-radius:40px; background:#119b53; color:white; box-shadow:0 5px 23px rgba(5,83,46,.2); font-size:11px; font-weight:750; transition:transform .2s,background .2s; }
.floating-wa .icon { width:23px; height:23px; }
.floating-wa:hover { transform:translateY(-3px); background:#087c40; }
@media(min-width:1600px) { .container { width:min(1320px,calc(100% - 96px)); } .hero-inner { gap:75px; padding-block:80px; } .hero h1 { font-size:65px; } .hero-visual img { aspect-ratio:1.62; } }
@media(max-width:1150px) { .nav { gap:16px; } .nav>a:not(.btn),.nav-dropdown>summary { font-size:11px; } .brand-word { font-size:23px; } .brand-icon svg { width:43px; } .nav-cta { padding-inline:12px; font-size:10px; } .hero-inner { gap:35px; padding-block:55px; } .hero h1 { font-size:49px; } .service-text { padding-inline:18px; } .service-grid { gap:15px; } .price-card { padding-inline:23px; } .price-card.featured { padding-inline:22px; } .price { font-size:35px; } .portfolio-grid { gap:17px; } .project-preview { padding-inline:15px; } .portfolio-body { padding-inline:20px; } }
@media(max-width:980px) {
  .container { width:calc(100% - 44px); }
  .topbar-points { gap:15px; } .topbar-points>span:last-child { display:none; }
  .header-inner { min-height:75px; }
  .menu-toggle { display:flex; margin-left:auto; }
  .nav { position:absolute; top:75px; left:0; right:0; padding:15px 22px 24px; display:none; flex-direction:column; gap:0; align-items:stretch; background:white; border-bottom:1px solid var(--line); box-shadow:0 12px 20px rgba(9,43,103,.08); max-height:calc(100dvh - 80px); overflow:auto; }
  .nav.open { display:flex; }
  .nav>a:not(.btn),.nav-dropdown>summary { padding:12px; font-size:13px; }
  .nav>a.active:not(.btn)::after { display:none; }
  .nav-dropdown>summary { justify-content:space-between; }
  .dropdown-menu { position:static; width:100%; padding:0 0 7px 12px; border:0; border-radius:0; box-shadow:none; background:#f7faff; }
  .dropdown-menu a { padding:10px 12px; }
  .nav-cta { margin-top:10px; font-size:12px; }
  .hero-inner { gap:27px; padding-block:48px; }
  .hero h1 { font-size:43px; } .hero-intro { font-size:14px; margin-top:20px; }
  .hero-copy>p:not(.hero-intro) { font-size:13px; }
  .hero-buttons .btn { font-size:11px; padding:12px 14px; }
  .hero-visual img { aspect-ratio:1.23; object-position:30% center; }
  .hero-photo-caption { left:12px; padding:11px; font-size:9px; }
  .trust-row>div { gap:8px; font-size:10px; padding-inline:8px; }
  .trust-row .icon { width:21px; height:21px; }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .service-photo { height:160px; }
  .service-text p { min-height:42px; }
  .price-card { padding:27px 19px 23px; } .price-card.featured { padding:26px 18px 22px; }
  .price { font-size:30px; } .price-card li { font-size:11px; }
  .project-preview { padding-inline:12px; } .preview-stage { height:168px; }
  .project-preview[data-device="tablet"] .device-frame { width:119px; }
  .project-preview[data-device="mobile"] .device-frame { width:76px; }
  .device-tabs { gap:1px; } .device-tabs button { padding:6px; font-size:8px; } .device-tabs button .icon { width:12px; height:12px; }
  .portfolio-body { padding:22px 17px; } .portfolio-body h3 { font-size:17px; }
  .portfolio-body p { font-size:11px; min-height:77px; }
  .demo-inner { padding:28px; gap:25px; } .demo-inner h2 { font-size:23px; }
  .process-grid { gap:22px; } .process-grid h3 { font-size:15px; }
  .callout-inner { gap:25px; }
}
@media(max-width:760px) {
  .topbar-inner { justify-content:center; min-height:32px; font-size:10px; } .topbar-points,.topbar-right { display:none; }
  .hero-inner { grid-template-columns:1fr; padding-top:43px; padding-bottom:42px; gap:33px; }
  .hero-copy { max-width:600px; } .hero h1 { max-width:570px; font-size:clamp(39px,7.3vw,55px); }
  .hero-intro { font-size:15px; max-width:570px; } .hero-copy>p:not(.hero-intro) { max-width:560px; font-size:13px; }
  .hero-visual { padding:0 8px 18px 0; } .hero-visual img { aspect-ratio:2.1; object-position:center; }
  .hero-visual::before { right:0; bottom:5px; width:55%; } .hero-photo-caption { left:18px; bottom:0; font-size:10px; }
  .hero-buttons .btn { font-size:12px; } .hero-features { gap:10px 18px; }
  .trust-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-row>div { justify-content:flex-start; min-height:63px; font-size:11px; padding-inline:17px; }
  .trust-row>div:nth-child(3) { border-left:0; } .trust-row>div:nth-child(n+3) { border-top:1px solid var(--line); }
  .section { padding:60px 0; } .section-heading { margin-bottom:29px; }
  .section-heading h2 { font-size:31px; } .section-heading p { font-size:12px; }
  .section-heading.split { display:block; } .section-heading.split p { max-width:600px; }
  .portfolio-grid { grid-template-columns:1fr; gap:24px; max-width:520px; margin-inline:auto; }
  .project-preview { padding:24px 28px 16px; } .preview-stage { height:235px; }
  .device-frame { max-width:400px; } .project-preview[data-device="tablet"] .device-frame { width:169px; }
  .project-preview[data-device="mobile"] .device-frame { width:106px; }
  .device-tabs { gap:7px; } .device-tabs button { padding:7px 12px; font-size:10px; } .device-tabs button .icon { width:15px; height:15px; }
  .portfolio-body { padding:26px 27px; } .portfolio-body h3 { font-size:22px; } .portfolio-body p { font-size:12px; min-height:0; }
  .portfolio-body>a { font-size:12px; }
  .demo { padding-top:0; } .demo-inner { align-items:flex-start; flex-direction:column; gap:23px; }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 25px; } .process-grid>li:nth-child(2)::after,.process-grid>article:nth-child(2)::after { display:none; }
  .callout-inner { flex-direction:column; align-items:flex-start; padding-block:43px; }
  .footer-content { grid-template-columns:1.7fr 1fr 1fr; gap:28px; } .footer-intro strong { font-size:24px; }
  .floating-wa { bottom:17px; right:17px; }
}
@media(max-width:700px) {
  .pricing-grid { grid-template-columns:1fr; max-width:520px; margin-inline:auto; gap:25px; }
  .price-card { padding:30px 28px 27px; } .price-card.featured { padding:29px 27px 26px; }
  .price { font-size:41px; } .price-card h3 { font-size:18px; } .price-card li { font-size:13px; } .price-card .btn { font-size:13px; }
  .price-sub { font-size:12px; } .package-label { font-size:12px; }
  .madrasah-banner { padding:21px; flex-direction:column; align-items:flex-start; gap:16px; }
  .madrasah-banner a { padding-left:49px; }
  .footer-content { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
  .footer-intro { grid-column:1/-1; } .footer-intro p { max-width:480px; }
}
@media(max-width:600px) {
  html { scroll-padding-top:90px; }
  .container { width:calc(100% - 36px); }
  .header-inner { min-height:71px; gap:15px; } .nav { top:71px; }
  .brand { gap:7px; } .brand-word { font-size:24px; } .brand-icon svg { width:42px; height:38px; }
  .hero-inner { padding-top:37px; gap:30px; } .eyebrow,.hero-label { font-size:9px; letter-spacing:.09em; margin-bottom:17px; }
  .hero h1 { font-size:43px; max-width:450px; line-height:1.1; }
  .hero-intro { margin-top:21px; font-size:14px; } .hero-copy>p:not(.hero-intro) { font-size:12px; line-height:1.85; }
  .hero-buttons { gap:10px; } .hero-buttons .btn { padding:12px 15px; font-size:11px; }
  .hero-features { font-size:9px; gap:8px 15px; }
  .hero-visual img { aspect-ratio:1.8; border-radius:14px; object-position:28% center; }
  .hero-photo-caption { left:12px; font-size:9px; padding:11px 13px; }
  .trust-row>div { font-size:10px; gap:9px; padding:13px 8px; } .trust-row .icon { width:20px; height:20px; }
  .section { padding:53px 0; } .section-heading h2 { font-size:29px; } .section-heading p { font-size:12px; }
  .service-grid { grid-template-columns:1fr; gap:20px; }
  .service-photo { height:170px; } .service-photo img { height:calc(100% + 26px); }
  .service-text { padding:25px 24px; } .service-text h3 { font-size:20px; } .service-text p { font-size:12px; min-height:0; }
  .service-text a { font-size:12px; margin-top:17px; } .service-icon { right:22px; width:47px; height:47px; }
  .madrasah-banner h3 { font-size:16px; } .madrasah-banner p { font-size:11px; }
  .project-preview { padding:21px 20px 16px; } .preview-stage { height:213px; } .device-frame { max-width:360px; }
  .project-preview[data-device="tablet"] .device-frame { width:152px; } .project-preview[data-device="mobile"] .device-frame { width:96px; }
  .portfolio-body { padding:24px; } .portfolio-body h3 { font-size:21px; }
  .demo { padding-top:0; } .demo-inner { padding:25px; } .demo-inner h2 { font-size:25px; }
  .process-grid { gap:27px 22px; } .process-grid h3 { font-size:15px; } .process-grid p { font-size:11px; }
  .step-number { width:41px; height:41px; margin-bottom:17px; } .process-grid>li:not(:last-child)::after { top:28px; }
  .faq details { padding:21px 0; } .faq summary { font-size:13px; } .faq details p { font-size:12px; }
  .callout h2 { font-size:29px; } .callout p { font-size:12px; } .callout .btn { font-size:12px; }
  .footer { padding-top:44px; } .footer-bottom { margin-top:30px; padding-bottom:40px; }
  .floating-wa { width:53px; height:53px; padding:0; bottom:15px; right:15px; } .floating-wa>span { display:none; }
}
@media(max-width:380px) {
  .container { width:calc(100% - 28px); } .brand-word { font-size:21px; } .brand-word small { font-size:8px; } .brand-icon svg { width:36px; }
  .topbar-inner { font-size:8px; } .topbar .icon { width:12px; height:12px; }
  .hero h1 { font-size:37px; } .hero-intro { font-size:13px; }
  .hero-buttons { flex-direction:column; align-items:stretch; } .hero-buttons .btn { width:100%; font-size:12px; }
  .hero-features { gap:7px 12px; } .hero-visual img { aspect-ratio:1.65; }
  .hero-photo-caption { font-size:8px; padding:9px 10px; }
  .trust-row>div { font-size:9px; gap:7px; } .trust-row .icon { width:18px; height:18px; }
  .section-heading h2 { font-size:26px; } .service-photo { height:145px; }
  .price-card { padding:27px 22px 24px; } .price-card.featured { padding:26px 21px 23px; } .price { font-size:36px; }
  .preview-stage { height:183px; } .project-preview[data-device="tablet"] .device-frame { width:130px; } .project-preview[data-device="mobile"] .device-frame { width:83px; }
  .device-tabs { gap:3px; } .device-tabs button { padding:6px 9px; font-size:9px; }
  .portfolio-body { padding:22px; } .portfolio-body h3 { font-size:19px; }
  .process-grid { grid-template-columns:1fr; gap:24px; } .process-grid>li::after,.process-grid>article::after { display:none; }
  .process-grid p { font-size:12px; } .step-number { margin-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
/* Components wired to the Stage 1 homepage markup. */
.icon-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
[hidden] { display:none!important; }
.nav-services { position:relative; }
.dropdown-toggle { display:flex; align-items:center; gap:5px; border:0; background:transparent; padding:0; color:#18335a; font-size:12px; font-weight:720; white-space:nowrap; }
.dropdown-toggle:hover,.dropdown-toggle[aria-expanded="true"] { color:var(--red); }
.dropdown-toggle .icon { width:14px; height:14px; transition:transform .18s; }
.dropdown-toggle[aria-expanded="true"] .icon { transform:rotate(180deg); }
.dropdown { position:absolute; z-index:2; left:-18px; top:calc(100% + 24px); width:224px; padding:8px; border:1px solid var(--line); border-radius:11px; box-shadow:0 16px 32px rgba(9,43,103,.13); background:white; }
.dropdown a { display:block; padding:10px 12px; border-radius:6px; color:#2c4871; font-size:12px; font-weight:650; }
.dropdown a:hover { color:var(--blue); background:#f1f6ff; }
.hero-photo-caption strong { display:block; color:var(--navy); font-size:11px; font-weight:750; }
.hero-photo-caption small { display:block; color:#71829a; font-size:9px; font-weight:500; margin-top:2px; }
.hero-photo-caption>.icon { margin-left:9px; width:17px; height:17px; }
.hero-price { position:absolute; right:-9px; top:-28px; width:123px; padding:15px 13px 14px; border:1px solid #fff3bf; border-radius:13px; background:#fffbee; box-shadow:0 9px 24px rgba(9,43,103,.08); text-align:center; }
.hero-price>small { display:block; color:#71819a; font-size:8px; font-weight:750; letter-spacing:.1em; }
.hero-price>strong { display:block; color:var(--red); font-size:42px; line-height:1.2; font-weight:850; letter-spacing:-.07em; }
.hero-price>strong>span { color:var(--navy); font-size:13px; margin-left:4px; letter-spacing:-.03em; }
.hero-price>span { display:block; color:#697d9b; font-size:7px; margin-top:4px; }
.trust-row strong { display:block; color:var(--navy); font-size:11px; font-weight:750; line-height:1.6; }
.trust-row small { display:block; color:#7b8ca5; font-size:9px; font-weight:500; line-height:1.5; }
.madrasah-banner { gap:18px; }
.madrasah-banner>div { display:block; flex:1; }
.madrasah-icon { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; background:white; border:1px solid #e0e9f7; color:var(--blue); border-radius:10px; }
.madrasah-icon .icon { width:26px; height:26px; }
.capture-note { display:inline-block; color:#8090a6; font-size:9px; margin-top:13px; }
.browser-bar small { display:block; color:#8b98ab; font-size:6px; line-height:1; margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portfolio-card { display:flex; flex-direction:column; }
.portfolio-body { display:flex; flex-direction:column; flex:1; }
.portfolio-body h3 { min-height:44px; }
.portfolio-body>a { margin-top:auto; padding-top:16px; }
.portfolio-body p { margin-bottom:20px; }
.demo-section { padding:0 0 72px; }
.demo-inner { gap:23px; }
.demo-inner>div { min-width:0; flex:1; }
.demo-icon { display:grid; place-items:center; width:61px; height:61px; flex-shrink:0; background:white; border:1px solid #dce8fa; border-radius:13px; color:var(--blue); }
.demo-icon .icon { width:31px; height:31px; }
@media(max-width:1150px) { .dropdown-toggle { font-size:11px; } .hero-price { right:-7px; } .trust-row strong { font-size:10px; } .trust-row small { font-size:8px; } }
@media(max-width:980px) { .nav-services { width:100%; } .dropdown-toggle { width:100%; padding:12px; justify-content:space-between; font-size:13px; } .dropdown { position:static; width:100%; padding:0 7px 8px 14px; background:#f7faff; border:0; border-radius:0; box-shadow:none; } .hero-price { top:-23px; width:108px; padding:12px 10px; } .hero-price>strong { font-size:36px; } .hero-photo-caption strong { font-size:9px; } .hero-photo-caption small { font-size:8px; } .hero-photo-caption>.icon { display:none; } .trust-row strong { font-size:10px; } .portfolio-body h3 { min-height:40px; } .demo-icon { display:none; } }
@media(max-width:760px) { .hero-price { top:15px; right:20px; width:106px; } .hero-photo-caption strong { font-size:10px; } .hero-photo-caption small { font-size:9px; } .trust-row strong { font-size:11px; } .trust-row small { font-size:9px; } .portfolio-body h3 { min-height:0; } .demo-section { padding-bottom:56px; } }
@media(max-width:700px) { .madrasah-banner { position:relative; padding-left:82px; } .madrasah-banner .madrasah-icon { position:absolute; top:21px; left:21px; } .madrasah-banner>div { flex:none; } .madrasah-banner a { padding-left:0; white-space:normal; font-size:11px; } }
@media(max-width:600px) { .hero-price { right:17px; top:12px; width:96px; padding:11px 9px; } .hero-price>strong { font-size:34px; } .hero-price>strong>span { font-size:11px; } .hero-price>span { font-size:6px; } .hero-photo-caption strong { font-size:9px; } .hero-photo-caption small { font-size:8px; } .trust-row strong { font-size:10px; } .trust-row small { font-size:8px; } .demo-section { padding-bottom:50px; } }
@media(max-width:380px) { .hero-price { top:10px; right:15px; width:83px; padding:8px; } .hero-price>small { font-size:6px; } .hero-price>strong { font-size:28px; } .hero-price>strong>span { font-size:10px; } .hero-price>span { display:none; } .hero-photo-caption strong { font-size:8px; } .hero-photo-caption small { font-size:7px; } .trust-row strong { font-size:9px; } .trust-row small { font-size:7px; } .madrasah-banner { padding-left:70px; } .madrasah-banner .madrasah-icon { left:15px; width:40px; height:40px; } }
@media(min-width:981px) and (max-width:1440px) { .hero h1 { font-size:clamp(45px,4.05vw,58px); } }