 :root{
  --bg:#f7f8fb;
  --bg2:#ffffff;
  --surface:rgba(255,255,255,.78);
  --surface-2:rgba(255,255,255,.92);
  --border:rgba(0,0,0,.10);
  --shadow:0 16px 44px rgba(0,0,0,.10);
  --text:#262626;
  --muted:#666666;
  --muted-2:#8a8a8a;
  --brand:#ff8a00;
  --danger:#ff2d55;
  --ok:#00b894;
   --radius-xl:28px;
   --radius-lg:18px;
   --radius-md:14px;
   --radius-sm:12px;
   --max:1180px;
 }
 
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
 body{
   margin:0;
   font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;
   color:var(--text);
   background:var(--bg);
   min-height:100vh;
 }
 a{color:inherit;text-decoration:none}
 img{max-width:100%;height:auto}
 
 .container{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
 .skip{
   position:absolute;
   left:-999px;
   top:12px;
   background:var(--surface-2);
   border:1px solid var(--border);
   border-radius:12px;
   padding:10px 14px;
   z-index:9999;
 }
 .skip:focus{left:12px}
 
 .top-progress{
   position:fixed;
   top:0;
   left:0;
   height:3px;
   width:0%;
   background:var(--brand);
   z-index:9998;
 }
 
 .nav{
   position:sticky;
   top:0;
   z-index:1000;
   border-bottom:1px solid var(--border);
   background:rgba(255,255,255,.55);
   backdrop-filter:blur(14px);
 }
 .nav-inner{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:16px;
   padding:14px 0;
 }
 .brand{
   display:flex;
   align-items:center;
   gap:12px;
   min-width:auto;
 }
.brand img{height:56px;width:auto;max-width:180px;object-fit:contain;display:block}
.nav .brand img{
  transform-origin:center;
}
@media (prefers-reduced-motion: no-preference){
  .nav .brand img{animation:logoDrift 2.9s ease-in-out infinite}
}
@keyframes logoDrift{
  0%,100%{
    transform:translate3d(0,0,0) rotate(0deg) scale(1);
    filter:drop-shadow(0 0 0 rgba(255,138,0,0));
  }
  35%{
    transform:translate3d(0,-3px,0) rotate(-4deg) scale(1.04);
    filter:drop-shadow(0 18px 26px rgba(255,138,0,.32));
  }
  70%{
    transform:translate3d(0,-1px,0) rotate(3deg) scale(1.02);
    filter:drop-shadow(0 12px 20px rgba(255,138,0,.20));
  }
}
@media (prefers-reduced-motion: reduce){
  .nav .brand img{animation:none;filter:none}
}
 .brand-name{
   display:flex;
   flex-direction:column;
   line-height:1.05;
 }
 .brand-name strong{font-size:14px;letter-spacing:.2px}
 .brand-name span{font-size:12px;color:var(--muted)}
 
 .nav-links{
   display:flex;
   align-items:center;
   gap:10px;
   flex-wrap:wrap;
   justify-content:flex-end;
 }
 .nav-links a{
   position:relative;
   font-size:13px;
   color:var(--muted);
   padding:10px 12px;
   border-radius:12px;
   border:1px solid transparent;
   transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
 }
 .nav-links a:hover{
   transform:translateY(-1px);
   background:rgba(255,138,0,.10);
   border-color:rgba(255,138,0,.22);
   color:var(--text);
 }
 .nav-links a[aria-current="page"]{
   background:rgba(255,138,0,.10);
   border-color:rgba(255,138,0,.26);
   color:var(--text);
 }
 
.nav .btn.dark{
  border-color:rgba(255,138,0,.98);
  background:var(--brand);
  color:#ffffff;
  box-shadow:0 14px 34px rgba(255,138,0,.22);
}
.nav .btn.dark:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 46px rgba(255,138,0,.28);
}

 .btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:10px;
   padding:12px 16px;
   border-radius:14px;
  border:1px solid var(--border);
   background:rgba(255,255,255,.82);
   color:var(--text);
   font-weight:600;
   font-size:13px;
   letter-spacing:.2px;
   transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
 }
