/* ============================================================
   BlueArc Technologies — shared design system (rev 2)
   Your Time Back. Your Business Forward.
   Faithful extraction of the approved homepage system.
   Web team: this is the componentised starting point.
   The homepage mockup remains the visual source of truth.
   Australian English. No dashes in copy. Separators are middle dots.
   ============================================================ */

:root{
  /* master brand */
  --azure:#1A9BD7; --azure-br:#3FB4EC; --deep:#0C5C9C; --sky:#6FC4EC;
  --ink:#080E16; --slate:#3D6E94; --steel:#8597A4; --cloud:#F2F6F9;
  /* royal blue canvas ramp */
  --royal1:#123A66; --royal2:#0E3157; --royal3:#0A2340; --royal4:#071A30;
  /* surfaces + text */
  --line:rgba(140,190,230,.16); --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.07);
  --txt:#EAF3FA; --txt2:#B9CEE0; --txt3:#8FA8BD;
  /* per product accents */
  --wrn:#3E9EC4; --con:#4A93E8; --comp:#D9A233; --acc:#9A6BC0; --whl:#3BB47E; --fleet:#48B56A; --mms:#3AA6A6;
  --rad:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:hidden}
body{font-family:Arial,Helvetica,sans-serif;color:var(--txt);line-height:1.65;background:var(--royal3);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif{font-family:'Lora',Georgia,serif}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---- one continuous royal blue canvas + elegant moving background ---- */
.canvas{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1400px 900px at 15% -5%, #17497e 0%, transparent 55%),
  radial-gradient(1200px 800px at 92% 30%, #10406e 0%, transparent 55%),
  radial-gradient(1100px 900px at 40% 105%, #0d3660 0%, transparent 60%),
  linear-gradient(175deg, var(--royal2) 0%, var(--royal3) 45%, var(--royal4) 100%);}
.aurora{position:fixed;inset:-10%;z-index:-1;pointer-events:none;overflow:hidden}
.aurora b{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen}
.aurora .a1{width:52vw;height:52vw;background:radial-gradient(circle,rgba(26,155,215,.42),transparent 65%);top:-14vw;left:-10vw;animation:au1 34s ease-in-out infinite}
.aurora .a2{width:46vw;height:46vw;background:radial-gradient(circle,rgba(63,180,236,.30),transparent 65%);bottom:-16vw;right:-8vw;animation:au2 42s ease-in-out infinite}
.aurora .a3{width:38vw;height:38vw;background:radial-gradient(circle,rgba(12,92,156,.40),transparent 65%);top:34%;left:40%;animation:au3 52s ease-in-out infinite}
@keyframes au1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,7vw) scale(1.12)}}
@keyframes au2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-5vw) scale(1.15)}}
@keyframes au3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vw) scale(.9)}}
#netbg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.92}
/* slow rotating conic swirl for depth / 3D feel (auto-created by bluearc.js) */
.depth{position:fixed;inset:-25%;z-index:-1;pointer-events:none;opacity:.12;transform-origin:50% 50%;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(63,180,236,.35) 70deg, transparent 150deg, rgba(12,92,156,.32) 240deg, transparent 320deg);
  filter:blur(50px);animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* per industry motion for shared industry cards */
