/* Ossian — sibling to the Orrin site: same dark ground, same type pairing, its own accent.
   Indigo rather than cyan, because it is Ossian's colour in the product itself and a site that
   does not match the thing it is selling is a small lie the first screenshot exposes. */
:root{
  --bg:#06080f; --bg-2:#0a0f1c; --surface:#111827; --surface-2:#0d1424;
  --line:rgba(133,165,215,.13); --line-2:rgba(133,165,215,.22);
  --text:#e9eef8; --muted:#8a97b0; --dim:#5f6c85;
  --indigo:#818cf8; --cyan:#37e0e6; --amber:#f5b95c; --green:#4ade80;
  --glow-indigo:rgba(129,140,248,.45); --glow-cyan:rgba(55,224,230,.35);
  --maxw:1120px;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 520px at 78% -8%, rgba(129,140,248,.14), transparent 62%),
    radial-gradient(760px 430px at 12% 4%, rgba(55,224,230,.07), transparent 60%);
  background-repeat:no-repeat;
}
h1,h2,h3{font-family:"Sora",sans-serif; text-wrap:balance; margin:0; letter-spacing:-.02em}
h1{font-size:clamp(34px,4.4vw,54px); line-height:1.06; font-weight:800; max-width:13em}
h2{font-size:clamp(26px,3.4vw,38px); line-height:1.12; font-weight:700}
h3{font-size:18px; font-weight:600}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.grad{background:linear-gradient(100deg,var(--indigo),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--indigo); display:block; margin-bottom:16px}

/* nav */
nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(6,8,15,.78); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Sora",sans-serif;
  font-weight:700; font-size:17px; letter-spacing:-.01em}
.brand svg{color:var(--indigo)}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14.5px}
.nav-links a{color:var(--muted); text-decoration:none; transition:color .15s}
.nav-links a:hover{color:var(--text)}
.btn{font-weight:600; font-size:14.5px; cursor:pointer; text-decoration:none;
  padding:11px 20px; border-radius:10px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; transition:transform .12s, box-shadow .2s, border-color .2s}
.btn-primary{background:linear-gradient(100deg,#5b63d8,#7b74f0); color:#fff;
  box-shadow:0 0 0 1px rgba(129,140,248,.4), 0 14px 34px -14px var(--glow-indigo)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2); color:var(--text)}
.btn-ghost:hover{border-color:var(--indigo)}
.nav-links .btn{padding:9px 16px}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:84px 24px 76px}
.hero .sub{color:var(--muted); font-size:18.5px; margin-top:22px; max-width:34em}
.cta-row{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.trust{display:flex; gap:14px 22px; margin-top:26px; flex-wrap:wrap;
  font-size:13px; font-family:"IBM Plex Mono",monospace; color:var(--dim)}
.trust span{display:flex; align-items:center; gap:7px}
.dot{width:5px; height:5px; border-radius:50%; background:var(--indigo); display:inline-block}

/* hero panel: a stylised echo of a real answer */
.echo{background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line-2); border-radius:16px; padding:20px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(129,140,248,.06)}
.echo-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.echo-badge{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--line);
  padding:4px 10px; border-radius:999px}
.echo-q{font-family:"Sora",sans-serif; font-weight:600; font-size:15.5px; margin-bottom:12px}
.echo-a{background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:11px;
  padding:14px; font-size:14.5px; color:#cdd6e8}
.cite{color:var(--indigo); font-weight:600}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.chip{font-family:"IBM Plex Mono",monospace; font-size:11px; padding:4px 10px;
  border-radius:999px; border:1px solid var(--line); color:var(--dim)}
.chip.ok{color:var(--green); border-color:rgba(74,222,128,.35)}
.chip.idx{color:var(--indigo); border-color:rgba(129,140,248,.3)}
.echo-rule{height:1px; background:var(--line); margin:18px 0}
.echo-refuse{font-size:14px; color:var(--muted)}
.echo-refuse b{color:var(--amber); font-weight:600}

/* sections */
section{padding:76px 0; border-top:1px solid var(--line)}
.sec-head{max-width:40em; margin-bottom:44px}
.sec-head p{color:var(--muted); margin-top:14px; font-size:16.5px}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.step{background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:22px}
.step .num{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--indigo);
  letter-spacing:.18em; display:block; margin-bottom:12px}