.btn:hover{transform:translateY(-1px);border-color:rgba(255,138,0,.34);box-shadow:0 14px 30px rgba(0,0,0,.10)}
 .btn.primary{
   border-color:rgba(255,138,0,.90);
   background:var(--brand);
   color:#ffffff;
   box-shadow:0 14px 34px rgba(255,138,0,.22);
 }
 .btn.primary:hover{border-color:rgba(255,138,0,.98);box-shadow:0 16px 40px rgba(255,138,0,.26)}
 .btn.dark{
  border-color:rgba(0,0,0,.18);
  background:rgba(0,0,0,.04);
 }
 
 .hero{
   position:relative;
   padding:56px 0 18px;
   overflow:hidden;
 }
 .hero-grid{
   display:grid;
   grid-template-columns:1.15fr .85fr;
   gap:26px;
   align-items:stretch;
 }
 .hero h1{
   margin:0;
   font-size:44px;
   line-height:1.06;
   letter-spacing:-.6px;
 }
 .hero p{
   margin:16px 0 0;
   color:var(--muted);
   font-size:16px;
   line-height:1.6;
 }
 .hero-actions{
   display:flex;
   gap:12px;
   flex-wrap:wrap;
   margin-top:20px;
 }
 .hero-badges{
   margin-top:18px;
   display:flex;
   flex-wrap:wrap;
   gap:10px;
 }
 .badge{
   display:inline-flex;
   align-items:center;
   gap:10px;
   padding:10px 12px;
   border-radius:999px;
   border:1px solid var(--border);
   background:rgba(255,255,255,.82);
   color:var(--muted);
   font-size:12px;
 }
 .badge b{color:var(--brand);font-weight:700}
 
 .hero-card{
   position:relative;
   background:rgba(255,255,255,.86);
   border:1px solid var(--border);
   border-radius:var(--radius-xl);
   box-shadow:var(--shadow);
   padding:18px;
   overflow:hidden;
 }
 @keyframes floatGlow{
   0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
   50%{transform:translate3d(-10px,12px,0) rotate(1deg)}
 }
 .hero-card > *{position:relative}
 .mini-kpis{
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:12px;
   margin-top:14px;
 }
 .kpi{
  border:1px solid rgba(0,0,0,.10);
   border-radius:16px;
   padding:14px 14px;
   background:rgba(255,255,255,.70);
 }
 .kpi strong{display:block;font-size:18px;letter-spacing:-.2px}
 .kpi span{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.3}
 
 .section{padding:52px 0}
 .section-head{
   display:flex;
   align-items:flex-end;
   justify-content:space-between;
   gap:16px;
   margin-bottom:18px;
 }
 .section h2{
   margin:0;
   font-size:28px;
   letter-spacing:-.3px;
 }
 .section .lead{
   margin:0;
   color:var(--muted);
   line-height:1.6;
   max-width:68ch;
 }
 
 .cards{
   display:grid;
   grid-template-columns:repeat(12, minmax(0,1fr));
   gap:14px;
 }
 .cards.cols-4 .card{grid-column:span 3}
 .cards.cols-2 .card{grid-column:span 6}
 .card{
   grid-column:span 4;
   position:relative;
   padding:18px 18px 16px;
   border-radius:var(--radius-lg);
   border:1px solid var(--border);
   background:rgba(255,255,255,.82);
  box-shadow:0 14px 34px rgba(0,0,0,.08);
   transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
   overflow:hidden;
 }
 .card:hover{
   transform:translateY(-2px);
   border-color:rgba(255,138,0,.22);
  box-shadow:0 18px 56px rgba(0,0,0,.12);
 }
 .card > *{position:relative}
 .card h3{margin:2px 0 8px;font-size:16px}
 .card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
 .pillrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
 .pill{
   font-size:12px;
   color:var(--muted-2);
   padding:0;
   border-radius:0;
   border:0;
   background:transparent;
 }
