/* ============================================================
   JBNC Solutions homepage — parent brand.
   Near-black canvas, bold AURORA signature (cyan → indigo → violet).
   Display: Space Grotesk · Body: Inter · Labels: JetBrains Mono.
   Uses the shared frame.css for nav/footer/portal/reveal.
   ============================================================ */

:root{
  --ink:#07090f;
  --surface:#0e1117;
  --surface-2:#12151c;
  --paper:#f4f6fb;
  --paper-dim:#aab1c2;
  --paper-faint:#7f8798;
  --hair:rgba(255,255,255,.10);
  --hair-strong:rgba(255,255,255,.18);
  /* aurora */
  --accent:#818cf8;      /* indigo (frame accent) */
  --accent-2:#22d3ee;    /* cyan */
  --accent-3:#a855f7;    /* violet */
  --ease:cubic-bezier(.16,1,.3,1);
}

html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  line-height:1.65; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- aurora backdrop (bold) ---------- */
.aurora{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.aurora::before, .aurora::after{
  content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
}
.aurora::before{
  width:60vw; height:60vw; top:-18vw; left:-8vw;
  background:radial-gradient(circle, rgba(34,211,238,.55), transparent 62%);
  animation:auroraA 22s var(--ease) infinite alternate;
}
.aurora::after{
  width:62vw; height:62vw; top:-24vw; right:-14vw;
  background:radial-gradient(circle, rgba(168,85,247,.5), transparent 62%);
  animation:auroraB 26s var(--ease) infinite alternate;
}
.aurora .band{
  position:absolute; width:70vw; height:44vw; top:2vw; left:15vw; border-radius:50%;
  filter:blur(80px); opacity:.4;
  background:radial-gradient(circle, rgba(129,140,248,.5), transparent 60%);
  animation:auroraC 30s var(--ease) infinite alternate;
}
@keyframes auroraA{ to{ transform:translate(10vw,6vw) scale(1.15); } }
@keyframes auroraB{ to{ transform:translate(-8vw,8vw) scale(1.12); } }
@keyframes auroraC{ to{ transform:translate(4vw,-4vw) scale(1.1); } }
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after,.aurora .band{ animation:none; }
}

/* ---------- type primitives ---------- */
.display{ font-family:"Space Grotesk",sans-serif; font-weight:700; line-height:1.03; letter-spacing:-.02em; }
.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--paper-dim); display:inline-flex; align-items:center; gap:.7em;
}
.grad-text{
  background:linear-gradient(100deg, var(--accent-2), var(--accent) 48%, var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ font-size:clamp(1.02rem,1.7vw,1.28rem); color:var(--paper-dim); line-height:1.62; }

section{ position:relative; padding:clamp(64px,10vh,120px) 24px; }
.inner{ max-width:var(--frame-maxw,1200px); margin:0 auto; }
.section-head{ max-width:62ch; margin-bottom:clamp(30px,5vh,54px); }
.section-head .lede{ margin-top:16px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:"Inter",sans-serif; font-weight:600;
  font-size:.95rem; padding:13px 22px; border-radius:11px; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s, color .25s; }
.btn-grad{ background:linear-gradient(100deg, var(--accent-2), var(--accent) 50%, var(--accent-3)); color:#07090f; font-weight:700; border:none; }
.btn-grad:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(129,140,248,.35); }
.btn-ghost{ border:1px solid var(--hair-strong); color:var(--paper); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--paper); transform:translateY(-3px); }

/* ---------- hero ---------- */
.hero{ min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; }
.hero .eyebrow{ margin-bottom:22px; }
.hero .eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--accent-2),var(--accent-3)); display:inline-block; }
.hero h1{ font-size:clamp(2.6rem,7vw,6rem); margin:0 0 18px; max-width:17ch; }
.hero .lede{ max-width:52ch; margin-bottom:30px; }
.hero .btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- approach strip ---------- */
.approach{ border-top:1px solid var(--hair); background:linear-gradient(180deg,transparent,rgba(129,140,248,.04)); }
.approach h2{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(1.3rem,2.4vw,1.8rem); margin-bottom:22px; }
.approach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.approach-card{ background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:20px; }
.approach-card h4{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1rem; margin:0 0 6px; }
.approach-card p{ margin:0; font-size:.86rem; color:var(--paper-dim); }

/* ---------- products showcase ---------- */
.products h2{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(2rem,4vw,3.2rem); }
.prod-row{
  --pa:#888; display:flex; align-items:stretch; gap:0; overflow:hidden; cursor:pointer;
  background:var(--surface); border:1px solid var(--hair); border-radius:16px; margin-top:14px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.prod-row:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--pa) 55%, transparent);
  box-shadow:0 24px 60px color-mix(in srgb, var(--pa) 22%, transparent); }
