/* ============================================================================
   Notentra — Technical Blueprint theme
   Shared stylesheet for notentra.com (index / idp / sp)
   ============================================================================ */
:root{
  --paper:#F4F1EA; --paper-2:#ECE7DC; --paper-3:#E4DECF;
  --ink:#0B2440; --ink-2:#33445A; --muted:#6B7A8D;
  --navy:#0B2440; --navy-2:#16365C; --navy-line:#1d3f63;
  --gold:#B8862F; --gold-2:#C8A44A; --gold-soft:rgba(184,134,47,.12);
  --green:#1f7a52; --red:#A33A3A; --line:#D8D1C2; --line-2:#C9C0AC;
  --blueprint:rgba(11,36,64,.07);
  --display:'Fraunces',Georgia,serif; --ui:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);line-height:1.55;position:relative;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--blueprint) 1px,transparent 1px),linear-gradient(90deg,var(--blueprint) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(ellipse 90% 60% at 70% 0%,#000,transparent)}
a{color:inherit;text-decoration:none}
.wrap{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:0 36px}

/* ── Nav ── */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:78px;
  border-bottom:2px solid var(--navy);background:rgba(244,241,234,.9);backdrop-filter:blur(8px);padding:0 36px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.45rem;font-weight:600;letter-spacing:-.01em}
.brand .dot{color:var(--gold)}
.nav-links{display:flex;gap:30px;font-size:.85rem;font-weight:500;color:var(--ink-2);list-style:none}
.nav-links a:hover,.nav-links a.act{color:var(--gold)}
.nav-r{display:flex;gap:10px;align-items:center}
.ng{font-size:.84rem;font-weight:500;color:var(--ink-2);padding:8px 14px}
.ng:hover{color:var(--gold)}
.nb{font-family:var(--mono);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  background:var(--navy);color:var(--paper);padding:10px 18px;border-radius:3px}
.nb:hover{background:var(--navy-2)}

/* ── Shared bits ── */
.section{padding:84px 0}
.kicker{font-family:var(--mono);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:14px}
.h2{font-family:var(--display);font-weight:500;font-size:2.7rem;line-height:1.08;letter-spacing:-.01em;margin-bottom:16px}
.h2 .it{font-style:italic;color:var(--gold)}
.lead{color:var(--ink-2);max-width:42em;margin-bottom:44px;font-size:1.02rem}
.btn{font-family:var(--ui);font-weight:600;font-size:.92rem;padding:14px 26px;border-radius:4px;display:inline-flex;align-items:center;gap:9px;transition:.18s}
.btn-navy{background:var(--navy);color:var(--paper)}.btn-navy:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn-line{border:1.5px solid var(--navy);color:var(--navy)}.btn-line:hover{background:var(--navy);color:var(--paper)}
.bc{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-bottom:24px}
.bc a:hover{color:var(--gold)}
.chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:100px;padding:6px 14px;margin-bottom:24px}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ── Hero ── */
.hero{padding:84px 0 70px}
.hero h1{font-family:var(--display);font-weight:500;font-size:4.1rem;line-height:1.02;letter-spacing:-.02em;margin-bottom:22px;max-width:14ch}
.hero h1 .it{font-style:italic;color:var(--gold)}
.hero .sub{font-size:1.08rem;color:var(--ink-2);max-width:34em;margin-bottom:34px}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}

/* ── Spec / stat bar ── */
.specbar{border-top:2px solid var(--navy);border-bottom:1px solid var(--line);background:var(--paper-2)}
.specbar .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.spec{padding:20px 24px;border-right:1px solid var(--line)}
.spec:last-child{border-right:none}
.spec .k{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.spec .v{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--ink)}
.spec .v.b{color:var(--gold)}

/* ── Stat row (hero) ── */
.stat-row{display:flex;gap:0;margin-top:46px;border-top:1px solid var(--line)}
.stat{padding:18px 28px 0 0;margin-right:28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--display);font-size:1.9rem;font-weight:600;line-height:1}
.stat .n small{font-size:1rem}
.stat .l{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:5px}

