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

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"DM Sans",sans-serif;
  background:#fff;
  color:#070b16;
  overflow-x:hidden;
}

.page-shell{
  width:min(1600px,94%);
  margin:0 auto;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:32px;
  padding:32px 0 0;
}

.site-sidebar{
  position:sticky;
  top:110px;
  height:fit-content;
  padding:24px;
  border-radius:30px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(18px);
}

.site-sidebar-header{
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:18px;
}

.site-sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.site-brand-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#7f5cff,#00d4ff);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,0.22);
}

.site-brand-name{
  display:block;
  font-family:"Syne",sans-serif;
  font-weight:800;
  font-size:1.1rem;
}

.site-brand-note{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,0.58);
  font-size:0.84rem;
}

.site-sidebar-nav ul{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.site-sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:16px;
  color:rgba(255,255,255,0.74);
  transition:0.3s ease;
}

.site-sidebar-nav a i{
  width:18px;
  text-align:center;
}

.site-sidebar-nav a:hover{
  background:linear-gradient(135deg,rgba(127,92,255,0.25),rgba(0,212,255,0.18));
  color:#fff;
  transform:translateX(5px);
}

.site-sidebar-footer{
  display:flex;
  gap:14px;
  padding-top:18px;
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.site-sidebar-footer a{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  color:#d7def7;
  transition:0.3s ease;
}

.site-sidebar-footer a:hover{
  background:linear-gradient(135deg,#7f5cff,#00d4ff);
  color:#fff;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

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

body::before{
  content:"";

  position:fixed;
  inset:0;

  background:
  radial-gradient(circle at top left,
  rgba(127,92,255,0.18),
  transparent 30%),

  radial-gradient(circle at bottom right,
  rgba(0,212,255,0.18),
  transparent 30%);

  z-index:-2;
}

body::after{
  content:"";

  position:fixed;
  inset:0;

  background-image:
  linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.04) 1px, transparent 1px);

  background-size:45px 45px;

  z-index:-1;
}


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

.hero{
  padding:120px 7% 90px;
  text-align:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 22px;

  border-radius:999px;

  background:rgba(255,255,255,0.08);

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

  margin-bottom:28px;

  font-size:14px;
  font-weight:700;
}

.hero h1{
  font-size:clamp(3rem,8vw,6rem);

  line-height:1;

  font-family:"Syne",sans-serif;

  margin-bottom:28px;
}



.gradient-text{
  background:linear-gradient(
    90deg,
    #00d4ff,
    #7f5cff,
    #ff4fd8
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
  max-width:800px;

  margin:auto;

  line-height:1.8;

  color:#ff4fd8;

  font-size:1.08rem;
}

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

.content-wrapper{
  width:100%;
  margin:0;

  display:grid;
  grid-template-columns:300px 1fr;

  gap:35px;

  padding-bottom:100px;
}

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

.policy-sidebar{
  position:sticky;
  top:110px;

  height:fit-content;

  padding:30px;

  border-radius:30px;

  background:orangered;

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

  backdrop-filter:blur(18px);
  margin-left: 100px;
}

.policy-sidebar h3{
  margin-bottom:24px;
}

.policy-sidebar ul{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.policy-sidebar a{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 16px;

  border-radius:16px;

  color:rgba(255,255,255,0.72);

  transition:0.3s ease;
}

.policy-sidebar a:hover{
  background:linear-gradient(
    135deg,
    rgba(127,92,255,0.25),
    rgba(0,212,255,0.18)
  );

  color:#fff;

  transform:translateX(5px);
}

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

.policy-content{
  display:flex;
  flex-direction:column;
  gap:30px;
}

.policy-card{
  padding:40px;

  border-radius:32px;

  background:rgba(255,255,255,0.06);

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

  backdrop-filter:blur(18px);
}

.policy-card h2{
  display:flex;
  align-items:center;
  gap:14px;

  margin-bottom:22px;

  font-size:1.8rem;

  font-family:"Syne",sans-serif;
}

.policy-card p{
  line-height:1.9;

  color:#7f5cff;

  margin-bottom:20px;
}

.policy-card ul{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.policy-card li{
  display:flex;
  gap:14px;

  line-height:1.7;

  color:palevioletred;
}

/* =====================================================
   COOKIE GRID
===================================================== */

.cookie-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
}

.cookie-box{
  padding:28px;

  border-radius:24px;

  background:rgba(255,255,255,0.05);

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

.cookie-icon{
  width:62px;
  height:62px;

  display:grid;
  place-items:center;

  border-radius:18px;

  margin-bottom:20px;

  font-size:1.4rem;

  background:linear-gradient(
    135deg,
    #7f5cff,
    #00d4ff
  );
}

.cookie-box p{
  color:black;
  line-height:1.7;
}

/* =====================================================
   BANNER
===================================================== */

.cookie-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;

  padding:30px;

  border-radius:26px;

  background:linear-gradient(
    135deg,
    rgba(127,92,255,0.22),
    rgba(0,212,255,0.16)
  );

  margin-top:30px;
}

.banner-content{
  flex:1;
}

.banner-content h3{
  margin-bottom:10px;
}

.banner-content p{
  color:blueviolet;
}

.banner-actions{
  display:flex;
  gap:14px;
}

.banner-btn{
  padding:14px 24px;

  border:none;
  border-radius:16px;

  font-weight:700;

  cursor:pointer;
}

.accept-btn{
  background:linear-gradient(
    135deg,
    #7f5cff,
    #00d4ff
  );

  color:white;
}

.settings-btn{
  background:linear-gradient(
    135deg,
    #7f5cff,
    #00d4ff
  );

  color:white;
}
/* COOKIE STATS */

.cookie-stats-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  
  gap:30px;
  
}

.stats-header p{
  color:#6b7280;
  margin-top:10px;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:20px;
}

.stat-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:30px 20px;
  text-align:center;
  transition:.3s ease;
}

.stat-box:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

.stat-circle{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-block;
  margin-bottom:15px;
}

.essential{
  background:#3b82f6;
}

.analytics{
  background:#8b5cf6;
}

.preference{
  background:#f59e0b;
}

.marketing{
  background:#ef4444;
}

.stat-box h3{
  font-size:2rem;
  margin-bottom:8px;
  color:#111827;
}

.stat-box p{
  color:#6b7280;
}
/* COOKIE TIMELINE */

.cookie-timeline{
  position:relative;
  margin-top:30px;
  padding-left:30px;
}

.cookie-timeline::before{
  content:"";
  position:absolute;
  left:7px;
  top:0;
  width:3px;
  height:100%;
  background:#e5e7eb;
}

.timeline-item{
  position:relative;
  margin-bottom:35px;
}

.timeline-dot{
  position:absolute;
  left:-30px;
  top:5px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 0 0 6px rgba(99,102,241,0.1);
}

.timeline-content{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  padding:20px;
  border-radius:18px;
}

.timeline-content h3{
  margin-bottom:8px;
  color:#111827;
}

.timeline-content p{
  color:#6b7280;
}
/* FLOATING CARD */

.floating-cookie-card{
  position:fixed;
  bottom:30px;
  right:30px;
  width:320px;
  
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:24px;
  padding:20px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
  z-index:1000;
}

.floating-icon{
  width:55px;
  height:55px;
  border-radius:18px;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:1.3rem;
  flex-shrink:0;
}

.floating-cookie-card h3{
  margin-bottom:6px;
  color:#111827;
}

.floating-cookie-card p{
  color:#6b7280;
  line-height:1.5;
}

@media(max-width:768px){

  .floating-cookie-card{
    width:90%;
    right:5%;
    bottom:20px;
  }

}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin-left: var(--sidebar-w);
  background: #111;
  color: #aaa;
  padding: 0;
  margin-top: 60px;
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
  gap: 40px;
  padding: 56px 48px 40px;
  max-width: 100%;
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
}