.prod-bar{ width:6px; background:var(--pa); flex:0 0 6px; }
.prod-main{ flex:1; padding:26px 28px; min-width:0; }
.prod-name{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(1.5rem,2.6vw,2rem); }
.prod-name em{ font-style:normal; color:var(--pa); }
.prod-tag{ color:var(--paper-dim); font-size:.95rem; margin:4px 0 12px; }
.prod-points{ display:flex; flex-wrap:wrap; gap:8px 18px; font-family:"JetBrains Mono",monospace;
  font-size:.72rem; letter-spacing:.04em; color:var(--paper-faint); text-transform:uppercase; }
.prod-cta{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:26px 26px 26px 0; }
.prod-explore{ font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; padding:11px 18px; border-radius:9px; background:var(--pa); color:#07090f; text-align:center; white-space:nowrap;
  transition:transform .2s, box-shadow .2s; }
.prod-explore:hover{ transform:translateY(-2px); box-shadow:0 10px 26px color-mix(in srgb, var(--pa) 40%, transparent); }
.prod-portal{ font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 18px; border-radius:9px; border:1px solid var(--hair-strong); color:var(--paper); text-align:center; white-space:nowrap;
  transition:border-color .2s; }
.prod-portal:hover{ border-color:var(--pa); }

/* ---------- custom solutions band ---------- */
.custom{ }
.custom-band{
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--hair));
  border-radius:20px; padding:clamp(28px,4vw,48px);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(168,85,247,.12), transparent 55%),
    linear-gradient(160deg, var(--surface-2), #0a0c14);
  overflow:hidden;
}
.custom-band .eyebrow{ color:var(--accent-2); }
.custom-band h2{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(1.9rem,4vw,3rem);
  margin:12px 0 0; max-width:20ch; }
.custom-band .lede{ margin-top:14px; max-width:56ch; }
.scale-strip{ display:flex; align-items:stretch; gap:10px; margin:26px 0; flex-wrap:wrap; }
.scale-step{ flex:1; min-width:150px; background:rgba(255,255,255,.04); border:1px solid var(--hair); border-radius:12px;
  padding:16px; text-align:center; }
.scale-step.big{ background:linear-gradient(160deg, rgba(129,140,248,.16), rgba(168,85,247,.10));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.scale-step .st{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.05rem; }
.scale-step .sd{ font-size:.76rem; color:var(--paper-dim); margin-top:3px; }
.scale-arrow{ display:flex; align-items:center; color:var(--accent); font-size:1.2rem; }
.process{ display:flex; gap:20px; flex-wrap:wrap; font-family:"JetBrains Mono",monospace; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:22px; }
.process span::before{ content:"◆ "; color:var(--accent-2); }

/* ---------- about + contact ---------- */
.about{ border-top:1px solid var(--hair); background:var(--surface); }
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }
.about h2{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 14px; }
.contact form{ display:flex; flex-direction:column; gap:13px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); }
.field input, .field textarea{ background:var(--ink); border:1px solid var(--hair); border-radius:10px; padding:12px 14px;
  color:var(--paper); font-family:"Inter",sans-serif; font-size:.94rem; transition:border-color .2s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:104px; }
.contact-or{ display:flex; align-items:center; gap:12px; margin:18px 0 12px; color:var(--paper-faint);
  font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }
