/* ==========================================================
   TERMS PAGE
   SKY SERVER LEGAL PAGE DESIGN SYSTEM
   ========================================================== */

:root{

  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-light:#eff6ff;
  --blue-mid:#dbeafe;
  --blue-border:#bfdbfe;

  --green:#22c55e;
  --orange:#f97316;
  --red:#ef4444;

  --text-1:#0f172a;
  --text-2:#334155;
  --text-3:#64748b;
  --text-4:#94a3b8;

  --border:#e2e8f0;
  --bg:#f0f6ff;
  --white:#ffffff;

  --shadow-xs:
  0 1px 2px rgba(15,23,42,.06);

  --shadow-sm:
  0 2px 8px rgba(37,99,235,.08),
  0 1px 3px rgba(0,0,0,.05);

  --shadow-md:
  0 6px 20px rgba(37,99,235,.12),
  0 2px 8px rgba(0,0,0,.06);

  --shadow-lg:
  0 16px 48px rgba(37,99,235,.16),
  0 4px 16px rgba(0,0,0,.08);

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

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --r-2xl:32px;

  --ease:cubic-bezier(.4,0,.2,1);
  --t:.22s;
}

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

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:
  opacity .6s var(--ease),
  transform .6s var(--ease);
}

.reveal.in{
  opacity:1;
  transform:none;
}

.d1{transition-delay:.08s;}
.d2{transition-delay:.16s;}
.d3{transition-delay:.24s;}
.d4{transition-delay:.32s;}
.d5{transition-delay:.40s;}
.d6{transition-delay:.48s;}

/* ==========================================================
   HERO SECTION
   ========================================================== */
   .privacy-hero .container,
