/* ==========================================================
   TRADEMARK REGISTRATION PAGE
   Legal Dastavez
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.tm-hero{

    position:relative;
    overflow:hidden;

    padding:150px 0 110px;

    background:
        linear-gradient(
            135deg,
            #f9fbff,
            #eef5ff
        );

}


.tm-hero-bg{

    position:absolute;
    inset:0;

    overflow:hidden;

}


.tm-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(12px);

}


.tm-orb-one{

    width:450px;
    height:450px;

    background:rgba(200,165,82,.13);

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

}


.tm-orb-two{

    width:320px;
    height:320px;

    background:rgba(44,116,179,.09);

    bottom:-150px;
    left:-100px;

}


.tm-orb-three{

    width:200px;
    height:200px;

    background:rgba(11,31,58,.06);

    top:40%;
    left:48%;

}


/* ==========================================================
   HERO CONTAINER
========================================================== */

.tm-hero-container{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.tm-hero-content{

    max-width:700px;

}


.tm-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:11px 22px;

    background:#fff;

    color:var(--secondary);

    border-radius:50px;

    font-weight:600;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}


.tm-badge i{

    font-size:1rem;

}


.tm-hero-content h1{

    font-size:4.2rem;

    line-height:1.12;

    color:var(--primary);

    margin-bottom:25px;

    letter-spacing:-1px;

}


.tm-hero-content h1 span{

    color:var(--secondary);

}


.tm-hero-content>p{

    font-size:1.08rem;

    line-height:1.9;

    color:var(--gray);

    max-width:650px;

    margin-bottom:35px;

}


.tm-hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:40px;

}


.tm-hero-buttons a{

    gap:12px;

}


.tm-trust-points{

    display:grid;

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

    gap:15px 25px;

}


.tm-trust-points div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#444;

    font-size:.94rem;

    font-weight:500;

}


.tm-trust-points i{

    color:var(--secondary);

}


/* ==========================================================
   HERO VISUAL
========================================================== */

.tm-hero-visual{

    position:relative;

    min-height:530px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.tm-brand-card{

    width:390px;

    padding:35px;

    background:rgba(255,255,255,.94);

    border-radius:30px;

    box-shadow:
        0 30px 80px rgba(11,31,58,.13);

    position:relative;

    z-index:2;

    animation:tm-float 6s ease-in-out infinite;

}


.tm-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:35px;

}


.tm-card-icon{

    width:58px;
    height:58px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:var(--primary);

    color:#fff;

    font-size:1.4rem;

}


.tm-status{

    display:flex;

    align-items:center;

    gap:7px;

    padding:8px 13px;

    background:#edf9f2;

    color:#16834b;

    border-radius:30px;

    font-size:.78rem;

    font-weight:600;

}


.tm-status i{

    font-size:.5rem;

}


.tm-logo-placeholder{

    width:120px;
    height:120px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:0 auto 25px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );

    color:#fff;

    font-size:2.5rem;

    box-shadow:0 20px 40px rgba(11,31,58,.2);

}


.tm-brand-card h3{

    text-align:center;

    color:var(--primary);

    font-size:1.8rem;

    margin-bottom:5px;

}


.tm-brand-card>p{

    text-align:center;

    color:var(--gray);

    font-size:.9rem;

}


.tm-card-line{

    height:1px;

    background:#eee;

    margin:28px 0;

}


.tm-card-details{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}


.tm-card-details span{

    display:block;

    color:#999;

    font-size:.72rem;

    margin-bottom:5px;

}


.tm-card-details strong{

    color:var(--primary);

    font-size:.82rem;

}


/* ==========================================================
   FLOATING CARDS
========================================================== */

.tm-floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:13px;

    padding:17px 20px;

    background:#fff;

    border-radius:18px;

    box-shadow:var(--shadow);

    z-index:3;

}


