/*==================================================
  TERMS & CONDITIONS CSS
  Part 1
  Reset • Fonts • Body • Typography
  Container • Utilities • Hero Section
==================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
  CSS RESET
==============================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:1.7;
    color:#334155;
    background:#f4f8ff;
    overflow-x:hidden;
    position:relative;
}

/*==============================
  BODY BACKGROUND
==============================*/

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 10% 15%,rgba(37,99,235,.08),transparent 28%),
        radial-gradient(circle at 90% 10%,rgba(124,58,237,.08),transparent 25%),
        radial-gradient(circle at 80% 90%,rgba(14,165,233,.08),transparent 28%),
        radial-gradient(circle at 20% 85%,rgba(59,130,246,.06),transparent 30%);
    z-index:-3;
}

/*==============================
  DECORATIVE GRID
==============================*/

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(37,99,235,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,99,235,.025) 1px,transparent 1px);
    background-size:60px 60px;
    z-index:-4;
}

/*==============================
  TYPOGRAPHY
==============================*/

h1,h2,h3,h4,h5,h6{
    color:#0f172a;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-0.02em;
}

h1{
    font-size:clamp(2.8rem,5vw,4.6rem);
}

h2{
    font-size:clamp(2rem,3vw,3rem);
}

h3{
    font-size:1.35rem;
}

p{
    color:#64748b;
    margin-bottom:1rem;
}

a{
    text-decoration:none;
    color:inherit;
    transition:.35s ease;
}

img{
    max-width:100%;
    display:block;
}

ul{
    list-style:none;
}

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

.container{
    width:min(1280px,92%);
    margin:auto;
    position:relative;
    z-index:2;
}

/*==============================
  MAIN
==============================*/

main{
    overflow:hidden;
}

/*==============================
  UTILITY CLASSES
==============================*/

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}

.shadow{
    box-shadow:
    0 25px 60px rgba(15,23,42,.10);
}

.radius{
    border-radius:24px;
}

.glass{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.gradient-text{
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-space{
    padding:6rem 0;
}

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

.hero{
    position:relative;
    overflow:hidden;
    padding:7rem 0 5rem;
    background:
        linear-gradient(135deg,#eef5ff 0%,#f8fbff 45%,#edf3ff 100%);
}

/* Large glowing circles */

.hero::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    top:-250px;
    left:-220px;
    background:
        radial-gradient(circle,
        rgba(37,99,235,.18),
        transparent 72%);
    filter:blur(15px);
    animation:heroFloat1 12s ease-in-out infinite;
}

/* Secondary glow */

.hero::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    right:-120px;
    bottom:-160px;
    background:
        radial-gradient(circle,
        rgba(124,58,237,.18),
        transparent 70%);
    filter:blur(18px);
    animation:heroFloat2 15s ease-in-out infinite;
}

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

.hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:70px;
    align-items:center;
    position:relative;
    z-index:2;
}

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

.hero-copy{
    position:relative;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:.7rem 1.3rem;
    margin-bottom:1.4rem;

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;

    color:#2563eb;

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

    border:1px solid
        rgba(37,99,235,.15);

    border-radius:100px;

    backdrop-filter:blur(10px);

    box-shadow:
        0 10px 30px rgba(37,99,235,.08);
}

.hero h1{
    max-width:12ch;
    margin-bottom:1.4rem;
}

.hero p{
    max-width:620px;
    font-size:1.08rem;
    color:#5f6f86;
}

/*==================================================
  TERMS & CONDITIONS CSS
  Part 2
  Hero Card
  Terms Badge
  Buttons
  Floating Effects
  Hero Animations
  Glassmorphism
==================================================*/

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

.hero-card{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:5;
}

/* Decorative glow */

.hero-card::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(37,99,235,.18),
        transparent 70%);
    filter:blur(35px);
    animation:glowPulse 6s ease-in-out infinite;
    z-index:-2;
}

.hero-card::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(124,58,237,.16),
        transparent 70%);
    top:-40px;
    right:-30px;
    filter:blur(28px);
    animation:floatCard 10s ease-in-out infinite;
    z-index:-1;
}

/*=====================================
  GLASSMORPHISM CARD
=====================================*/

.hero-card .card{
    position:relative;
    overflow:hidden;

    width:100%;
    max-width:430px;

    padding:2.8rem;

    border-radius:32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.52)
        );

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

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

    box-shadow:
        0 30px 80px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.7);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

/* glossy overlay */

.hero-card .card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.35),
            transparent 40%,
            transparent 60%,
            rgba(255,255,255,.18)
        );
    pointer-events:none;
}

/* moving shine */

.hero-card .card::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-45%;
    width:55%;
    height:340%;
    transform:rotate(28deg);

    background:
        linear-gradient(
            rgba(255,255,255,0),
            rgba(255,255,255,.35),
            rgba(255,255,255,0)
        );

    transition:.9s;
}

.hero-card:hover .card{
    transform:
        translateY(-10px)
        rotateX(3deg);

    box-shadow:
        0 40px 90px rgba(37,99,235,.18);
}