.terms-hero .container,
.disclaimer-hero .container,
.abuse-hero .container,
.unlimited-hero .container{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

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

  padding:95px 0 110px;

  background:
  linear-gradient(
  145deg,
  #ffffff 0%,
  #eff6ff 40%,
  #dbeafe 100%);
}

.terms-hero::before{
  content:'';
  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

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

  background:
  radial-gradient(
  circle,
  rgba(96,165,250,.15) 0%,
  transparent 65%);

  animation:heroFloatA 8s ease-in-out infinite;
}

.terms-hero::after{
  content:'';
  position:absolute;

  width:450px;
  height:450px;

  border-radius:50%;

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

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

  animation:heroFloatB 10s ease-in-out infinite;
}

@keyframes heroFloatA{

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

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

@keyframes heroFloatB{

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

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

.terms-hero .container{
  position:relative;
  z-index:2;
  text-align:center;
}

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

.hero-badge{

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 18px;

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

  border:
  1.5px solid var(--blue-border);

  backdrop-filter:blur(6px);

  border-radius:999px;

  color:var(--blue);

  font-size:.8rem;
  font-weight:700;

  margin-bottom:24px;
}

.badge-dot{

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--blue);
}

/* ==========================================================
   BREADCRUMB
   ========================================================== */

.breadcrumb{

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

  gap:10px;

  margin-bottom:28px;

  color:var(--text-3);

  font-size:.92rem;
}

.breadcrumb a{

  color:var(--blue);

  text-decoration:none;

  transition:color var(--t);
}

.breadcrumb a:hover{
  color:var(--blue-dark);
}

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

.terms-hero h1{

  font-size:
  clamp(2.4rem,5vw,4rem);

  font-weight:800;

  line-height:1.1;

  color:var(--text-1);

  margin-bottom:20px;
}

.terms-hero h1 span{
  color:var(--blue);
}

.hero-subtitle{

  max-width:820px;

  margin:0 auto;

  color:var(--text-3);

  line-height:1.9;

  font-size:1.05rem;
}

/* ==========================================================
   LAST UPDATED
   ========================================================== */

.update-badge{

  width:max-content;

  margin:32px auto 0;

  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 18px;

  background:#fff;

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

  border-radius:999px;

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

  font-weight:700;

  color:var(--text-2);
}

.update-badge svg{

  width:18px;
  height:18px;

  color:var(--blue);
}
/* ==========================================================
   MAIN WRAPPER
   ========================================================== */

.terms-wrapper{
  padding:90px 0;
  background:#f8fbff;
}

.terms-layout{

  display:grid;

  grid-template-columns:
  300px 1fr;

  gap:40px;

  align-items:start;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.terms-sidebar{

  position:sticky;
  top:100px;
}

/* ==========================================================
   TOC CARD
   ========================================================== */

.toc-card{

  background:var(--white);

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

  border-radius:var(--r-xl);

  padding:28px;

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

  position:relative;

  overflow:hidden;
}

.toc-card::before{

  content:'';

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:3px;

  background:
  linear-gradient(
  90deg,
  var(--blue),
  #60a5fa);
}

.toc-card h3{

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

  color:var(--text-1);

  margin-bottom:22px;
}

/* ==========================================================
   TOC NAVIGATION
   ========================================================== */

.toc-nav{

  display:flex;
  flex-direction:column;

  gap:8px;
}

.toc-nav a{

  display:flex;
  align-items:center;

  position:relative;

  text-decoration:none;

  color:var(--text-2);

  font-size:.9rem;
  font-weight:600;

  padding:12px 14px;

  border-radius:12px;

  transition:
  background var(--t),
  color var(--t),
  transform var(--t);
}

.toc-nav a::before{

  content:'';

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--blue);

  margin-right:10px;

  opacity:.4;

  transition:opacity var(--t);
}

.toc-nav a:hover{

  background:var(--blue-light);

  color:var(--blue);

  transform:translateX(4px);
}

.toc-nav a:hover::before{
  opacity:1;
}

/* active state */

.toc-nav a.active{

  background:var(--blue);

  color:#fff;

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

.toc-nav a.active::before{
  background:#fff;
  opacity:1;
}

/* ==========================================================
   SUPPORT CARD
   ========================================================== */

.support-card{

  margin-top:24px;

  background:#fff;

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

  border-radius:var(--r-xl);

  padding:30px;

  text-align:center;

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

  transition:
  transform var(--t),
  box-shadow var(--t);
}

.support-card:hover{

  transform:translateY(-6px);

  box-shadow:var(--shadow-lg);
}

.support-icon{

  width:72px;
  height:72px;

  margin:0 auto 20px;

  border-radius:20px;

  background:var(--blue-light);

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

  transition:
  background var(--t),
  transform var(--t);
}

.support-card:hover .support-icon{

  background:var(--blue);

  transform:scale(1.08);
}

.support-icon svg{

  width:34px;
  height:34px;

  color:var(--blue);

  transition:color var(--t);
}

.support-card:hover .support-icon svg{
  color:#fff;
}

.support-card h4{

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

  color:var(--text-1);

  margin-bottom:10px;
}

.support-card p{

  font-size:.92rem;

  color:var(--text-3);

  line-height:1.8;

  margin-bottom:20px;
}

/* ==========================================================
   SUPPORT BUTTON
   ========================================================== */

.support-btn{

  display:block;

  text-decoration:none;

  background:var(--blue);

  color:#fff;

  padding:14px;

  border-radius:14px;

  font-weight:700;

  margin-bottom:12px;

  transition:
  background var(--t),
  transform var(--t),
  box-shadow var(--t);
}

.support-btn:hover{

  background:var(--blue-dark);

  transform:translateY(-2px);

  box-shadow:var(--shadow-blue);
}

/* ==========================================================
   TICKET BUTTON
   ========================================================== */

.ticket-btn{

  display:block;

  text-decoration:none;

  border:1.5px solid var(--blue);

  color:var(--blue);

  padding:14px;

  border-radius:14px;

  font-weight:700;

  transition:
  background var(--t),
  color var(--t),
  transform var(--t);
}

.ticket-btn:hover{

  background:var(--blue);

  color:#fff;

  transform:translateY(-2px);
}
/* ==========================================================
   CONTENT AREA
   ========================================================== */

.terms-content{
  min-width:0;
}

/* ==========================================================
   POLICY CARD
   ========================================================== */

.policy-card{

  position:relative;

  background:#fff;

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

  border-radius:32px;

  padding:55px;

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

  overflow:hidden;
}

.policy-card::before{

  content:'';

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:4px;

  background:
  linear-gradient(
  90deg,
  var(--blue),
  #60a5fa);
}

/* ==========================================================
   POLICY SECTIONS
   ========================================================== */

.policy-section{

  position:relative;

  padding-bottom:55px;

  margin-bottom:55px;

  border-bottom:
  1px solid #edf2f7;
}

.policy-section:last-child{

  margin-bottom:0;

  padding-bottom:0;

  border-bottom:none;
}

/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

.policy-section h2{

  font-size:2rem;

  line-height:1.2;

  font-weight:800;

  color:var(--text-1);

  margin-bottom:22px;
}

.policy-section h3{

  font-size:1.2rem;

  font-weight:700;

  color:var(--text-1);

  margin-top:26px;
  margin-bottom:14px;
}

.policy-section h4{

  font-size:1rem;

  font-weight:700;

  color:var(--text-2);

  margin-top:20px;
  margin-bottom:12px;
}

/* ==========================================================
   PARAGRAPHS
   ========================================================== */

.policy-section p{

  color:var(--text-3);

  line-height:1.95;

  font-size:1rem;

  margin-bottom:18px;
}

.policy-section p:last-child{
  margin-bottom:0;
}

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

.policy-section ul,
.policy-section ol{

  padding-left:24px;

  margin-top:20px;
  margin-bottom:20px;
}

.policy-section li{

  color:var(--text-2);

  line-height:1.85;

  margin-bottom:12px;
}

.policy-section li:last-child{
  margin-bottom:0;
}

.policy-section ul li::marker{
  color:var(--blue);
}

.policy-section ol li::marker{
  color:var(--blue);
  font-weight:700;
}

/* ==========================================================
   INFO BOX
   ========================================================== */

.info-box{

  margin-top:25px;

  padding:24px;

  border-radius:20px;

  background:
  linear-gradient(
  135deg,
  #eff6ff,
  #f8fbff);

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

.info-box h4{

  color:var(--blue);

  margin-bottom:10px;
}

.info-box p{
  margin:0;
}

/* ==========================================================
   WARNING BOX
   ========================================================== */

.warning-box{

  margin-top:25px;

  padding:24px;

  border-radius:20px;

  background:
  rgba(249,115,22,.08);

  border:
  1px solid
  rgba(249,115,22,.2);
}

.warning-box h4{

  color:var(--orange);

  margin-bottom:10px;
}

.warning-box p{
  margin:0;
}

/* ==========================================================
   SUCCESS BOX
   ========================================================== */

.success-box{

  margin-top:25px;

  padding:24px;

  border-radius:20px;

  background:
  rgba(34,197,94,.08);

  border:
  1px solid
  rgba(34,197,94,.18);
}

.success-box h4{

  color:var(--green);

  margin-bottom:10px;
}

.success-box p{
  margin:0;
}

/* ==========================================================
   LEGAL TABLE
   ========================================================== */

.legal-table{

  width:100%;

  margin-top:24px;

  border-collapse:collapse;

  overflow:hidden;

  border-radius:18px;

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

.legal-table thead{

  background:
  linear-gradient(
  135deg,
  var(--blue),
  #60a5fa);
}

.legal-table thead th{

  color:#fff;

  text-align:left;

  padding:16px 20px;

  font-size:.92rem;

  font-weight:700;
}

.legal-table tbody td{

  padding:16px 20px;

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

  color:var(--text-2);

  line-height:1.7;
}

.legal-table tbody tr:nth-child(even){
  background:#fafcff;
}

.legal-table tbody tr:hover{
  background:#eff6ff;
}

/* ==========================================================
   CONTACT BOX
   ========================================================== */

.policy-contact-box{

  margin-top:30px;

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

  border-radius:20px;

  overflow:hidden;

  background:#fff;
}

.policy-contact-row{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:18px 22px;

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

  transition:
  background var(--t);
}

.contact-row:last-child{
  border-bottom:none;
}

.contact-row:hover{
  background:#fafcff;
}

.contact-row span{
 margin-right: 15px;
  color:var(--text-3);

  font-weight:500;
}

.contact-row strong{

  color:var(--text-1);

  font-weight:700;
}
/* ==========================================================
   TERMS CTA SECTION
   ========================================================== */

.terms-cta{

  position:relative;

  overflow:hidden;

  margin-top:45px;

  padding:75px 55px;

  border-radius:32px;

  background:
  linear-gradient(
  135deg,
  #2563eb 0%,
  #1d4ed8 100%);

  color:#fff;

  text-align:center;

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

/* floating circles */

.terms-cta::before{

  content:'';

  position:absolute;

  width:360px;
  height:360px;

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

  border-radius:50%;

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

.terms-cta::after{

  content:'';

  position:absolute;

  width:220px;
  height:220px;

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

  border-radius:50%;

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

.cta-label{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:8px 18px;

  border-radius:999px;

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

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

  backdrop-filter:blur(8px);

  font-size:.8rem;

  font-weight:700;

  margin-bottom:22px;
}

.terms-cta h2{

  font-size:
  clamp(2rem,4vw,3rem);

  font-weight:800;

  line-height:1.15;

  margin-bottom:18px;
}

.terms-cta p{

  max-width:720px;

  margin:0 auto;

  line-height:1.9;

  opacity:.92;

  font-size:1rem;
}

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

.cta-actions{

  display:flex;

  justify-content:center;

  gap:16px;

  flex-wrap:wrap;

  margin-top:35px;
}

.primary-btn{

  display:inline-flex;

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

  min-width:210px;

  padding:15px 28px;

  background:#fff;

  color:var(--blue);

  text-decoration:none;

  font-weight:800;

  border-radius:14px;

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

.primary-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 12px 30px
  rgba(255,255,255,.22);
}

.secondary-btn{

  display:inline-flex;

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

  min-width:210px;

  padding:15px 28px;

  border-radius:14px;

  text-decoration:none;

  font-weight:800;

  color:#fff;

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

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

  backdrop-filter:blur(8px);

  transition:
  transform .25s ease,
  background .25s ease;
}

.secondary-btn:hover{

  transform:
  translateY(-3px);

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

/* ==========================================================
   SMOOTH SCROLL OFFSET
   ========================================================== */

html{
  scroll-behavior:smooth;
}

.policy-section{
  scroll-margin-top:120px;
}

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

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#f1f5f9;
}

::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
  180deg,
  #60a5fa,
  #2563eb);

  border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
  background:#1d4ed8;
}

/* ==========================================================
   LARGE LAPTOPS
   ========================================================== */

@media (max-width:1200px){

  .terms-layout{

    grid-template-columns:
    270px 1fr;

    gap:30px;
  }

  .policy-card{
    padding:45px;
  }
}

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

@media (max-width:1024px){

  .terms-layout{
    grid-template-columns:1fr;
  }

  .terms-sidebar{

    position:relative;

    top:auto;
  }

  .toc-card{
    margin-bottom:22px;
  }

  .policy-card{
    padding:40px;
  }
}

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

@media (max-width:768px){

  .terms-hero{
    padding:80px 0;
  }

  .policy-card{
    padding:32px;
  }

  .policy-section{
    padding-bottom:40px;
    margin-bottom:40px;
  }

  .policy-section h2{
    font-size:1.65rem;
  }

  .contact-row{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;
  }

  .terms-cta{

    padding:55px 30px;
  }

  .terms-cta h2{
    font-size:2rem;
  }
}

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

@media (max-width:576px){

  .hero-subtitle{
    font-size:.95rem;
  }

  .policy-card{
    padding:24px;
  }

  .toc-card{
    padding:22px;
  }

  .support-card{
    padding:22px;
  }

  .terms-cta{
    padding:45px 22px;
  }

  .terms-cta h2{
    font-size:1.7rem;
  }

  .cta-actions{
    flex-direction:column;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;
    min-width:100%;
  }

  .legal-table{
    display:block;
    overflow-x:auto;
  }
}

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

@media (max-width:420px){

  .terms-hero h1{
    font-size:2.2rem;
  }

  .update-badge{

    font-size:.78rem;

    padding:10px 14px;
  }

  .policy-section h2{
    font-size:1.45rem;
  }

  .policy-section p,
  .policy-section li{
    font-size:.94rem;
  }
}