:root { color-scheme:light; --ink:#132238; --muted:#52657a; --line:#d9e1ea; --surface:#fff; --canvas:#f4f7fa; --navy:#10243e; --teal:#08736a; --teal-dark:#075f59; --blue:#315fce; --success:#16835d; --warning:#c37816; --danger:#c43d4d; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--canvas); line-height:1.55; } a { color:inherit; }
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:74px; padding:0 5vw; color:#eef8fb; background:rgba(16,36,62,.97); border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#fff; background:var(--teal); font-size:.78rem; font-weight:900; letter-spacing:.05em; }
.brand strong,.brand small { display:block; } .brand strong { font-size:.98rem; } .brand small { color:#9fb3c8; font-size:.72rem; }
.site-header nav { display:flex; align-items:center; gap:1.35rem; font-size:.86rem; } .site-header nav a { color:#c9d7e5; text-decoration:none; } .site-header nav a:hover { color:#fff; }
main { overflow:hidden; }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:clamp(2rem,6vw,6rem); align-items:center; min-height:650px; padding:clamp(4rem,9vw,8rem) 7vw; color:#fff; background:radial-gradient(circle at 75% 20%,rgba(25,166,150,.2),transparent 32%),linear-gradient(135deg,#0d1d32,#153452 72%,#184b5a); }
.eyebrow { margin:0 0 .65rem; color:#075f59; font-size:.73rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; } .hero .eyebrow { color:#8df4ec; }
.hero h1 { max-width:780px; margin:0; font-size:clamp(2.75rem,5vw,5.2rem); line-height:1.02; letter-spacing:-.055em; } .hero-lead { max-width:680px; margin:1.6rem 0 0; color:#c0d0df; font-size:clamp(1rem,1.4vw,1.22rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 1.15rem; border-radius:10px; text-decoration:none; font-size:.88rem; font-weight:760; }
.button.primary { color:#fff; background:var(--teal); } .button.primary:hover { background:var(--teal-dark); } .button.secondary { color:#e6f2f6; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06); }
.hero-meta { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:2.4rem; color:#8fa7ba; font-size:.75rem; } .hero-meta span { display:flex; gap:.35rem; } .hero-meta strong { color:#dce9f2; }
.status-panel { padding:clamp(1.4rem,2vw,2rem); border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(5,18,31,.5); box-shadow:0 32px 70px rgba(0,0,0,.25); }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; } .panel-heading h2 { margin:0; font-size:1.45rem; }
.overall-status { padding:.35rem .65rem; border-radius:999px; font-size:.7rem; font-weight:850; text-transform:uppercase; } .overall-status.starting { color:#fbd292; background:rgba(195,120,22,.18); } .overall-status.healthy { color:#9ce5cb; background:rgba(22,131,93,.2); } .overall-status.failed { color:#ffb4bd; background:rgba(196,61,77,.2); }
.status-list { display:grid; gap:.65rem; margin-top:1.35rem; } .status-row { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:.8rem .9rem; border-radius:11px; color:#dce8f1; background:rgba(255,255,255,.06); }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 4px rgba(195,120,22,.12); } .status-row.healthy .status-dot { background:#39c997; box-shadow:0 0 0 4px rgba(57,201,151,.12); } .status-row.failed .status-dot { background:#ef7180; box-shadow:0 0 0 4px rgba(239,113,128,.12); }
.status-row strong,.status-row small { display:block; } .status-row small { color:#8fa7ba; font-size:.72rem; } .status-row a { color:#75d8cf; font-size:.75rem; font-weight:750; text-decoration:none; }
.status-row.skeleton { grid-template-columns:12px 1fr; height:54px; opacity:.55; } .status-row.skeleton span { height:9px; border-radius:5px; background:rgba(255,255,255,.12); } .status-note { margin:1rem 0 0; color:#7f97aa; font-size:.72rem; }
.section { padding:clamp(4rem,8vw,7rem) 7vw; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:2.25rem; }
.section-heading h2,.roadmap-section h2 { max-width:760px; margin:0; font-size:clamp(2rem,3vw,3.25rem); line-height:1.08; letter-spacing:-.04em; } .section-heading>p { max-width:540px; margin:0; color:var(--muted); }
.application-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .application-card { display:flex; min-height:300px; flex-direction:column; padding:1.55rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 12px 35px rgba(19,34,56,.055); }
.application-card-top { display:flex; justify-content:space-between; gap:1rem; } .application-index { color:#4d5f73; font-size:.72rem; font-weight:800; letter-spacing:.1em; }
.application-state { display:inline-flex; align-items:center; gap:.35rem; color:var(--warning); font-size:.7rem; font-weight:800; text-transform:uppercase; } .application-state::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .application-state.healthy { color:var(--success); } .application-state.failed { color:var(--danger); }
.application-card h3 { margin:1.8rem 0 .6rem; font-size:1.45rem; } .application-card p { margin:0; color:var(--muted); } .tag-list { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.25rem; } .tag-list span { padding:.25rem .48rem; border-radius:5px; color:#466078; background:#edf2f7; font-size:.68rem; font-weight:720; }
.card-actions { display:flex; gap:.85rem; margin-top:auto; padding-top:1.6rem; } .card-actions a { color:var(--teal-dark); font-size:.8rem; font-weight:780; text-decoration:none; }
.integration-links { margin-top:1.15rem; border:1px solid var(--line); border-radius:9px; background:#f8fafc; }
.integration-links summary { padding:.62rem .72rem; color:#3d5870; cursor:pointer; font-size:.72rem; font-weight:800; }
.integration-links>div { display:grid; gap:.15rem; padding:0 .65rem .6rem; }
.integration-links span { display:flex; justify-content:space-between; gap:1rem; padding:.3rem .2rem; font-size:.72rem; }
.integration-links a { color:var(--teal-dark); font-weight:750; text-decoration:none; }
.package-section { background:#eaf0f5; } .package-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,2fr); align-items:stretch; gap:1rem; }
.adapter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.package-card { padding:1.65rem; border-top:4px solid var(--teal); border-radius:4px 4px 14px 14px; background:#fff; } .package-card.angular { border-top-color:var(--blue); } .package-card.react { border-top-color:#315fce; }
.package-kind { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .package-card h3 { margin:1rem 0 .55rem; font-size:1.16rem; } .package-card p { color:var(--muted); font-size:.88rem; } .package-card a { color:var(--teal-dark); font-size:.78rem; font-weight:800; text-decoration:none; } .flow-arrow { align-self:center; color:#8494a6; font-size:1.35rem; }
.automation-section { background:#f8fbfd; }
.automation-report-page { min-height:calc(100vh - 72px); background:#f8fbfd; }
.automation-report-page .automation-section { min-height:calc(100vh - 72px); }
.automation-report-page .section-heading h1 { max-width:760px; margin:0; font-size:clamp(2rem,3vw,3.25rem); line-height:1.08; letter-spacing:-.04em; }
.report-page-links { display:flex; flex-wrap:wrap; gap:.6rem; margin:-.75rem 0 1.5rem; }
.report-page-links a { padding:.55rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--teal-dark); background:#fff; font-size:.8rem; font-weight:800; text-decoration:none; }
.report-page-links a:hover,.report-page-links a.active { color:#fff; border-color:var(--teal); background:var(--teal); }
.playwright-results { display:grid; gap:1rem; }
.playwright-empty,.playwright-summary { border:1px solid var(--line); border-radius:16px; background:#fff; padding:1.5rem; box-shadow:0 12px 35px rgba(19,34,56,.055); }
.playwright-empty h3,.playwright-summary h3 { margin:.25rem 0 .35rem; }
.playwright-empty p,.playwright-summary p { color:var(--muted); }
.playwright-summary-top { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; }
.playwright-summary-top a,.playwright-links a { color:var(--teal-dark); font-size:.82rem; font-weight:800; text-decoration:none; }
.playwright-summary-top .playwright-run-scope { margin-top:.35rem; color:var(--ink); font-weight:750; }
.playwright-summary.passed { border-top:4px solid var(--success); }
.playwright-summary.failed { border-top:4px solid var(--danger); }
.playwright-summary.flaky { border-top:4px solid var(--warning); }
.playwright-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; margin:1.35rem 0; }
.playwright-metrics div { border:1px solid var(--line); border-radius:12px; padding:.9rem; background:#f8fafc; }
.playwright-metrics span { display:block; color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; }
.playwright-metrics strong { display:block; margin-top:.25rem; font-size:1.35rem; }
.playwright-breakdowns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.playwright-breakdowns section { border:1px solid var(--line); border-radius:12px; padding:1rem; background:#fff; }
.playwright-breakdowns h4,.playwright-failures h4 { margin:0 0 .75rem; }
.playwright-breakdowns p { display:flex; justify-content:space-between; gap:1rem; margin:.35rem 0; font-size:.85rem; }
.playwright-scope-note { margin:1rem 0; padding:.9rem 1rem; border:1px solid #f1d18e; border-radius:12px; color:#69430b; background:#fff7e6; font-size:.86rem; }
.playwright-scope-note code { padding:.12rem .32rem; border-radius:4px; background:#fff; }
.playwright-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.playwright-catalog-card,.playwright-enterprise-card { border:1px solid var(--line); border-radius:12px; padding:1rem; background:#fff; }
.playwright-catalog-card h4,.playwright-enterprise-card h4 { margin:0 0 .65rem; }
.playwright-catalog-card p { margin:.35rem 0; color:var(--muted); }
.playwright-catalog-card p strong { color:var(--ink); font-size:1.35rem; }
.playwright-mini-breakdowns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:.8rem; }
.playwright-mini-breakdowns span { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.playwright-mini-breakdowns p { display:flex; justify-content:space-between; gap:.8rem; margin:.25rem 0; color:var(--ink); font-size:.8rem; }
.playwright-enterprise-card ul { margin:.4rem 0 0; padding-left:1.1rem; color:var(--muted); font-size:.86rem; }
.playwright-enterprise-card li { margin:.4rem 0; }
.playwright-enterprise-card a { color:var(--teal-dark); font-weight:800; text-decoration:none; }
.playwright-links { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.2rem; }
.playwright-failures { margin-top:1rem; border:1px solid rgba(196,61,77,.2); border-radius:12px; padding:1rem; background:rgba(196,61,77,.05); }
.security-summary.pass,.security-summary.passed { border-top:4px solid var(--success); }
.security-summary.fail,.security-summary.failed { border-top:4px solid var(--danger); }
.security-summary.error,.security-summary.unavailable { border-top:4px solid var(--warning); }
.security-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }
.security-package-list { margin:.75rem 0 0; padding-left:1.1rem; color:var(--muted); }
.security-package-list code { color:var(--ink); font-weight:750; }
.security-checks { margin-top:1.25rem; }
.security-checks h4 { margin:0 0 .75rem; }
.security-check-table { display:grid; gap:.55rem; }
.security-check-row { display:grid; grid-template-columns:minmax(160px,1.1fr) .7fr .7fr minmax(0,2.2fr); gap:.85rem; align-items:start; padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
.security-check-head { background:#f3f7fa; font-size:.72rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; color:#4d5f73; }
.security-check-row small { display:block; margin-top:.2rem; color:var(--muted); font-size:.72rem; font-weight:600; }
.security-status { display:inline-flex; padding:.2rem .45rem; border-radius:999px; font-size:.68rem; font-style:normal; font-weight:850; letter-spacing:.04em; text-transform:uppercase; background:#edf2f7; color:#3d5870; }
.security-status.pass { color:var(--success); background:rgba(22,131,93,.12); }
.security-status.fail { color:var(--danger); background:rgba(196,61,77,.12); }
.security-status.error,.security-status.info { color:#69430b; background:#fff7e6; }
.security-artifact-links { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.45rem; }
.security-artifact-links a { color:var(--teal-dark); font-size:.75rem; font-weight:800; text-decoration:none; }
@media (max-width:900px) {
  .security-check-row,.security-check-head { grid-template-columns:1fr; }
}
.roadmap-section { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; color:#fff; background:var(--navy); } .roadmap-section p:not(.eyebrow) { max-width:650px; color:#afc0cf; }
.roadmap-section .eyebrow { color:#8df4ec; }
.future-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; } .future-grid span { display:flex; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#dce7ef; background:rgba(255,255,255,.04); font-size:.84rem; font-weight:750; } .future-grid small { color:#6dd3c9; font-weight:750; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:2.2rem 7vw; color:#91a4b8; background:#091725; font-size:.78rem; } footer strong,footer span { display:block; } footer strong { color:#fff; font-size:.9rem; } .footer-links { display:flex; gap:1.2rem; } .footer-links a { color:#c7d4df; text-decoration:none; }
@media (max-width:1000px) { .site-header nav { display:none; } .hero { grid-template-columns:1fr; } .application-grid,.package-flow { grid-template-columns:1fr; } .adapter-grid { grid-template-columns:1fr; } .flow-arrow { transform:rotate(90deg); justify-self:center; } }
@media (max-width:720px) { .site-header { padding:0 1rem; } .hero,.section { padding-left:1.2rem; padding-right:1.2rem; } .section-heading,footer { flex-direction:column; align-items:flex-start; } .roadmap-section { grid-template-columns:1fr; } .section-heading { align-items:flex-start; } .future-grid,.playwright-metrics,.playwright-breakdowns,.playwright-info-grid,.playwright-mini-breakdowns { grid-template-columns:1fr; } .playwright-summary-top { flex-direction:column; } }
.contact-page,.about-page { max-width:920px; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) 1.25rem 5rem; }
.contact-hero h1,.about-hero h1 { margin:.35rem 0 1rem; font-size:clamp(2rem,4vw,3.2rem); line-height:1.08; letter-spacing:-.04em; }
.contact-hero p,.about-hero p { max-width:720px; color:var(--muted); }
.about-section { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line); }
.about-section h2 { margin:0 0 .85rem; font-size:1.35rem; letter-spacing:-.02em; }
.about-section p,.about-section li { color:var(--muted); }
.about-section ul { margin:.35rem 0 0; padding-left:1.2rem; }
.about-section li { margin:.45rem 0; }
.about-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.about-principles article { padding:1.1rem 1.15rem; border:1px solid var(--line); border-radius:12px; background:#fff; }
.about-principles h3 { margin:0 0 .45rem; font-size:.95rem; }
.about-principles p { margin:0; font-size:.86rem; }
.about-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.25rem; }
.about-actions .button.secondary { color:var(--teal-dark); border:1px solid var(--line); background:#fff; }
.about-meta dl { display:grid; gap:.85rem; margin:0; }
.about-meta dl > div { display:grid; grid-template-columns:140px minmax(0,1fr); gap:1rem; }
.about-meta dt { margin:0; color:#3d5870; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.about-meta dd { margin:0; color:var(--muted); }
.about-meta a { color:var(--teal-dark); font-weight:750; text-decoration:none; }
@media (max-width:820px) {
  .about-principles { grid-template-columns:1fr; }
  .about-meta dl > div { grid-template-columns:1fr; gap:.2rem; }
}
.contact-panel { margin-top:2rem; padding:1.25rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 12px 35px rgba(19,34,56,.055); }
.contact-frame { width:100%; min-height:720px; border:0; border-radius:10px; background:#fff; }
.contact-note,.contact-empty p { color:var(--muted); font-size:.9rem; }
.contact-empty h2 { margin-top:0; }
.contact-empty pre { overflow:auto; padding:1rem; border-radius:8px; background:#f4f6f8; }