.hero-card:hover .card::after{
    left:145%;
}

/*=====================================
  CARD TYPOGRAPHY
=====================================*/

.hero-card h2{
    font-size:1.9rem;
    margin-bottom:1rem;

    color:#0f172a;
}

.hero-card p{
    color:#64748b;
    line-height:1.9;
    margin-bottom:1.3rem;
}

/*=====================================
  TERMS BADGES
=====================================*/

.tag,
.badge,
.terms-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.65rem 1.25rem;

    margin-bottom:1.4rem;

    border-radius:999px;

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#1d4ed8;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.12),
            rgba(124,58,237,.12)
        );

    border:1px solid
        rgba(37,99,235,.18);

    box-shadow:
        0 12px 25px rgba(37,99,235,.08);

    transition:.35s;
}

.tag:hover,
.badge:hover,
.terms-badge:hover{

    transform:translateY(-3px);

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );
}

/*=====================================
  BUTTONS
=====================================*/

.hero-actions{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:2rem;
}

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:180px;

    padding:16px 32px;

    border:none;
    border-radius:60px;

    cursor:pointer;

    font-size:.95rem;
    font-weight:700;
    letter-spacing:.02em;

    transition:
        transform .35s,
        box-shadow .35s,
        background .35s;
}

.btn-primary{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 18px 40px rgba(37,99,235,.28);
}

.btn-primary:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 26px 55px rgba(37,99,235,.35);
}

.btn-secondary{

    color:#1e293b;

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

    border:1px solid
        rgba(37,99,235,.18);

    backdrop-filter:blur(10px);
}

.btn-secondary:hover{

    background:#fff;

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px rgba(15,23,42,.12);
}

/*=====================================
  FLOATING PARTICLES
=====================================*/

.hero .floating-circle{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    opacity:.45;
}

.hero .floating-circle:nth-child(1){
    width:24px;
    height:24px;
    left:8%;
    top:22%;
    background:#60a5fa;
}

.hero .floating-circle:nth-child(2){
    width:18px;
    height:18px;
    right:14%;
    top:26%;
    background:#8b5cf6;
}

.hero .floating-circle:nth-child(3){
    width:14px;
    height:14px;
    left:18%;
    bottom:18%;
    background:#38bdf8;
}

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

.hero-copy{

    animation:
        fadeSlideLeft
        1s ease;
}

.hero-card{

    animation:
        fadeSlideRight
        1.1s ease;
}

.hero h1{

    animation:
        fadeUp
        .9s ease;
}

.hero p{

    animation:
        fadeUp
        1.2s ease;
}

.hero .btn{

    animation:
        fadeUp
        1.4s ease;
}

/*=====================================
  GLASS HOVER EFFECT
=====================================*/

.glass{

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

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

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

    box-shadow:
        0 25px 70px rgba(15,23,42,.12);

    transition:
        transform .45s,
        box-shadow .45s;
}

.glass:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 35px 80px rgba(37,99,235,.20);
}

/*==================================================
  TERMS & CONDITIONS CSS
  Part 3
  Section Styling
  Terms Cards
  Information Cards
  Grid Layouts
  Headings
==================================================*/

/*=====================================
  SECTION STYLING
=====================================*/

.terms-section{
    position:relative;
    padding:6rem 0;
    overflow:hidden;
}

.terms-section:nth-child(even){
    background:
        linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
}

.alt-section{
    background:
        linear-gradient(135deg,#f6f9ff 0%,#edf4ff 100%);
}

/* Decorative background */

.terms-section::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    top:-260px;
    left:-220px;
    background:
        radial-gradient(circle,
        rgba(37,99,235,.08),
        transparent 72%);
    filter:blur(15px);
    pointer-events:none;
}

.terms-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    right:-160px;
    bottom:-180px;
    background:
        radial-gradient(circle,
        rgba(124,58,237,.08),
        transparent 72%);
    filter:blur(18px);
    pointer-events:none;
}

/*=====================================
  SECTION HEADING
=====================================*/

.section-heading{
    position:relative;
    max-width:860px;
    margin:0 auto 4rem;
    text-align:center;
}

.section-heading .eyebrow{
    margin-bottom:1rem;
}

.section-heading h2{
    position:relative;
    display:inline-block;

    margin-bottom:1.25rem;

    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:800;
    color:#0f172a;
}

.section-heading h2::after{

    content:"";

    display:block;

    width:90px;
    height:5px;

    margin:18px auto 0;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );
}

.section-heading p{

    max-width:760px;

    margin:0 auto;

    font-size:1.08rem;

    line-height:1.9;

    color:#64748b;
}

/*=====================================
  GRID LAYOUTS
=====================================*/

.terms-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    align-items:stretch;

    margin-top:2rem;
}

.policy-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:28px;
}

.info-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(350px,1fr));

    gap:32px;
}

/*=====================================
  TERMS CARDS
=====================================*/

