/* ============================================================ Aquinas Technology Group — corporate site Vellum & Oxford (light) · Slate (dark) · Cormorant + Inter Design tokens are the single source of truth for the palette. Light: vellum paper, oxford-navy ink, gold-leaf accent. Dark: neutral slate, gold accent — navy demoted to a detail. The visitor's OS preference decides the default; the nav toggle overrides it via data-theme on (persisted in localStorage). ============================================================ */ :root{ --bg: #f7f2e6; /* page base — vellum */ --bg-alt: #efe8d5; /* alternate section bands */ --surface: #fffdf4; /* cards, panels, inputs */ --border: #ddd1b3; /* hairline borders */ --ink: #1d2949; /* primary text — oxford navy */ --ink-dim: #46516f; /* secondary text */ --ink-faint: #7d8298; /* tertiary / labels */ --accent: #96731a; /* gold — links, eyebrows, rules */ --accent-soft: #7a5c10; /* link hover (darkens on light) */ --cta-bg: #1d2949; /* primary button */ --cta-text: #f7f2e6; --shadow: 0 14px 40px rgba(60,48,20,.10); --mock-bg:#131517; --mock-chrome:#101214; --mock-panel:#1a1d20; --mock-border:#2c3034; --mock-line:#24282c; --mock-ring:transparent; --show-sun: none; /* theme-toggle icon visibility */ --show-moon: inline; --maxw: 1140px; --gutter: clamp(20px, 5vw, 48px); --r: 14px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#131517; --bg-alt:#17191c; --surface:#1e2125; --border:#33373c; --ink:#ecebe6; --ink-dim:#c0c0ba; --ink-faint:#8b8b85; --accent:#d3a944; --accent-soft:#e2bf67; --cta-bg:#d3a944; --cta-text:#131517; --shadow:0 18px 50px rgba(0,0,0,.45); --mock-bg:#1c2026; --mock-chrome:#15181c; --mock-panel:#272c33; --mock-border:#474e57; --mock-line:#323841; --mock-ring:rgba(211,169,68,.32); --show-sun:inline; --show-moon:none; } } :root[data-theme="dark"]{ --bg:#131517; --bg-alt:#17191c; --surface:#1e2125; --border:#33373c; --ink:#ecebe6; --ink-dim:#c0c0ba; --ink-faint:#8b8b85; --accent:#d3a944; --accent-soft:#e2bf67; --cta-bg:#d3a944; --cta-text:#131517; --shadow:0 18px 50px rgba(0,0,0,.45); --mock-bg:#1c2026; --mock-chrome:#15181c; --mock-panel:#272c33; --mock-border:#474e57; --mock-line:#323841; --mock-ring:rgba(211,169,68,.32); --show-sun:inline; --show-moon:none; } html{color-scheme:light dark} :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .25s ease,color .25s ease; } img{max-width:100%;display:block} a{color:var(--accent);text-decoration:none;transition:color .18s ease} a:hover{color:var(--accent-soft)} /* ---------- Typography ---------- */ h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.08;color:var(--ink)} .display{font-family:'Cormorant SC','Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:.02em} h1{font-size:clamp(2.6rem,5.4vw,4.1rem)} h2{font-size:clamp(1.9rem,3.4vw,2.7rem)} h3{font-size:1.32rem} p{color:var(--ink-dim)} .lead{font-size:clamp(1.08rem,1.7vw,1.32rem);color:var(--ink-dim);line-height:1.6} .eyebrow{ font-family:'Inter',sans-serif;font-weight:600;font-size:.74rem; letter-spacing:.22em;text-transform:uppercase;color:var(--accent); margin-bottom:18px;display:block; } .gold{color:var(--accent)} .center{text-align:center} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} section{padding-block:clamp(52px,7vw,92px)} .section-head{max-width:720px;margin-bottom:40px} .section-head.center{margin-inline:auto} .rule{width:54px;height:3px;background:var(--accent);border-radius:2px;margin:22px 0} .section-head.center .rule{margin-inline:auto} /* ---------- Navigation ---------- */ .nav{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;height:74px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .brand{display:flex;align-items:center;gap:13px} .brand img{width:42px;height:42px} .brand .wm{display:flex;flex-direction:column;line-height:1} .brand .wm b{font-family:'Cormorant SC','Cormorant Garamond',serif;font-weight:600;font-size:1.32rem;letter-spacing:.14em;color:var(--ink)} .brand .wm span{font-family:'Inter',sans-serif;font-size:.56rem;letter-spacing:.32em;color:var(--accent);text-transform:uppercase;margin-top:3px} .nav-links{display:flex;align-items:center;gap:34px;margin-left:auto} .nav-links a.navlink{color:var(--ink-dim);font-size:.95rem;font-weight:500;letter-spacing:.01em} .nav-links a.navlink:hover,.nav-links a.navlink.active{color:var(--ink)} .nav-right{display:flex;align-items:center;gap:8px} .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; background:none;border:1px solid var(--border);border-radius:999px; width:38px;height:38px;color:var(--ink-dim);cursor:pointer; transition:border-color .18s ease,color .18s ease;flex:none; } .theme-toggle:hover{border-color:var(--accent);color:var(--accent)} .theme-toggle svg{width:17px;height:17px} .theme-toggle .icon-sun{display:var(--show-sun)} .theme-toggle .icon-moon{display:var(--show-moon)} .btn{ display:inline-flex;align-items:center;gap:9px; font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.01em; padding:11px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:all .18s ease; } .btn-primary{background:var(--cta-bg);color:var(--cta-text)} .btn-primary:hover{filter:brightness(1.12);color:var(--cta-text);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-lg{padding:15px 30px;font-size:1.02rem} .nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px} .nav-toggle svg{width:26px;height:26px} .nav-toggle svg line{transition:transform .22s ease,opacity .18s ease;transform-box:fill-box;transform-origin:center} .nav-toggle[aria-expanded="true"] svg .l1{transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] svg .l2{opacity:0} .nav-toggle[aria-expanded="true"] svg .l3{transform:translateY(-6px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,108px)} .hero::before{ /* soft radial glow, very subtle */ content:"";position:absolute;inset:0; background: radial-gradient(900px 520px at 50% -8%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 60%), radial-gradient(700px 460px at 84% 18%, color-mix(in srgb,var(--cta-bg) 11%,transparent), transparent 60%); pointer-events:none; } .hero-inner{position:relative;max-width:880px;margin:0 auto;text-align:center} .hero-mark{width:104px;height:104px;margin:0 auto 30px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.18))} .hero h1{margin-bottom:8px} .hero .tag{font-family:'Cormorant SC',serif;letter-spacing:.18em;font-size:.92rem;color:var(--accent);text-transform:uppercase;margin-bottom:30px;display:block} .hero .lead{max-width:640px;margin:0 auto 38px} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- Generic surfaces ---------- */ .surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--r)} .alt{background:var(--bg-alt)} .cards{display:grid;gap:22px} .cards.three{grid-template-columns:repeat(3,1fr)} .cards.two{grid-template-columns:repeat(2,1fr)} .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:32px 30px;box-shadow:var(--shadow);transition:transform .2s ease,border-color .2s ease; } .card:hover{transform:translateY(-3px);border-color:var(--accent)} #carrier,#warehouse,#forwarder{scroll-margin-top:90px} .card .kicker{font-family:'Cormorant SC',serif;letter-spacing:.14em;color:var(--accent);font-size:.82rem;text-transform:uppercase;margin-bottom:12px} .card h3{margin-bottom:10px} .card p{font-size:.98rem} /* ---------- Problem band ---------- */ .statement{max-width:880px} .statement p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.4;color:var(--ink)} .statement p .gold{font-style:italic} /* ---------- Connective-layer diagram ---------- */ .diagram{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center} .diagram .copy h2{margin-bottom:18px} .figure{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:34px;box-shadow:var(--shadow)} .figure svg{width:100%;height:auto} .dg-line{stroke:var(--accent)} .dg-arrow{fill:var(--accent)} .dg-hub{fill:var(--cta-bg);stroke:var(--accent)} .dg-hubring{stroke:color-mix(in srgb,var(--cta-text) 30%,transparent)} .dg-hub-t{fill:var(--cta-text)} .dg-hub-s{fill:color-mix(in srgb,var(--cta-text) 72%,transparent)} .dg-node{fill:var(--bg-alt);stroke:var(--border)} .dg-node-t{fill:var(--ink)} .dg-node-s{fill:var(--ink-faint)} /* ---------- Platform illustration: one core, per-client layouts ---------- Deliberately theme-independent: the product runs dark, so the panels keep a fixed slate-and-gold palette in both site themes. Simple stacked layout only — no positioned decorations. Sample data, fictional clients. */ .fit{max-width:1020px;margin:0 auto} .fit-core{ background:var(--mock-bg);border:1px solid var(--mock-border);box-shadow:0 0 0 1px var(--mock-ring);border-radius:12px; padding:14px 22px;margin-bottom:14px;text-align:center; display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap; } .fc-mark{font-family:'Cormorant SC',serif;font-size:.95rem;letter-spacing:.18em;color:#d3a944;text-transform:uppercase;white-space:nowrap} .fc-items{font-family:'Inter',sans-serif;font-size:.8rem;color:#9aa0a3} .fit-windows{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .fitwin{ background:var(--mock-bg);border:1px solid var(--mock-border);border-radius:12px;overflow:hidden; font-family:'Inter',sans-serif;font-size:13px;line-height:1.5;color:#ecebe6; box-shadow:0 0 0 1px var(--mock-ring),0 18px 44px rgba(0,0,0,.28);display:flex;flex-direction:column; } .fw-chrome{display:flex;gap:5px;padding:10px 14px;background:var(--mock-chrome);border-bottom:1px solid var(--mock-border)} .fw-chrome i{width:8px;height:8px;border-radius:50%;background:var(--mock-border)} .fw-label{padding:10px 14px 0;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#d3a944;font-weight:600} .fw-title{padding:4px 14px 10px;font-size:.95rem;font-weight:600;color:#ecebe6;border-bottom:1px solid var(--mock-line)} .fw-table{display:grid;grid-template-columns:1.1fr 1fr .8fr;gap:6px 10px;padding:12px 14px;border-bottom:1px solid var(--mock-line);font-variant-numeric:tabular-nums} .fw-th{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#9aa0a3;font-weight:600;padding-bottom:2px;border-bottom:1px solid var(--mock-line)} .fw-td{font-size:.76rem;color:#c9c8c2} .fw-td.num{color:#ecebe6;font-weight:600} .fw-td.ok{color:#d3a944} .fw-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px;border-bottom:1px solid var(--mock-line)} .fw-tile{background:var(--mock-panel);border:1px solid var(--mock-border);border-radius:8px;padding:10px;text-align:center} .fw-tile b{display:block;font-size:1.3rem;color:#d3a944;font-variant-numeric:tabular-nums;line-height:1.2} .fw-tile span{font-size:.68rem;color:#9aa0a3} .fw-checks{padding:10px 14px;border-bottom:1px solid var(--mock-line);display:flex;flex-direction:column;gap:10px} .fw-check{display:flex;align-items:flex-start;gap:10px} .fw-dot{width:10px;height:10px;border-radius:50%;background:var(--mock-bg);border:2px solid var(--mock-border);flex:none;margin-top:4px} .fw-check.done .fw-dot{background:#d3a944;border-color:#d3a944} .fw-check.now .fw-dot{border-color:#d3a944} .fw-check b{display:block;font-size:.8rem;color:#ecebe6;font-weight:600} .fw-check.now b{color:#d3a944} .fw-check small{font-size:.72rem;color:#9aa0a3} .fw-foot{padding:10px 14px;font-size:.73rem;color:#9aa0a3;margin-top:auto} .am-note{text-align:center;font-size:.82rem;color:var(--ink-faint);margin-top:14px} @media (max-width:880px){.fit-windows{grid-template-columns:1fr}.fit-core{justify-content:flex-start;text-align:left}} /* ---------- Proof / legitimacy ---------- */ .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px} .proof .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px;text-align:center;box-shadow:var(--shadow)} .proof .stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--accent);line-height:1.1;margin-bottom:6px} .proof .stat span{font-size:.86rem;color:var(--ink-dim)} .live-line{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--border);padding:9px 16px;border-radius:999px;margin-bottom:26px} .proof-note{max-width:760px;margin:26px auto 0;font-size:.96rem;color:var(--ink-dim);line-height:1.6} .proof-note b{color:var(--ink);font-weight:600} .live-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}} /* ---------- CTA band ---------- */ .cta-band{background:linear-gradient(180deg,var(--bg-alt),var(--bg));border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .cta-band .wrap{text-align:center;max-width:720px} .cta-band h2{margin-bottom:14px} .cta-band p{margin-bottom:30px} /* ---------- List feature rows ---------- */ .feature{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center} .feature + .feature{margin-top:46px} .feature.flip .copy{order:2} .feature ul{list-style:none;margin-top:18px} .feature li{position:relative;padding-left:28px;margin-bottom:12px;color:var(--ink-dim)} .feature li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border:1.6px solid var(--accent);border-radius:2px;transform:rotate(45deg)} /* ---------- About ---------- */ .about-hero{max-width:820px} .signals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px} .signal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)} .signal h3{font-size:1.05rem;color:var(--accent);margin-bottom:8px} .signal p{font-size:.94rem} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .field{margin-bottom:18px} .field label{display:block;font-size:.82rem;letter-spacing:.04em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px} .field input,.field textarea{ width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px; color:var(--ink);font-family:inherit;font-size:1rem;padding:13px 15px;transition:border-color .18s ease; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .field textarea{min-height:140px;resize:vertical} .contact-aside .surface{padding:30px} .contact-aside .row{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px} .contact-aside .row:last-child{margin-bottom:0} .contact-aside .row svg{width:22px;height:22px;flex:none;margin-top:3px;color:var(--accent)} .contact-aside .row b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px} .contact-aside .row span,.contact-aside .row a{font-size:.95rem;color:var(--ink-dim)} .form-note{font-size:.85rem;color:var(--ink-faint);margin-top:6px} .form-ok{display:none;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--accent);border-radius:10px;padding:14px 16px;color:var(--ink);margin-bottom:18px} /* ---------- Intake form ---------- */ .intake fieldset{border:0;border-top:1px solid var(--border);padding:26px 0 4px;margin:0} .intake fieldset:first-of-type{border-top:0;padding-top:0} .intake legend{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--ink);padding:0;margin-bottom:4px} .intake .legend-num{color:var(--accent);font-family:'Cormorant SC',serif;font-size:1rem;margin-right:10px} .intake .hint{font-size:.9rem;color:var(--ink-faint);margin-bottom:18px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field select{ width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px; color:var(--ink);font-family:inherit;font-size:1rem;padding:13px 15px;transition:border-color .18s ease; appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a5822f' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center; } .field select:focus{outline:none;border-color:var(--accent)} .req{color:var(--accent)} .optgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin-top:4px} .optgrid.three{grid-template-columns:repeat(3,1fr)} .opt{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;transition:border-color .15s ease;font-size:.95rem;color:var(--ink-dim)} .opt:hover{border-color:var(--accent)} .opt input{accent-color:var(--accent);width:16px;height:16px;flex:none} .opt:has(input:checked){border-color:var(--accent);color:var(--ink)} .pdf-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)} .pdf-card svg{width:26px;height:26px;color:var(--accent)} .steps{counter-reset:step;list-style:none;margin-top:6px} .steps li{position:relative;padding-left:38px;margin-bottom:16px;color:var(--ink-dim);font-size:.95rem} .steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid var(--accent);color:var(--accent);font-size:.85rem;font-weight:600;display:flex;align-items:center;justify-content:center} @media (max-width:880px){.two-col,.optgrid,.optgrid.three{grid-template-columns:1fr}} /* ---------- Upload + review/approve ---------- */ .dropzone{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--surface);border:1.5px dashed var(--border);border-radius:12px;padding:18px;cursor:pointer;transition:border-color .15s ease;margin-top:16px} .dropzone:hover{border-color:var(--accent)} .dropzone svg{width:24px;height:24px;color:var(--accent)} .dropzone b{color:var(--ink);font-weight:600;font-size:.98rem} .dropzone small{font-size:.85rem;color:var(--ink-faint)} .review-summary{background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--accent);border-radius:12px;padding:18px 20px;color:var(--ink);font-size:1.04rem;line-height:1.55;margin-bottom:24px} .review-summary b{color:var(--accent);display:block;font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;font-weight:600} .review-list{display:grid;grid-template-columns:max-content 1fr;gap:11px 22px;margin-bottom:28px} .review-list dt{color:var(--ink-faint);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding-top:3px} .review-list dd{color:var(--ink);margin:0;font-size:.98rem;line-height:1.5} .review-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .done-panel{background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--accent);border-radius:14px;padding:38px 32px;text-align:center} .done-panel svg{width:48px;height:48px;color:var(--accent);margin:0 auto 16px} .done-panel h2{margin-bottom:10px} .done-panel p{max-width:460px;margin:0 auto} @media (max-width:560px){.review-list{grid-template-columns:1fr;gap:2px 0}.review-list dd{margin-bottom:12px}} /* ---------- Founder ---------- */ .founder{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;max-width:900px} .founder-badge{width:132px;height:132px;border-radius:50%;background:var(--surface);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;flex:none} .founder-badge span{font-family:'Cormorant SC','Cormorant Garamond',serif;font-weight:600;font-size:2.7rem;color:var(--accent);letter-spacing:.06em} .founder-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.5;color:var(--ink);font-style:italic} .founder-name{margin-top:16px;font-family:'Inter',sans-serif;font-size:.92rem;letter-spacing:.02em;color:var(--ink-dim)} .founder-name b{color:var(--ink);font-weight:600} @media (max-width:560px){.founder{grid-template-columns:1fr;gap:22px}} /* ---------- Blog ---------- */ .post-list{display:flex;flex-direction:column;gap:20px;margin-top:8px} .post-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px 32px;box-shadow:var(--shadow);transition:border-color .2s ease} .post-card:hover{border-color:var(--accent)} .post-meta{font-family:'Inter',sans-serif;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px} .post-card h3{margin-bottom:10px} .post-card p{font-size:.98rem;margin-bottom:14px} .post-card .readmore{font-size:.9rem;font-weight:600;color:var(--accent)} .article{max-width:700px;margin:0 auto} .article .post-meta{margin-bottom:0} .article h2{margin-top:46px;margin-bottom:14px} .article h3{margin-top:32px;margin-bottom:10px} .article p{margin-bottom:18px} .article ul{margin:0 0 20px 22px;color:var(--ink-dim)} .article li{margin-bottom:9px} .article .lead{margin:14px 0 0} .back-link{display:inline-block;margin-bottom:22px;font-size:.9rem;color:var(--ink-faint)} .back-link:hover{color:var(--accent)} .article-cta{margin-top:48px;padding:28px 30px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);box-shadow:var(--shadow)} .article-cta p{margin-bottom:16px;color:var(--ink)} /* ---------- FAQ ---------- */ .faq{max-width:820px} .faq-item{border-top:1px solid var(--border);padding:22px 0} .faq-item:last-child{border-bottom:1px solid var(--border)} .faq-item h3{font-size:1.14rem;color:var(--ink);margin-bottom:8px} .faq-item p{color:var(--ink-dim);font-size:1rem;line-height:1.6} /* ---------- Footer ---------- */ .footer{background:var(--bg);border-top:1px solid var(--border);padding-block:46px 26px} .footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px} .footer .brand img{width:38px;height:38px} .footer-tag{max-width:340px;margin-top:16px;font-size:.94rem;color:var(--ink-faint)} .footer-cols{display:flex;gap:60px;flex-wrap:wrap} .footer-col h4{font-family:'Inter',sans-serif;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px;font-weight:600} .footer-col a,.footer-col span{display:block;color:var(--ink-dim);font-size:.94rem;margin-bottom:9px} .footer-bar{border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-faint)} /* ---------- Accessibility & motion ---------- */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* ---------- Responsive ---------- */ @media (max-width:880px){ .nav-links{ position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:var(--bg);border-bottom:1px solid var(--border); padding:10px var(--gutter) 22px;transform:translateY(-130%);transition:transform .26s ease; } .nav-links.open{transform:translateY(0)} .nav-links a.navlink{padding:14px 0;border-bottom:1px solid var(--border)} .nav-links .btn{margin-top:16px;justify-content:center} .nav-toggle{display:inline-flex} .diagram,.feature,.feature.flip,.contact-grid{grid-template-columns:1fr;gap:30px} .feature.flip .copy{order:0} .cards.three,.cards.two,.signals{grid-template-columns:1fr} .proof{grid-template-columns:repeat(2,1fr)} } @media (max-width:480px){ body{font-size:16px} .proof{grid-template-columns:1fr 1fr} .footer-top{flex-direction:column} }