/*==================================================
  home.css
  Page Specific Styles
  Depends on:
  theme.css
  layout.css
  forms.css
  animations.css
==================================================*/

/*==================================
  Home Page
==================================*/

.home-page{

    position:relative;

    padding-bottom:80px;

    overflow:hidden;

}

/*==================================
  Hero Section
==================================*/

.hero-section{

    position:relative;

    padding:80px 20px 40px;

    overflow:hidden;

}

.hero-container{

    max-width:960px;

    margin:0 auto;

    position:relative;

    z-index:2;

}

/*==================================
  Hero Background
==================================*/

.hero-section::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-220px;
    top:-220px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(79,70,229,.08),
            transparent 70%
        );

    pointer-events:none;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-170px;
    bottom:-170px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(34,197,94,.08),
            transparent 70%
        );

    pointer-events:none;

}

/*==================================
  Hero Content
==================================*/

.hero-content{

    position:relative;

    z-index:3;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    margin-bottom:28px;

    border-radius:999px;

    background:#eef2ff;

    color:var(--primary);

    font-weight:700;

}

.hero-badge i{

    font-size:15px;

}

.hero-title{

    margin-bottom:18px;

}

.hero-title span{

    display:block;

    margin-top:10px;

}

.hero-description{

    max-width:720px;

    margin:24px auto 0;

}

/*==================================
  Alert
==================================*/

.home-alert{

    display:flex;

    align-items:center;

    gap:14px;

    margin:35px 0;

}

.home-alert i{

    font-size:20px;

}

/*==================================
  Home Card
==================================*/

.home-card{

    position:relative;

    overflow:hidden;

}

.home-card::before{

    content:"";

    position:absolute;

    width:340px;
    height:340px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(79,70,229,.08),
            transparent 70%
        );

    pointer-events:none;

}

/*==================================
  Header
==================================*/

.home-card>.card-header{

    position:relative;

    z-index:2;

}

.home-card>.card-body{

    position:relative;

    z-index:2;

}

/*==================================
  Counter Cards
==================================*/

.counter-box{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    align-items:stretch;

}

.counter-box>div{

    flex:1;

    min-width:120px;

    padding:18px;

    text-align:center;

    border-radius:18px;

    background:var(--surface-alt);

    border:1px solid var(--border);

    transition:transform .25s ease,
               box-shadow .25s ease;

}

.counter-box>div:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-sm);

}

.counter-box strong{

    display:block;

    font-size:28px;

    font-weight:800;

    color:var(--primary);

    line-height:1;

}

.counter-box span{

    display:block;

    margin-top:8px;

    font-size:13px;

    color:var(--muted);

}

/*==================================
  Links Textarea
==================================*/

.links-wrapper{

    position:relative;

    margin-top:30px;

}

.links-textarea{

    min-height:260px;

    resize:vertical;

    line-height:1.8;

}

.links-textarea::placeholder{

    color:#9ca3af;

}

.links-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-top:14px;

    color:var(--muted);

    font-size:14px;

}

.links-footer i{

    margin-right:6px;

    color:var(--primary);

}

/*==================================
  Advanced Options
==================================*/

.advanced-toggle{

    margin-top:32px;

}

.advanced-btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:18px 22px;

    background:var(--surface-alt);

    border:1px solid var(--border);

    border-radius:18px;

    font-weight:700;

    transition:.25s;

}

.advanced-btn:hover{

    background:#eef2ff;

}

.advanced-btn .left{

    display:flex;

    align-items:center;

    gap:10px;

}

.advanced-btn i:first-child{

    color:var(--primary);

}

.advanced-btn .arrow{

    transition:.25s;

}

.advanced-btn.active .arrow{

    transform:rotate(180deg);

}

/*==================================
  Advanced Card
==================================*/

.advanced-card{

    display:none;

    margin-top:20px;

}

.advanced-card.show{

    display:block;

}

.advanced-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

}

/*==================================
  Password Strength
==================================*/

.password-strength{

    margin-top:10px;

    font-size:13px;

    color:var(--muted);

}

.password-strength strong{

    color:var(--primary);

}

/*==================================
  Submit Area
==================================*/

.submit-area{

    margin-top:36px;

    text-align:center;

}

.submit-area .btn{

    min-width:270px;

}

.submit-note{

    margin-top:18px;

    color:var(--muted);

}

.submit-note i{

    margin-right:6px;

    color:var(--primary);

}

.terms{

    margin-top:16px;

    font-size:14px;

    color:var(--muted);

}

.terms a{

    font-weight:600;

}

.terms a:hover{

    text-decoration:underline;

}

/*==================================
  Hero Animations
==================================*/

.hero-content{

    animation:fade-up .8s ease both;

}

.hero-badge{

    transition:transform .25s ease,
               box-shadow .25s ease;

}

.hero-badge:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(79,70,229,.15);

}

/*==================================
  Home Card Effects
==================================*/

.home-card{

    animation:zoom-in .55s ease both;

}

.home-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-160%;

    width:70%;

    height:100%;

    pointer-events:none;

    transform:skewX(-25deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.28),

            transparent

        );

    transition:left .9s ease;

}

.home-card:hover::after{

    left:170%;

}

/*==================================
  Textarea
==================================*/

.links-textarea{

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        background-color .25s ease,

        height .15s ease;

}

/*==================================
  Advanced Panel
==================================*/

.advanced-card{

    animation:fade-down .25s ease;

}

/*==================================
  Submit Button Extension
==================================*/

.submit-area .btn{

    position:relative;

    overflow:hidden;

}

.submit-area .btn::before{

    content:"";

    position:absolute;

    inset:0;

    left:-100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.30),

            transparent

        );

    transition:left .55s ease;

}

.submit-area .btn:hover::before{

    left:100%;

}

.submit-area .btn:active{

    transform:scale(.98);

}

.submit-area .btn.loading{

    opacity:.85;

    pointer-events:none;

}

/*==================================
  Dark Mode
==================================*/

@media (prefers-color-scheme:dark){

.hero-badge{

    background:rgba(79,70,229,.18);

}

.home-card::before{

    background:

        radial-gradient(

            circle,

            rgba(99,102,241,.12),

            transparent 70%

        );

}

.counter-box>div{

    background:#1f2937;

}

.advanced-btn{

    background:#1f2937;

}

.advanced-btn:hover{

    background:#273449;

}

.links-footer{

    color:var(--muted);

}

}

/*==================================
  Responsive
==================================*/

@media (max-width:992px){

.counter-box{

    flex-direction:column;

}

.advanced-grid{

    grid-template-columns:1fr;

}

}

@media (max-width:768px){

.hero-section{

    padding:60px 18px 25px;

}

.home-card{

    border-radius:22px;

}

.links-wrapper{

    margin-top:24px;

}

.links-footer{

    flex-direction:column;

    align-items:flex-start;

}

.submit-area .btn{

    width:100%;

    min-width:0;

}

}

@media (max-width:576px){

.hero-section{

    padding:48px 14px 20px;

}

.hero-badge{

    font-size:14px;

    padding:10px 16px;

}

.counter-box>div{

    min-width:100%;

}

.links-textarea{

    min-height:220px;

}

}

/*==================================
  Page Utilities
==================================*/

.home-hidden{

    display:none !important;

}

.home-fade{

    opacity:.6;

}

.home-disabled{

    pointer-events:none;

    opacity:.55;

}