/* ==========================================================================
   netts.io — Hero section visual refresh (terminal aesthetic)
   /css/hero.css
   Applies to index.php only (scoped via body.home-page .hero-section).
   Does NOT change any markup, IDs, classes, data-* attrs or JS hooks.
   Overrides legacy rules from style.css and index-custom.css.
   Re-uses chrome/terminal palette tokens (mirrored as --hs-* for locality).
   ========================================================================== */

body.home-page .hero-section{
  --hs-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hs-font:"Urbanist","Inter",system-ui,-apple-system,Arial,sans-serif;
  --hs-ink:#0b1020;
  --hs-ink-soft:#1a2240;
  --hs-text:#3a4366;
  --hs-muted:#8892b8;
  --hs-text-soft:#5c6690;
  --hs-blue:#2d4bdb;
  --hs-blue-hover:#3e68ff;
  --hs-blue-soft:#eef1ff;
  --hs-line:#e2e6f2;
  --hs-line-soft:#eef0f7;
  --hs-panel:#fbfcff;
  --hs-white:#ffffff;
  --hs-green:#00a86b;
  --hs-amber:#d98a00;
  --hs-red:#d93838;
  --hs-radius:14px;
  --hs-radius-sm:8px;
  --hs-radius-pill:999px;
}

/* ==========================================================================
   LEGACY RESETS
   style.css applies gradient text-fill, glass-morphism, floating bg blobs
   and drop shadows on hero. Strip those for a flat terminal aesthetic.
   ========================================================================== */
body.home-page .hero-section{
  background:var(--hs-white) !important;
  padding:clamp(40px,6vw,96px) 0 clamp(40px,5vw,72px) !important;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--hs-line-soft);
}
body.home-page .hero-section::before,
body.home-page .hero-section::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
/* Subtle grid backdrop as a dedicated ::before (reset-safe) */
body.home-page .hero-section > .container{
  position:relative;
  z-index:1;
}
body.home-page .hero-section > .container::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto;
  height:220px;
  background-image:
    linear-gradient(var(--hs-line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--hs-line-soft) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 85%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 85%);
  pointer-events:none;
  z-index:-1;
}

/* ==========================================================================
   LEFT COLUMN — Title, benefits, CTA
   ========================================================================== */
body.home-page .hero-section .hero-mobile-text{
  position:relative;
  padding-top:6px;
}
body.home-page .hero-section .hero-mobile-text::before{
  content:"→ netts rent --energy --instant";
  display:inline-block;
  font-family:var(--hs-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--hs-blue);
  background:var(--hs-blue-soft);
  border:1px solid rgba(45,75,219,.18);
  padding:5px 12px;
  border-radius:var(--hs-radius-pill);
  margin-bottom:18px;
  white-space:nowrap;
}

/* Title — kill legacy gradient transparent fill, flat ink */
body.home-page .hero-section .hero-title{
  background:none !important;
  -webkit-background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  background-clip:initial !important;
  color:var(--hs-ink);
  font-family:var(--hs-font);
  font-weight:900;
  font-size:clamp(32px,4vw,56px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 18px;
}

/* Subtitle + benefits list */
body.home-page .hero-section .hero-subtitle{
  color:var(--hs-text);
  font-family:var(--hs-font);
  font-size:16px;
  line-height:1.55;
  margin-bottom:24px;
}
body.home-page .hero-section .hero-subtitle p:first-child{
  color:var(--hs-text-soft);
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.6;
  margin-bottom:22px !important;
}
body.home-page .hero-section .hero-subtitle p:not(:first-child){
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--hs-mono);
  font-size:13px;
  color:var(--hs-text);
  padding:8px 0;
  border-top:1px dashed var(--hs-line-soft);
  margin:0 !important;
}
body.home-page .hero-section .hero-subtitle p:not(:first-child):last-child{
  border-bottom:1px dashed var(--hs-line-soft);
  margin-bottom:24px !important;
}
body.home-page .hero-section .hero-subtitle p:not(:first-child) i{
  margin-right:0 !important;
  flex-shrink:0;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:var(--hs-blue-soft);
  color:var(--hs-blue) !important;
  font-size:14px;
}