.terms-card{

    position:relative;

    overflow:hidden;

    padding:2.2rem;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(248,251,255,.96)
        );

    border:1px solid
        rgba(37,99,235,.10);

    box-shadow:
        0 18px 45px rgba(15,23,42,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

/* Gradient top border */

.terms-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed,
            #0ea5e9
        );
}

/* Decorative glow */

.terms-card::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

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

    background:
        radial-gradient(circle,
        rgba(37,99,235,.08),
        transparent 70%);

    transition:.4s;
}

/* Hover */

.terms-card:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(37,99,235,.25);

    box-shadow:
        0 28px 60px rgba(37,99,235,.16);
}

.terms-card:hover::after{

    transform:scale(1.2);
}

/*=====================================
  INFORMATION CARDS
=====================================*/

.info-card{

    position:relative;

    padding:2.5rem;

    border-radius:30px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(242,247,255,.95)
        );

    border:1px solid
        rgba(37,99,235,.10);

    backdrop-filter:blur(18px);

    box-shadow:
        0 20px 55px rgba(15,23,42,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.info-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 28px 65px rgba(37,99,235,.14);
}

/* Decorative stripe */

.info-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:6px;
    height:100%;

    background:
        linear-gradient(
            to bottom,
            #2563eb,
            #7c3aed
        );
}

/*=====================================
  CARD HEADINGS
=====================================*/

.terms-card h3,
.info-card h3{

    margin-bottom:1rem;

    font-size:1.45rem;

    font-weight:700;

    color:#0f172a;

    line-height:1.3;
}

.terms-card h4,
.info-card h4{

    margin-bottom:.8rem;

    font-size:1.1rem;

    font-weight:600;

    color:#1d4ed8;
}

.terms-card p,
.info-card p{

    margin-bottom:1rem;

    color:#64748b;

    line-height:1.9;
}

.full-card{

    max-width:100%;
}

/*==================================================
  TERMS & CONDITIONS CSS
  Part 4
  Lists
  Rights & Responsibilities Cards
  Disclaimer Section
  Intellectual Property Section
  Website Usage Cards
==================================================*/

/*=========================================
  TERMS LISTS
=========================================*/

.terms-list{
    list-style:none;
    margin:1.6rem 0 0;
    padding:0;
}

.terms-list li{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;

    margin-bottom:18px;
    padding:16px 18px 16px 58px;

    background:#ffffff;
    border:1px solid rgba(37,99,235,.08);
    border-radius:16px;

    color:#475569;
    line-height:1.8;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

/* Gradient Icon */

.terms-list li::before{
    content:"✓";

    position:absolute;
    left:18px;
    top:16px;

    width:28px;
    height:28px;

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

    border-radius:50%;

    color:#fff;
    font-size:.85rem;
    font-weight:700;

    background:
        linear-gradient(135deg,#2563eb,#7c3aed);

    box-shadow:
        0 8px 20px rgba(37,99,235,.25);
}

.terms-list li:hover{
    transform:translateX(8px);

    background:#f8fbff;

    border-color:rgba(37,99,235,.22);

    box-shadow:
        0 15px 35px rgba(37,99,235,.10);
}

/*=========================================
  RIGHTS & RESPONSIBILITIES CARDS
=========================================*/

.rights-card,
.responsibility-card{

    position:relative;

    padding:2.2rem;

    overflow:hidden;

    border-radius:28px;

    background:
        linear-gradient(145deg,#ffffff,#f7fbff);

    border:1px solid rgba(37,99,235,.10);

    box-shadow:
        0 18px 45px rgba(15,23,42,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.rights-card::before,
.responsibility-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:
        linear-gradient(90deg,#2563eb,#7c3aed,#06b6d4);
}

.rights-card::after,
.responsibility-card::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

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

    background:
        radial-gradient(circle,
        rgba(37,99,235,.10),
        transparent 72%);
}

.rights-card:hover,
.responsibility-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 28px 60px rgba(37,99,235,.16);
}

.rights-card h3,
.responsibility-card h3{

    margin-bottom:1rem;

    color:#0f172a;
    font-size:1.5rem;
}

.rights-card p,
.responsibility-card p{

    color:#64748b;
    line-height:1.9;
}

/*=========================================
  WEBSITE USAGE CARDS
=========================================*/

.website-card{

    position:relative;

    overflow:hidden;

    padding:2rem;

    border-radius:24px;

    background:#fff;

    border:1px solid rgba(37,99,235,.10);

    box-shadow:
        0 18px 45px rgba(15,23,42,.08);

    transition:.35s ease;
}

.website-card::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.05),
            rgba(124,58,237,.06)
        );

    transition:.35s;
}

.website-card:hover{

    transform:
        translateY(-8px);

    border-color:rgba(37,99,235,.25);

    box-shadow:
        0 28px 60px rgba(37,99,235,.15);
}

.website-card:hover::before{
    opacity:1;
}

.website-card h3{

    position:relative;

    margin-bottom:1rem;

    color:#0f172a;
}