.step p{color:var(--muted); font-size:14.5px; margin-top:9px}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:24px;
  transition:border-color .2s, transform .15s}
.card:hover{border-color:var(--line-2); transform:translateY(-2px)}
.card .ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:rgba(129,140,248,.1); color:var(--indigo); margin-bottom:14px; font-size:16px}
.card p{color:var(--muted); font-size:14.5px; margin-top:9px}

/* the refusal callout */
.callout{background:linear-gradient(180deg,rgba(129,140,248,.07),transparent);
  border:1px solid var(--line-2); border-radius:16px; padding:34px; text-align:center}
.callout h2{font-size:clamp(23px,3vw,32px)}
.callout p{color:var(--muted); margin:16px auto 0; max-width:44em; font-size:16.5px}
.callout .quote{font-family:"IBM Plex Mono",monospace; color:var(--amber); font-size:14.5px;
  margin-top:22px; display:inline-block; border:1px solid rgba(245,185,92,.28);
  padding:11px 18px; border-radius:10px; background:rgba(245,185,92,.05)}

/* demo */
.demo-frame{border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:var(--surface-2); box-shadow:0 40px 90px -55px rgba(0,0,0,.9)}
.demo-frame img{display:block; width:100%; height:auto}
.demo-note{color:var(--dim); font-size:13.5px; margin-top:14px;
  font-family:"IBM Plex Mono",monospace; text-align:center}

/* code */
pre{background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; overflow-x:auto; font-family:"IBM Plex Mono",monospace;
  font-size:13.5px; line-height:1.75; color:#c6d0e4; margin:0}
pre .c{color:var(--dim)}
pre .k{color:var(--indigo)}
/* minmax(0,1fr), not 1fr: a plain fraction will not shrink below its content, so one long line in a
   code block widened the whole page past a phone screen instead of scrolling inside the block. */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px}
.two h3{margin-bottom:12px}

/* comparison */
.rows{border:1px solid var(--line); border-radius:13px; overflow:hidden}
.row{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row>div{padding:14px 18px; font-size:14.5px}
.row.head>div{background:rgba(255,255,255,.02); font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.row .them{color:var(--muted)}
.row .us{color:var(--text); border-left:1px solid var(--line); background:rgba(129,140,248,.04)}
.row.head .us{color:var(--indigo)}

footer{border-top:1px solid var(--line); padding:46px 0 60px; color:var(--dim); font-size:14px}
.foot-in{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot-in a{color:var(--muted); text-decoration:none}
.foot-in a:hover{color:var(--text)}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:56px 24px 52px; gap:38px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .two{grid-template-columns:minmax(0,1fr)}
  .nav-links a:not(.btn){display:none}
  .row{grid-template-columns:minmax(0,1fr)}
  /* A cell spanning two columns in a one-column grid creates an implicit second column. */
  .row>div{grid-column:auto !important}
  .row.head .us{display:none}
  .row .us{border-left:none; border-top:1px solid var(--line)}
}

/* faq */
.faq{display:grid; gap:0; border:1px solid var(--line); border-radius:13px; overflow:hidden}
.qa{padding:24px 26px; border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:none}
.qa h3{font-size:17px; margin-bottom:9px}
.qa p{color:var(--muted); font-size:15px; max-width:62em}
.qa a{color:var(--indigo); text-decoration:none; border-bottom:1px solid rgba(129,140,248,.3)}
.qa a:hover{border-bottom-color:var(--indigo)}