/* ===================================================================== styles.css — component STRUCTURE for the 41 pre-v5 pages. Load order: styles.css -> assets/css/site.css -> assets/css/legacy.css --------------------------------------------------------------------- SC-095: every numeric value here references the scale declared in assets/css/site.css :root (--r-*, --fs-*, --s-*, --sh-*). SC-097: the Inter @import is gone (Inter was never rendered) and no rule asks for a weight the font request does not load (Space Grotesk 400/500/600, IBM Plex Mono 400/500). SC-098: rules whose classes appear on zero pages have been deleted. Where legacy.css re-themes a component, the overridden half has been removed from this file so each component has ONE definition. ===================================================================== */ :root{--head:'Space Grotesk',ui-sans-serif,system-ui,sans-serif} section{position:relative} h1,h2,h3{font-family:var(--head);line-height:1.08} h3{font-size:var(--fs-6)} /* .eyebrow is Role A of the two-role label system — one definition, in legacy.css (SC-096) */ .accent{color:var(--accent)} .dark{background:var(--ink);color:#F3F1EC;--accent:#F3F1EC;--accent2:#F3F1EC} .btn{display:inline-flex;align-items:center;gap:var(--s-2);text-decoration:none;cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s,border-color .18s} .row{display:flex;gap:var(--s-4);flex-wrap:wrap} .crumb{margin-bottom:var(--s-5)} /* SC-088 the retired .orb / .gridbg decorative layers are gone; the leftover elements are neutralised in legacy.css until markup is cut. */ .hero{overflow:hidden} .hero .wrap{position:relative;z-index:1} .heroanim>*{opacity:0;animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards} .heroanim>*:nth-child(1){animation-delay:.05s}.heroanim>*:nth-child(2){animation-delay:.16s}.heroanim>*:nth-child(3){animation-delay:.3s}.heroanim>*:nth-child(4){animation-delay:.44s}.heroanim>*:nth-child(5){animation-delay:.58s} @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .proof{background:var(--ink);color:#F3F1EC;padding:var(--s-6) 0;border-radius:var(--r-5)} .proof .wrap{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-8);justify-content:center;align-items:center} .proof b{font-size:var(--fs-7);color:#F3F1EC;font-family:var(--head)} .proof span{font-size:var(--fs-3);color:#B7B2A8} .proof .it{display:flex;align-items:baseline;gap:var(--s-2)} .grid{display:grid;gap:var(--s-4)}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} /* .card surface (background/border/radius/hover) is owned by legacy.css */ .card{padding:var(--s-6);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;position:relative;overflow:hidden} .icon{width:46px;height:46px;border-radius:var(--r-3);display:inline-flex;align-items:center;justify-content:center;background:rgba(23,22,20,.10);color:var(--accent);margin-bottom:var(--s-4);transition:transform .25s,background .25s} .icon svg{width:23px;height:23px}.card:hover .icon{transform:scale(1.08) rotate(-4deg);background:rgba(23,22,20,.18)} .dark .icon{background:rgba(250,249,246,.15);color:var(--accent2)} .chead{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap} .chead .icon{margin-bottom:0;flex:0 0 auto} /* SC-084 card titles: styled identically whether the markup is or

*/ .chead b,.chead h3{font-size:var(--fs-5);font-weight:600;line-height:1.25;letter-spacing:-.01em} .tag{display:inline-block;font-weight:500;border:1px solid var(--line);padding:var(--s-1) var(--s-3);margin:2px var(--s-1) 2px 0} .chip{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-4);font-weight:500;padding:var(--s-2) var(--s-4);transition:transform .2s,border-color .2s,background .2s} .chip svg{width:16px;height:16px;color:var(--accent)}.dark .chip svg{color:var(--accent2)} .chip:hover{transform:translateY(-3px);border-color:var(--ink);background:rgba(23,22,20,.06)} .dark .chip:hover{border-color:rgba(250,249,246,.4);background:rgba(33,31,27,.75)} .up{color:var(--accent);font-weight:600;font-size:var(--fs-3);display:flex;align-items:center;gap:6px}.up svg{width:15px;height:15px} .center{text-align:center}.mt{margin-top:var(--s-4)}.mt2{margin-top:var(--s-6)} .lead-card{display:flex;gap:var(--s-7);align-items:center;flex-wrap:wrap} .avatar-lg{width:158px;height:158px;border-radius:var(--r-5);flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-2)} .avatar-lg span{font-family:var(--head);font-weight:600;font-size:var(--fs-10);letter-spacing:1px} .tavatar{width:80px;height:80px;border-radius:50%;margin:0 auto var(--s-4);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);transition:transform .25s} .tavatar span{font-family:var(--head);font-weight:600;font-size:var(--fs-7)} .card:hover .tavatar{transform:translateY(-3px) scale(1.05)} .muted{color:var(--grey);font-size:var(--fs-4)}.dark .muted{color:#B7B2A8} /* .callout (SC-087) and .band (SC-036) are defined once, in legacy.css */ .heritage{display:flex;align-items:center;gap:var(--s-7);flex-wrap:wrap;justify-content:center} .heritage img{height:72px;border-radius:var(--r-2);transition:transform .3s}.heritage img:hover{transform:scale(1.05)} .arrow{font-size:var(--fs-8);color:var(--accent);font-weight:600} .scbadge{background:#fff;border-radius:var(--r-4);padding:var(--s-3);display:inline-flex}.scbadge img{height:64px;width:64px;object-fit:contain;border-radius:var(--r-2)} .showcard{transition:transform .3s}.showcard:hover{transform:translateY(-4px)} .step{display:flex;gap:var(--s-5);align-items:flex-start;padding:var(--s-5) 0;border-bottom:1px solid var(--line)} .stepno{flex:0 0 var(--tap);height:var(--tap);border-radius:var(--r-2);background:rgba(23,22,20,.10);color:var(--accent);font-family:var(--head);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:var(--fs-6)} .dark .stepno{background:rgba(250,249,246,.15);color:var(--accent2)} .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}@media(max-width:620px){.tiles{grid-template-columns:1fr}} .tile{border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-6);text-align:center} .tile .icon{margin:0 auto var(--s-3)} html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}html.js .reveal.in,.reveal.in{opacity:1;transform:none} /* footer is defined once, in site.css */ .wizard h2,.wizard h3{color:var(--ink)} .wbar{height:6px;border-radius:var(--r-full);overflow:hidden} .wbar>span{display:block;height:100%;width:0;background:var(--ink);transition:width .4s cubic-bezier(.2,.7,.2,1)} .wmeta{font-size:var(--fs-3);color:var(--grey);margin:var(--s-3) 0 var(--s-6)} .wstep{display:none} .field{margin-bottom:var(--s-4)} .field label{font-size:var(--fs-4)} .field input,.field textarea,.field select{width:100%;padding:var(--s-3) var(--s-4);transition:border-color .2s,box-shadow .2s} .optgroup{display:grid;gap:var(--s-3);grid-template-columns:1fr 1fr}@media(max-width:520px){.optgroup{grid-template-columns:1fr}} .wopt{padding:var(--s-4);cursor:pointer;font-weight:500;font-size:var(--fs-4);display:flex;align-items:center;gap:var(--s-3);transition:.15s;user-select:none} .wopt .dot{width:18px;height:18px;border-radius:50%;flex:0 0 18px;transition:.15s} /* insights sub-nav */ .subnav{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-6);border-bottom:1px solid var(--line);padding-bottom:2px} .subnav a{padding:var(--s-2) var(--s-4);border-radius:var(--r-2) var(--r-2) 0 0;font-weight:500;font-size:var(--fs-4);color:var(--grey);text-decoration:none;border-bottom:2px solid transparent;transition:.16s} .subnav a:hover{color:var(--ink);background:rgba(23,22,20,.05)} .subnav a.active{color:var(--accent);border-bottom-color:var(--accent)} .dark .subnav{border-color:var(--dark-line)}.dark .subnav a{color:#B7B2A8}.dark .subnav a:hover{color:#F3F1EC;background:rgba(250,249,246,.08)}.dark .subnav a.active{color:var(--accent2);border-bottom-color:var(--accent2)} .evrow{display:flex;gap:var(--s-4);align-items:flex-start} .evdate{flex:0 0 74px;text-align:center;border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-3) var(--s-2);line-height:1.1} .evdate .m{color:var(--accent);text-transform:uppercase} .evdate .d{font-size:var(--fs-7);font-weight:600;font-family:var(--head)} .dark .evdate .d{color:#F3F1EC} .pill{display:inline-block;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:rgba(23,22,20,.10);padding:var(--s-1) var(--s-2)} .dark .pill{background:rgba(250,249,246,.14)} /* profile download gate */ .dlgate{max-width:520px} .dldone{display:none;text-align:center;padding:6px} .dldone .icon{margin:0 auto var(--s-3)} .lf-done{display:none;text-align:center;padding:var(--s-2) var(--s-1)} .leadform .field.check input{width:auto} /* Qatar client wall */ .qatar-wall{position:relative;color:#F3F1EC;overflow:hidden} .qatar-wall .glow{position:absolute;inset:0;background:radial-gradient(60% 60% at 15% 0%,rgba(250,249,246,.06),transparent 60%),radial-gradient(50% 50% at 90% 10%,rgba(23,22,20,.22),transparent 60%);z-index:0} .qatar-wall .pattern{position:absolute;inset:0;opacity:.05;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 4l7 19 19 7-19 7-7 19-7-19-19-7 19-7z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E")} .qatar-wall .skyline{position:absolute;left:0;right:0;bottom:0;width:100%;z-index:0;opacity:.5} .qatar-wall .wrap{position:relative;z-index:2} .logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4);margin-top:var(--s-7)} @media(max-width:980px){.logo-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:640px){.logo-grid{grid-template-columns:repeat(2,1fr)}} .logo-tile{min-height:72px;border:1px solid var(--dark-line);border-radius:var(--r-3);background:rgba(250,249,246,.035);display:flex;align-items:center;justify-content:center;padding:var(--s-3) var(--s-2);text-align:center;transition:transform .2s,border-color .2s,background .2s} .logo-tile:hover{border-color:var(--accent2);background:rgba(250,249,246,.09);transform:translateY(-3px)} .logo-tile span{font-family:var(--head);font-weight:500;font-size:var(--fs-3);color:#B7B2A8;letter-spacing:.01em;line-height:1.25} .logo-tile.feat{border-color:rgba(250,249,246,.45);background:rgba(250,249,246,.06)} .logo-tile.feat span{color:#F3F1EC} .wnav{display:flex;justify-content:space-between;margin-top:var(--s-6);gap:var(--s-3)} .big-url{display:flex;gap:var(--s-3);margin-top:var(--s-5)}@media(max-width:520px){.big-url{flex-direction:column}} .big-url input{flex:1;font-size:var(--fs-5);padding:var(--s-4) var(--s-5)} .scan{display:flex;flex-direction:column;align-items:center;padding:var(--s-4) 0} .spinner{width:42px;height:42px;border:3px solid rgba(23,22,20,.18);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .scanline{display:flex;align-items:center;gap:var(--s-3);color:var(--grey);font-size:var(--fs-4);opacity:.35;transition:opacity .3s;margin-top:var(--s-3)} .scanline .tick{width:18px;height:18px;color:var(--grey);display:inline-flex}.scanline .tick svg{width:18px;height:18px} .scanline.on{opacity:1;color:var(--ink)} .scanline.done .tick{color:var(--ink)} .gauge{position:relative;width:150px;height:150px;margin:0 auto} .gauge svg circle.val{transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1)} .gauge .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:var(--fs-9);font-weight:600} .score-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}@media(max-width:520px){.score-row{grid-template-columns:1fr}} .score-item{border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-4)} .score-item .top{display:flex;justify-content:space-between;align-items:center;font-weight:600} .grade{font-size:var(--fs-2);font-weight:600;padding:3px var(--s-2);border-radius:var(--r-full)} .meter{height:8px;border-radius:var(--r-full);overflow:hidden;margin-top:var(--s-2)} .meter>span{display:block;height:100%;border-radius:var(--r-full);background:var(--ink);width:0;transition:width 1s ease .1s} /* .roi3 / .roicard are defined once, in legacy.css (SC-090) */ .plist{list-style:none;margin:var(--s-3) 0 0;padding:0} .plist li{position:relative;padding-left:var(--s-5);margin-bottom:7px;font-size:var(--fs-3);color:var(--grey)} .plist li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:2px;background:var(--accent);transform:rotate(45deg)} .dark .plist li{color:#B7B2A8} .sideblock{margin-bottom:var(--s-5)}.sideblock:last-child{margin-bottom:0} /* .sidelabel is Role B of the two-role label system — defined in legacy.css (SC-096) */ /* --- richness pass: subtle motion + captions --- */ .floaty{animation:floaty 6.5s ease-in-out infinite} @keyframes pulsedot{0%{box-shadow:0 0 0 0 rgba(92,88,81,.55)}70%{box-shadow:0 0 0 8px rgba(92,88,81,0)}100%{box-shadow:0 0 0 0 rgba(92,88,81,0)}} .cap{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-2);color:var(--grey);letter-spacing:.02em;margin-top:var(--s-4)} .dark .cap{color:#B7B2A8} .cap .live{width:8px;height:8px;border-radius:50%;background:var(--grey);flex:0 0 8px;animation:pulsedot 2s infinite} .card .up svg{transition:transform .2s}.card:hover .up svg{transform:translateX(4px)} .pagehero .band>div:last-child svg{animation:floaty 6.5s ease-in-out infinite} @media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none}.heroanim>*{opacity:1}}