.website-card p{

    position:relative;

    color:#64748b;

    line-height:1.9;
}

/*=========================================
  DISCLAIMER SECTION
=========================================*/

.disclaimer-section{

    position:relative;

    overflow:hidden;

    padding:4rem;

    border-radius:32px;

    margin:4rem 0;

    color:#fff;

    background:
        linear-gradient(135deg,#2563eb,#1d4ed8,#7c3aed);

    box-shadow:
        0 30px 70px rgba(37,99,235,.28);
}

.disclaimer-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-200px;
    right:-120px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.18),
        transparent 72%);
}

.disclaimer-section::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    bottom:-120px;
    left:-80px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.10),
        transparent 72%);
}

.disclaimer-section h2,
.disclaimer-section h3{

    position:relative;

    color:#fff;

    margin-bottom:1.2rem;
}

.disclaimer-section p{

    position:relative;

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

    line-height:2;
}

.disclaimer-section .terms-list li{

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

    border-color:
        rgba(255,255,255,.15);

    color:#fff;

    backdrop-filter:blur(10px);
}

.disclaimer-section .terms-list li:hover{

    background:
        rgba(255,255,255,.20);
}

/*=========================================
  INTELLECTUAL PROPERTY SECTION
=========================================*/

.ip-section{

    position:relative;

    padding:4rem;

    margin-top:4rem;

    border-radius:30px;

    overflow:hidden;

    background:
        linear-gradient(145deg,#ffffff,#f5f9ff);

    border:1px solid rgba(37,99,235,.10);

    box-shadow:
        0 25px 60px rgba(15,23,42,.08);
}

.ip-section::before{

    content:"©";

    position:absolute;

    top:35px;
    right:40px;

    font-size:6rem;
    font-weight:800;

    color:rgba(37,99,235,.06);
}

.ip-section h2{

    margin-bottom:1.2rem;

    color:#0f172a;
}

.ip-section p{

    color:#64748b;

    line-height:2;
}

.ip-section strong{

    color:#2563eb;

    font-weight:700;
}

/*=========================================
  HOVER EFFECTS
=========================================*/

.terms-card:hover .terms-list li{
    border-color:rgba(37,99,235,.15);
}

.info-card:hover .terms-list li{
    background:#ffffff;
}

/*==================================================
  TERMS & CONDITIONS CSS
  Part 5
  Contact Card
  Contact Information
  CTA Section
  CTA Button
  Gradient Effects
==================================================*/

/*=========================================
  CONTACT CARD
=========================================*/

.contact-card{
    position:relative;
    overflow:hidden;

    padding:3rem;

    margin-top:4rem;

    border-radius:30px;

    background:linear-gradient(145deg,#ffffff,#f8fbff);

    border:1px solid rgba(37,99,235,.12);

    box-shadow:
        0 25px 60px rgba(15,23,42,.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.contact-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.05),
            rgba(124,58,237,.04)
        );

    opacity:0;

    transition:.4s;
}

.contact-card::after{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

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

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(37,99,235,.12),
        transparent 72%);
}

.contact-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 35px 70px rgba(37,99,235,.18);
}

.contact-card:hover::before{
    opacity:1;
}

.contact-card>*{
    position:relative;
    z-index:2;
}

.contact-card h2{
    margin-bottom:1rem;

    font-size:2rem;

    color:#0f172a;
}

.contact-card p{
    color:#64748b;

    line-height:1.9;

    margin-bottom:2rem;
}

/*=========================================
  CONTACT INFORMATION
=========================================*/

.contact-list{
    list-style:none;

    padding:0;
    margin:0;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;
}

.contact-list li{

    position:relative;

    padding:22px 24px 22px 70px;

    border-radius:20px;

    background:#ffffff;

    border:1px solid rgba(37,99,235,.10);

    box-shadow:
        0 12px 30px rgba(15,23,42,.05);

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;
}

.contact-list li:hover{

    transform:translateY(-6px);

    border-color:rgba(37,99,235,.25);

    box-shadow:
        0 20px 45px rgba(37,99,235,.12);
}

.contact-list li::before{

    position:absolute;

    left:22px;
    top:20px;

    width:36px;
    height:36px;

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

    border-radius:50%;

    background:
        linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    font-size:1rem;

    box-shadow:
        0 10px 22px rgba(37,99,235,.25);
}

/* Phone */

.contact-list li:nth-child(1)::before{
    content:"☎";
}

/* Email */

.contact-list li:nth-child(2)::before{
    content:"✉";
}

/* Website */

.contact-list li:nth-child(3)::before{
    content:"🌐";
}

/* Address */

.contact-list li:nth-child(4)::before{
    content:"📍";
}

.contact-list strong{

    display:block;

    margin-bottom:6px;

    color:#0f172a;

    font-size:1rem;
}

.contact-list span,
.contact-list a{

    color:#64748b;

    text-decoration:none;

    transition:.3s;
}