.tm-floating-card>i{

    width:45px;
    height:45px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:var(--secondary);

    color:#fff;

    border-radius:13px;

}


.tm-floating-card strong{

    display:block;

    color:var(--primary);

    font-size:.88rem;

    margin-bottom:3px;

}


.tm-floating-card span{

    color:var(--gray);

    font-size:.72rem;

}


.tm-floating-one{

    top:13%;

    left:0;

}


.tm-floating-two{

    right:-5px;

    bottom:15%;

}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes tm-float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-16px);
    }

    100%{
        transform:translateY(0);
    }

}


/* ==========================================================
   TRUST STRIP
========================================================== */

.tm-trust-strip{

    padding:35px 0;

    background:#fff;

}


.tm-trust-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}


.tm-trust-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 10px 35px rgba(0,0,0,.05);

}


.tm-trust-item>i{

    width:50px;
    height:50px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:#eef5ff;

    color:var(--secondary);

    font-size:1.2rem;

    flex-shrink:0;

}


.tm-trust-item strong{

    display:block;

    color:var(--primary);

    font-size:.9rem;

    margin-bottom:3px;

}


.tm-trust-item span{

    display:block;

    color:var(--gray);

    font-size:.72rem;

    line-height:1.4;

}


/* ==========================================================
   WHY TRADEMARK
========================================================== */

.tm-why{

    background:var(--light-gray);

}


.tm-why .section-title h2 span{

    color:var(--secondary);

}


.tm-benefit-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:25px;

}


.tm-benefit-card{

    background:#fff;

    padding:35px 28px;

    border-radius:24px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.05);

    transition:.35s;

    border:1px solid rgba(0,0,0,.03);

}


.tm-benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.1);

}


.tm-benefit-icon{

    width:65px;
    height:65px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:var(--primary);

    color:#fff;

    font-size:1.35rem;

    margin-bottom:25px;

}


.tm-benefit-card h3{

    color:var(--primary);

    margin-bottom:13px;

    font-size:1.2rem;

}


.tm-benefit-card p{

    color:var(--gray);

    line-height:1.8;

    font-size:.9rem;

}


/* ==========================================================
   PROTECTION SECTION
========================================================== */

.tm-protection{

    background:#fff;

}


.tm-protection-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}


.tm-protection-content h2{

    font-size:3rem;

    line-height:1.25;

    color:var(--primary);

    margin-bottom:25px;

}


.tm-protection-content h2 span{

    color:var(--secondary);

}


.tm-protection-content>p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:35px;

    max-width:600px;

}


.tm-protection-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:17px;

}


.tm-protection-list div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#444;

    font-weight:500;

}


.tm-protection-list i{

    width:28px;
    height:28px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#eef5ff;

    color:var(--secondary);

    border-radius:50%;

    font-size:.75rem;

}


/* ==========================================================
   PROTECTION VISUAL
========================================================== */

.tm-protection-visual{

    display:flex;

    justify-content:center;

}


.tm-symbol-card{

    width:420px;

    min-height:420px;

    padding:55px 40px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    border-radius:35px;

    background:
        linear-gradient(
            145deg,
            var(--primary),
            #17345e
        );

    box-shadow:
        0 30px 70px rgba(11,31,58,.2);

    position:relative;

    overflow:hidden;

}


.tm-symbol-card::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.1);

    top:-120px;
    right:-100px;

}


.tm-symbol-card::after{

    content:"";

    position:absolute;

    width:200px;
    height:200px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    bottom:-100px;
    left:-70px;

}


.tm-symbol-circle{

    width:120px;
    height:120px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.1);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    font-size:3rem;

    margin-bottom:30px;

    position:relative;

    z-index:1;

}


.tm-symbol-card h3{

    color:#fff;

    font-size:1.8rem;

    margin-bottom:10px;

    position:relative;

    z-index:1;

}


.tm-symbol-card>p{

    color:rgba(255,255,255,.75);

    line-height:1.7;

    max-width:260px;

    position:relative;

    z-index:1;

}