.pillrow .pill::before{content:"•";margin-right:8px;color:rgba(0,0,0,.25)}
 .pillrow .pill:first-child::before{content:"";margin-right:0}
 
 .split{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:18px;
 }
 .panel{
   border-radius:var(--radius-xl);
   border:1px solid var(--border);
   background:rgba(255,255,255,.86);
   box-shadow:var(--shadow);
   padding:22px;
   overflow:hidden;
   position:relative;
 }
 .panel > *{position:relative}
 
 .steps{
   display:grid;
   grid-template-columns:repeat(12, minmax(0,1fr));
   gap:12px;
   margin-top:10px;
 }
 .step{
   grid-column:span 4;
   border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
   background:rgba(255,255,255,.74);
   padding:16px;
 }
 .step b{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:26px;
   height:26px;
   border-radius:10px;
   background:rgba(255,138,0,.18);
   border:1px solid rgba(255,138,0,.22);
   margin-right:10px;
 }
 .step h4{margin:0;font-size:14px;display:flex;align-items:center}
 .step p{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
 
 .cta{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:16px;
   padding:18px 18px;
   border-radius:22px;
   border:1px solid rgba(255,138,0,.18);
   background:rgba(255,255,255,.86);
 }
 .cta strong{font-size:16px}
 .cta span{display:block;color:var(--muted);font-size:13px;margin-top:6px;line-height:1.45}
 
 .form{
   display:grid;
   grid-template-columns:repeat(12,minmax(0,1fr));
   gap:12px;
   margin-top:14px;
 }
 .field{grid-column:span 6}
 .field.full{grid-column:span 12}
 label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
 input,textarea,select{
   width:100%;
  border:1px solid rgba(0,0,0,.14);
   background:rgba(255,255,255,.84);
   border-radius:14px;
   padding:12px 12px;
   font-size:13px;
   color:var(--text);
   outline:none;
   transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
 }
 textarea{min-height:120px;resize:vertical}
 input:focus,textarea:focus,select:focus{
   border-color:rgba(255,138,0,.40);
   box-shadow:0 0 0 4px rgba(255,138,0,.14);
 }
 
 .toast{
   position:fixed;
   right:16px;
   bottom:18px;
   width:min(420px, calc(100vw - 32px));
   padding:14px 14px;
   border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
   background:rgba(255,255,255,.85);
   backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,.14);
   display:none;
   z-index:9999;
 }
 .toast.show{display:block;animation:toastIn .22s ease both}
 @keyframes toastIn{
   from{transform:translate3d(0,10px,0);opacity:0}
   to{transform:translate3d(0,0,0);opacity:1}
 }
 .toast strong{display:block;font-size:13px}
 .toast span{display:block;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.5}
 
 .footer{
   padding:34px 0 46px;
  border-top:1px solid rgba(255,255,255,.10);
   margin-top:34px;
  background:#1f1f1f;
  color:rgba(255,255,255,.92);
 }
 .footer-grid{
   display:grid;
   grid-template-columns:1.2fr .8fr 1fr;
   gap:16px;
 }
.footer small{color:rgba(255,255,255,.82);line-height:1.7}
.footer a{color:rgba(255,255,255,.82)}
.footer a:hover{color:var(--brand)}
.footer .fine{color:rgba(255,255,255,.74)}
.footer .muted{color:rgba(255,255,255,.74)}
.footer .brand-name strong{color:rgba(255,255,255,.92)}
.footer .brand-name span{color:rgba(255,255,255,.74)}

