@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* Explicor palette — deep navy + teal on clean white. The variable names are inherited from the previous brand; their values now carry the Explicor look, so every `var(--blue)`/`var(--sky)` reference re-themes without renaming. */ --ink: #0e2a47; /* deep navy — headlines & body text */ --muted: #5b7183; /* slate grey — secondary text */ --soft: #e2f2f5; /* pale teal wash */ --cream: #f4f8fa; /* off-white panel */ --sun: #7fd6e2; /* light teal (was warm yellow) */ --gold: #178a9e; /* teal accent (was gold) */ --sky: #27c0d6; /* bright teal */ --blue: #1a7f96; /* primary teal — buttons, links, focus */ --white: #ffffff; --shadow: 0 24px 70px rgba(14, 42, 71, 0.14); --radius-xl: 34px; --radius-lg: 24px; --radius-md: 16px; /* --- Refined-workspace design tokens (from the 2a redesign) --- */ --ws-bg: #f7fafb; /* app / workspace background */ --ink-2: #26384a; /* body text on white cards */ --ink-3: #37485a; /* secondary body */ --head: #14324f; /* headings */ --faint: #9fb0bd; /* faint labels / chevrons */ --line: #eef2f5; /* hairline dividers */ --line-2: #e5ebef; /* card borders */ --teal-tint: rgba(26, 127, 150, 0.08); --teal-tint-line: rgba(26, 127, 150, 0.22); --grad-cta: linear-gradient(135deg, #123a5c, #1fb2cb); --grad-logo: linear-gradient(150deg, #0e2a47, #123a5c); --grad-avatar: linear-gradient(140deg, #1a7f96, #27c0d6); --sh-card: 0 8px 34px rgba(20, 50, 79, 0.10); --sh-cta: 0 12px 26px rgba(31, 178, 203, 0.26); --sh-out: 0 6px 20px rgba(20, 50, 79, 0.05); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Clip horizontal overflow at the root too, not just on . The hero/quote decorations bleed past the page edge with physical offsets; in RTL that bleed would otherwise widen the document and push the centered content off-screen. */ html { overflow-x: hidden; } body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, #dff2f6 0%, #eef6f9 26%, #ffffff 52%, #eaf2f8 80%, #f4f9fc 100%); color: var(--ink); line-height: 1.5; overflow-x: hidden; } a { color: inherit; text-decoration: none; } .page { min-height: 100vh; position: relative; } /* The decorative grain/noise overlay is retired in the refined direction (the redesign calls for "orbs/grain gone" — a calmer, flatter surface). */ .grain { display: none; } header { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; } .brand { display: flex; align-items: center; gap: 14px; font-weight: 850; letter-spacing: -0.055em; font-size: 31px; } .brand span:last-child { background: linear-gradient(100deg, var(--ink), var(--blue) 58%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* The Explicor "E" mark. A navy badge in the header/phone (white glyph); the hero shows the glyph on its own with the navy→teal gradient, matching the logo sheet. */ /* The "Pro" accent in the Explicor Pro wordmark. */ .brand-pro { color: var(--gold); } .mark { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, #0e2a47, #123a5c); box-shadow: 0 14px 30px rgba(14, 42, 71, 0.30); } .mark svg { width: 28px; height: 28px; } nav { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 15px; } .nav-button { color: var(--ink); background: rgba(255,255,255,0.7); padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 25px rgba(61,50,43,0.08); border: 1px solid rgba(255,255,255,0.7); } /* Pro sign-in indicator in the header nav */ .auth-status { display: inline-flex; align-items: center; gap: 10px; } .auth-who { font-size: 14px; color: var(--ink); font-weight: 650; } .auth-signout { font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); background: rgba(255,255,255,0.6); border: 1px solid rgba(39,48,54,0.14); border-radius: 999px; padding: 6px 12px; } .auth-signout:hover { border-color: var(--blue); } .hero { width: min(1180px, calc(100% - 40px)); margin: 28px auto 0; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: center; position: relative; z-index: 1; padding-bottom: 90px; } .hero::before { content: ""; position: absolute; width: 520px; height: 520px; left: -190px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(39,192,214,0.28), transparent 66%); z-index: -1; } .hero::after { content: ""; position: absolute; width: 460px; height: 460px; right: -160px; bottom: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(47,199,255,0.30), transparent 68%); z-index: -1; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.74); border: 1px solid rgba(255,255,255,0.8); color: var(--blue); padding: 9px 14px; border-radius: 999px; font-weight: 650; font-size: 14px; box-shadow: 0 12px 34px rgba(61,50,43,0.07); margin-bottom: 26px; } .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 7px rgba(39, 192, 214, 0.30); } .hero-logo-lockup { display: inline-flex; align-items: center; gap: 15px; margin-bottom: 22px; font-size: clamp(38px, 5vw, 62px); font-weight: 850; letter-spacing: -0.075em; line-height: 1; background: linear-gradient(100deg, var(--ink), var(--blue) 58%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-logo-mark { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; } .hero-logo-mark svg { width: 62px; height: 62px; } /* Echoes the "I AM EXPLAINED" line beneath the Explicor wordmark. */ .tagline { margin: -12px 0 26px; color: var(--gold); font-size: 14px; font-weight: 800; letter-spacing: 0.34em; text-transform: uppercase; } h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 7vw, 82px); line-height: 0.96; letter-spacing: -0.075em; font-weight: 500; max-width: 820px; margin-bottom: 28px; } .hero p.lead { font-size: clamp(19px, 2.2vw, 25px); line-height: 1.42; color: var(--muted); max-width: 620px; margin-bottom: 34px; } .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 34px; } .primary { background: linear-gradient(135deg, #123a5c, #1fb2cb); color: white; border: none; border-radius: 999px; padding: 16px 23px; font-size: 16px; font-weight: 700; box-shadow: 0 18px 40px rgba(39,48,54,0.23); cursor: pointer; } .secondary { background: rgba(255,255,255,0.78); color: var(--ink); border: 1px solid rgba(255,255,255,0.9); border-radius: 999px; padding: 16px 22px; font-size: 16px; font-weight: 700; box-shadow: 0 14px 35px rgba(61,50,43,0.08); cursor: pointer; } .trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; } .trust-card { background: rgba(255,255,255,0.68); border: 1px solid rgba(255,255,255,0.75); border-radius: var(--radius-md); padding: 14px; color: var(--muted); font-size: 13px; min-height: 82px; } .trust-card strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; } .phone-wrap { position: relative; min-height: 690px; display: grid; place-items: center; } .orb { position: absolute; border-radius: 50%; filter: blur(0px); opacity: 0.9; } .orb.one { width: 390px; height: 390px; background: linear-gradient(135deg, rgba(39,192,214,0.55), rgba(255,255,255,0.12)); top: 18px; right: 18px; } .orb.two { width: 300px; height: 300px; background: linear-gradient(135deg, rgba(47,199,255,0.62), rgba(255,255,255,0.2)); left: 16px; bottom: 40px; } .phone { width: min(390px, 86vw); border-radius: 44px; background: linear-gradient(180deg, #ffffff, #eef4f7); box-shadow: var(--shadow); border: 10px solid rgba(39,48,54,0.92); position: relative; z-index: 2; overflow: hidden; } .phone::before { content: ""; display: block; width: 114px; height: 24px; border-radius: 0 0 18px 18px; background: rgba(39,48,54,0.92); margin: 0 auto; } .app-screen { padding: 24px; } .app-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .mini-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -0.04em; } .mini-dot { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg, #0e2a47, #123a5c); box-shadow: 0 8px 18px rgba(14, 42, 71, 0.22); } .mini-dot svg { width: 17px; height: 17px; } .status { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: #def6ff; color: var(--blue); font-weight: 700; } .report-card { background: var(--cream); border-radius: 26px; padding: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9); margin-bottom: 16px; } .report-card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; margin-bottom: 9px; } .report-card h3 { font-size: 24px; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 12px; } .scan-visual { height: 160px; border-radius: 22px; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.96) 0 10%, rgba(47,199,255,0.76) 11% 18%, transparent 19%), radial-gradient(circle at 50% 45%, rgba(26,127,150,0.70) 0 24%, rgba(39,48,54,0.84) 25% 32%, rgba(39,48,54,0.05) 33%), linear-gradient(135deg, #123a5c, #27c0d6); margin-bottom: 16px; position: relative; overflow: hidden; } .scan-visual::after { content: ""; position: absolute; inset: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.45); } .finding { background: white; border-radius: 18px; padding: 15px; margin-top: 12px; border: 1px solid rgba(39,48,54,0.06); } .finding strong { display: block; margin-bottom: 5px; letter-spacing: -0.02em; } .finding span { color: var(--muted); font-size: 14px; } .guidance-note { display: flex; gap: 12px; align-items: flex-start; background: rgba(47,199,255,0.22); color: #116da7; border-radius: 22px; padding: 16px; font-size: 14px; font-weight: 560; } .section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 1; } .section-title { text-align: center; max-width: 760px; margin: 0 auto 36px; } .section-title h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -0.06em; font-weight: 500; margin-bottom: 16px; } .section-title p { color: var(--muted); font-size: 19px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 92px; } .step { background: rgba(255,255,255,0.74); border: 1px solid rgba(255,255,255,0.82); border-radius: var(--radius-lg); padding: 26px; box-shadow: 0 16px 50px rgba(61,50,43,0.08); min-height: 260px; } .step-number { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: white; font-weight: 800; margin-bottom: 34px; } .step h3 { font-size: 24px; letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 12px; } .step p { color: var(--muted); font-size: 16px; } .quote-band { width: min(1180px, calc(100% - 40px)); margin: 0 auto 92px; background: linear-gradient(135deg, rgba(32,50,74,0.96), rgba(26,127,150,0.92)); color: white; border-radius: var(--radius-xl); padding: clamp(34px, 7vw, 76px); display: grid; grid-template-columns: 1fr 0.8fr; gap: 34px; align-items: center; box-shadow: var(--shadow); position: relative; overflow: hidden; } .quote-band::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -150px; top: -110px; background: radial-gradient(circle, rgba(39,192,214,0.55), transparent 66%); } .quote-band h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -0.06em; font-weight: 500; position: relative; z-index: 1; } .quote-band p { color: rgba(255,255,255,0.76); font-size: 18px; position: relative; z-index: 1; } .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 92px; } .feature { background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.78); border-radius: 22px; padding: 22px; min-height: 170px; } .feature .icon { font-size: 26px; margin-bottom: 18px; } .feature h3 { font-size: 18px; letter-spacing: -0.03em; margin-bottom: 8px; } .feature p { color: var(--muted); font-size: 14px; } .privacy-band { width: min(1180px, calc(100% - 40px)); margin: 0 auto 34px; background: radial-gradient(circle at 10% 0%, rgba(39,192,214,0.32), transparent 34%), radial-gradient(circle at 95% 10%, rgba(47,199,255,0.34), transparent 38%), rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.92); box-shadow: 0 20px 60px rgba(26,127,150,0.12); border-radius: var(--radius-xl); padding: clamp(28px, 5vw, 52px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 34px; align-items: center; position: relative; z-index: 1; } .privacy-kicker { display: inline-flex; margin-bottom: 14px; padding: 8px 13px; border-radius: 999px; background: rgba(39,192,214,0.20); color: var(--blue); font-size: 13px; font-weight: 850; letter-spacing: 0.02em; } .privacy-band h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 4.6vw, 58px); line-height: 1; letter-spacing: -0.06em; font-weight: 500; margin-bottom: 16px; } .privacy-band p { color: var(--muted); font-size: 18px; max-width: 680px; } .privacy-points { display: grid; gap: 12px; } .privacy-points div { background: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.95); border-radius: 19px; padding: 18px; box-shadow: 0 12px 28px rgba(26,127,150,0.08); } .privacy-points strong { display: block; color: var(--ink); margin-bottom: 5px; font-size: 16px; letter-spacing: -0.02em; } .privacy-points span { color: var(--muted); font-size: 14px; } .disclaimer { width: min(920px, calc(100% - 40px)); margin: 0 auto 70px; text-align: center; color: var(--muted); font-size: 14px; background: rgba(255,255,255,0.64); border: 1px solid rgba(255,255,255,0.72); border-radius: 18px; padding: 18px 24px; } footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 48px; display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; border-top: 1px solid rgba(39,48,54,0.08); position: relative; z-index: 1; } @media (max-width: 900px) { nav { display: none; } .hero { grid-template-columns: 1fr; gap: 14px; } .phone-wrap { min-height: 620px; } .trust, .steps, .feature-grid, .quote-band, .privacy-band { grid-template-columns: 1fr; } .trust { max-width: none; } footer { flex-direction: column; gap: 10px; } } @media (max-width: 520px) { header, .hero, .section, .quote-band, .privacy-band, footer { width: min(100% - 28px, 1180px); } .actions { flex-direction: column; align-items: stretch; } .primary, .secondary { width: 100%; } .phone { border-width: 8px; } } /* --- landing: the two product streams --- */ .streams { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 92px; } .stream-card { background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(255, 255, 255, 0.82); border-radius: var(--radius-lg); padding: 30px; box-shadow: 0 16px 50px rgba(61, 50, 43, 0.08); display: flex; flex-direction: column; gap: 12px; } .stream-card h3 { font-size: 26px; letter-spacing: -0.04em; line-height: 1.1; } .stream-card p { color: var(--muted); font-size: 16px; flex: 1; } .stream-tag { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); } /* Anchor styled as a button (the .primary/.secondary rules assume