/* BILNAVA public home V31 — owner's master reference: dark navy harbour, lighthouse right, paper boat,
   centred headline, dominant laptop + iPad + phone with REAL screenshots, five-feature strip,
   owner/accountant band, turquoise free-trial CTA, navy footer. Loaded after v25.css (base type/tokens). */
:root{--n31-deep:#061825;--n31-navy:#0f2230;--n31-panel:#0c2737;--n31-line:rgba(255,255,255,.1);--n31-text:#e6eef1;--n31-soft:#b3c6cf;--n31-mint:#3ad1bc;--n31-teal:#0b6a63}
.h31-body{background:var(--n31-deep);color:var(--n31-text)}
.h31-body .skip{background:var(--n31-mint);color:var(--n31-deep)}
.h31-body :focus-visible{outline:2.5px solid var(--n31-mint);outline-offset:3px}

/* buttons: bright turquoise with navy text (contrast ≈10:1) */
.b31{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15.5px;border:1px solid transparent;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.b31 .ico{width:18px;height:18px}
.b31-teal{background:var(--n31-mint);color:var(--n31-deep);box-shadow:0 14px 34px -14px rgba(58,209,188,.7)}
.b31-teal:hover{background:#5fe0cd;transform:translateY(-1px)}
.b31-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.4);color:#fff}
.b31-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.b31-lg{height:54px;padding:0 28px;font-size:17px}
.b31-xl{height:62px;padding:0 34px;font-size:19px}

/* nav */
.n31{position:sticky;top:0;z-index:50;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.n31.scrolled{background:rgba(6,24,37,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--n31-line)}
.n31 .wrap{display:flex;align-items:center;gap:30px;height:76px}
.n31-logo{display:inline-flex;align-items:center;gap:12px;color:#fff}
.n31-logo img{background:#fff;border-radius:10px;padding:4px;box-sizing:border-box}
.n31-logo span{display:grid;font-weight:700;font-size:21px;letter-spacing:.06em;line-height:1.1}
.n31-logo b{color:var(--n31-mint)}
.n31-logo small{font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--n31-soft)}
.n31-links{display:flex;gap:26px;font-size:15px;color:var(--n31-soft)}
.n31-links a:hover{color:#fff}
.n31-end{margin-left:auto;display:flex;gap:10px}
.n31-end .b31{height:42px;font-size:14.5px}

/* hero */
.h31{position:relative;isolation:isolate;overflow:hidden;margin-top:-77px;padding:120px 0 64px;
  background:linear-gradient(180deg,#071c2b 0%,#0a2433 46%,#061825 100%)}
.h31-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.h31-beam{transform-origin:1282px 176px;animation:h31-sweep 10s ease-in-out infinite alternate}
@keyframes h31-sweep{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
.h31-lamp{animation:h31-pulse 4s ease-in-out infinite}
@keyframes h31-pulse{50%{opacity:.45}}
.h31-boat{animation:h31-bob 6s ease-in-out infinite}
@keyframes h31-bob{50%{transform:translateY(5px)}}
.h31-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.h31-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;padding:5px 16px 5px 6px;border-radius:999px;background:rgba(58,209,188,.1);border:1px solid rgba(58,209,188,.25);color:#c9efe8;font-size:14px}
.h31-kicker span{padding:2px 10px;border-radius:999px;background:var(--n31-mint);color:var(--n31-deep);font-weight:700;font-size:12.5px}
.h31 h1{margin:22px 0 16px;font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(34px,4.6vw,64px);line-height:1.22;letter-spacing:-.005em}
.h31 h1 span{display:block}
.h31 h1 em{font-style:normal;color:var(--n31-mint)}
.h31-lead{max-width:44em;margin:0;color:var(--n31-soft);font-size:clamp(16px,1.35vw,18.5px);line-height:1.75}
.h31-lead .ico{width:.95em;height:.95em;color:var(--n31-mint);vertical-align:-.12em}
.h31-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:28px 0 12px}
.h31-note{margin:0;color:#8fa7b2;font-size:13.5px}

/* three-device scene: laptop rear-left, iPad front-centre, phone right */
.h31-scene-wrap{margin-top:46px}
.h31-scene{position:relative;margin:0 auto;width:min(100%,1160px);aspect-ratio:1160/640}
.h31-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.d31-laptop{position:absolute;left:0;top:0;width:67%}
.d31-lid{padding:1.6% 1.6% 2.2%;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#2b343b,#0f1418);box-shadow:0 0 0 1.5px #59646c inset,0 40px 70px -30px rgba(0,0,0,.8)}
.d31-lid img{aspect-ratio:16/10;border-radius:4px}
.d31-base{height:14px;margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#c9d1d6,#8a959c);box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
.d31-ipad{position:absolute;left:31%;top:30%;width:46%;padding:1.5%;border-radius:22px;background:#0d1114;box-shadow:0 0 0 1.5px #69747c,0 50px 80px -30px rgba(0,0,0,.85);z-index:2}
.d31-ipad img{aspect-ratio:1180/820;border-radius:10px}
.d31-phone{position:absolute;right:1%;top:12%;width:18.5%;padding:1.1%;border-radius:30px;background:#0d1114;box-shadow:0 0 0 1.5px #69747c,0 50px 80px -30px rgba(0,0,0,.85);z-index:3}
.d31-phone img{aspect-ratio:390/844;border-radius:22px}
.h31-scene figcaption{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-size:13px;color:#8fa7b2}

/* five-feature strip */
.f31{padding:70px 0 26px}
.f31-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--n31-line);border-radius:20px;background:linear-gradient(180deg,#0c2737,#0a2130)}
.f31-list li{display:grid;gap:6px;align-content:start;padding:22px 20px;border-left:1px solid var(--n31-line)}
.f31-list li:first-child{border-left:0}
.f31-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(58,209,188,.12);color:var(--n31-mint);margin-bottom:4px}
.f31-ic .ico{width:23px;height:23px}
.f31-list b{color:#fff;font-size:16px;line-height:1.45}
.f31-list small{color:var(--n31-soft);font-size:13.5px;line-height:1.6}

/* owner / accountant band */
.a31{padding:56px 0 30px}
.a31-h{margin:0 0 26px;text-align:center;font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(26px,2.8vw,38px);line-height:1.35}
.a31-h em{font-style:normal;color:var(--n31-mint)}
.a31-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.a31-card{display:flex;flex-direction:column;border:1px solid var(--n31-line);border-radius:22px;overflow:hidden;background:var(--n31-panel)}
.a31-shot{height:230px;overflow:hidden;border-bottom:1px solid var(--n31-line);background:#f3f6f7}
.a31-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;filter:saturate(.95)}
.a31-body{padding:22px 24px 24px}
.a31-tag{display:inline-block;padding:3px 12px;border-radius:999px;background:rgba(58,209,188,.12);color:var(--n31-mint);font-size:13px;font-weight:600}
.a31-body h3{margin:10px 0 12px;color:#fff;font-size:21px;font-family:var(--display);font-weight:600}
.a31-body ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:#d2dfe4;font-size:15px}
.a31-body li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.6}
.a31-body li .ico{width:19px;height:19px;color:var(--n31-mint);margin-top:3px}

/* CTA strip */
.c31{padding:40px 0 70px}
.c31-box{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:32px 38px;border-radius:24px;border:1px solid rgba(58,209,188,.35);
  background:radial-gradient(70% 140% at 0% 50%,rgba(58,209,188,.16),rgba(58,209,188,0) 70%),#0b2534}
.c31-boat{flex:none;width:96px}
.c31-box>div{flex:1 1 320px}
.c31-box h2{margin:0 0 6px;color:#fff;font-family:var(--display);font-weight:600;font-size:clamp(23px,2.3vw,30px);line-height:1.35}
.c31-box p{margin:0;color:var(--n31-soft)}

/* footer */
.ft31{background:#04121c;border-top:1px solid var(--n31-line);padding:40px 0 30px;color:var(--n31-soft);font-size:14px}
.ft31-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ft31-dev{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;max-width:30em}
.ft31-dev .ico{width:18px;height:18px;color:var(--n31-mint)}
.ft31 nav{display:flex;gap:10px 22px;flex-wrap:wrap;align-content:flex-start;max-width:520px}
.ft31 nav a:hover{color:#fff}
.ft31-legal{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--n31-line);font-size:12.5px;color:#8199a4}

/* tablet */
@media (max-width:1023px){
  .n31-links{display:none}
  .f31-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f31-list li:nth-child(4){border-left:0}
  .f31-list li:nth-child(n+4){border-top:1px solid var(--n31-line)}
}
@media (max-width:767px){
  .h31{padding:104px 0 56px}
  .h31-scene{aspect-ratio:1160/1000}
  .d31-laptop{width:96%;left:2%}
  .d31-ipad{left:0;top:46%;width:66%}
  .d31-phone{right:0;top:38%;width:31%}
  .f31-list{grid-template-columns:1fr 1fr}
  .f31-list li{border-left:0;border-top:1px solid var(--n31-line)}
  .f31-list li:nth-child(even){border-left:1px solid var(--n31-line)}
  .f31-list li:nth-child(-n+2){border-top:0}
  .f31-list li:last-child{grid-column:1 / -1}
  .a31-grid{grid-template-columns:1fr}
  .c31-box{padding:24px 20px}
  .c31-box .b31-xl{width:100%}
}
@media (max-width:520px){
  .n31-end .b31-ghost{display:none}
  .n31-logo small{display:none}
  .h31 h1 .l2 em{display:block}
  .h31-actions .b31{width:100%}
  .d31-phone{border-radius:18px}
  .d31-phone img{border-radius:12px}
  .d31-ipad{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){.h31-beam,.h31-lamp,.h31-boat{animation:none}}
.n31-logo i{font-style:normal}
.h31-lead .ico{display:inline-block}
.h31-sky{height:auto;min-height:100%;aspect-ratio:auto}
.h31-sky{inset:0 0 auto 0;height:auto;min-height:0;aspect-ratio:1440/900}
.h31 h1{font-size:clamp(32px,3.9vw,56px)}
@media (max-width:767px){.h31-sky{width:180%;left:auto;right:0}}

/* sections kept from the previous home (concept film, forms, flow, all features, pricing, FAQ) on a light band */
.h31-classic{background:#fff;color:var(--ink);padding:10px 0 20px}
.h31-classic .aud{background:#f3f6f7}
.h31-classic .sec{color:var(--ink)}
.f-half{grid-column:span 6}
@media (max-width:860px){.f-half{grid-column:span 12}}
.paper-soon .soon[hidden]{display:none}
@media (max-width:640px){.film-chapters button,.seg button{min-height:44px}}
@media (max-width:1180px){.n31-links{gap:18px;font-size:14.5px}}
@media (max-width:1100px) and (min-width:1024px){.n31-links a:nth-child(n+5){display:none}}