.scard .stop, .card.ind{position:relative;overflow:hidden}
.scard .sico, .card.ind .pmark{animation:ifloat 5s ease-in-out infinite}
@keyframes ifloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---- layout ---- */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.kicker{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
section{padding:clamp(46px,6vw,84px) 0;position:relative}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;min-height:48px;border-radius:11px;font-weight:700;font-size:15.5px;cursor:pointer;border:0;transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn-primary{background:linear-gradient(120deg,var(--azure) 0%,var(--deep) 130%);color:#fff;box-shadow:0 10px 30px rgba(26,155,215,.35), inset 0 1px 0 rgba(255,255,255,.25);position:relative;overflow:hidden}
.btn-primary:after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-80%}75%,100%{left:140%}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(26,155,215,.5)}
.btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* ---- scroll reveals ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.65,.25,1),transform .8s cubic-bezier(.2,.65,.25,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}.d7{transition-delay:.56s}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---- header ---- */
header{position:sticky;top:0;z-index:80;background:rgba(9,30,54,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:.25s}
.nav{display:flex;align-items:center;gap:28px;height:104px;transition:.25s}
header.mini .nav{height:76px}
.brand img{height:92px;width:auto;display:block;transition:.25s}
header.mini .brand img{height:60px}
.links{display:flex;gap:26px}
.links>div>a,.links>a{font-size:15px;font-weight:600;color:#DCEAF5;padding:8px 0;display:inline-block}
.links a:hover{color:#fff}
.spacer{flex:1}
.signin{font-size:14px;font-weight:600;color:var(--txt2)}.signin:hover{color:#fff}
.has-mega{position:relative}
.mega{position:absolute;top:46px;left:-26px;width:640px;background:rgba(12,38,66,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(3,12,22,.6);padding:14px;display:none;grid-template-columns:1fr 1fr;gap:2px}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:grid}
.mega a{display:flex;gap:11px;padding:11px 12px;border-radius:11px;align-items:baseline}
.mega a:hover{background:rgba(255,255,255,.06)}
.mega i{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px)}
.mega .t{font-weight:700;font-size:14px;color:var(--txt);display:block}
.mega .d{font-size:12.5px;color:var(--txt3);line-height:1.4}
.burger{display:none;width:48px;height:48px;border:1.5px solid rgba(255,255,255,.3);border-radius:11px;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.burger.x span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){top:23px;transform:rotate(-45deg)}
.mnav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:75;background:#071628;padding:120px 28px 40px;overflow:auto}
.mnav.open{display:block}
.mnav a{display:block;padding:15px 4px;font-size:19px;font-weight:700;font-family:'Lora',serif;border-bottom:1px solid var(--line)}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{padding:15px 4px;font-size:19px;font-weight:700;font-family:'Lora',serif;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.mnav summary:after{content:"+";font-size:22px;color:var(--sky)}
.mnav details[open] summary:after{content:"\2013"}
.mnav details a{font-family:Arial;font-size:15.5px;font-weight:600;color:var(--txt2);border:0;padding:10px 4px 10px 18px}
.mnav .mcta{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.mnav .mcta .btn{width:100%}

/* ---- section heads + stage chips ---- */
.head{max-width:760px;margin:0 auto clamp(26px,3.4vw,42px);text-align:center}
.stage{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);background:rgba(26,155,215,.1);border:1px solid rgba(111,196,236,.3);border-radius:30px;padding:7px 16px;margin-bottom:18px}
.stage i{width:7px;height:7px;border-radius:50%;background:var(--azure-br)}
.head h2{font-size:clamp(28px,3.4vw,44px);color:#fff;margin:6px 0 14px;letter-spacing:-.4px;line-height:1.15}
.head p{font-size:clamp(15.5px,1.35vw,18px);color:var(--txt2)}

/* ---- page hero (interior pages) ---- */
.phero{position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.phero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:18px}
.phero .eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--ac,var(--azure))}
.phero h1{font-size:clamp(34px,5vw,60px);line-height:1.06;font-weight:700;letter-spacing:-.5px;color:#fff}
.phero h1 em{font-style:normal;color:var(--sky)}
.phero p.lede{font-size:clamp(16.5px,1.5vw,20px);color:var(--txt2);max-width:640px;margin:20px 0 30px}
.phero .cta{display:flex;gap:14px;flex-wrap:wrap}
.crumbs{font-size:13px;color:var(--txt3);margin-bottom:18px}
.crumbs a:hover{color:var(--sky)}

/* ---- glass cards / grids ---- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--rad);padding:26px;transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.card:hover{transform:translateY(-5px);background:var(--glass2);box-shadow:0 28px 60px rgba(3,12,22,.45)}
.card.accent{border-top:3px solid var(--ac,var(--azure))}
.card h3{font-size:19.5px;color:#fff;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--txt2)}
.pmark{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac,var(--azure)) 18%,transparent);border:1px solid color-mix(in srgb,var(--ac,var(--azure)) 45%,transparent);margin-bottom:16px}
.pmark svg{width:22px;height:22px;stroke:var(--ac,var(--azure));fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* feature list with ticks */
.feat{list-style:none}
.feat li{font-size:14.5px;color:var(--txt2);padding-left:26px;position:relative;margin-bottom:10px;line-height:1.5}
.feat li:before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--ac,var(--azure));border-bottom:2px solid var(--ac,var(--azure));transform:rotate(-45deg)}

/* product device / vignette frame */
.device{background:linear-gradient(160deg,rgba(20,52,88,.92),rgba(11,32,58,.94));border-radius:20px;overflow:hidden;border:1px solid rgba(120,180,225,.35);box-shadow:0 50px 110px rgba(2,10,20,.6), inset 0 1px 0 rgba(255,255,255,.08);outline:8px solid color-mix(in srgb,var(--ac,var(--azure)) 12%,transparent)}
.device .bar{background:rgba(6,20,38,.85);display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--line)}
.device .bar i{width:10px;height:10px;border-radius:50%;background:#2d517a;display:block}
.device .bar .ttl{color:var(--txt2);font-size:12px;font-weight:700;margin-left:8px}
.vrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(140,190,230,.1);font-size:12.5px;color:var(--txt2)}
.vrow>span:first-child{min-width:0;overflow-wrap:anywhere;line-height:1.35}
.vrow:last-child{border:0}
.ok{flex:none;white-space:nowrap;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;color:var(--ac,var(--azure));background:color-mix(in srgb,var(--ac,var(--azure)) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac,var(--azure)) 40%,transparent)}

/* stat blocks */
.stat b{font-family:'Lora',serif;font-size:clamp(28px,3vw,40px);display:block;color:#fff;line-height:1.1}
.stat span{font-size:13px;color:var(--txt2)}

/* CTA band */
.ctaband{text-align:center}
.ctaband .tagline{font-family:'Lora',serif;font-size:clamp(28px,4vw,50px);font-weight:700;line-height:1.12;color:#fff;letter-spacing:-.4px}
.ctaband .tagline em{font-style:normal;color:var(--sky)}
.ctaband p{color:var(--txt2);font-size:clamp(16px,1.5vw,19px);margin:18px auto 30px;max-width:560px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);color:var(--txt3);padding:clamp(48px,6vw,72px) 0 34px;font-size:14px;background:rgba(5,15,28,.55)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.fbrand img{height:78px;width:auto;margin-bottom:16px}
.fbrand p{max-width:300px;color:var(--txt3)}
.fbrand .ftag{color:var(--sky);font-weight:700;font-family:'Lora',serif;font-size:15.5px;margin-top:10px}
footer h5{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:15px}
footer a{display:block;margin-bottom:10px;color:var(--txt3)}
footer a:hover{color:#fff}
.flegal{display:flex;gap:24px;flex-wrap:wrap;padding:22px 0 8px}
.flegal a{margin:0;font-size:13px}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;padding-top:8px;color:#6f88a0}

/* ---- responsive ---- */
@media(max-width:1024px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.links,.signin{display:none}.burger{display:block}.nav{height:84px;gap:12px}.brand img{height:56px}header.mini .nav{height:70px}header.mini .brand img{height:48px}.nav .btn-primary{padding:11px 15px;font-size:13.5px;white-space:nowrap}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}