.tm-symbol-tags{

    display:flex;

    gap:10px;

    margin-top:30px;

    position:relative;

    z-index:1;

}


.tm-symbol-tags span{

    padding:8px 15px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:30px;

    color:#fff;

    font-size:.7rem;

    font-weight:600;

}


/* ==========================================================
   PROCESS
========================================================== */

.tm-process{

    background:var(--light-gray);

}


.tm-process .section-title h2 span{

    color:var(--secondary);

}


.tm-process-grid{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:20px;

}


.tm-process-card{

    background:#fff;

    border-radius:24px;

    padding:35px 22px;

    text-align:center;

    position:relative;

    box-shadow:
        0 15px 40px rgba(0,0,0,.05);

    transition:.35s;

}


.tm-process-card:hover{

    transform:translateY(-10px);

}


.tm-process-number{

    position:absolute;

    top:18px;
    right:18px;

    color:#dfe5ed;

    font-weight:800;

    font-size:1.3rem;

}


.tm-process-icon{

    width:70px;
    height:70px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:20px;

    background:var(--primary);

    color:#fff;

    font-size:1.4rem;

    margin:10px auto 25px;

}


.tm-process-card h3{

    color:var(--primary);

    font-size:1.1rem;

    margin-bottom:12px;

}


.tm-process-card p{

    color:var(--gray);

    line-height:1.7;

    font-size:.82rem;

}


/* ==========================================================
   DOCUMENTS
========================================================== */

.tm-documents{

    background:#fff;

}


.tm-document-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:25px;

}


.tm-document-card{

    padding:35px 28px;

    border:1px solid #edf0f4;

    border-radius:22px;

    transition:.35s;

}


.tm-document-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


.tm-document-card>i{

    width:60px;
    height:60px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:17px;

    background:#eef5ff;

    color:var(--secondary);

    font-size:1.35rem;

    margin-bottom:22px;

}


.tm-document-card h3{

    color:var(--primary);

    margin-bottom:10px;

    font-size:1.15rem;

}


.tm-document-card p{

    color:var(--gray);

    font-size:.86rem;

    line-height:1.7;

}


/* ==========================================================
   PACKAGE / CTA
========================================================== */

.tm-packages{

    background:var(--light-gray);

}


.tm-package{

    max-width:1050px;

    margin:auto;

    display:grid;

    grid-template-columns:1.35fr .65fr;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #18355e
        );

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 30px 70px rgba(11,31,58,.16);

}


.tm-package-content{

    padding:60px;

}


.tm-package-label{

    color:#ffd978;

    letter-spacing:2px;

    font-size:.75rem;

    font-weight:700;

}


.tm-package-content h3{

    color:#fff;

    font-size:2.5rem;

    line-height:1.25;

    margin:15px 0 18px;

}


.tm-package-content>p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

    margin-bottom:30px;

}


.tm-package-content ul{

    margin-bottom:35px;

}


.tm-package-content li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    margin-bottom:14px;

    font-size:.9rem;

}


.tm-package-content li i{

    color:#ffd978;

}


.tm-package-content .btn-primary{

    background:var(--secondary);

}


.tm-package-visual{

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.04);

    text-align:center;

    padding:40px;

}


.tm-package-icon{

    width:130px;
    height:130px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    font-size:3.2rem;

    margin-bottom:25px;

}


.tm-package-visual strong{

    color:#fff;

    font-size:1.3rem;

    margin-bottom:8px;

}


.tm-package-visual span{

    color:rgba(255,255,255,.6);

    font-size:.85rem;

}


/* ==========================================================
   FAQ
========================================================== */

.tm-faq{

    background:#fff;

}


.tm-faq .section-title h2 span{

    color:var(--secondary);

}


/* ==========================================================
   BOTTOM CTA
========================================================== */

.tm-bottom-cta{

    position:relative;

    overflow:hidden;

}