/* ── Cards / grids ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;transition:.18s}
.card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(11,36,64,.35)}
.card .fn{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.08em;margin-bottom:16px}
.card h3{font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:9px}
.card p{font-size:.88rem;color:var(--ink-2)}
.card .use{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.card .use b{color:var(--ink-2)}

/* ── Screenshot frame ── */
.shot-eyebrow{margin-bottom:2rem}
.frame{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -36px rgba(11,36,64,.5)}
.frame .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.frame .bar .d{width:11px;height:11px;border-radius:50%}
.frame .bar .url{flex:1;margin-left:10px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:5px 12px;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.frame img{display:block;width:100%;height:auto}
.shot-tabs{display:flex;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;overflow:hidden;width:fit-content}
.shot-tabs .t{padding:9px 20px;font-size:.8rem;font-weight:500;color:var(--muted);background:var(--paper-2);border-right:1px solid var(--line)}
.shot-tabs .t:last-child{border-right:none}
.shot-tabs .t.act{background:#fff;color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.frame.tabbed{border-radius:0 12px 12px 12px}

/* ── Split feature ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.flist{list-style:none;margin-top:24px}
.flist li{padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.flist li:last-child{border-bottom:none}
.flist .ico{width:34px;height:34px;border-radius:8px;background:var(--gold-soft);border:1px solid rgba(184,134,47,.3);display:grid;place-items:center;flex-shrink:0;font-size:1rem}
.flist b{display:block;font-size:.95rem;margin-bottom:3px}
.flist span{font-size:.85rem;color:var(--ink-2)}

/* ── Steps ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stp{padding:0 22px;border-left:2px solid var(--line)}
.stp:first-child{padding-left:0;border-left:none}
.stp .n{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:.1em;margin-bottom:12px}
.stp h4{font-family:var(--display);font-size:1.2rem;font-weight:600;margin-bottom:7px}
.stp p{font-size:.84rem;color:var(--ink-2)}
.stp .t{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:10px}

/* ── Comparison table ── */
.cmp{background:var(--navy);border-radius:16px;padding:8px;overflow:hidden}
table.cmp-t{width:100%;border-collapse:collapse;color:var(--paper)}
.cmp-t th,.cmp-t td{text-align:left;padding:15px 22px;font-size:.9rem}
.cmp-t thead th{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#9DB0C7;border-bottom:1px solid var(--navy-line)}
.cmp-t thead th.us{color:var(--gold-2)}
.cmp-t tbody td{border-bottom:1px solid rgba(255,255,255,.07)}
.cmp-t tbody tr:last-child td{border-bottom:none}
.cmp-t td.us{color:#fff;font-weight:600;background:rgba(184,134,47,.12)}
.cmp-t td .x{color:#7E8D9E}.cmp-t td .ok{color:#5BBF8E;font-weight:600}.cmp-t td .par{color:#E0B84A}
.cmp-t .rowlbl{color:#C6CFDB}
.cmp-note{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:14px}

/* ── Code block ── */
.code{background:var(--navy);border:1px solid var(--navy-2);border-radius:12px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(11,36,64,.6)}
.code .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--navy-line)}
.code .bar .d{width:10px;height:10px;border-radius:50%}
.code .bar .lbl{margin-left:8px;font-family:var(--mono);font-size:.72rem;color:#9DB0C7}
.code pre{font-family:var(--mono);font-size:.76rem;line-height:1.75;padding:20px;overflow-x:auto;color:#C6CFDB}
.code .kw{color:#7CB9FF}.code .str{color:#E0B84A}.code .cmt{color:#5E7088}.code .hi{color:#5BBF8E}

/* ── Architecture row ── */
.arch{display:grid;grid-template-columns:1fr 50px 1fr 50px 1fr;align-items:center;margin-top:8px}
.anode{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center}
.anode.hl{border-color:var(--gold);background:#fffdf7;box-shadow:0 0 0 3px rgba(184,134,47,.1)}
.anode .ai{font-size:24px;margin-bottom:10px}
.anode .at{font-family:var(--display);font-weight:600;font-size:1rem;margin-bottom:4px}
.anode .as{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.aarrow{text-align:center;color:var(--gold);font-size:1.3rem}

/* ── Info banner ── */
.banner{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:16px 20px;font-size:.88rem;color:var(--ink-2);line-height:1.5;display:flex;gap:12px}
.banner b{color:var(--ink)}

/* ── CTA ── */
.cta{text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:56px}
.cta .h2{margin-bottom:10px}.cta p{color:var(--ink-2);margin-bottom:28px}
.cta .actions{justify-content:center}

/* ── Product cards (home) ── */
.prod{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.prodcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;display:flex;flex-direction:column}
.prodcard .ptag{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.prodcard .pname{font-family:var(--display);font-size:1.7rem;font-weight:600;margin-bottom:8px}
.prodcard .pprice{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.prodcard .amt{font-family:var(--display);font-size:1.6rem;font-weight:600}
.prodcard .free{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--green)}
.prodcard .per{font-size:.82rem;color:var(--muted)}
.prodcard .pdesc{font-size:.9rem;color:var(--ink-2);margin-bottom:18px}
.prodcard ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.prodcard li{font-size:.86rem;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.prodcard li::before{content:'';width:14px;height:1px;background:var(--gold);flex-shrink:0;margin-top:11px}
.prodcard .link-a{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--gold);margin-top:auto;display:inline-flex;gap:6px}
.prodcard .link-a:hover{gap:10px}

/* ── Footer ── */
footer{border-top:2px solid var(--navy);margin-top:80px;padding:46px 0 30px}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
.foot-grid .blurb{font-size:.86rem;color:var(--ink-2);max-width:26em;line-height:1.6;margin-top:12px}
.foot-grid h5{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px}
.foot-grid a{display:block;font-size:.85rem;color:var(--ink-2);margin-bottom:9px}
.foot-grid a:hover{color:var(--gold)}
.foot-base{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* ── Responsive ── */
@media(max-width:900px){
  nav{padding:0 20px}.nav-links{display:none}.wrap{padding:0 20px}
  .hero-split,.split{grid-template-columns:1fr;gap:32px}
  .hero h1{font-size:2.9rem}
  .specbar .wrap{grid-template-columns:1fr 1fr}
  .grid3,.grid2,.prod{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:24px}.stp{border-left:none;padding:0}
  .arch{grid-template-columns:1fr;gap:12px}.aarrow{transform:rotate(90deg)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .section{padding:56px 0}
  .cmp-t{font-size:.8rem}.cmp-t th,.cmp-t td{padding:11px 12px}
}