.contact-list a:hover{

    color:#2563eb;
}

/*=========================================
  CTA SECTION
=========================================*/

.cta-section{

    position:relative;

    overflow:hidden;

    margin-top:5rem;

    padding:5rem 3rem;

    text-align:center;

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #4f46e5 50%,
            #7c3aed 100%
        );

    color:#fff;

    box-shadow:
        0 35px 75px rgba(37,99,235,.30);
}

.cta-section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-200px;
    left:-120px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.15),
        transparent 70%);
}

.cta-section::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    bottom:-180px;
    right:-80px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.10),
        transparent 70%);
}

.cta-section>*{

    position:relative;

    z-index:2;
}

.cta-section h2{

    color:#fff;

    font-size:2.5rem;

    margin-bottom:1rem;
}

.cta-section p{

    max-width:760px;

    margin:0 auto 2rem;

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

    line-height:2;

    font-size:1.05rem;
}

/*=========================================
  CTA BUTTON
=========================================*/

.cta-btn,
.cta-section .btn{

    display:inline-flex;

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

    padding:18px 38px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    font-size:1rem;

    color:#2563eb;

    background:#fff;

    border:none;

    cursor:pointer;

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

    transition:
        transform .35s,
        box-shadow .35s,
        letter-spacing .35s;
}

.cta-btn:hover,
.cta-section .btn:hover{

    transform:
        translateY(-6px)
        scale(1.03);

    letter-spacing:.05em;

    box-shadow:
        0 25px 60px rgba(0,0,0,.28);
}

.cta-btn:active,
.cta-section .btn:active{

    transform:scale(.98);
}

/*=========================================
  GRADIENT EFFECTS
=========================================*/

.gradient-text{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed,
            #06b6d4
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.gradient-border{

    position:relative;

    border-radius:24px;

    overflow:hidden;
}

.gradient-border::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:inherit;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed,
            #06b6d4
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    pointer-events:none;
}

/* Decorative glowing circles */

.glow-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    opacity:.18;

    pointer-events:none;
}

.glow-circle.blue{

    width:220px;
    height:220px;

    background:#2563eb;

    top:-60px;
    right:-60px;
}

.glow-circle.purple{

    width:180px;
    height:180px;

    background:#7c3aed;

    bottom:-40px;
    left:-40px;
}

/*==================================================
  TERMS & CONDITIONS CSS
  Part 6
  Decorative Backgrounds
  Hover Animations
  Glass Effects
  Shadows
  Scroll Animations
==================================================*/

/*=========================================
  DECORATIVE BACKGROUND ELEMENTS
=========================================*/

body{
    position:relative;
    overflow-x:hidden;
}

/* Large Background Circle */

body::before{
    content:"";
    position:fixed;
    top:-280px;
    left:-220px;
    width:650px;
    height:650px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(37,99,235,.10),
        transparent 70%);
    z-index:-3;
    pointer-events:none;
}

/* Bottom Decorative Circle */

body::after{
    content:"";
    position:fixed;
    bottom:-300px;
    right:-240px;
    width:700px;
    height:700px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(124,58,237,.10),
        transparent 70%);
    z-index:-3;
    pointer-events:none;
}

/* Decorative Floating Blobs */

.hero::before,
.section::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(37,99,235,.12),
        transparent 72%);
    filter:blur(12px);
    animation:floatBlob1 12s ease-in-out infinite;
    pointer-events:none;
}

.hero::after,
.section::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(124,58,237,.10),
        transparent 72%);
    animation:floatBlob2 14s ease-in-out infinite;
    pointer-events:none;
}

.hero::before{
    top:30px;
    left:-70px;
}

.hero::after{
    right:-60px;
    bottom:50px;
}

.section::before{
    top:50px;
    right:-80px;
}

.section::after{
    bottom:20px;
    left:-60px;
}

/*=========================================
  PREMIUM HOVER ANIMATIONS
=========================================*/

.terms-card,
.info-card,
.contact-card,
.rights-card,
.website-card,
.disclaimer-section,
.ip-section{
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        background .45s ease;
}

.terms-card:hover,
.info-card:hover,
.contact-card:hover,
.rights-card:hover,
.website-card:hover,
.ip-section:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(37,99,235,.22);

    box-shadow:
        0 30px 70px rgba(37,99,235,.18);
}

/* Soft Zoom */

.terms-card:hover h2,
.info-card:hover h2,
.contact-card:hover h2,
.website-card:hover h3{

    color:#2563eb;

    transition:.35s;
}

/*=========================================
  IMAGE / ICON ANIMATIONS
=========================================*/

.tag,
.badge,
.icon,
.terms-list li::before,
.contact-list li::before{

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.terms-list li:hover::before,
.contact-list li:hover::before{

    transform:
        scale(1.15)
        rotate(8deg);

    box-shadow:
        0 14px 30px rgba(37,99,235,.30);
}

/*=========================================
  GLASSMORPHISM EFFECTS
=========================================*/

.glass,
.glass-card,
.hero-card,
.contact-card,
.disclaimer-section{

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

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

/* Frosted Overlay */

.glass::before,
.glass-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.35),
            rgba(255,255,255,.08)
        );

    pointer-events:none;
}