/* CTA button */
body.home-page .hero-section .hero-buttons{
  margin-top:6px;
}
body.home-page .hero-section .hero-buttons .btn-primary,
body.home-page .hero-section .hero-buttons .btn.btn-primary{
  background:var(--hs-ink) !important;
  border:1px solid var(--hs-ink) !important;
  color:var(--hs-white) !important;
  font-family:var(--hs-mono) !important;
  font-weight:500 !important;
  font-size:13.5px !important;
  letter-spacing:.02em !important;
  padding:12px 22px !important;
  border-radius:10px !important;
  text-transform:none !important;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 2px 0 rgba(11,16,32,.08),0 6px 20px rgba(11,16,32,.08) !important;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  overflow:visible !important;
}
body.home-page .hero-section .hero-buttons .btn-primary::before{
  content:none !important;
  display:none !important;
}
body.home-page .hero-section .hero-buttons .btn-primary:hover,
body.home-page .hero-section .hero-buttons .btn.btn-primary:hover{
  background:var(--hs-blue) !important;
  border-color:var(--hs-blue) !important;
  color:var(--hs-white) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 2px 0 rgba(45,75,219,.15),0 10px 28px rgba(45,75,219,.22) !important;
}
body.home-page .hero-section .hero-buttons .btn-primary i{
  font-size:16px !important;
}

/* ==========================================================================
   RIGHT COLUMN — Form card (.glass-card)
   ========================================================================== */
body.home-page .hero-section .glass-card{
  background:var(--hs-white) !important;
  border:1px solid var(--hs-line) !important;
  border-radius:var(--hs-radius) !important;
  padding:22px 22px 20px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 1px 2px rgba(11,16,32,.04),0 12px 40px rgba(11,16,32,.06) !important;
  position:relative;
  transition:border-color .18s ease,box-shadow .18s ease !important;
  transform:none !important;
}
body.home-page .hero-section .glass-card::before{
  content:"rent.energy";
  position:absolute;
  top:-11px;
  left:20px;
  padding:2px 10px;
  background:var(--hs-white);
  color:var(--hs-blue);
  font-family:var(--hs-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:lowercase;
  border:1px solid var(--hs-line);
  border-radius:6px;
  pointer-events:none;
}
body.home-page .hero-section .glass-card:hover{
  border-color:rgba(45,75,219,.35) !important;
  transform:none !important;
  box-shadow:0 1px 2px rgba(11,16,32,.04),0 14px 44px rgba(45,75,219,.1) !important;
}

/* Card header title */
body.home-page .hero-section .glass-card h4{
  background:none !important;
  -webkit-background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  background-clip:initial !important;
  color:var(--hs-ink) !important;
  font-family:var(--hs-font) !important;
  font-weight:800 !important;
  font-size:18px !important;
  letter-spacing:-.01em !important;
  line-height:1.2 !important;
}

/* Main tabs (DApp / Transfer) */
body.home-page .hero-section #energyTabs{
  gap:2px;
  flex-shrink:0;
}
body.home-page .hero-section #energyTabs .nav-link{
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  color:var(--hs-muted) !important;
  font-family:var(--hs-mono) !important;
  font-weight:500 !important;
  font-size:12.5px !important;
  letter-spacing:.04em !important;
  text-transform:lowercase !important;
  padding:6px 12px !important;
  transition:color .18s ease,border-color .18s ease;
}
body.home-page .hero-section #energyTabs .nav-link:hover{
  color:var(--hs-ink) !important;
}
body.home-page .hero-section #energyTabs .nav-link.active{
  color:var(--hs-blue) !important;
  border-bottom-color:var(--hs-blue) !important;
  background:transparent !important;
}