.footer-col p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.footer-col h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  color: #888;
  text-decoration: none;
  font-size: 14px;
  position: relative; /* needed for underline effect */
  transition: color var(--transition);
}

/* Hover effect: color + underline */
.footer-col ul li a:hover {
  color: var(--accent);
}

/* Animated underline effect */
.footer-col ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* adjust spacing under text */
  width: 0%;
  height: 2px;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.footer-col ul li a:hover::after {
  width: 100%;
}

.socials {
  display: flex;
  gap: 12px;
}

.socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  text-decoration: none;
  font-size: 14px;
  transition: all var(--transition);
}

.socials a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}

.newsletter-form input:focus {
  border-color: var(--accent);
}

.newsletter-form button {
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.newsletter-form button:hover {
  background: #d45c28;
}

.footer-bottom {
  border-top: 1px solid #1e1e1e;
  padding: 20px 48px;
  text-align: center;
  font-size: 13px;
  color: #aaa;
}
/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1000px){

  .page-shell{
    grid-template-columns:1fr;
    width:min(1200px,92%);
    padding-top:18px;
  }

  .site-sidebar{
    position:relative;
    top:0;
  }

  .content-wrapper{
    grid-template-columns:1fr;
  }

  .policy-sidebar{
    position:relative;
    top:0;
  }

}

@media(max-width:768px){

  .navbar{
    flex-direction:column;
    gap:18px;
  }

  .page-shell{
    width:92%;
  }

  .nav-links{
    flex-wrap:wrap;
    justify-content:center;
  }

  .cookie-banner{
    flex-direction:column;
    align-items:flex-start;
  }

  .policy-card{
    padding:28px;
  }

}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111;
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
}

.banner-actions {
  display: flex;
  gap: 0.5rem;
}

.banner-btn {
  background: #7f5cff;
  border: none;
  padding: 0.5rem 1rem;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.banner-btn:hover {
  background: #5a3dff;
}

.cookie-modal {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  padding: 1.5rem;
  border-radius: 8px;
  color: #fff;
  z-index: 10000;
}

.hidden {
  display: none;
}