/*=========================================
  PREMIUM SHADOWS
=========================================*/

.terms-card{

    box-shadow:
        0 18px 40px rgba(15,23,42,.08),
        0 6px 16px rgba(37,99,235,.05);
}

.info-card{

    box-shadow:
        0 22px 48px rgba(15,23,42,.08),
        0 8px 18px rgba(37,99,235,.05);
}

.contact-card{

    box-shadow:
        0 25px 60px rgba(15,23,42,.10),
        0 10px 25px rgba(37,99,235,.08);
}

.disclaimer-section{

    box-shadow:
        0 35px 80px rgba(37,99,235,.28);
}

.cta-section{

    box-shadow:
        0 40px 90px rgba(37,99,235,.30);
}

/*=========================================
  BUTTON ANIMATIONS
=========================================*/

.btn{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        letter-spacing .35s ease;
}

.btn:hover{

    transform:
        translateY(-4px);

    letter-spacing:.04em;

    box-shadow:
        0 20px 45px rgba(37,99,235,.25);
}

.btn:active{

    transform:scale(.97);
}

/*=========================================
  SCROLL REVEAL ANIMATIONS
=========================================*/

.section,
.terms-card,
.info-card,
.contact-card,
.rights-card,
.website-card{

    animation:
        fadeUp .9s ease both;
}

/* Delays */

.section:nth-child(2){
    animation-delay:.10s;
}

.section:nth-child(3){
    animation-delay:.20s;
}

.section:nth-child(4){
    animation-delay:.30s;
}

.section:nth-child(5){
    animation-delay:.40s;
}

/*=========================================
  KEYFRAME ANIMATIONS
=========================================*/

@keyframes floatBlob1{

    0%,100%{
        transform:
            translateY(0)
            translateX(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-35px)
            translateX(20px)
            scale(1.08);
    }
}