/* Inner transfer mode tabs */
body.home-page .hero-section #transferModeTabs{
  background:var(--hs-blue-soft);
  border:1px solid var(--hs-line) !important;
  border-radius:10px !important;
  padding:4px !important;
  gap:4px !important;
}
body.home-page .hero-section #transferModeTabs .nav-link{
  background:transparent !important;
  border:none !important;
  border-radius:7px !important;
  color:var(--hs-text-soft) !important;
  font-family:var(--hs-font) !important;
  font-weight:600 !important;
  font-size:13px !important;
  padding:8px 12px !important;
  transition:background .18s ease,color .18s ease;
}
body.home-page .hero-section #transferModeTabs .nav-link:hover{
  color:var(--hs-ink) !important;
}
body.home-page .hero-section #transferModeTabs .nav-link.active{
  background:var(--hs-white) !important;
  color:var(--hs-ink) !important;
  box-shadow:0 1px 3px rgba(11,16,32,.08);
}

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
body.home-page .hero-section .form-label{
  font-family:var(--hs-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:var(--hs-muted);
  margin-bottom:6px;
}
body.home-page .hero-section .form-control,
body.home-page .hero-section .form-select{
  background:var(--hs-white) !important;
  border:1px solid var(--hs-line) !important;
  color:var(--hs-ink) !important;
  font-family:var(--hs-font) !important;
  font-size:14.5px !important;
  line-height:1.35 !important;
  padding:11px 14px !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.home-page .hero-section .form-control::placeholder{
  color:var(--hs-muted) !important;
  opacity:1;
}
body.home-page .hero-section .form-control:focus,
body.home-page .hero-section .form-select:focus{
  border-color:var(--hs-blue) !important;
  box-shadow:0 0 0 3px rgba(45,75,219,.15) !important;
  outline:none !important;
}
body.home-page .hero-section .form-control:disabled,
body.home-page .hero-section .form-control[readonly]{
  background:var(--hs-panel) !important;
  color:var(--hs-text-soft) !important;
}
body.home-page .hero-section #receiver{
  font-family:var(--hs-mono) !important;
  font-size:13.5px !important;
}
body.home-page .hero-section #energyAmount,
body.home-page .hero-section #orderPrice,
body.home-page .hero-section #numberOfTransfers,
body.home-page .hero-section #directEnergyInput{
  font-family:var(--hs-mono) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
}

/* Input groups */
body.home-page .hero-section .input-group{
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--hs-line);
  background:var(--hs-white);
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.home-page .hero-section .input-group:focus-within{
  border-color:var(--hs-blue);
  box-shadow:0 0 0 3px rgba(45,75,219,.15);
}
body.home-page .hero-section .input-group > .form-control,
body.home-page .hero-section .input-group > .form-select{
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.home-page .hero-section .input-group > .form-control:focus,
body.home-page .hero-section .input-group > .form-select:focus{
  box-shadow:none !important;
  border-color:transparent !important;
}
body.home-page .hero-section .input-group-text{
  background:var(--hs-blue-soft) !important;
  border:none !important;
  border-left:1px solid var(--hs-line) !important;
  color:var(--hs-blue) !important;
  font-family:var(--hs-mono) !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:.04em !important;
  text-transform:lowercase !important;
  padding:0 14px !important;
}

/* Suggestion / quick-pick buttons (.suggestion-btn 65k/131k, .transfer-quick-btn, .energy-quick-btn) */
body.home-page .hero-section .suggestion-btn,
body.home-page .hero-section .transfer-quick-btn,
body.home-page .hero-section .energy-quick-btn,
body.home-page .hero-section #transferMinus,
body.home-page .hero-section #transferPlus{
  background:var(--hs-white) !important;
  border:1px solid var(--hs-line) !important;
  color:var(--hs-text) !important;
  font-family:var(--hs-mono) !important;
  font-weight:500 !important;
  font-size:12.5px !important;
  letter-spacing:.02em !important;
  padding:8px 12px !important;
  border-radius:7px !important;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
  min-width:44px;
}
body.home-page .hero-section .suggestion-btn:hover,
body.home-page .hero-section .transfer-quick-btn:hover,
body.home-page .hero-section .energy-quick-btn:hover,
body.home-page .hero-section #transferMinus:hover,
body.home-page .hero-section #transferPlus:hover{
  background:var(--hs-blue-soft) !important;
  border-color:var(--hs-blue) !important;
  color:var(--hs-blue) !important;
}
body.home-page .hero-section .suggestion-btn:active,
body.home-page .hero-section .transfer-quick-btn:active,
body.home-page .hero-section .energy-quick-btn:active,
body.home-page .hero-section #transferMinus:active,
body.home-page .hero-section #transferPlus:active{
  background:var(--hs-blue) !important;
  border-color:var(--hs-blue) !important;
  color:var(--hs-white) !important;
}

