/* ===== deOpus marketing site — app-matched palette (gold primary) ===== */
:root{
    --gold:#dea63c; --gold-d:#c2871f; --gold-soft:#f8edd3;
    --slate:#3f7183; --slate-d:#2c5567; --slate-dd:#22475699;
    --ink:#23404a; --ink-2:#1a323a;
    --green:#2e8c7c; --green-d:#247667;
    --rust:#c0562f;
    --teal-l:#8fb2bf;
    --bg:#ffffff; --bg-soft:#f4f8f9; --line:#e2ebee;
    --text:#2a3f47; --muted:#617880; --muted-l:#8aa0a7;
    --radius:16px; --radius-sm:11px;
    --shadow:0 18px 50px rgba(28,60,72,.14);
    --shadow-sm:0 6px 22px rgba(28,60,72,.09);
    --serif:'PT Serif',Georgia,serif;
    --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--bg);
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px;
    padding:13px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:14.5px}
.btn-primary{background:var(--gold);color:#3a2c07;box-shadow:0 8px 22px rgba(222,166,60,.4);border-color:var(--gold)}
.btn-primary:hover{background:#cf9528;box-shadow:0 12px 28px rgba(222,166,60,.5)}
.btn-ghost{background:transparent;color:var(--slate);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--slate);background:#fff}
.btn-ghost.light{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost.light:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
    backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:.25s}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(28,60,72,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{display:inline-flex}
.brand-word{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.4px}
.brand-word strong{font-weight:800;color:var(--gold-d)}
.brand.light .brand-word{color:#eaf3f5}
.brand.light .brand-word strong{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links>a{font-weight:500;font-size:15px;color:var(--text);transition:color .15s}
.nav-links>a:hover{color:var(--slate)}
.nav-login{font-weight:600!important;color:var(--slate)!important}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}

/* hero */
.hero{position:relative;padding:78px 0 70px;
    background:radial-gradient(1100px 520px at 80% -10%, #f6ecd6 0%, rgba(246,236,214,0) 62%),
               linear-gradient(180deg,#fbfdfd 0%, #ffffff 100%)}
.hero-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:50px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--gold-d);background:var(--gold-soft);padding:6px 13px;border-radius:999px;margin-bottom:20px}
.eyebrow.dark{color:var(--slate-d);background:#e9f1f4}
.eyebrow.light{color:#f0d69a;background:rgba(222,166,60,.16)}
h1{font-family:var(--serif);font-size:clamp(38px,5vw,60px);line-height:1.06;color:var(--ink);
    font-weight:700;letter-spacing:-.5px}
h1 .hl{color:var(--gold-d)}
.lede{font-size:19px;color:var(--muted);margin:22px 0 30px;max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-cta.center{justify-content:center}
.hero-note{margin-top:20px;font-size:14px;color:var(--muted-l)}

/* ---- hero mock: mirrors the real Opus project page ---- */
.hero-mock{position:relative}
.mock-glow{position:absolute;inset:-8% -6% -12% -6%;z-index:0;border-radius:26px;
    background:radial-gradient(58% 58% at 72% 18%, rgba(222,166,60,.22), transparent 70%)}
.mock-window{position:relative;z-index:1;background:#f3f6f7;border:1px solid var(--line);
    border-radius:13px;box-shadow:var(--shadow);overflow:hidden;font-size:11px}
.app-bar{display:flex;align-items:center;justify-content:space-between;background:var(--slate);
    padding:8px 12px;color:#eaf2f4}
.ab-brand{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12px}
.ab-brand .o{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--gold);border-right-color:transparent;display:inline-block}
.ab-brand small{font-weight:400;opacity:.8}
.ab-nav{display:flex;gap:12px;font-size:10.5px;opacity:.92}
.ab-nav b{color:#fff;font-weight:600}
.ab-user{font-size:10.5px;opacity:.9}
/* project header */
.mock-proj{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 8px;background:#f7f9fa}
.mp-title{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--gold-d)}
.mp-sub{font-size:10.5px;color:var(--muted-l);margin-left:2px}
/* phase stepper */
.pstep{display:flex;align-items:flex-start;gap:0;flex:1;max-width:360px;margin:0 auto}
.pstep-i{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.pstep-i::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--green)}
.pstep-i:first-child::before{display:none}
.pstep-i.gold::before,.pstep-i.gray::before{background:var(--gold)}
.pnode{width:19px;height:19px;border-radius:50%;background:var(--green);z-index:1;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px}
.pstep-i.gold .pnode{background:var(--gold);box-shadow:0 0 0 3px rgba(222,166,60,.25)}
.pstep-i.gray .pnode{background:#b9c6cc}
.pstep-i span{font-size:8px;color:var(--muted);margin-top:4px;white-space:nowrap}
/* tabs */
.mock-tabs{display:flex;gap:16px;padding:2px 14px 0;border-bottom:1px solid var(--line);background:#f7f9fa}
.mtab{font-size:10.5px;color:var(--muted);padding:6px 2px 8px;border-bottom:2px solid transparent}
.mtab.on{color:var(--gold-d);font-weight:600;border-bottom-color:var(--gold)}
/* board columns */
.mboard{display:grid;grid-template-columns:1fr 1.25fr 1.15fr .95fr;gap:8px;padding:10px 12px 14px}
.mcol{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px}
.mcol-h{font-size:10px;font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:4px}
.mcol-h.teal{color:var(--slate)} .mcol-h.rust{color:var(--rust)}
.mcol-h.green{color:var(--green-d)} .mcol-h.slate{color:var(--muted)}
.mrow{font-size:9.5px;color:var(--text);padding:3px 0;border-bottom:1px dashed var(--line);line-height:1.35}
.mrow:last-child{border-bottom:0}
.mrow .lk{color:var(--gold-d);font-weight:600}
.mrow.q{color:var(--muted-l)}
.mtask{display:flex;align-items:center;gap:5px;font-size:9.5px;margin:4px 0}
.pct{font-size:8px;font-weight:700;color:#fff;border-radius:3px;padding:1px 4px;flex:none}
.pct.r{background:#c0503f}.pct.g{background:var(--gold)}.pct.t{background:var(--green)}
.mbar{height:4px;background:#eef3f4;border-radius:3px;margin-top:6px;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--gold);border-radius:3px}

/* strip */
.strip{padding:34px 0;border-bottom:1px solid var(--line);background:#fff}
.strip-label{text-align:center;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--muted-l);text-transform:uppercase;margin-bottom:18px}
.strip-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.chip{font-size:14px;font-weight:600;color:var(--muted);background:#f1f5f6;border:1px solid var(--line);padding:8px 15px;border-radius:9px}
.chip-brand{color:#3a2c07;background:var(--gold);border-color:var(--gold);font-weight:700}
.arrow{font-size:22px;color:var(--gold);font-weight:700;margin:0 4px}

/* sections */
.section{padding:88px 0}
.section.soft{background:var(--bg-soft)}
.section.dark{background:linear-gradient(160deg,#22454f 0%, #325f70 100%);color:#dceaed}
.section-head{max-width:720px;margin:0 auto 46px;text-align:center}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.12;color:var(--ink);font-weight:700;letter-spacing:-.3px}
h2.light{color:#fff}
.body{font-size:17px;color:var(--muted);margin-top:14px}
.body.center{text-align:center}
.body.light{color:#bcd2d8}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}

/* checklist */
.checks{list-style:none;display:grid;gap:14px}
.checks li{display:flex;align-items:center;gap:13px;font-size:16.5px;font-weight:500;color:var(--text);
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;box-shadow:var(--shadow-sm)}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:var(--gold-d);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
    transition:transform .2s ease, box-shadow .2s ease;box-shadow:var(--shadow-sm)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;margin-bottom:16px}
.feat-ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feat-ic.gold{background:var(--gold)} .feat-ic.gold svg{stroke:#3a2c07}
.feat-ic.teal{background:var(--slate)} .feat-ic.green{background:var(--green)} .feat-ic.rust{background:var(--rust)}
.feat h3{font-size:19px;color:var(--ink);margin-bottom:8px;font-weight:700}
.feat p{font-size:15px;color:var(--muted)}

/* operations flow */
.flow{display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:44px}
.flow-step{flex:1;min-width:210px;max-width:255px;background:rgba(255,255,255,.05);
    border:1px solid rgba(143,178,191,.28);border-radius:14px;padding:22px 20px}
.flow-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
    background:var(--gold);color:#3a2c07;font-weight:800;font-size:14px;margin-bottom:12px}
.flow-step b{display:block;color:#fff;font-size:17px;margin-bottom:6px}
.flow-step p{font-size:14px;color:#a9c3ca}
.flow-arrow{align-self:center;color:var(--gold);font-size:24px;font-weight:700}
.ops-points{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ops-points>div{border-top:2px solid var(--gold);padding-top:16px}
.ops-points b{display:block;color:#fff;font-size:16px;margin-bottom:6px}
.ops-points span{font-size:14.5px;color:#a9c3ca}

/* why */
.why{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.section.soft .why{background:#fff}
.why h3{font-size:19px;color:var(--ink);margin-bottom:8px;font-weight:700}
.why p{font-size:15px;color:var(--muted)}

/* cta band */
.cta-band{background:linear-gradient(120deg,var(--slate) 0%, var(--green) 125%);padding:76px 0;text-align:center}
.cta-inner{max-width:660px;margin:0 auto}
.cta-inner h2{margin-bottom:12px}
.cta-inner .light{color:#eafaf6}
.cta-inner p{margin-bottom:26px;font-size:17px}

/* footer */
.footer{background:var(--ink-2);color:#9fb6bd;padding:52px 0 26px}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-tag{margin-top:14px;font-size:14.5px;color:#8aa4ab;max-width:320px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.foot-links a{font-size:15px;color:#bcd0d5;transition:color .15s}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;font-size:13.5px;color:#7c969d}
.foot-bottom a{color:var(--gold)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:920px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .two-col{grid-template-columns:1fr;gap:34px}
    .grid,.grid.three,.ops-points{grid-template-columns:1fr 1fr}
    .flow-arrow{display:none}
}
@media (max-width:680px){
    .nav-links{position:fixed;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
        background:#fff;border-bottom:1px solid var(--line);padding:10px 24px 22px;
        transform:translateY(-140%);transition:transform .3s ease;box-shadow:var(--shadow)}
    .nav-links.open{transform:none}
    .nav-links>a{padding:13px 4px;border-bottom:1px solid var(--line)}
    .nav-links .btn{margin-top:12px;justify-content:center}
    .nav-toggle{display:flex}
    .section{padding:60px 0}
    .grid,.grid.three,.ops-points{grid-template-columns:1fr}
    .hero{padding:52px 0 50px}
    .foot-bottom{flex-direction:column}
    .mboard{grid-template-columns:1fr 1fr}
    .pstep-i span{display:none}
}
@media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .btn:hover,.feat:hover{transform:none}
}