@keyframes floatBlob2{

    0%,100%{
        transform:
            translateY(0)
            translateX(0);
    }

    50%{
        transform:
            translateY(25px)
            translateX(-20px);
    }
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(50px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}

@keyframes pulseGlow{

    0%,100%{

        box-shadow:
            0 0 0 rgba(37,99,235,0);
    }

    50%{

        box-shadow:
            0 0 35px rgba(37,99,235,.30);
    }
}

/* Floating animation */

.float{
    animation:floatBlob1 8s ease-in-out infinite;
}

/* Pulse effect */

.pulse{
    animation:pulseGlow 3s infinite;
}

/* Smooth image hover */

img{
    transition:
        transform .45s ease,
        filter .45s ease;
}

img:hover{

    transform:scale(1.04);

    filter:brightness(1.05);
}

/*==================================================
  TERMS & CONDITIONS CSS
  Part 7
  Tablet Responsive Design
  Mobile Responsive Design
  Small-screen Improvements
==================================================*/

/*==================================================
  LARGE TABLETS
==================================================*/

@media (max-width:1200px){

    .container{
        width:min(94%,1100px);
    }

    .hero{
        padding:5rem 0 4rem;
    }

    .hero-grid{
        grid-template-columns:1fr .9fr;
        gap:3rem;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .hero-card{
        max-width:420px;
        margin-inline:auto;
    }

    .section{
        padding:4.5rem 0;
    }

    .section-heading{
        margin-bottom:2.8rem;
    }

    .terms-grid,
    .policy-grid,
    .info-grid{
        grid-template-columns:repeat(2,1fr);
        gap:2rem;
    }

    .rights-grid,
    .website-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-list{
        grid-template-columns:1fr 1fr;
    }

}

/*==================================================
  TABLETS
==================================================*/

@media (max-width:992px){

    .hero{

        padding:4.5rem 0;

        text-align:center;
    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:3rem;
    }

    .hero-copy{

        max-width:760px;

        margin:auto;
    }

    .hero-copy h1{

        max-width:100%;

        font-size:3rem;

        line-height:1.15;
    }

    .hero-copy p{

        max-width:680px;

        margin:1.2rem auto 2rem;
    }

    .hero-actions{

        justify-content:center;
    }

    .hero-card{

        max-width:520px;

        width:100%;

        margin:auto;
    }

    .card{

        max-width:none;
    }

    .section{

        padding:4rem 0;
    }

    .section-heading{

        text-align:center;

        margin-inline:auto;
    }

    .section-heading h2{

        font-size:2.3rem;
    }

    .terms-grid,
    .policy-grid,
    .rights-grid,
    .website-grid,
    .info-grid{

        grid-template-columns:1fr;

        gap:1.8rem;
    }

    .contact-list{

        grid-template-columns:1fr;
    }

    .contact-card{

        padding:2.3rem;
    }

    .cta-section{

        padding:4rem 2rem;
    }

    .cta-section h2{

        font-size:2.2rem;
    }

}

/*==================================================
  MOBILE DEVICES
==================================================*/

@media (max-width:768px){

    body{

        font-size:15px;
    }

    .container{

        width:92%;
    }

    .hero{

        padding:4rem 0 3rem;
    }

    .hero-grid{

        gap:2rem;
    }

    .eyebrow{

        font-size:.72rem;

        padding:.55rem 1rem;
    }

    .hero h1{

        font-size:2.4rem;

        line-height:1.2;
    }

    .hero p{

        font-size:.98rem;
    }

    .hero-actions{

        flex-direction:column;

        align-items:center;

        width:100%;
    }

    .btn{

        width:100%;

        max-width:320px;

        justify-content:center;
    }

    .hero-card{

        width:100%;
    }

    .card{

        padding:2rem 1.6rem;

        border-radius:24px;
    }

    .section{

        padding:3.5rem 0;
    }

    .section-heading{

        margin-bottom:2rem;
    }

    .section-heading h2{

        font-size:2rem;
    }

    .section-heading p{

        font-size:.96rem;
    }

    .terms-card,
    .info-card,
    .rights-card,
    .website-card,
    .contact-card{

        padding:1.8rem;
    }

    .terms-list li{

        padding:15px 15px 15px 54px;

        font-size:.95rem;
    }

    .contact-list li{

        padding:18px 18px 18px 62px;
    }

    .contact-list li::before{

        width:34px;
        height:34px;
    }

    .cta-section{

        padding:3rem 1.5rem;

        border-radius:26px;
    }

    .cta-section h2{

        font-size:1.9rem;
    }

    .cta-section p{

        font-size:.95rem;
    }

}

/*==================================================
  SMALL MOBILE PHONES
==================================================*/

@media (max-width:576px){

    .hero{

        padding:3.5rem 0 2.8rem;
    }

    .hero h1{

        font-size:2rem;
    }

    .hero p{

        font-size:.94rem;
    }

    .card{

        padding:1.6rem 1.4rem;
    }

    .terms-card,
    .info-card,
    .website-card,
    .rights-card,
    .contact-card{

        padding:1.5rem;
    }

    .section-heading h2{

        font-size:1.7rem;
    }

    .section-heading p{

        font-size:.92rem;
    }

    .terms-list li{

        font-size:.92rem;

        line-height:1.7;
    }

    .contact-list li{

        font-size:.92rem;
    }

    .contact-list strong{

        font-size:.95rem;
    }

    .cta-section{

        padding:2.5rem 1.2rem;
    }

    .cta-section h2{

        font-size:1.6rem;
    }

    .cta-btn,
    .cta-section .btn{

        width:100%;

        max-width:280px;

        padding:16px 28px;
    }

}

/*==================================================
  EXTRA SMALL DEVICES
==================================================*/

@media (max-width:400px){

    body{

        font-size:14px;
    }

    .container{

        width:94%;
    }

    .hero h1{

        font-size:1.75rem;
    }

    .eyebrow{

        font-size:.68rem;

        letter-spacing:.08em;
    }

    .card,
    .terms-card,
    .rights-card,
    .website-card,
    .info-card,
    .contact-card{

        padding:1.3rem;
    }

    .terms-list li{

        padding:14px 12px 14px 48px;

        font-size:.88rem;
    }

    .terms-list li::before{

        width:24px;
        height:24px;

        left:14px;

        font-size:.72rem;
    }

    .contact-list li{

        padding:16px 14px 16px 54px;
    }

    .contact-list li::before{

        width:28px;
        height:28px;

        left:14px;

        font-size:.82rem;
    }

    .cta-section{

        border-radius:20px;
    }

}

/*==================================================
  LANDSCAPE MOBILE OPTIMISATION
==================================================*/

@media (max-height:550px) and (orientation:landscape){

    .hero{

        padding:2.8rem 0;
    }

    .hero-grid{

        gap:2rem;
    }

    .hero h1{

        font-size:2.2rem;
    }

    .section{

        padding:3rem 0;
    }

}

/*==================================================
  TOUCH DEVICE IMPROVEMENTS
==================================================*/

@media (hover:none){

    .btn:hover,
    .terms-card:hover,
    .rights-card:hover,
    .website-card:hover,
    .contact-card:hover{

        transform:none;
    }

    .terms-list li:hover{

        transform:none;
    }

    .contact-list li:hover{

        transform:none;
    }

}

/*==================================================
  TERMS & CONDITIONS CSS
  Part 8
  Scrollbar
  Accessibility
  Print Styles
  Keyframe Animations
  Final Professional Polish
==================================================*/

/*==================================================
  PREMIUM CUSTOM SCROLLBAR
==================================================*/

html{
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}

/* Chrome, Edge & Safari */

::-webkit-scrollbar{
    width:14px;
    height:14px;
}

::-webkit-scrollbar-track{
    background:#edf3ff;
    border-radius:20px;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #2563eb 0%,
            #4f46e5 45%,
            #7c3aed 100%
        );

    border-radius:20px;
    border:3px solid #edf3ff;
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #1d4ed8,
            #4338ca,
            #6d28d9
        );
}