/* Input group with suggestion buttons inside (energyAmount) */
body.home-page .hero-section .input-group .suggestion-btn{
  border:none !important;
  border-left:1px solid var(--hs-line) !important;
  border-radius:0 !important;
  background:var(--hs-white) !important;
  color:var(--hs-text) !important;
}
body.home-page .hero-section .input-group .suggestion-btn:hover{
  background:var(--hs-blue-soft) !important;
  color:var(--hs-blue) !important;
}

/* Transfer minus/plus inside input-group — rounded ends */
body.home-page .hero-section .input-group #transferMinus{
  border:none !important;
  border-right:1px solid var(--hs-line) !important;
  border-radius:8px 0 0 8px !important;
}
body.home-page .hero-section .input-group #transferPlus{
  border:none !important;
  border-left:1px solid var(--hs-line) !important;
  border-radius:0 8px 8px 0 !important;
}
body.home-page .hero-section .input-group #numberOfTransfers{
  text-align:center !important;
  font-family:var(--hs-mono) !important;
  font-weight:700 !important;
  font-size:15px !important;
}

/* Energy display next to -/+ */
body.home-page .hero-section .form-control.bg-light{
  background:var(--hs-blue-soft) !important;
  border:1px solid rgba(45,75,219,.18) !important;
  color:var(--hs-blue) !important;
  font-family:var(--hs-mono) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ==========================================================================
   TOTALS BLOCK
   ========================================================================== */
body.home-page .hero-section .border-top{
  border-top:1px dashed var(--hs-line) !important;
  padding-top:14px !important;
}
body.home-page .hero-section .border-top .d-flex.justify-content-between:first-child{
  align-items:baseline;
}
body.home-page .hero-section .border-top .d-flex.justify-content-between:first-child > span:first-child{
  font-family:var(--hs-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:var(--hs-muted);
}
body.home-page .hero-section #totalPrice,
body.home-page .hero-section #totalPriceTransfer{
  font-family:var(--hs-mono);
  font-size:clamp(20px,2vw,24px);
  font-weight:700;
  color:var(--hs-ink);
  letter-spacing:-.02em;
}
body.home-page .hero-section strong{
  font-family:var(--hs-mono);
  font-size:15px;
  color:var(--hs-ink);
  font-weight:700;
}
body.home-page .hero-section #totalPriceTransferUSDT{
  font-family:var(--hs-mono);
  color:var(--hs-muted);
}
body.home-page .hero-section .label-green{
  align-items:center;
  margin-top:4px;
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  font-family:var(--hs-mono);
  font-size:11.5px;
  color:var(--hs-muted) !important;
  letter-spacing:.02em;
}
body.home-page .hero-section #refPrice,
body.home-page .hero-section #refPriceTransfer{
  color:var(--hs-muted);
}
body.home-page .hero-section #discountPerc,
body.home-page .hero-section #discountPercTransfer{
  color:var(--hs-green);
  font-weight:600;
}
body.home-page .hero-section #sunPerUnit{
  color:var(--hs-ink) !important;
  font-weight:600;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
body.home-page .hero-section .alert{
  border-radius:10px !important;
  border:1px solid var(--hs-line) !important;
  font-family:var(--hs-font) !important;
  font-size:13.5px !important;
  padding:12px 14px !important;
  margin-top:4px !important;
}
body.home-page .hero-section .alert-warning{
  background:rgba(217,138,0,.06) !important;
  border-color:rgba(217,138,0,.22) !important;
  color:var(--hs-ink) !important;
}
body.home-page .hero-section .alert-warning .bi{
  color:var(--hs-amber) !important;
}
body.home-page .hero-section .alert-warning .alert-link{
  color:var(--hs-blue) !important;
  text-decoration:underline;
  font-weight:600;
}
body.home-page .hero-section .alert-info{
  background:var(--hs-blue-soft) !important;
  border-color:rgba(45,75,219,.22) !important;
  color:var(--hs-ink) !important;
  font-family:var(--hs-mono) !important;
  font-size:12.5px !important;
  line-height:1.55 !important;
}