.tm-bottom-cta::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

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

}


.tm-bottom-cta::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.06);

    bottom:-150px;
    left:-70px;

}


.tm-bottom-cta .container{

    position:relative;

    z-index:2;

}


/* ==========================================================
   RESPONSIVE - 1100px
========================================================== */

@media(max-width:1100px){

    .tm-hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }


    .tm-hero-content{

        margin:auto;

    }


    .tm-hero-buttons{

        justify-content:center;

    }


    .tm-trust-points{

        max-width:650px;

        margin:auto;

        text-align:left;

    }


    .tm-hero-visual{

        max-width:600px;

        width:100%;

        margin:auto;

    }


    .tm-benefit-grid{

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

    }


    .tm-process-grid{

        grid-template-columns:
            repeat(3,1fr);

    }


    .tm-document-grid{

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

    }


    .tm-trust-grid{

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

    }


    .tm-protection-container{

        grid-template-columns:1fr;

    }


    .tm-protection-content{

        text-align:center;

    }


    .tm-protection-content>p{

        margin-left:auto;
        margin-right:auto;

    }


    .tm-protection-list{

        max-width:600px;

        margin:auto;

        text-align:left;

    }

}


/* ==========================================================
   RESPONSIVE - 768px
========================================================== */

@media(max-width:768px){

    .tm-hero{

        padding:120px 0 80px;

    }


    .tm-hero-content h1{

        font-size:3rem;

    }


    .tm-hero-visual{

        min-height:450px;

    }


    .tm-brand-card{

        width:350px;

    }


    .tm-floating-card{

        display:none;

    }


    .tm-benefit-grid{

        grid-template-columns:1fr;

    }


    .tm-process-grid{

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

    }


    .tm-package{

        grid-template-columns:1fr;

    }


    .tm-package-content{

        padding:45px 30px;

    }


    .tm-package-content h3{

        font-size:2rem;

    }


    .tm-package-visual{

        padding:45px;

    }


    .tm-protection-content h2{

        font-size:2.3rem;

    }

}


/* ==========================================================
   RESPONSIVE - 576px
========================================================== */

@media(max-width:576px){

    .tm-hero{

        padding-top:110px;

    }


    .tm-hero-content h1{

        font-size:2.25rem;

        letter-spacing:0;

    }


    .tm-hero-content>p{

        font-size:.95rem;

    }


    .tm-hero-buttons{

        flex-direction:column;

    }


    .tm-hero-buttons a{

        width:100%;

    }


    .tm-trust-points{

        grid-template-columns:1fr;

        text-align:left;

    }


    .tm-hero-visual{

        min-height:380px;

    }


    .tm-brand-card{

        width:100%;

        padding:28px 22px;

    }


    .tm-logo-placeholder{

        width:95px;
        height:95px;

        font-size:2rem;

    }


    .tm-card-details{

        grid-template-columns:1fr;

    }


    .tm-trust-grid{

        grid-template-columns:1fr;

    }


    .tm-protection-list{

        grid-template-columns:1fr;

    }


    .tm-symbol-card{

        width:100%;

        min-height:360px;

        padding:40px 25px;

    }


    .tm-process-grid{

        grid-template-columns:1fr;

    }


    .tm-document-grid{

        grid-template-columns:1fr;

    }


    .tm-package-content{

        padding:40px 25px;

    }


    .tm-package-content h3{

        font-size:1.8rem;

    }


    .tm-package-visual{

        padding:40px 25px;

    }

}

/* =========================================
   COMPANY TYPES
========================================= */

.company-types-section {
    position: relative;
}


.company-type-points {
    list-style: none;

    padding: 0;
    margin: 18px 0 0;

    display: flex;
    flex-direction: column;
    gap: 8px;
}


.company-type-points li {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    color: #64748b;
}


.company-type-points li i {
    font-size: 11px;
    color: #2563eb;
}