.contact-or::before, .contact-or::after{ content:""; flex:1; height:1px; background:var(--hair); }
.wa-btn{ background:#25D366; color:#06281a; border:none; }
.wa-btn:hover{ background:#22c35e; transform:translateY(-3px); box-shadow:0 12px 30px rgba(37,211,102,.3); }
.wa-btn svg{ width:20px; height:20px; }

/* ---------- portal dot colours (homepage dropdown) ---------- */
.dot-dandori{ background:#e6391c } .dot-campsite{ background:#E89B3C }
.dot-klaslink{ background:#f5c451 } .dot-omnipremise{ background:#5b82c4 }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .approach-grid{ grid-template-columns:1fr 1fr; }
  .about-grid{ grid-template-columns:1fr; gap:32px; }
  .prod-row{ flex-direction:column; }
  .prod-bar{ width:100%; height:5px; flex-basis:5px; }
  .prod-cta{ flex-direction:row; padding:0 28px 24px; }
  .prod-explore, .prod-portal{ flex:1; }
}
@media (max-width:520px){
  .approach-grid{ grid-template-columns:1fr; }
  .scale-arrow{ transform:rotate(90deg); }
}

/* ============================================================
   JBNC BRAND LAYER — "Petrol Signal" (brand pack, 2026-08)
   Palette: #D35B25 · #F9761C · #46A9A9 · #10E7F0 · #173140 · #F3F3F4
   Type: Michroma (HK Modular stand-in) · Space Mono · Inter body.
   Overrides the earlier aurora look; keep last in this file.
   ============================================================ */
:root{
  --ink:#0C201E; --surface:#123230; --surface-2:#15403B;
  --paper:#F3F3F4; --paper-dim:#AECBC5; --paper-faint:#7B9A93;
  --hair:rgba(243,243,244,.11); --hair-strong:rgba(243,243,244,.22);
  --accent:#F9761C; --accent-2:#10E7F0; --accent-3:#46A9A9;
}
body{ background:
  radial-gradient(90% 70% at 10% 0%, rgba(214,232,227,.14), transparent 52%),
  linear-gradient(155deg,#1A4844 0%, #123230 40%, #0C201E 75%, #081614 100%); }
/* slow-drifting petrol glows (reuses the base drift keyframes) */
.aurora::before{ background:radial-gradient(circle, rgba(16,231,240,.17), transparent 62%); }
.aurora::after{ background:radial-gradient(circle, rgba(70,169,169,.20), transparent 62%); }
.aurora .band{ background:radial-gradient(circle, rgba(249,118,28,.09), transparent 60%); }
/* signal-network canvas — drifting nodes + links, the brand's signal motif */
.signal-canvas{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.grain{ opacity:.07; }

/* brand type */
.display{ font-family:"Michroma",sans-serif; font-weight:400; letter-spacing:.01em; line-height:1.14; }
.hero h1{ font-size:clamp(2rem,5vw,4.1rem); max-width:19ch; }
.products h2, .approach h2, .about h2, .about-grid h2, .custom-band h2{ font-family:"Michroma",sans-serif; font-weight:400; }
.products h2{ font-size:clamp(1.6rem,3.2vw,2.6rem); }
.custom-band h2{ font-size:clamp(1.5rem,3vw,2.4rem); }
.approach h2{ font-size:clamp(1.15rem,2vw,1.6rem); }
.eyebrow, .process, .frame-foot-copy, .prod-points, .contact-or{ font-family:"Space Mono",monospace; }
.portal-btn, .prod-explore, .prod-portal{ font-family:"Space Mono",monospace; }
.brand-word{ font-family:"Michroma",sans-serif; font-size:1.08rem; letter-spacing:.05em; }
.brand-word em{ font-family:"Space Mono",monospace; font-style:normal; font-size:.64rem; letter-spacing:.34em; color:var(--paper-dim); margin-left:3px; }

/* hero circuit lines (brand-pack motif) */
.hero{ background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='240'%3E%3Cg stroke='%2310E7F0' stroke-width='6'%3E%3Cline x1='50' y1='0' x2='50' y2='150'/%3E%3Cline x1='110' y1='0' x2='110' y2='195'/%3E%3Cline x1='170' y1='0' x2='170' y2='120'/%3E%3C/g%3E%3Cg fill='%2310E7F0'%3E%3Ccircle cx='50' cy='160' r='11'/%3E%3Ccircle cx='110' cy='206' r='11'/%3E%3Ccircle cx='170' cy='130' r='11'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 90px right 4%,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170'%3E%3Cg stroke='%2310E7F0' stroke-width='6'%3E%3Cline x1='0' y1='40' x2='170' y2='40'/%3E%3Cline x1='0' y1='95' x2='200' y2='95'/%3E%3Cline x1='0' y1='150' x2='140' y2='150'/%3E%3C/g%3E%3Cg fill='%2310E7F0'%3E%3Ccircle cx='180' cy='40' r='11'/%3E%3Ccircle cx='210' cy='95' r='11'/%3E%3Ccircle cx='150' cy='150' r='11'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom 3% left 0; }
@media (max-width:1100px){ .hero{ background:none; } }

/* brand accents */
.grad-text{ background:linear-gradient(100deg,#F9761C,#D35B25); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-grad{ background:linear-gradient(100deg,#F9761C,#D35B25); color:#F3F3F4; }
.btn-grad:hover{ box-shadow:0 16px 40px rgba(249,118,28,.38); }
.btn-ghost:hover{ border-color:#10E7F0; color:#10E7F0; }
.eyebrow{ color:#10E7F0; }
.hero .eyebrow::before{ background:#10E7F0; }
.frame-link:hover, .frame-back:hover{ color:#10E7F0; }
.portal-btn:hover{ border-color:#10E7F0; }
.custom-band{ border-color:rgba(249,118,28,.4);
  background:radial-gradient(120% 140% at 12% 0%, rgba(16,231,240,.08), transparent 55%),
             radial-gradient(120% 140% at 100% 100%, rgba(249,118,28,.13), transparent 55%),
             linear-gradient(160deg,#15403B,#0C201E); }
.custom-band .eyebrow{ color:#10E7F0; }
.scale-step.big{ background:linear-gradient(160deg, rgba(249,118,28,.16), rgba(211,91,37,.10)); border-color:rgba(249,118,28,.45); }
.scale-arrow{ color:#F9761C; }
.process span::before{ color:#10E7F0; }
.approach{ background:linear-gradient(180deg,transparent,rgba(16,231,240,.04)); }
.approach-card, .prod-row, .tier{ background:rgba(9,26,24,.55); }