/* Payment address (clickable) */
body.home-page .hero-section #paymentAddressText{
  color:var(--hs-blue) !important;
  font-family:var(--hs-mono) !important;
  font-size:12px !important;
  font-weight:600 !important;
  word-break:break-all;
  border-bottom:1px dashed var(--hs-blue) !important;
  text-decoration:none !important;
  transition:background .14s ease;
  padding:1px 2px;
  border-radius:3px;
}
body.home-page .hero-section #paymentAddressText:hover{
  background:rgba(45,75,219,.08);
}
body.home-page .hero-section #paymentAmountTRX,
body.home-page .hero-section #paymentAmountUSDT{
  color:var(--hs-ink);
  font-weight:700;
}

/* ==========================================================================
   QR CODE BLOCK
   ========================================================================== */
body.home-page .hero-section #transferQRCode{
  background:var(--hs-white) !important;
  border:1px solid var(--hs-line) !important;
  border-radius:10px !important;
  padding:12px !important;
  position:relative;
}
body.home-page .hero-section .payment-section .row{
  padding:14px;
  background:var(--hs-panel);
  border:1px solid var(--hs-line);
  border-radius:10px;
  margin:0 0 14px !important;
  --bs-gutter-x:0;
}
body.home-page .hero-section .payment-section .row > [class*="col-"]{
  padding:0 8px;
}
body.home-page .hero-section #selectedEnergyAmount{
  font-family:var(--hs-mono);
  font-weight:700;
  color:var(--hs-blue);
}
body.home-page .hero-section .payment-section .text-muted.small{
  background:var(--hs-blue-soft);
  border:1px dashed rgba(45,75,219,.2);
  border-radius:8px;
  padding:10px 12px;
  color:var(--hs-text) !important;
  font-family:var(--hs-mono) !important;
  font-size:11.5px !important;
  line-height:1.5 !important;
}
body.home-page .hero-section .payment-section .text-muted.small a{
  color:var(--hs-blue) !important;
  font-family:var(--hs-mono) !important;
  font-weight:600 !important;
}

/* ==========================================================================
   RESPONSIVE — keep existing mobile order (form first, text second)
   ========================================================================== */
@media (max-width:991px){
  body.home-page .hero-section{
    padding:32px 0 24px !important;
  }
  body.home-page .hero-section > .container::before{
    display:none;
  }
  body.home-page .hero-section .hero-mobile-text{
    text-align:left;
  }
  body.home-page .hero-section .hero-mobile-text::before{
    font-size:11.5px;
    padding:4px 10px;
  }
  body.home-page .hero-section .hero-title{
    text-align:left !important;
  }
  body.home-page .hero-section .hero-subtitle{
    text-align:left !important;
  }
  body.home-page .hero-section .hero-buttons{
    text-align:left !important;
  }
}
@media (max-width:576px){
  body.home-page .hero-section .glass-card{
    padding:18px 16px 16px !important;
  }
  body.home-page .hero-section .glass-card h4{
    font-size:16px !important;
  }
  body.home-page .hero-section #energyTabs{
    flex-wrap:nowrap;
  }
  body.home-page .hero-section #energyTabs .nav-link{
    padding:6px 8px !important;
    font-size:11.5px !important;
  }
  body.home-page .hero-section .hero-title{
    font-size:30px !important;
  }
  body.home-page .hero-section .suggestion-btn,
  body.home-page .hero-section .transfer-quick-btn,
  body.home-page .hero-section .energy-quick-btn{
    min-width:40px;
    padding:6px 10px !important;
    font-size:11.5px !important;
  }
  body.home-page .hero-section .hero-subtitle p:not(:first-child){
    font-size:12.5px;
  }
  body.home-page .hero-section #paymentAddressText{
    font-size:10.5px !important;
  }
}