/* Strata (by Tabaqat) — shared styles. Tabaqat identity: warm multi-colour wordmark, navy→teal-green gradient hero, amber CTAs, friendly illustration, gentle motion. Fonts (Inter + Cairo) are preloaded via in each page's for performance. */ :root{ /* core */ --ink:#16313b; --navy:#0c2b38; --navy-2:#15545a; --bg:#ffffff; --bg-soft:#f4f8f8; --line:#e4ecec; --muted:#5d7079; /* brand warm + teal (from the Tabaqat logo & hero) */ --amber:#e89a3c; --amber-d:#d4862a; --amber-tint:#fdebd6; --teal:#2fa9a0; --teal-d:#1d8a82; --teal-tint:#d9f1ee; --green:#6bbf59; --green-d:#5a9e3f; --green-tint:#e6f4dd; --red:#e05a4d; --red-d:#c8463a; --red-tint:#fbe2de; --blue:#3b8fd0; --blue-d:#2f6fb0; --blue-tint:#dcebf8; --gold:#f0b429; --gold-d:#b9851a; --gold-tint:#fbeeca; --radius:16px; --maxw:1160px; --font-en:'Inter',system-ui,Segoe UI,Arial,sans-serif; --font-ar:'Cairo','Inter',system-ui,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-en);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased} [dir="rtl"]{font-family:var(--font-ar)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} section{padding:76px 0} h1,h2,h3{line-height:1.14;font-weight:800;letter-spacing:-.02em;color:var(--ink)} h1{font-size:clamp(34px,5vw,58px)} h2{font-size:clamp(27px,3.4vw,40px)} h3{font-size:20px} p{color:#3a4c55} .lead{font-size:clamp(17px,2vw,21px);color:#46585f;max-width:60ch} .muted{color:var(--muted)} .center{text-align:center} .kicker{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin-bottom:14px} /* header */ header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:20px;height:72px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px} .brand .logo{height:38px;width:auto} .brand .sep{color:#c7d3d3;font-weight:400} .brand .prod{color:var(--teal-d)} .nav nav{display:flex;gap:22px;margin-inline-start:auto;align-items:center} .nav nav a{font-weight:600;font-size:15px;color:#3a4c55} .nav nav a:hover{color:var(--amber-d)} .langtoggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:auto;min-width:0;flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 16px;font-family:inherit;font-weight:600;font-size:13px;line-height:1.3;cursor:pointer;text-align:center;transition:border-color .15s ease,color .15s ease} .langtoggle:hover{border-color:var(--amber);color:var(--amber-d)} .langtoggle:focus-visible{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,154,60,.18)} [dir="rtl"] .langtoggle{padding:6px 16px 6px 26px;background-position:left 11px center} /* buttons — amber primary (Tabaqat), teal + ghost secondaries */ .btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .15s ease,box-shadow .15s ease} .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--amber);color:#3a2406;box-shadow:0 8px 20px rgba(232,154,60,.32)} .btn-primary:hover{background:var(--amber-d);color:#fff} .btn-dark{background:var(--navy);color:#eafbf7} .btn-dark:hover{background:#103e47} .btn-teal{background:var(--teal);color:#04302b} .btn-teal:hover{background:var(--teal-d);color:#fff} .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--amber);color:var(--amber-d)} .btn-lg{padding:15px 30px;font-size:16px} /* hero — navy→teal-green vertical gradient (Tabaqat landing) */ .hero{background:linear-gradient(180deg,#0c2b38 0%,#13474f 42%,#3aa597 100%);color:#eafaf6;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 42px,rgba(255,255,255,.03) 43px),repeating-linear-gradient(90deg,transparent,transparent 42px,rgba(255,255,255,.03) 43px);pointer-events:none} .hero .wrap{position:relative;z-index:1} .hero h1{color:#fff} .hero .lead{color:#cdeae3} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px} .hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:18px 0} @media(max-width:860px){.hero-split{grid-template-columns:1fr}.hero-illus{order:-1}} .hero-illus{display:block} .hero-illus img{display:block;width:100%;height:auto;aspect-ratio:850/500;object-fit:contain;border-radius:18px;animation:floaty 6s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* hero feature labels — flat, not button-like */ .hero .cta + div{margin-top:26px} .tag{display:inline-flex;align-items:center;gap:7px;background:transparent;color:#bfe6dd;border:none;border-radius:0;padding:0;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin:8px 22px 0 0} .tag::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--amber)} [dir="rtl"] .tag{margin:8px 0 0 22px} .compat{font-size:13px;color:#a9cfc7;margin-top:18px} /* sections / cards */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .card:hover{border-color:transparent;box-shadow:0 16px 40px rgba(12,43,56,.10);transform:translateY(-3px)} .soft{background:var(--bg-soft)} /* colourful icon tiles (Tabler icons). Colour rotates per card — "all the logo colours". */ .ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--amber-tint);color:var(--amber-d)} .ico i{font-size:27px;line-height:1} .g3 .card:nth-child(6n+1) .ico,.g2 .card:nth-child(6n+1) .ico{background:var(--amber-tint);color:var(--amber-d)} .g3 .card:nth-child(6n+2) .ico,.g2 .card:nth-child(6n+2) .ico{background:var(--teal-tint);color:var(--teal-d)} .g3 .card:nth-child(6n+3) .ico{background:var(--green-tint);color:var(--green-d)} .g3 .card:nth-child(6n+4) .ico{background:var(--red-tint);color:var(--red-d)} .g3 .card:nth-child(6n+5) .ico{background:var(--blue-tint);color:var(--blue-d)} .g3 .card:nth-child(6n+6) .ico{background:var(--gold-tint);color:var(--gold-d)} .card h3{margin-bottom:8px} .card p{font-size:15px} .feature{display:flex;gap:14px;align-items:flex-start} .feature .dot{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:var(--teal-tint);color:var(--teal-d);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-top:2px} .feature .dot i{font-size:16px} .g3 .feature:nth-child(3n+1) .dot{background:var(--amber-tint);color:var(--amber-d)} .g3 .feature:nth-child(3n+2) .dot{background:var(--teal-tint);color:var(--teal-d)} .g3 .feature:nth-child(3n+3) .dot{background:var(--green-tint);color:var(--green-d)} .feature h3{font-size:17px;margin-bottom:2px} .feature p{font-size:14.5px} .split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} @media(max-width:820px){.split{grid-template-columns:1fr}} .illus img{border-radius:18px;transition:transform .4s ease} .illus:hover img{transform:scale(1.03)} /* banners */ .banner{background:linear-gradient(135deg,var(--amber) 0%,var(--gold) 100%);color:#3a2406;border-radius:20px;padding:38px 40px} .banner h2{color:#3a2406} .banner.dark{background:linear-gradient(135deg,#0c2b38 0%,#1d8a82 100%);color:#eafaf6} .banner.dark h2{color:#fff} .banner.teal{background:linear-gradient(135deg,var(--teal) 0%,var(--green) 100%);color:#04302b} .banner.teal h2{color:#04302b} /* form / gate */ .gate{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;max-width:520px;box-shadow:0 14px 40px rgba(12,43,56,.07)} .gate .field{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} input[type=email],input[type=text],input[type=tel],input[type=password],select,textarea{flex:1;min-width:200px;width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,154,60,.18)} textarea{min-height:130px;resize:vertical;line-height:1.6} .success{display:none;background:var(--teal-tint);border:1px solid var(--teal);border-radius:12px;padding:18px;color:var(--teal-d)} .success.show{display:block} .formerror{display:none;background:var(--red-tint);border:1px solid var(--red);border-radius:12px;padding:14px;color:var(--red-d);font-size:14px;margin-top:14px} .formerror.show{display:block} .note{font-size:12.5px;color:var(--muted);margin-top:10px} /* honeypot — kept far off-screen for humans, visible to dumb bots */ .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden} /* contact section */ .contact-split{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start} @media(max-width:820px){.contact-split{grid-template-columns:1fr;gap:28px}} .gate.contact-form{max-width:none} /* download plans — Free vs Enterprise cards (#download) */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:840px;margin:0 auto;align-items:stretch} .plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .plan:hover{box-shadow:0 16px 40px rgba(12,43,56,.10);transform:translateY(-3px)} .plan-featured{border-color:var(--amber);box-shadow:0 16px 44px rgba(232,154,60,.14)} .plan-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .plan-head h3{font-size:24px} .plan-desc{font-size:14.5px;color:var(--muted);margin-top:14px;min-height:2.6em} .plan-feats{list-style:none;margin:20px 0 26px;display:flex;flex-direction:column;gap:12px} .plan-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#3a4c55} .plan-feats li i{flex:0 0 auto;color:var(--teal-d);font-size:18px;margin-top:1px} .plan-featured .plan-feats li i{color:var(--amber-d)} .plan-feats-head{font-weight:700;color:var(--ink)} /* platform picker — OS tiles in the download popup */ .picker-label{display:block;margin-top:16px;font-size:13px;font-weight:600;color:var(--muted)} .platform-picker{display:flex;gap:10px;margin-top:8px} .platform-opt{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:center;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease} .platform-opt input{position:absolute;opacity:0;width:0;height:0} .platform-opt i{font-size:26px;color:var(--ink);line-height:1} .platform-opt span{font-size:13px;font-weight:600;color:var(--ink)} .platform-opt:hover{border-color:var(--amber)} .platform-opt.is-sel{border-color:var(--amber);background:var(--amber-tint);box-shadow:0 0 0 1px var(--amber)} .platform-opt.is-sel i,.platform-opt.is-sel span{color:var(--amber-d)} .platform-opt input:focus-visible + i{outline:2px solid var(--amber);outline-offset:4px;border-radius:4px} /* demo (trial) */ .demo{display:grid;grid-template-columns:320px 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:460px;box-shadow:0 16px 40px rgba(12,43,56,.08)} @media(max-width:820px){.demo{grid-template-columns:1fr}} .demo .dir{background:#0c2b38;color:#cfe7e2;padding:18px;font-family:ui-monospace,Menlo,monospace;font-size:13px;overflow:auto} .demo .dir a{color:#7fe6cd} .demo .dir .crumb{color:#7fa39a;margin-bottom:10px} .demo .dir .svc{padding:7px 9px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;gap:8px} .demo .dir .svc:hover{background:#12414a} .demo .map{position:relative;background:#dfeae9} .demo .map .map-canvas{width:100%;height:100%;min-height:460px;display:block} .demo .map .badge{position:absolute;top:12px;left:12px;background:rgba(12,43,56,.85);color:#eafaf6;padding:7px 12px;border-radius:8px;font-size:12.5px;z-index:5} .demo .map .popup{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:160px;display:none;z-index:6} /* trial — services-directory screenshot slideshow */ .shots{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0c2b38;box-shadow:0 16px 40px rgba(12,43,56,.08)} .shots-stage{position:relative;width:100%;aspect-ratio:3708/2166} .shots .shot{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease} .shots .shot.is-active{opacity:1;visibility:visible} .shots .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .shots .shot figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(8,24,32,.92));color:#eafaf6;padding:38px 18px 16px;font-size:14px;font-weight:600} .shots-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(12,43,56,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .15s ease;z-index:4} .shots-nav:hover{background:rgba(12,43,56,.88)} .shots-prev{left:14px} .shots-next{right:14px} .shots-dots{position:absolute;left:0;right:0;bottom:62px;display:flex;gap:8px;justify-content:center;z-index:4} .shots-dot{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:background .15s ease,width .15s ease} .shots-dot.is-active{background:#fff;width:22px} @media(max-width:560px){.shots .shot figcaption{font-size:12.5px;padding:30px 14px 14px}.shots-dots{bottom:52px}.shots-nav{width:36px;height:36px;font-size:20px}} /* parallax band — map background drifting slower than the page (Tabaqat style). The .parallax-bg layer is oversized and translated on scroll by strata.js, which is smooth on desktop AND mobile (no background-attachment:fixed). */ .parallax{position:relative;overflow:hidden;background:#0f3641;color:#eafaf6;text-align:center} .parallax-bg{position:absolute;inset:-22% 0;background-image:linear-gradient(rgba(12,43,56,.78),rgba(21,84,90,.72)),url('/static/base_map_bg.jpg');background-size:cover;background-position:center;will-change:transform;pointer-events:none} .parallax .wrap{position:relative;z-index:1} .parallax h2{color:#fff} .parallax .lead{color:#cdeae3;margin-left:auto;margin-right:auto} .parallax .kicker{color:#7fe6cd} .parallax .cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:26px} /* footer — light blue (Tabaqat identity) */ footer.ft{background:#e8f8fb;color:#46585f;padding:56px 0 30px;border-top:1px solid #d3ecf1} footer.ft a{color:#2a4651} footer.ft a:hover{color:var(--teal-d)} .ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px} @media(max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}} .ft h4{color:var(--ink);font-size:14px;margin-bottom:12px;letter-spacing:.04em;text-transform:uppercase} .ft ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px} .ft .legal{border-top:1px solid #cfe6ea;margin-top:34px;padding-top:18px;font-size:12.5px;color:#5d7079;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* misc */ .hide{display:none!important} .statline{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px} .stat .n{font-size:30px;font-weight:800;color:#fff} .hero .stat .l{font-size:13px;color:#a9cfc7} .stat .l{font-size:13px;color:var(--muted)} .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;margin:4px 6px 0 0;color:#3a4c55;background:#fff} /* motion: reveal on scroll (classes added by strata.js) */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-illus img{animation:none}} /* ---- Strata Atlas: theme tiles, dataset cards, map detail page ---- */ .tile-meta{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px;font-weight:700;color:var(--teal-d)} .tile-count{color:var(--muted);font-weight:600} .ds-card{display:flex;flex-direction:column} .ds-card .geom{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-d);margin-bottom:10px} .ds-card h3{font-size:16px;line-height:1.3} .ds-card .ds-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--muted)} .ds-card .ds-open{color:var(--amber-d);font-weight:700} /* ---- Premium (locked) layers: badge, request dialog, locked detail page ---- */ .lock-pill{display:inline-flex;align-items:center;gap:5px;background:var(--amber-tint);color:var(--amber-d);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-inline-start:8px} .ds-card.is-locked .ds-open{display:inline-flex;align-items:center} .lock-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(12,43,56,.55);backdrop-filter:blur(3px);z-index:300;padding:24px} .lock-overlay.open{display:flex} .lock-modal{position:relative;background:#fff;border-radius:18px;padding:26px;max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 70px rgba(12,43,56,.35)} .lock-modal .gate{border:none;box-shadow:none;padding:0;max-width:none;margin-top:18px} .lock-close{position:absolute;top:14px;inset-inline-end:16px;border:none;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer} .lock-close:hover{color:var(--ink)} .lock-head{display:flex;gap:14px;align-items:flex-start;padding-inline-end:26px} .lock-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--amber-tint);color:var(--amber-d);font-size:22px} .lock-head h3{font-size:18px;margin:2px 0 0} .locked-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:320px;border:1px dashed var(--amber);border-radius:var(--radius);background:var(--amber-tint);padding:36px 24px} .locked-panel .lock-ico.big{width:64px;height:64px;border-radius:16px;background:#fff;font-size:32px;margin-bottom:16px} .locked-panel h2{font-size:24px} /* Demo endpoint bar: the GET URL is a live link with hover + click feedback */ .endpoint-link{color:#8fd8c9;text-decoration:none;border-radius:6px;padding:2px 4px;margin:-2px -4px;transition:color .15s ease,background .15s ease;display:inline-block} .endpoint-link:hover{color:#c8f4e9;text-decoration:underline;background:rgba(127,230,205,.08)} .endpoint-link:active{transform:translateY(1px)} .endpoint-link.is-clicked{animation:endpointFlash .45s ease} @keyframes endpointFlash{0%{background:rgba(127,230,205,.45);color:#04302b}100%{background:transparent}} /* footer social icons */ .ft-social{display:flex;gap:10px;margin-top:16px} .ft-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#3a4c55;font-size:19px;transition:border-color .15s ease,color .15s ease,transform .15s ease} .ft-social a:hover{border-color:var(--amber);color:var(--amber-d);transform:translateY(-2px)} .pagination{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:36px} .page-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;color:var(--ink)} .page-btn:hover{border-color:var(--amber);color:var(--amber-d)} .page-btn.disabled{opacity:.45;pointer-events:none} .page-info{font-size:14px;color:var(--muted)} .breadcrumb{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);padding-top:26px} .breadcrumb a:hover{color:var(--amber-d)} .breadcrumb .sep{color:#c7d3d3} .atlas-detail{display:grid;grid-template-columns:1.6fr .9fr;gap:32px;align-items:start;margin-top:8px} @media(max-width:900px){.atlas-detail{grid-template-columns:1fr}} #map{height:520px;width:100%;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;background:#dfeae9} .map-note{font-size:12.5px;color:var(--muted);margin-top:10px} .detail-block{margin-top:30px} .detail-block h2{font-size:22px;margin-bottom:12px} .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:0 10px 30px rgba(12,43,56,.05)} .side-card h3{font-size:16px;margin-bottom:14px} .meta{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:14px} .meta dt{color:var(--muted)} .meta dd{color:var(--ink);font-weight:600;text-align:right} .btn.block{display:flex;width:100%;justify-content:center;margin-top:10px} .table-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px} .fields{width:100%;border-collapse:collapse;font-size:14px} .fields th,.fields td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .fields th{color:var(--muted);font-weight:700;background:var(--bg-soft)} .fields tr:last-child td{border-bottom:none} .fields code{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink)} .tagrow{display:flex;flex-wrap:wrap;gap:8px} /* ===== Mobile navigation (hamburger) — button injected by strata.js ===== */ .nav-toggle{display:none;margin-inline-start:auto;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;background:#fff;border:1px solid var(--line);border-radius:11px;cursor:pointer} .nav-toggle span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:820px){ .nav .wrap{gap:12px} .nav-toggle{display:flex} .nav nav{position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0 10px;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 18px 32px rgba(12,43,56,.12);max-height:calc(100vh - 72px);overflow:auto;display:none} .nav nav.open{display:flex} .nav nav a{padding:14px 24px;font-size:16px;border-bottom:1px solid var(--bg-soft)} .nav nav a:last-of-type{border-bottom:0} .langtoggle{margin:12px 24px 4px;align-self:flex-start} } /* ===== Small-screen polish ===== */ @media(max-width:680px){ section{padding:52px 0} .wrap{padding:0 18px} .banner{padding:26px 22px} .banner.dark,.banner{border-radius:16px} .split,.contact-split{gap:22px} .ft-grid{grid-template-columns:1fr 1fr} .hero-split{gap:24px} .cta{gap:10px} .btn-lg{padding:13px 22px;font-size:15px} .statline{gap:20px} } @media(max-width:430px){ .ft-grid{grid-template-columns:1fr} .cta{flex-direction:column;align-items:stretch} .cta .btn{justify-content:center} } /* GeoAI chat demo (product page #demo section) */ .chatdemo{max-width:760px;margin:0 auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 16px 40px rgba(12,43,56,.08)} .cd-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#0c2b38;color:#eafaf6;font-weight:700;font-size:14px} .cd-dots{display:flex;gap:6px} .cd-dots span{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.25)} .cd-body{padding:20px 18px;display:flex;flex-direction:column;gap:12px;min-height:360px;background:var(--bg-soft)} .cd-msg{display:none;max-width:85%;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.55} .cd-msg.is-in{display:block;animation:cdIn .35s ease} .cd-msg p{margin:0} .cd-user{align-self:flex-end;background:#1d8a82;color:#eafaf6;border-end-end-radius:4px} .cd-user p{color:#f2fbf8} /* the global p color rule would win over the bubble's inherited color */ .cd-user p.is-typing::after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;margin-inline-start:3px;vertical-align:-2px;animation:cdCaret .7s steps(1) infinite} @keyframes cdCaret{50%{opacity:0}} .cd-ai{align-self:flex-start;background:#fff;border:1px solid var(--line);border-end-start-radius:4px} .cd-typing{display:none;align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;border-end-start-radius:4px;padding:14px 16px} .cd-typing.is-on{display:flex;gap:5px} .cd-typing span{width:7px;height:7px;border-radius:999px;background:#9db4bf;animation:cdBlink 1s infinite} .cd-typing span:nth-child(2){animation-delay:.15s} .cd-typing span:nth-child(3){animation-delay:.3s} .cd-bars{margin-top:10px;display:flex;flex-direction:column;gap:6px} .cd-bar{display:grid;grid-template-columns:90px 1fr 36px;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)} .cd-bar i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#1d8a82,#7fe6cd)} .cd-note{font-size:12px;color:var(--muted);margin-top:10px} .cd-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px} .cd-chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(29,138,130,.12);color:#0c5a54} @keyframes cdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes cdBlink{0%,100%{opacity:.3}50%{opacity:1}} /* Direction A redesign: product-first heroes */ .frame{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0b0f14;box-shadow:0 24px 60px rgba(4,18,26,.45);display:block} .frame-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#101a23;color:#8fa7b8;font-size:12px;font-family:ui-monospace,Menlo,monospace} .frame-dots{display:flex;gap:5px} .frame-dots span{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.18)} .frame-body{position:relative} .frame-body img{display:block;width:100%;height:auto} a.frame{transition:transform .18s ease,box-shadow .18s ease} a.frame:hover{transform:translateY(-3px);box-shadow:0 30px 70px rgba(4,18,26,.55)} .frame-hint{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);background:rgba(8,24,32,.82);color:#eafaf6;font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;backdrop-filter:blur(3px);white-space:nowrap} [dir=rtl] .frame-hint{transform:translate(50%,-50%)} .hero-montage{position:relative} .hero-montage .bubble{position:absolute;inset-inline-end:-8px;bottom:-18px;background:#fff;color:#12303c;border-radius:14px;border-end-end-radius:4px;padding:11px 14px;font-size:13.5px;font-weight:650;box-shadow:0 18px 40px rgba(4,18,26,.35);max-width:78%} .hero .chatdemo{margin:0;max-width:none;border-color:rgba(255,255,255,.16);box-shadow:0 24px 60px rgba(4,18,26,.45)} .hero .cd-body{min-height:300px} @media(max-width:860px){.hero-montage .bubble{bottom:-12px}} /* GeoAI product-window demo: map left half, chat right half (like the real product) */ .chatdemo-wide{max-width:1080px;margin:34px auto 0} .hero .chatdemo-wide{margin:34px auto 0} .pd-split{display:flex;direction:ltr} .pd-map{flex:1.1;min-height:440px;background:#e8f0ef;position:relative;z-index:0} .pd-map .leaflet-control-zoom a{width:26px;height:26px;line-height:26px;font-size:15px} .pd-split .cd-body{flex:1;min-height:440px;max-height:440px;overflow-y:auto;border-inline-start:1px solid var(--line)} [dir=rtl] .pd-split .cd-body{direction:rtl} .pd-tip{background:rgba(255,255,255,.92);border:0;box-shadow:0 2px 8px rgba(0,0,0,.18);font-weight:700;color:#0c2b38;border-radius:8px;padding:2px 8px} .pd-tip::before{display:none} @media(max-width:860px){.pd-split{flex-direction:column}.pd-map{min-height:260px}.pd-split .cd-body{min-height:300px;max-height:300px;border-inline-start:0;border-top:1px solid var(--line)}} /* browser frame around the walkthrough slideshow (matches the hero frames) */ .frame-light{box-shadow:0 18px 44px rgba(12,43,56,.14);border-color:rgba(255,255,255,.08)} .frame .shots{border:0;border-radius:0;box-shadow:none}