.footer-mini-logo{height:22px;width:auto;max-width:140px;object-fit:contain;display:block}
 .muted{color:var(--muted)}
 .fine{color:var(--muted-2);font-size:12px;line-height:1.6}
 .list{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
 .list li{margin:6px 0}
 
 .reveal{
   opacity:0;
   transform:translate3d(0,10px,0);
   transition:opacity .7s ease, transform .7s ease;
 }
 .reveal.on{
   opacity:1;
   transform:translate3d(0,0,0);
 }
 
 .tabs{
   display:flex;
   flex-wrap:wrap;
   gap:10px;
   margin:14px 0 10px;
 }
 .tab{
   cursor:pointer;
  border:1px solid rgba(0,0,0,.12);
   background:rgba(255,255,255,.66);
   color:var(--muted);
   border-radius:999px;
   padding:10px 12px;
   font-size:12px;
   font-weight:600;
   transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
 }
 .tab:hover{transform:translateY(-1px);border-color:rgba(255,138,0,.28);color:var(--text)}
 .tab[aria-selected="true"]{
   background:rgba(255,138,0,.10);
   border-color:rgba(255,138,0,.30);
   color:var(--text);
 }
 
 .login-shell{
   min-height:calc(100vh - 120px);
   display:grid;
   place-items:center;
   padding:42px 0;
 }
 .login{
   width:min(520px, 100%);
   padding:22px;
 }
 .login-head{
   display:flex;
   align-items:center;
   gap:12px;
 }
.login-head img{height:44px;width:auto;max-width:160px;object-fit:contain;display:block}
 .login-head h1{margin:0;font-size:22px;letter-spacing:-.2px}
 .login-head p{margin:8px 0 0;color:var(--muted);line-height:1.6}
 .pw-row{position:relative}
 .pw-toggle{
   position:absolute;
   right:10px;
   top:32px;
  border:1px solid rgba(0,0,0,.14);
   background:rgba(255,255,255,.82);
   border-radius:12px;
   padding:8px 10px;
   font-size:12px;
   color:var(--muted);
   cursor:pointer;
 }
 .pw-toggle:hover{color:var(--text);border-color:rgba(255,138,0,.30)}
 
 .page-hero{
   position:relative;
   padding:44px 0 16px;
   overflow:hidden;
 }
 .page-hero-grid{
   display:grid;
   grid-template-columns:1.05fr .95fr;
   gap:18px;
   align-items:stretch;
 }
 .eyebrow{
   display:inline-flex;
   align-items:center;
   gap:10px;
   padding:8px 12px;
   border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
   background:rgba(255,255,255,.68);
   color:var(--muted);
   font-size:12px;
   width:fit-content;
 }
 .page-hero h1{
   margin:12px 0 0;
   font-size:36px;
   line-height:1.08;
   letter-spacing:-.5px;
 }
 .page-hero p{
   margin:14px 0 0;
   color:var(--muted);
   font-size:15px;
   line-height:1.7;
 }
 .media-frame{
   position:relative;
   border-radius:var(--radius-xl);
   border:1px solid var(--border);
   background:rgba(255,255,255,.72);
   box-shadow:var(--shadow);
   overflow:hidden;
   min-height:320px;
 }
 .media{
   position:absolute;
   inset:0;
   width:100%;
   height:100%;
   object-fit:cover;
   mix-blend-mode:normal;
   opacity:.98;
 }
 .media-caption{
   position:absolute;
   left:16px;
   right:16px;
   bottom:16px;
   border-radius:18px;
   border:1px solid rgba(255,255,255,.55);
   background:rgba(255,255,255,.84);
   backdrop-filter:blur(14px);
   padding:14px 14px;
 }
 .media-caption strong{display:block;font-size:14px;letter-spacing:-.1px}
 .media-caption span{display:block;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.5}
 
 .image-grid{
   display:grid;
   grid-template-columns:repeat(12, minmax(0,1fr));
   gap:14px;
   margin-top:14px;
 }
 .img-card{
   grid-column:span 4;
   border-radius:var(--radius-lg);
   border:1px solid var(--border);
   background:rgba(255,255,255,.66);
  box-shadow:0 14px 38px rgba(0,0,0,.08);
   overflow:hidden;
 }
 .img-card img{width:100%;height:210px;object-fit:cover;display:block}
 .img-card .cap{padding:12px 14px}
 .img-card .cap b{display:block;font-size:13px}
 .img-card .cap small{display:block;margin-top:6px;color:var(--muted);line-height:1.5}
 
 .top-hero{
   border-bottom:1px solid var(--border);
   background:var(--bg2);
 }
 .top-hero .media-frame{
   border-radius:0;
   border-left:0;
   border-right:0;
   box-shadow:none;
   min-height:320px;
 }
 .top-hero .media-caption{
   left:22px;
   right:22px;
   bottom:22px;
 }
 
.hero-overlay{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  pointer-events:none;
}
.hero-overlay.center{
  left:0;
  right:0;
  bottom:auto;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
}
.hero-overlay-box{
  width:min(640px, 100%);
  padding:18px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,.20);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hero-overlay-box strong{display:block;font-size:22px;letter-spacing:-.3px;line-height:1.12}
.hero-overlay-box span{display:block;margin-top:10px;color:var(--muted);font-size:13.5px;line-height:1.6}
.hero-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:8px;
}
.hero-overlay-box.reveal.on{animation:heroFloat 7.5s ease-in-out infinite}
@keyframes heroFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-4px,0)}
}

