/*
Theme Name: SpaceCoast Unlimited
Theme URI: https://spacecoastunlimited.com
Author: SpaceCoast Unlimited LLC
Description: Custom theme built from your SpaceCoast Unlimited landing page.
Version: 1.0
Text Domain: spacecoast-unlimited
*/

:root{
      --bg0:#040817;
      --bg1:#050a1b;
      --panel: rgba(255,255,255,.045);
      --panel2: rgba(255,255,255,.035);
      --stroke: rgba(255,255,255,.09);
      --stroke2: rgba(255,255,255,.07);
      --text:#f4f7ff;
      --muted: rgba(244,247,255,.65);
      --muted2: rgba(244,247,255,.45);
      --yellow:#f8c12a;
      --orange:#f59e0b;
      --green:#19d3a1;
      --purple:#8b5cf6;
      --shadow: 0 30px 80px rgba(0,0,0,.55);
      --shadow2: 0 18px 50px rgba(0,0,0,.45);
      --r: 26px;
      --r2: 22px;
      --max: 1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 50% -10%, rgba(248,193,42,.10), transparent 60%),
        radial-gradient(900px 650px at 20% 10%, rgba(139,92,246,.18), transparent 55%),
        radial-gradient(900px 650px at 85% 25%, rgba(25,211,161,.10), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #040717);
      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    .wrap{max-width:var(--max); margin:0 auto; padding: 28px 22px;}
    .section{padding: 86px 0;}
    @media (max-width: 860px){ .section{padding: 64px 0;} }

    /* ---------- shared UI ---------- */
    .kicker{
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: var(--yellow);
      font-weight:700;
    }
    .h2{
      margin: 10px 0 14px;
      font-size: clamp(34px, 4.2vw, 56px);
      line-height:1.05;
      letter-spacing:-.03em;
      font-weight: 800;
    }
    .h2 .muted{color: rgba(244,247,255,.55); font-weight: 800;}
    .p{
      margin:0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.7;
    }

    .card{
      border-radius: var(--r);
      border: 1px solid var(--stroke2);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow: var(--shadow2);
      backdrop-filter: blur(10px);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      font-weight: 800;
      letter-spacing: .01em;
      font-size: 14px;
      cursor:pointer;
      user-select:none;
      transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
      background: rgba(255,255,255,.06);
      color: rgba(244,247,255,.78);
    }
    .btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.16); filter:saturate(1.05);}
    .btn.primary{
      background: linear-gradient(180deg, #f7b31c, #d98005);
      border-color: transparent;
      color: #0b1222;
      box-shadow: 0 18px 45px rgba(245,158,11,.18);
    }
    .btn.primary:hover{filter:saturate(1.1);}

    .chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(248,193,42,.25);
      background: rgba(248,193,42,.10);
      color: rgba(248,193,42,.95);
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .01em;
      box-shadow: 0 18px 45px rgba(0,0,0,.25);
      transition: box-shadow .25s ease, border-color .25s ease, background .25s ease, filter .25s ease;
    }
    .chip svg{opacity:.95}

    /* ---------- HERO ---------- */
    .hero{
      position:relative;
      padding: 88px 0 48px;
      min-height: 86vh;
      display:flex;
      align-items:center;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-220px -140px -140px -140px;
      background:
        repeating-radial-gradient(circle at 50% 38%,
          rgba(248,193,42,.10) 0px,
          rgba(248,193,42,.10) 1px,
          transparent 1px,
          transparent 110px);
      opacity:.18;
      filter: blur(.2px);
      pointer-events:none;
      mask-image: radial-gradient(circle at 50% 38%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,.2) 65%, rgba(0,0,0,0) 78%);
    }

    .heroInner{width:100%; text-align:center; position:relative;}
    .heroTitle{
      padding-top: 3px;
      padding-bottom: 3px;
      padding-top: 3px;
      padding-bottom: 3px;
      margin: 18px auto 10px;
      font-size: clamp(44px, 6.2vw, 84px);
      line-height: .98;
      letter-spacing:-.04em;
      font-weight: 900;
      max-width: 1000px;
    }
    .heroTitle .y{color: var(--yellow);}
    .heroSub{
      padding-top: 3px;
      padding-bottom: 3px;
      padding-top: 3px;
      padding-bottom: 3px;
      margin: 18px auto 34px;
      max-width: 820px;
      color: rgba(244,247,255,.60);
      font-size: clamp(15px, 1.3vw, 18px);
      line-height: 1.75;
    }

    .heroActions{
      margin-bottom: 60px;
      padding-top: 6px;
      padding-bottom: 6px;
      display:flex;
      justify-content:center;
      gap: 16px;
      flex-wrap: wrap;
      margin-
    }
    .btn.secondary{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.10);
      color: rgba(244,247,255,.65);
    }

    .stats{
      padding-top: 3px;
      padding-bottom: 3px;
      display:flex;
      justify-content:center;
      gap: 80px;
      flex-wrap: wrap;
      padding-top: 6px;
    }
    .statNum{
      font-size: 36px;
      font-weight: 900;
      letter-spacing:-.02em;
    }
    .statLbl{
      margin-top: 6px;
      color: rgba(244,247,255,.40);
      letter-spacing:.12em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 700;
    }

    .scrollHint{
      display:flex;
      margin: 28px auto 0;

      margin-top: 28px;
      position:relative;
      width: 30px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.03);
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding-top: 10px;
      box-shadow: 0 18px 45px rgba(0,0,0,.35);
    }
    .scrollDot{
      width: 7px; height: 7px; border-radius: 99px;
      background: var(--yellow);
      animation: bounce 1.6s infinite ease-in-out;
    }
    @keyframes bounce{
      0%,100%{transform: translateY(0); opacity:.95}
      50%{transform: translateY(12px); opacity:.75}
    }

    /* ---------- Solutions (3 cards) ---------- */
    .solutionsHead{ text-align:center; }
    .solutionsGrid{
      margin-top: 56px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }
    @media (max-width: 980px){ .solutionsGrid{grid-template-columns:1fr; } }

    .loanCard{
      
      transition: all .3s ease;
      transition: all .25s ease;
      padding: 28px 26px;
      border-radius: var(--r);
      border: 1px solid var(--stroke2);
      background:
        radial-gradient(600px 260px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
        radial-gradient(600px 260px at 80% 0%, rgba(255,255,255,.045), transparent 60%),
        rgba(255,255,255,.035);
      box-shadow: var(--shadow2);
      min-height: 520px;
    }

    /* Neon hover glow per card */
    .loanCard:nth-child(1):hover{
      border-color: rgba(245,158,11,1);
      box-shadow: 0 0 12px rgba(245,158,11,.9),
                  0 0 40px rgba(245,158,11,.6),
                  0 25px 60px rgba(245,158,11,.25);
      transform: translateY(-6px);
    }

    .loanCard:nth-child(2):hover{
      border-color: rgba(25,211,161,1);
      box-shadow: 0 0 12px rgba(25,211,161,.9),
                  0 0 40px rgba(25,211,161,.6),
                  0 25px 60px rgba(25,211,161,.25);
      transform: translateY(-6px);
    }

    .loanCard:nth-child(3):hover{
      border-color: rgba(139,92,246,1);
      box-shadow: 0 0 12px rgba(139,92,246,.9),
                  0 0 40px rgba(139,92,246,.6),
                  0 25px 60px rgba(139,92,246,.25);
      transform: translateY(-6px);
    }

    .loanCard{
      
    }

    

    .loanCard{
      
      transition: all .3s ease;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    .tag{
      margin-left: auto;
      margin-right: auto;
      display:inline-flex;
      align-items:center;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing:.06em;
      text-transform: uppercase;
      width: fit-content;
      margin-
      color: #0b1222;
    }
    .tag.orange{ background: linear-gradient(180deg, #f7b31c, #d98005);}
    .tag.green{ background: linear-gradient(180deg, #22e3b0, #0fb38b);}
    .tag.purple{ background: linear-gradient(180deg, #9b74ff, #7c3aed); color:#0b1222;}

    .iconBox{
      margin-left: auto;
      margin-right: auto;
      margin-left: auto;
      margin-right: auto;
      width: 52px; height: 52px;
      border-radius: 16px;
      display:grid; place-items:center;
      margin-
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      box-shadow: 0 18px 45px rgba(0,0,0,.25);
      transition: box-shadow .25s ease, border-color .25s ease, background .25s ease, filter .25s ease;
    }
    .iconBox.orange{ background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.30);}
    .iconBox.green{ background: rgba(25,211,161,.18); border-color: rgba(25,211,161,.28);}
    .iconBox.purple{ background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.28);}


    /* Icon light-up on hover (per card color) */
    .loanCard:nth-child(1):hover .iconBox{
      border-color: rgba(245,158,11,.85);
      background: rgba(245,158,11,.28);
      box-shadow:
        0 0 0 2px rgba(245,158,11,.25),
        0 0 28px rgba(245,158,11,.70),
        0 0 60px rgba(245,158,11,.35),
        0 18px 45px rgba(0,0,0,.25);
      filter: saturate(1.15);
    }

    .loanCard:nth-child(2):hover .iconBox{
      border-color: rgba(25,211,161,.85);
      background: rgba(25,211,161,.24);
      box-shadow:
        0 0 0 2px rgba(25,211,161,.22),
        0 0 28px rgba(25,211,161,.70),
        0 0 60px rgba(25,211,161,.35),
        0 18px 45px rgba(0,0,0,.25);
      filter: saturate(1.15);
    }

    .loanCard:nth-child(3):hover .iconBox{
      border-color: rgba(139,92,246,.85);
      background: rgba(139,92,246,.24);
      box-shadow:
        0 0 0 2px rgba(139,92,246,.22),
        0 0 28px rgba(139,92,246,.70),
        0 0 60px rgba(139,92,246,.35),
        0 18px 45px rgba(0,0,0,.25);
      filter: saturate(1.15);
    }


    .loanTitle{
      margin-top: 20px;
      margin: 0 0 6px;
      font-size: 24px;
      font-weight: 900;
      letter-spacing:-.02em;
    }
    .loanSub{
      margin: 0 0 18px;
      color: var(--yellow);
      font-weight: 900;
      font-size: 13px;
      letter-spacing:.02em;
    }
    .loanDesc{
      color: rgba(244,247,255,.55);
      font-size: 14px;
      line-height: 1.8;
      margin: 0 0 18px;
    }
    .bul{
      list-style:none;
      padding: 0;
      margin: 0;
      display:grid;
      gap: 10px;
      color: rgba(244,247,255,.82);
      font-size: 14px;
    }
    .bul li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
    }
    .dot{
      width: 6px; height: 6px; border-radius: 99px;
      margin-top: 8px;
    }
    .dot.orange{background: var(--orange);}
    .dot.green{background: var(--green);}
    .dot.purple{background: var(--purple);}

    .learn{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding-top: 18px;
      color: rgba(244,247,255,.9);
      font-weight: 900;
      font-size: 13px;
    }
    .learn span{opacity:.9}
    .arrow{
      width: 24px; height: 24px;
      display:grid; place-items:center;
      opacity:.9;
    }

    /* ---------- Why choose us ---------- */
    .whyGrid{
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 30px;
      align-items:start;
      margin-top: 18px;
    }
    @media (max-width: 980px){ .whyGrid{grid-template-columns:1fr;} }

    .whyLeft .h2{max-width: 620px;}
    .checklist{
      margin: 28px 0 22px;
      padding: 0;
      list-style:none;
      display:grid;
      gap: 14px;
      max-width: 520px;
    }
    .checklist li{
      display:flex;
      gap: 14px;
      align-items:flex-start;
      color: rgba(244,247,255,.78);
      font-weight: 700;
      font-size: 14px;
    }
    .check{
      width: 20px; height: 20px;
      border-radius: 999px;
      border: 1px solid rgba(248,193,42,.35);
      display:grid; place-items:center;
      background: rgba(248,193,42,.10);
      flex: 0 0 auto;
      margin-top: 1px;
    }

    .callBox{
      margin-top: 24px;
      padding: 18px 18px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      display:flex;
      align-items:center;
      gap: 14px;
      max-width: 620px;
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
    }
    .callIcon{
      width: 44px; height: 44px;
      border-radius: 16px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
    }
    .callBox small{display:block; color: rgba(244,247,255,.55); font-weight:700;}
    .callBox b{display:block; font-size: 18px; letter-spacing:-.01em;}

    .whyRight{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-content:start;
      margin-top: 10px;
    }
    @media (max-width: 520px){ .whyRight{grid-template-columns:1fr;} }

    .featureCard{
      padding: 22px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
      min-height: 160px;
    }
    .fcIcon{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:grid; place-items:center;
      border: 1px solid rgba(248,193,42,.25);
      background: rgba(248,193,42,.10);
      margin-
    }
    .featureCard h4{
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 900;
      letter-spacing:-.01em;
    }
    .featureCard p{
      margin:0;
      color: rgba(244,247,255,.55);
      font-size: 13px;
      line-height: 1.75;
    }

    /* ---------- Get Started ---------- */
    .getGrid{
      display:grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 34px;
      align-items:start;
      margin-top: 22px;
    }
    @media (max-width: 980px){ .getGrid{grid-template-columns:1fr;} }

    .getLeft .h2{max-width: 620px;}
    .getLeft .h2 .y{color: var(--yellow);}
    .contactList{
      margin-top: 34px;
      display:grid;
      gap: 18px;
      max-width: 520px;
    }
    .contactRow{
      display:flex;
      gap: 14px;
      align-items:flex-start;
    }
    .cIcon{
      width: 44px; height: 44px;
      border-radius: 16px;
      display:grid; place-items:center;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      flex: 0 0 auto;
    }
    .contactRow b{display:block; font-weight: 900;}
    .contactRow small{display:block; color: rgba(244,247,255,.50); margin-top: 3px; font-weight: 700;}

    .formCard{
      padding: 34px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(900px 400px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
        rgba(255,255,255,.04);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }
    .formCard h3{
      margin: 0 0 18px;
      font-size: 22px;
      font-weight: 900;
      letter-spacing:-.01em;
    }
    .field{
      margin-top: 14px;
    }
    label{
      display:block;
      font-size: 12px;
      color: rgba(244,247,255,.55);
      font-weight: 800;
      margin: 0 0 8px;
    }
    input, select{
      width: 100%;
      height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: rgba(244,247,255,.86);
      padding: 0 14px;
      outline:none;
    }
    input::placeholder{color: rgba(244,247,255,.38)}
    input:focus, select:focus{
      border-color: rgba(248,193,42,.35);
      box-shadow: 0 0 0 4px rgba(248,193,42,.10);
    }
    .row2{display:grid; grid-template-columns:1fr 1fr; gap: 14px;}
    @media (max-width: 520px){ .row2{grid-template-columns:1fr;} }

    .formBtn{
      margin-top: 22px;
      width: 100%;
      height: 52px;
      border-radius: 16px;
      border: none;
      cursor:pointer;
      font-weight: 900;
      letter-spacing:.01em;
      font-size: 15px;
      background: linear-gradient(180deg, #f7b31c, #d98005);
      color: #0b1222;
      box-shadow: 0 18px 50px rgba(245,158,11,.18);
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
    }
    .formNote{
      margin-top: 12px;
      color: rgba(244,247,255,.45);
      font-size: 12px;
      text-align:center;
      font-weight: 700;
      letter-spacing:.01em;
    }

    /* ---------- Footer ---------- */
    .footer{
      padding: 56px 0 44px;
      border-top: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
    }
    .footerTop{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 24px;
      align-items:start;
      padding-
    }
    @media (max-width: 900px){ .footerTop{grid-template-columns:1fr;} }
    .fTitle{font-weight: 900; margin:0 0 10px;}
    .fText{color: rgba(244,247,255,.55); margin:0; font-size: 13px; line-height:1.8;}
    .fLink{
      display:flex; gap: 10px; align-items:center;
      color: rgba(244,247,255,.75);
      font-weight: 800;
      font-size: 13px;
      margin-top: 10px;
      width: fit-content;
    }
    .fDivider{height:1px; background: rgba(255,255,255,.08); margin: 18px 0 22px;}
    .footerBottom{
      justify-content: center;
      
      display:flex;
      padding-top: 8px;
      justify-content:space-between;
      align-items:center;
      gap: 16px;
      flex-wrap:wrap;
    }
    .footNav{
      justify-content: center;
      display:flex;
      gap: 22px;
      flex-wrap:wrap;
      color: rgba(244,247,255,.60);
      font-weight: 800;
      font-size: 13px;
    }
    .copyright{
      color: rgba(244,247,255,.45); font-size: 13px; font-weight:800;}
    .fine{
      
      margin-top: 18px;
      text-align:center;
      color: rgba(244,247,255,.35);
      font-size: 11px;
      font-weight: 700;
    }

    /* ---------- small helper icons (inline SVG normalize) ---------- */
    svg{display:block}
  
    
    /* Scroll-triggered headline animations */
    @keyframes flyInLeft {
      from { opacity: 0; transform: translateX(-60px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes flyInRight {
      from { opacity: 0; transform: translateX(60px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .headline{
      opacity: 0;
      will-change: transform, opacity;
    }

    .headline.in-view{
      opacity: 1;
    }

    .headline.from-left.in-view{
      animation: flyInLeft .9s ease both;
    }

    .headline.from-right.in-view{
      animation: flyInRight .9s ease both;
    }

    @media (prefers-reduced-motion: reduce){
      .headline{ opacity: 1 !important; transform: none !important; }
      .headline.in-view{ animation: none !important; }
    }