::-webkit-scrollbar-corner{
    background:#edf3ff;
}

/* Firefox */

*{
    scrollbar-width:thin;
    scrollbar-color:#4f46e5 #edf3ff;
}

/*==================================================
  ACCESSIBILITY
==================================================*/

/* Keyboard Focus */

:focus-visible{

    outline:3px solid #2563eb;

    outline-offset:4px;

    border-radius:6px;
}

/* Links */

a{

    transition:
        color .3s ease,
        opacity .3s ease;
}

a:hover{

    color:#2563eb;
}

a:focus-visible{

    text-decoration:underline;
}

/* Buttons */

button,
.btn{

    cursor:pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

button:disabled,
.btn:disabled{

    opacity:.6;

    cursor:not-allowed;
}

/* Inputs */

input,
textarea,
select{

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

input:focus,
textarea:focus,
select:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.15);
}

/* Better Selection */

::selection{

    background:#2563eb;

    color:#fff;
}

::-moz-selection{

    background:#2563eb;

    color:#fff;
}

/* Reduced Motion Support */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;
    }

}

/*==================================================
  PRINT STYLES
==================================================*/

@media print{

    *,
    *::before,
    *::after{

        background:transparent !important;

        color:#000 !important;

        box-shadow:none !important;

        text-shadow:none !important;

        animation:none !important;
    }

    html,
    body{

        background:#fff;

        font-size:12pt;

        line-height:1.6;
    }

    .hero{

        padding:20px 0;

        min-height:auto;
    }

    .hero::before,
    .hero::after,
    .section::before,
    .section::after,
    body::before,
    body::after{

        display:none !important;
    }

    .btn,
    .cta-section,
    .hero-actions{

        display:none !important;
    }

    .hero-grid,
    .terms-grid,
    .policy-grid,
    .rights-grid,
    .website-grid{

        display:block;
    }

    .terms-card,
    .info-card,
    .rights-card,
    .website-card,
    .contact-card{

        border:1px solid #999;

        margin-bottom:20px;

        page-break-inside:avoid;
    }

    h1,
    h2,
    h3{

        page-break-after:avoid;
    }

    p,
    li{

        page-break-inside:avoid;
    }

    a::after{

        content:" (" attr(href) ")";

        font-size:10pt;
    }

}

/*==================================================
  KEYFRAME ANIMATIONS
==================================================*/

@keyframes fadeIn{

    from{

        opacity:0;
    }

    to{

        opacity:1;
    }
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }
}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }
}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);
    }

    to{

        opacity:1;

        transform:scale(1);
    }
}

@keyframes float{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-12px);
    }

    100%{

        transform:translateY(0px);
    }
}

@keyframes pulse{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.04);
    }

    100%{

        transform:scale(1);
    }
}

@keyframes shimmer{

    0%{

        background-position:-300px 0;
    }

    100%{

        background-position:300px 0;
    }
}

@keyframes rotateGlow{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }
}

/*==================================================
  PAGE LOAD ANIMATIONS
==================================================*/

.hero-copy{

    animation:fadeLeft .9s ease both;
}

.hero-card{

    animation:fadeRight 1s ease both;
}

.section-heading{

    animation:fadeUp .8s ease both;
}

.terms-card,
.info-card,
.rights-card,
.website-card{

    animation:zoomIn .8s ease both;
}

.contact-card{

    animation:fadeUp 1s ease both;
}

/*==================================================
  FINAL PROFESSIONAL POLISH
==================================================*/

/* Smooth transitions */

*{

    transition-property:
        color,
        background-color,
        border-color,
        box-shadow,
        transform;

    transition-duration:.3s;

    transition-timing-function:ease;
}

/* Crisp Images */

img{

    display:block;

    max-width:100%;

    height:auto;

    image-rendering:auto;
}

/* Better Typography */

h1,
h2,
h3,
h4{

    text-wrap:balance;
}

p,
li{

    text-wrap:pretty;
}

/* Card Rendering */

.terms-card,
.info-card,
.rights-card,
.website-card,
.contact-card{

    will-change:transform;

    backface-visibility:hidden;

    transform:translateZ(0);
}

/* Prevent Horizontal Overflow */

body{

    overflow-x:hidden;
}

/* Better Anchors */

section{

    scroll-margin-top:110px;
}

/* Decorative Gradient Line */

.section-heading::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:18px auto 0;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #4f46e5,
            #7c3aed
        );
}

/* Premium Glow */

.hero-card:hover,
.contact-card:hover,
.cta-section:hover{

    box-shadow:
        0 30px 80px rgba(37,99,235,.22);
}

/* End of Terms & Conditions Stylesheet */

.go-top-btn{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:800;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.go-top-btn.show{
  display:flex;
  opacity:1;
}
.go-top-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(37,99,235,.45);
}