.hero-overlay-box.impact{
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
}
.hero-overlay-box.impact .hero-kicker{
  color:var(--brand);
  font-size:14px;
  letter-spacing:.22em;
  margin-bottom:10px;
}
.hero-overlay-box.impact strong{
  color:#ffffff;
  font-size:64px;
  line-height:1.06;
  letter-spacing:-.8px;
  text-shadow:0 2px 14px rgba(0,0,0,.25);
}
.hero-overlay-box.impact span{
  color:rgba(255,255,255,.92);
  font-size:20px;
  line-height:1.6;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}
.hero-overlay-box.impact.reveal.on{
  animation:heroBlast .86s ease-out both, heroFloat 8s ease-in-out 1.2s infinite;
}
@keyframes heroBlast{
  from{
    opacity:0;
    transform:translate3d(0,16px,0) scale(.98);
    filter:drop-shadow(0 0 0 rgba(255,138,0,0));
  }
  60%{
    opacity:1;
    transform:translate3d(0,-2px,0) scale(1.02);
    filter:drop-shadow(0 22px 34px rgba(255,138,0,.32));
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:drop-shadow(0 10px 18px rgba(255,138,0,.18));
  }
}

.impact .fly-top{opacity:0}
.impact .fly-left{opacity:0}
.impact .fly-right{opacity:0}
.impact .fly-top.reveal.on{animation:heroInTop .75s ease-out .05s both}
.impact .fly-left.reveal.on{animation:heroInLeft .80s ease-out .12s both}
.impact .fly-right.reveal.on{animation:heroInRight .85s ease-out .18s both}
@keyframes heroInTop{
  from{opacity:0;transform:translate3d(0,-40px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes heroInLeft{
  from{opacity:0;transform:translate3d(-46px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes heroInRight{
  from{opacity:0;transform:translate3d(46px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.top-hero .media{transform:scale(1.02);transform-origin:center}
@media (prefers-reduced-motion: no-preference){
  .top-hero .media{animation:heroZoom 18s ease-in-out infinite alternate}
}
@keyframes heroZoom{
  from{transform:scale(1.02)}
  to{transform:scale(1.06)}
}
@media (prefers-reduced-motion: reduce){
  .top-hero .media{animation:none}
  .hero-overlay-box.reveal.on{animation:none}
}

 .icon-row{
   display:flex;
   gap:10px;
   flex-wrap:wrap;
   margin-top:12px;
 }
 .icon-link{
   width:40px;
   height:40px;
   display:grid;
   place-items:center;
   border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.86);
   color:var(--muted);
   transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow:0 12px 26px rgba(0,0,0,.06);
 }
 .icon-link:hover{
   transform:translateY(-1px);
   border-color:rgba(255,138,0,.34);
   color:var(--brand);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
 }
 .icon-link svg{width:20px;height:20px}

.footer .icon-link{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.86);
  box-shadow:none;
}
.footer .icon-link:hover{
  border-color:rgba(255,138,0,.55);
  color:var(--brand);
  box-shadow:none;
}

.map-embed{
  margin-top:14px;
  height:220px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.12);
  overflow:hidden;
  background:#ffffff;
}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:16px;
  background:rgba(0,0,0,.55);
  z-index:10000;
}
.modal.show{display:grid}
.modal-dialog{
  width:min(520px, calc(100vw - 32px));
  border-radius:18px;
  border:1px solid rgba(0,0,0,.14);
  background:#ffffff;
  box-shadow:0 24px 90px rgba(0,0,0,.22);
  padding:18px;
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-title{margin:0;font-size:16px;letter-spacing:-.2px}
.modal-body{margin-top:10px;color:var(--muted);line-height:1.6;font-size:13.5px}
.modal-actions{display:flex;justify-content:flex-end;margin-top:14px}
 
 @media (max-width:960px){
   .hero-grid{grid-template-columns:1fr}
   .mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
   .split{grid-template-columns:1fr}
   .page-hero-grid{grid-template-columns:1fr}
   .footer-grid{grid-template-columns:1fr}
 }
 @media (max-width:740px){
   .hero h1{font-size:36px}
   .page-hero h1{font-size:30px}
   .top-hero .media-frame{min-height:240px}
   .card{grid-column:span 12}
   .step{grid-column:span 12}
   .field{grid-column:span 12}
   .img-card{grid-column:span 12}
   .brand{min-width:auto}
  .map-embed{height:200px}
 }
