/* =====================================================================
   DISK CLOUDS — Cloud storage SaaS landing page
   All custom classes are scoped with the "dc-" prefix.
   ===================================================================== */

:root{
  /* palette */
  --dc-primary: #30b0fe;
    --dc-primary-600: #1881c1;
    --dc-primary-700: #156ba1;
    --dc-accent: #56b3d7;
  --dc-lav:          #B9A7F5;
  --dc-ink:          #0C1633;
  --dc-ink-soft:     #16224a;
  --dc-slate:        #5A6787;
  --dc-slate-2:      #7C88A6;
  --dc-sky:          #EEF3FF;
  --dc-sky-2:        #E4EBFF;
  --dc-cloud:        #F8FAFF;
  --dc-white:        #FFFFFF;
  --dc-line:         #E6ECF7;
  --dc-line-strong:  #D7E0F2;

  /* file type colors */
  --dc-pdf:#EF5B6E; --dc-doc:#3B5BE8; --dc-img:#22A98B; --dc-vid:#E4913B;

  /* type */
  --dc-display: "Bricolage Grotesque", system-ui, sans-serif;
  --dc-body: "Inter", system-ui, -apple-system, sans-serif;

  /* radii + shadow */
  --dc-r-sm: 12px;
  --dc-r: 18px;
  --dc-r-lg: 26px;
  --dc-shadow-sm: 0 4px 16px rgba(20,40,90,.06);
  --dc-shadow: 0 18px 48px rgba(24,44,102,.10);
  --dc-shadow-lg: 0 30px 80px rgba(24,44,102,.16);
  --dc-ring: 0 0 0 1px var(--dc-line);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  font-family:var(--dc-body);
  color:var(--dc-ink);
  background:var(--dc-cloud);
  margin:0;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
h1,h2,h3,h4{ font-family:var(--dc-display); font-weight:700; letter-spacing:-.02em; line-height:1.08; margin:0; }
p{ margin:0; }
img{ max-width:100%; }
::selection{ background:var(--dc-accent); color:#fff; }

/* ---------- shared section rhythm ---------- */
.dc-section, .section{ padding:70px 0; position:relative; }
.dc-section--tint{ background:var(--dc-sky); }
.dc-section-head{ max-width:100%; margin:0 auto 56px; }
.dc-section-head.text-center{ margin-left:auto; margin-right:auto; }
.dc-h1{ font-size:clamp(2.5rem,5.2vw,4rem); font-weight:800; }
.dc-h2{ font-size:clamp(1.9rem,3.4vw,2.85rem); font-weight:700; }
.dc-h2--onDark{ color:#fff; }
.dc-section-sub{ color:var(--dc-slate); font-size:1.075rem; margin-top:16px; }
.dc-section-sub--left{ margin-left:0; }
.dc-section-sub--onDark{ color:#A7B2D4; }

/* ---------- tags / eyebrows ---------- */
.dc-tag{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dc-primary);
  background:var(--dc-cloud); border:1px solid var(--dc-line-strong);
  padding:6px 14px; border-radius:100px; margin-bottom:18px;
}
.dc-tag--onDark{ color:var(--dc-cloud); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.dc-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:500;
  color:var(--dc-primary-600); background:#fff; border:1px solid var(--dc-line);
  padding:7px 15px; border-radius:100px; margin-bottom:24px; box-shadow:var(--dc-shadow-sm);
}
.dc-dot{ width:8px; height:8px; border-radius:50%; background:var(--dc-primary);
  box-shadow:0 0 0 4px rgba(59,91,232,.15); }

/* ---------- buttons ---------- */
.dc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--dc-body); font-weight:600; font-size:.98rem;
  padding:14px 26px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
  white-space:nowrap;
}
.dc-btn-sm{ padding:10px 20px; font-size:.9rem; }
.dc-btn-primary{
  background:linear-gradient(135deg,var(--dc-primary),var(--dc-primary-600));
  color:#fff; box-shadow:0 10px 26px rgba(59,91,232,.32);
}
.dc-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(59,91,232,.42); color:#fff; }
.dc-btn-ghost{ background:#fff; color:var(--dc-ink); border-color:var(--dc-line-strong); box-shadow:var(--dc-shadow-sm); }
.dc-btn-ghost:hover{ transform:translateY(-2px); border-color:var(--dc-accent); color:var(--dc-primary-600); }
.dc-btn-ghost--onDark{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.2); box-shadow:none; }
.dc-btn-ghost--onDark:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); }
.dc-btn-outline{ background:#fff; color:var(--dc-primary-600); border-color:var(--dc-line-strong); }
.dc-btn-outline:hover{ transform:translateY(-2px); border-color:var(--dc-primary); color:var(--dc-primary-700); }
.dc-btn-light{ background:#fff; color:var(--dc-primary-700); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.dc-btn-light:hover{ transform:translateY(-2px); color:var(--dc-primary-700); box-shadow:0 18px 40px rgba(0,0,0,.26); }

/* generic card */
.dc-card{ background:#fff; border:1px solid var(--dc-line); border-radius:var(--dc-r); box-shadow:var(--dc-shadow); }

/* file type badge */
.dc-file{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:38px; height:38px; border-radius:10px; font-size:.62rem; font-weight:700; color:#fff; letter-spacing:.02em; }
.dc-file--pdf{ background:var(--dc-pdf); } .dc-file--doc{ background:var(--dc-doc); }
.dc-file--img{ background:var(--dc-img); } .dc-file--vid{ background:var(--dc-vid); }

/* avatars */
.dc-avatars{ display:flex; }
.dc-avatars span{ width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; margin-left:-10px;
  background:linear-gradient(135deg,hsl(calc(210 + var(--i)*22) 78% 66%),hsl(calc(230 + var(--i)*22) 70% 55%)); }
.dc-avatars span:first-child{ margin-left:0; }
.dc-avatars--sm span{ width:26px; height:26px; }

/* progress bars */
.dc-progress{ height:6px; border-radius:100px; background:var(--dc-sky-2); overflow:hidden; }
.dc-progress i{ display:block; height:100%; border-radius:100px;
  background:linear-gradient(90deg,var(--dc-primary),var(--dc-accent)); }
.dc-progress--lg{ height:8px; }
.dc-progress--anim i{ width:68%; animation:dcFill 3.2s ease-in-out infinite; }
@keyframes dcFill{ 0%,100%{ width:44%; } 50%{ width:78%; } }

.dc-live{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#38C98B;
  box-shadow:0 0 0 3px rgba(56,201,139,.22); margin-right:6px; animation:dcPulse 2s infinite; }
.dc-live--green{ background:#38C98B; }
@keyframes dcPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* =====================================================================
   HEADER
   ===================================================================== */
.dc-header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:padding .3s, background .3s; }
.dc-header.dc-scrolled{ padding:10px 0; background:rgba(248,250,255,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--dc-line); }
.dc-nav{ display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border:1px solid var(--dc-line); border-radius:100px; padding:10px 12px 10px 22px;
  box-shadow:var(--dc-shadow-sm); }
.dc-brand{ display:flex; align-items:center; gap:10px; font-family:var(--dc-display);
  font-weight:800; font-size:1.15rem; letter-spacing:-.02em; max-width: 220px; }
.dc-brand-mark{ display:inline-flex; }
.dc-nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.dc-nav-links a{ font-size:.95rem; font-weight:500; color:var(--dc-slate); transition:color .2s; }
.dc-nav-links a:hover{ color:var(--dc-ink); }
.dc-nav-actions{ display:flex; align-items:center; gap:14px; }
.dc-link-quiet{ font-size:.95rem; font-weight:500; color:var(--dc-slate); }
.dc-link-quiet:hover{ color:var(--dc-ink); }
.dc-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.dc-burger span{ width:22px; height:2px; background:var(--dc-ink); border-radius:2px; transition:.3s; }
.dc-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.dc-burger.open span:nth-child(2){ opacity:0; }
.dc-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.dc-mobile-menu{ display:none; flex-direction:column; gap:4px; margin-top:12px; padding:18px;
  background:#fff; border:1px solid var(--dc-line); border-radius:var(--dc-r); box-shadow:var(--dc-shadow); }
.dc-mobile-menu.open{ display:flex; }
.dc-mobile-menu a{ padding:12px 8px; font-weight:500; color:var(--dc-ink); border-radius:10px; }
.dc-mobile-menu a:hover{ background:var(--dc-sky); }

/* =====================================================================
   HERO
   ===================================================================== */
/* =====================================================================
   HERO  — centered hub composition (replaces the previous .dc-hero block)
   Reuses existing tokens (--dc-*), .dc-btn*, .dc-file* and .container
   ===================================================================== */
.dc-hero{position:relative;padding:150px 0 92px;overflow:hidden;background: url(../../images/earth.png)no-repeat;background-size: 600px;background-position: 50% 45%;}
.dc-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(47, 107, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 107, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(75% 70% at 50% 30%, #000 40%, transparent 100%);
    mask-image: radial-gradient(75% 70% at 50% 30%, #000 40%, transparent 100%);
    z-index: 1;
}
.dc-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(88% 55% at 50% -8%, rgba(138,160,251,.32), transparent 60%),
    radial-gradient(60% 46% at 10% 22%, rgba(185,167,245,.22), transparent 55%),
    radial-gradient(60% 46% at 92% 26%, rgba(138,160,251,.18), transparent 55%),
    linear-gradient(180deg, var(--dc-sky) 0%, #F1F1FB 52%, #FCF4F1 100%);
  z-index: -1;
}
.dc-hero .container{ position:relative; z-index:1; }

/* headline */
.dc-hero-intro{ max-width:800px; margin:0 auto; text-align:center; }
.dc-hero-title{ font-family:var(--dc-display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(2.4rem,5vw,3.9rem); line-height:1.06; }
.dc-hero-sub{ color:var(--dc-ink-soft); font-size:1.12rem; margin:20px auto 0; max-width:600px; }

/* stage */
.dc-hero-stage{     position: relative;
    max-width: 800px;
    margin: 56px auto 0;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center; }
@media (min-width: 1200px){
  .dc-hero-stage{
    margin: 0 auto;
  }
}
/* ---- central hub ---- */
.dc-hero-hub{ position:relative; z-index:5; width:400px; max-width:92%;
  background:#fff; border:1px solid var(--dc-line); border-radius:26px;
  box-shadow:0 40px 90px rgba(24,44,102,.16); padding:22px; }
.dc-hero-hub-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dc-hero-hub-name{ font-family:var(--dc-display); font-weight:700; font-size:1rem; color:var(--dc-ink); }
.dc-hero-hub-menu{ display:flex; gap:4px; }
.dc-hero-hub-menu i{ width:4px; height:4px; border-radius:50%; background:var(--dc-line-strong); }

.dc-hero-upload{ position:relative; display:flex; justify-content:center; margin:14px 0 18px; }
.dc-hero-upload-ring{ position:absolute; top:50%; left:50%; width:104px; height:104px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(59,91,232,.16), transparent);
  animation:dcHeroPulse 3s ease-in-out infinite; }
.dc-hero-upload-btn{ position:relative; width:66px; height:66px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--dc-accent) 0%, var(--dc-primary) 100%); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 32px rgba(59,91,232,.42); transition:transform .2s ease; }
.dc-hero-upload-btn:hover{ transform:translateY(-2px) scale(1.03); }
@keyframes dcHeroPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.9; }
  50%{ transform:translate(-50%,-50%) scale(1.12); opacity:.5; } }

.dc-hero-hub-hint{ text-align:center; font-size:.9rem; color:var(--dc-slate); line-height:1.5;
  max-width:290px; margin:0 auto 16px; }

.dc-hero-suggest{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:12px;
  background:var(--dc-cloud); border:1px solid var(--dc-line); border-radius:14px; }
.dc-hero-suggest .dc-file{ width:30px; height:30px; font-size:.54rem; }
.dc-hero-suggest-name{ flex:1; font-size:.86rem; font-weight:500; color:var(--dc-ink); }
.dc-hero-suggest-time{ font-size:.75rem; color:var(--dc-slate-2); }

.dc-hero-search{ padding:2px; border-radius:100px;
  background:linear-gradient(90deg, var(--dc-primary), var(--dc-accent) 55%, var(--dc-lav));
  box-shadow:0 8px 22px rgba(59,91,232,.16); }
.dc-hero-search-inner{ display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:100px; padding:11px 11px 11px 16px; }
.dc-hero-search-ico{ color:var(--dc-slate-2); flex:0 0 auto; }
.dc-hero-search-ph{ flex:1; font-size:.9rem; color:var(--dc-slate-2); }
.dc-hero-search-go{ flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--dc-primary), var(--dc-primary-600));
  display:flex; align-items:center; justify-content:center; }

/* ---- floating stat cards ---- */
.dc-hero-fc{ position:absolute; z-index:4; background:#fff; border:1px solid var(--dc-line);
  border-radius:18px; box-shadow:0 22px 50px rgba(24,44,102,.12);
  padding:16px 18px; animation:dcHeroFloat 6s ease-in-out infinite; }
.dc-hero-fc-num{ display:block; font-family:var(--dc-display); font-weight:800; font-size:1.9rem;
  letter-spacing:-.02em; color:var(--dc-ink); line-height:1; }
.dc-hero-fc-num2{ display:block; font-family:var(--dc-display); font-weight:800; font-size:1.3rem;
  color:var(--dc-ink); line-height:1; }
.dc-hero-fc-big{ display:block; font-family:var(--dc-display); font-weight:800; font-size:1.55rem;
  color:var(--dc-ink); margin:2px 0 10px; }
.dc-hero-fc-big2{ display:block; font-family:var(--dc-display); font-weight:800; font-size:1.5rem;
  color:var(--dc-ink); line-height:1.05; }
.dc-hero-fc-label{ display:block; font-size:.74rem; color:var(--dc-slate); line-height:1.35; margin-top:6px; }
.dc-hero-fc-cap{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:var(--dc-slate-2); text-transform:uppercase; margin-bottom:2px; }
.dc-hero-fc-trend{ display:inline-block; font-size:.72rem; font-weight:600; color:#1f9e6d;
  background:#E7F8F0; padding:3px 8px; border-radius:100px; margin-top:8px; }

.dc-hero-spark{ width:96px; height:36px; margin-top:10px; }
.dc-hero-mini-bars{ display:flex; align-items:flex-end; gap:5px; height:40px; }
.dc-hero-mini-bars i{ width:8px; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, var(--dc-accent), var(--dc-primary)); }
.dc-hero-mini-bars--sm{ height:30px; }
.dc-hero-mini-bars--sm i{ width:7px; }

.dc-hero-fc-ico{ width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  background:var(--dc-sky); color:var(--dc-primary); display:flex; align-items:center; justify-content:center; }
.dc-hero-fc-circle{ width:44px; height:44px; border-radius:13px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--dc-sky), var(--dc-sky-2)); color:var(--dc-primary);
  display:flex; align-items:center; justify-content:center; }
.dc-hero-donut{ width:52px; height:52px; flex:0 0 auto; }

/* card-specific layout */
.dc-hero-fc--a{ top:26px; left:0; transform:rotate(-3deg); }
.dc-hero-fc--a2{ top:188px; left:24px; display:flex; align-items:center; gap:11px; animation-delay:1.2s; }
.dc-hero-fc--b{ top:14px; right:0; text-align:left; animation-delay:.6s; transform:rotate(2.5deg); }
.dc-hero-fc--c{ top:210px; right:-8px; animation-delay:1.8s; transform:rotate(-2deg); }
.dc-hero-fc--d{ bottom:52px; left:-30px; display:flex; align-items:center; gap:13px;
  animation-delay:1s; transform:rotate(-2.5deg); }
.dc-hero-fc--e{ bottom:30px; right:2px; display:flex; align-items:center; gap:13px;
  animation-delay:1.5s; transform:rotate(3deg); }

@keyframes dcHeroFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -13px; } }

/* CTAs */
.dc-hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top: 30px; }

/* ---------- responsive ---------- */
@media (max-width:991px){
  .dc-hero{ padding:128px 0 72px; }
  .dc-hero-stage{ min-height:520px; }
  .dc-hero-fc--a{ left:-8px; } .dc-hero-fc--b{ right:-8px; }
  .dc-hero-fc--c{ display:none; } .dc-hero-fc--a2{ left:0; }
}
@media (max-width:767px){
  .dc-hero-stage{ min-height:460px; margin-top:40px; }
  .dc-hero-fc{ padding:13px 14px; transform:none !important; }
  .dc-hero-fc-num{ font-size:1.5rem; } .dc-hero-fc-big{ font-size:1.3rem; }
  .dc-hero-fc--a{ top:0; left:-6px; } .dc-hero-fc--a2{ display:none; }
  .dc-hero-fc--b{ top:-6px; right:-6px; }
  .dc-hero-fc--d{ bottom:8px; left:-8px; } .dc-hero-fc--e{ bottom:0; right:-8px; }
  .dc-hero-hub{ width:340px; }
}
@media (max-width:479px){
  .dc-hero-stage{ min-height:520px; }
  .dc-hero-fc--a,.dc-hero-fc--b{ scale:.82; }
  .dc-hero-fc--d,.dc-hero-fc--e{ scale:.8; }
  .dc-hero-fc--d{ left:-14px; bottom:0; } .dc-hero-fc--e{ right:-14px; bottom:-4px; }
  .dc-hero-hub{ width:300px; padding:18px; }
}
@media (prefers-reduced-motion:reduce){
  .dc-hero-fc,.dc-hero-upload-ring{ animation:none !important; }
}
/* =====================================================================
   FEATURES — BENTO
   ===================================================================== */
.dc-bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; gap:22px; }
.dc-bento-card{ position:relative; background:#fff; border:1px solid var(--dc-line); border-radius:var(--dc-r-lg);
  padding:28px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  display:flex; flex-direction:column; }
.dc-bento-card:hover{ transform:translateY(-4px); box-shadow:var(--dc-shadow); border-color:var(--dc-line-strong); }
.dc-bento-card h3{ font-size:1.22rem; margin-bottom:8px; }
.dc-bento-card p{ font-size:.94rem; color:var(--dc-slate); }
.dc-bento-icon{ flex: 0 0 48px; width:48px; height:48px; border-radius:14px; background:var(--dc-sky); color:var(--dc-primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

/* bento placement — VestDesk-style with tall feature centre */
.dc-b1{ grid-column:1; grid-row:1; }
.dc-b2{ grid-column:2; grid-row:1 / span 2; }   /* featured, tall */
.dc-b3{ grid-column:3; grid-row:1; }
.dc-b4{ grid-column:1; grid-row:2; }
.dc-b6{ grid-column:3; grid-row:2; }
.dc-b5{ grid-column:1 / span 3; grid-row:3; }   /* wide slider row */

/* featured */
.dc-bento-card--feature{ background:linear-gradient(160deg,var(--dc-primary),var(--dc-primary-700));
  border-color:transparent; color:#fff; justify-content:flex-start; }
.dc-bento-card--feature h3{ color:#fff; font-size:1.5rem; }
.dc-bento-card--feature p{ color:rgba(255,255,255,.82); font-size:1rem; }
.dc-bento-icon--light{ background:rgba(255,255,255,.15); color:#fff; }
.dc-bento-feature-glow{ position:absolute; bottom:-80px; right:-60px; width:260px; height:260px;
  background:radial-gradient(closest-side,rgba(185,167,245,.6),transparent); filter:blur(10px); }
.dc-sync-viz{ margin-top:auto; display:flex; align-items:center; gap:6px; padding-top:20px; }
.dc-sync-node{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.dc-sync-hub{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; }
.dc-sync-line{ flex:1; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  background-size:200% 100%; animation:dcFlow 2s linear infinite; }
@keyframes dcFlow{ to{ background-position:-200% 0; } }

.dc-lockstrip{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; padding-top:16px; }
.dc-lockstrip span{ font-size:.72rem; font-weight:600; color:var(--dc-primary-600);
  background:var(--dc-sky); border-radius:100px; padding:5px 11px; }
.dc-platform-pills{ margin-top:auto; display:flex; flex-wrap:wrap; gap:7px; padding-top:14px; }
.dc-platform-pills span{ font-size:.72rem; font-weight:600; color:var(--dc-slate);
  border:1px solid var(--dc-line); border-radius:100px; padding:5px 11px; }

/* slider card */
.dc-b5{ flex-direction:row; align-items:center; gap:40px; }
.dc-b5 p{
  max-width: 500px;
}
.dc-b5 h3{ margin-bottom:6px; }
.dc-b5 > div:first-child{ flex:0 0 auto; }
.dc-slider{ flex:1; }
.dc-slider-track{ position:relative; height:8px; border-radius:100px; background:var(--dc-sky-2); }
.dc-slider-track i{ position:absolute; left:0; top:0; height:100%; width:46%; border-radius:100px;
  background:linear-gradient(90deg,var(--dc-primary),var(--dc-accent)); }
.dc-slider-knob{ position:absolute; left:46%; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--dc-primary);
  box-shadow:0 4px 12px rgba(59,91,232,.35); animation:dcKnob 4s ease-in-out infinite; }
@keyframes dcKnob{ 0%,100%{ left:30%; } 50%{ left:72%; } }
.dc-slider-labels{ display:flex; justify-content:space-between; margin-top:12px; font-size:.8rem; color:var(--dc-slate-2); font-weight:500; }

/* =====================================================================
   HOW IT WORKS — DARK
   ===================================================================== */
.dc-dark{ background:var(--dc-ink); position:relative; overflow:hidden; }
.dc-hiw{ padding:70px 0; background:var(--dc-cloud); position:relative; }
.dc-hiw-head{ max-width:660px; margin:0 auto 60px; text-align:center; }
.dc-hiw-head .dc-h2{ margin-top:4px; }

/* track: 3 step columns + 2 connector columns */
.dc-hiw-track{ display:grid; grid-template-columns:1fr 62px 1fr 62px 1fr; align-items:start; }
.dc-hiw-step{ display:flex; flex-direction:column; }

/* --- the mockup card --- */
.dc-hiw-card{ height:264px; background:#fff; border:1px solid var(--dc-line);
  border-radius:22px; box-shadow:0 18px 44px rgba(24,44,102,.09); padding:20px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.dc-hiw-step:hover .dc-hiw-card{ transform:translateY(-4px); box-shadow:0 26px 60px rgba(24,44,102,.14); }
.dc-hiw-card--feature{ transform:scale(1.045); border-color:transparent;
  box-shadow:0 30px 70px rgba(59,91,232,.22); }
.dc-hiw-step:hover .dc-hiw-card--feature{ transform:scale(1.045) translateY(-4px); }

/* window chrome */
.dc-hiw-win{ display:flex; align-items:center; gap:10px; padding-bottom:14px;
  margin-bottom:14px; border-bottom:1px solid var(--dc-line); }
.dc-hiw-win-title{ font-family:var(--dc-display); font-weight:700; font-size:.92rem; color:var(--dc-ink); }
.dc-hiw-dots{ display:flex; gap:5px; }
.dc-hiw-dots i{ width:8px; height:8px; border-radius:50%; background:var(--dc-line-strong); }
.dc-hiw-badge{ margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:600; color:#1f9e6d; background:#E7F8F0; padding:4px 9px; border-radius:100px; }
.dc-hiw-live{ width:6px; height:6px; border-radius:50%; background:#38C98B; }

/* step 1 — plan picker */
.dc-hiw-plan{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:10px;
  border:1px solid var(--dc-line); border-radius:13px; }
.dc-hiw-plan--sel{ border-color:var(--dc-primary); background:var(--dc-sky);
  box-shadow:0 0 0 3px rgba(59,91,232,.10); }
.dc-hiw-radio{ width:16px; height:16px; border-radius:50%; border:2px solid var(--dc-line-strong); flex:0 0 auto; }
.dc-hiw-radio--on{ border-color:var(--dc-primary); background:
  radial-gradient(circle at center, var(--dc-primary) 0 4px, #fff 5px 16px); }
.dc-hiw-plan-name{ font-weight:600; font-size:.9rem; color:var(--dc-ink); }
.dc-hiw-plan-price{ margin-left:auto; font-family:var(--dc-display); font-weight:700; font-size:.95rem; color:var(--dc-ink); }
.dc-hiw-plan-price i{ font-style:normal; font-weight:500; font-size:.72rem; color:var(--dc-slate-2); }

/* step 2 — dashboard */
.dc-hiw-dash{ background:linear-gradient(150deg, var(--dc-primary), var(--dc-primary-700));
  border-radius:16px; padding:16px 18px; color:#fff; margin-bottom:12px; }
.dc-hiw-dash-cap{ display:block; font-size:.72rem; color:rgba(255,255,255,.72); margin-bottom:4px; }
.dc-hiw-dash-num{ display:block; font-family:var(--dc-display); font-weight:800; font-size:1.9rem; line-height:1; }
.dc-hiw-dash-num small{ font-size:.9rem; font-weight:700; margin-left:2px; }
.dc-hiw-dash-num em{ font-style:normal; font-size:.82rem; font-weight:500; color:rgba(255,255,255,.75); }
.dc-hiw-dash-bar{ height:6px; border-radius:100px; background:rgba(255,255,255,.22); margin:12px 0 10px; overflow:hidden; }
.dc-hiw-dash-bar i{ display:block; height:100%; border-radius:100px;
  background:linear-gradient(90deg,#fff,var(--dc-lav)); }
.dc-hiw-dash-chip{ display:inline-block; font-size:.7rem; font-weight:500; color:#fff;
  background:rgba(255,255,255,.16); padding:4px 10px; border-radius:100px; }
.dc-hiw-dash-row{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.dc-hiw-avatars{ display:flex; }
.dc-hiw-avatars span{ width:24px; height:24px; border-radius:50%; border:2px solid #fff; margin-left:-8px;
  background:linear-gradient(135deg,var(--dc-accent),var(--dc-primary)); }
.dc-hiw-avatars span:first-child{ margin-left:0; }
.dc-hiw-avatars span:nth-child(2){ background:linear-gradient(135deg,#7BD0B4,#22A98B); }
.dc-hiw-avatars span:nth-child(3){ background:linear-gradient(135deg,var(--dc-lav),#9B7FE8); }
.dc-hiw-dash-user{ font-size:.8rem; font-weight:500; color:var(--dc-slate); }

/* step 3 — drop + files */
.dc-hiw-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed var(--dc-line-strong); border-radius:14px; padding:14px; margin-bottom:12px;
  background:var(--dc-sky); }
.dc-hiw-drop-ico{ width:38px; height:38px; border-radius:11px; background:#fff; color:var(--dc-primary);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(59,91,232,.16); }
.dc-hiw-drop-txt{ font-size:.8rem; font-weight:600; color:var(--dc-primary-600); }
.dc-hiw-files{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.dc-hiw-file{ display:flex; align-items:center; gap:9px; padding:9px 10px;
  border:1px solid var(--dc-line); border-radius:11px; font-size:.78rem; font-weight:500; color:var(--dc-ink); }
.dc-hiw-file .dc-file{ width:28px; height:28px; font-size:.5rem; }

/* --- connector --- */
.dc-hiw-connector{ margin-top:100px; }        /* vertically centres on the 264px card */
.dc-hiw-connector svg{ width:100%; height:64px; display:block; overflow:visible; }

/* --- meta (label + description) --- */
.dc-hiw-meta{ text-align:center; padding:26px 14px 0; }
.dc-hiw-step-no{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dc-primary); margin-bottom:8px; }
.dc-hiw-meta h3{ font-family:var(--dc-display); font-weight:700; font-size:1.3rem; color:var(--dc-ink); margin-bottom:8px; }
.dc-hiw-meta p{ font-size:.92rem; color:var(--dc-slate); line-height:1.55; max-width:300px; margin:0 auto; }

/* ---------- responsive ---------- */
@media (max-width:991px){
  .dc-hiw-track{ grid-template-columns:1fr 36px 1fr 36px 1fr; }
  .dc-hiw-card--feature{ transform:scale(1.02); }
  .dc-hiw-step:hover .dc-hiw-card--feature{ transform:scale(1.02) translateY(-4px); }
  .dc-hiw-meta p{ font-size:.86rem; }
}
@media (max-width:767px){
  .dc-hiw{ padding:76px 0; }
  .dc-hiw-track{ grid-template-columns:1fr; gap:0; max-width:420px; margin:0 auto; }
  .dc-hiw-connector{ display:none; }
  .dc-hiw-step{ margin-bottom:44px; }
  .dc-hiw-step:last-child{ margin-bottom:0; }
  .dc-hiw-card--feature{ transform:none; }
  .dc-hiw-step:hover .dc-hiw-card--feature{ transform:translateY(-4px); }
  .dc-hiw-meta{ padding-top:20px; }
}
/* =====================================================================
   BENEFITS — SPLIT
   ===================================================================== */
.dc-checks{ list-style:none; margin:30px 0 34px; padding:0; display:flex; flex-direction:column; gap:20px; }
.dc-checks li{ display:flex; gap:14px; }
.dc-checks strong{ font-size:1.02rem; }
.dc-checks div{ font-size:.94rem; color:var(--dc-slate); line-height:1.5; }
.dc-check{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; margin-top:2px;
  background:linear-gradient(135deg,var(--dc-primary),var(--dc-primary-600)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
  box-shadow:0 6px 16px rgba(59,91,232,.3); }

.dc-benefit-visual{ position:relative; padding:20px; }
.dc-benefit-glow{ position:absolute; inset:0; background:
  radial-gradient(70% 60% at 30% 20%,rgba(138,160,251,.3),transparent 60%),
  radial-gradient(60% 60% at 90% 90%,rgba(185,167,245,.28),transparent 60%); filter:blur(6px); }
.dc-benefit-card{ position:relative; z-index:2; padding:22px; border-radius:var(--dc-r-lg); }
.dc-benefit-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dc-benefit-folder{ font-weight:700; font-family:var(--dc-display); }
.dc-benefit-count{ font-size:.8rem; color:var(--dc-slate-2); background:var(--dc-sky); padding:5px 12px; border-radius:100px; }
.dc-benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.dc-benefit-tile{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px;
  background:var(--dc-cloud); border:1px solid var(--dc-line); font-size:.86rem; font-weight:500; }
.dc-benefit-tile .dc-file{ width:32px; height:32px; font-size:.55rem; }
.dc-benefit-people{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--dc-line); }
.dc-benefit-people-txt{ font-size:.85rem; color:var(--dc-slate); font-weight:500; }
.dc-benefit-mini{ position:absolute; z-index:3; bottom:0; right:-4px; display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:var(--dc-r); animation:dcFloat 6s ease-in-out infinite; }
.dc-benefit-mini-icon{ width:40px; height:40px; border-radius:12px; background:var(--dc-sky);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.dc-benefit-mini strong{ font-size:.9rem; } .dc-benefit-mini small{ color:var(--dc-slate-2); font-size:.78rem; }

/* =====================================================================
   PRICING
   ===================================================================== */
.dc-price-card{ position:relative; height:100%; background:#fff; border:1px solid var(--dc-line);
  border-radius:var(--dc-r-lg); padding:34px 28px; transition:transform .25s, box-shadow .25s; }
.dc-price-card:hover{ transform:translateY(-6px); box-shadow:var(--dc-shadow); }
.dc-price-name{ font-size:1.35rem; margin-bottom:8px; }
.dc-price-desc{ font-size:.9rem; color:var(--dc-slate); min-height:44px; }
.dc-price{ display:flex; align-items:baseline; gap:6px; margin:18px 0 22px; }
.dc-price-amt{ font-family:var(--dc-display); font-weight:800; font-size:3rem; letter-spacing:-.03em; }
.dc-price-per{ font-size:.9rem; color:var(--dc-slate-2); }
.dc-price-list{ list-style:none; margin:26px 0 0; padding:26px 0 0; border-top:1px solid var(--dc-line);
  display:flex; flex-direction:column; gap:13px; }
.dc-price-list li{ position:relative; padding-left:20px; font-size:.92rem; color:var(--dc-ink-soft); }
.dc-price-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--dc-primary);
  font-weight:700; font-size:.85rem; }
.dc-price-card--feature{ border:1.5px solid var(--dc-primary); box-shadow:0 24px 60px rgba(59,91,232,.18);
  background:linear-gradient(180deg,#fff,#FBFCFF); }
.dc-price-card--feature:hover{ transform:translateY(-10px); }
.dc-price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg,var(--dc-primary),var(--dc-primary-600));
  padding:6px 16px; border-radius:100px; box-shadow:0 8px 20px rgba(59,91,232,.4); }

/* =====================================================================
   FAQ — accordion (dark)
   ===================================================================== */
.dc-accordion{ display:flex; flex-direction:column; gap:12px; position:relative; z-index:2; }
.dc-acc-item{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--dc-r); overflow:hidden; transition:.25s; }
.dc-acc-item.open{ background:rgba(255,255,255,.07); border-color:rgba(138,160,251,.35); }
.dc-acc-head{ width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:#fff; font-family:var(--dc-display); font-weight:600; font-size:1.16rem;
  padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dc-acc-ico{ flex:0 0 auto; position:relative; width:18px; height:18px; }
.dc-acc-ico::before,.dc-acc-ico::after{ content:""; position:absolute; background:var(--dc-accent);
  border-radius:2px; transition:.3s; }
.dc-acc-ico::before{ top:8px; left:0; width:18px; height:2px; }
.dc-acc-ico::after{ top:0; left:8px; width:2px; height:18px; }
.dc-acc-item.open .dc-acc-ico::after{ transform:rotate(90deg); opacity:0; }
.dc-acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.dc-acc-body p{ padding:0 24px 22px; color:#A7B2D4; font-size:.96rem; line-height:1.65; }

/* =====================================================================
   SUPPORT CTA
   ===================================================================== */
.dc-cta-wrap{ padding: 100px 0; }
.dc-cta{ position:relative; overflow:hidden; text-align:center; border-radius:36px; padding:72px 32px;
  background:linear-gradient(135deg,var(--dc-primary) 0%, #5A6FE8 45%, var(--dc-lav) 120%); color:#fff; }
.dc-cta-glow{ position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:400px;
  background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent); filter:blur(10px); }
.dc-cta-title{ position:relative; z-index:2; font-size:clamp(2rem,3.6vw,3rem); color:#fff; margin-bottom:16px; }
.dc-cta-sub{ position:relative; z-index:2; max-width:610px; margin:0 auto 32px; color:rgba(255,255,255,.9); font-size:1.08rem; }
.dc-cta-actions{ position:relative; z-index:2; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.dc-cta-fine{ position:relative; z-index:2; margin-top:22px; font-size:.85rem; color:rgba(255,255,255,.8); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.dc-footer{ background:var(--dc-ink); color:#A7B2D4; padding:72px 0 32px; }
.dc-footer-top{ padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08); }
.dc-brand--footer{ color:#fff; margin-bottom:18px; }
.dc-footer-blurb{ font-size:.92rem; max-width:300px; margin-bottom:22px; }
.dc-footer-social{ display:flex; gap:10px; }
.dc-footer-social a{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:#C4CEEA; transition:.2s; }
.dc-footer-social a:hover{ background:var(--dc-primary); color:#fff; transform:translateY(-2px); }
.dc-footer-h{ color:#fff; font-family:var(--dc-body); font-weight:600; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:18px; }
.dc-footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.dc-footer-list a{ font-size:.92rem; color:#A7B2D4; transition:color .2s; }
.dc-footer-list a:hover{ color:#fff; }
.dc-footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:28px;
  font-size:.86rem; flex-wrap:wrap; gap:12px; }
.dc-footer-region{ display:inline-flex; align-items:center; }


/* General Pages */

  .page-title {
        background: #ecf6ff;
    border-bottom: 1px solid var(--bs-border-color);
    background-size: cover;
    padding: 160px 0 80px;
  }
  .page-title h1 {
    text-align: center;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  .order-summary {
    padding: 27px !important;
    border-radius: 16px;
    background: var(--dark-text);
    border: 1px solid #d1d1d1;
  }
  
  .checkout_area select {
    padding: 12px;
    border-radius: 5px;
    box-shadow: none;
    outline: none;
    appearance: auto;
    width: 100%;
    border: var(--bs-border-width) solid var(--bs-border-color);
    margin-bottom: 15px;
    min-height: 50px;
  }
  .checkout_area .form-control {
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: none;
    outline: none;
  }
  
  .contact_info_section .contact_info_box {
    background: linear-gradient(180deg, #4f7cff22 0%, transparent 100%);
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #dee2e6;
    display: flex;
        align-items: center;
    gap: 20px;
  }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:991px){
  .dc-nav-links{ display:none; }
  .dc-burger{ display:flex; }
  .dc-hero{ padding:130px 0 70px; }
  .dc-hub{ height:440px; margin-top:20px; }
  .dc-section{ padding:80px 0; }
  .dc-bento{ grid-template-columns:1fr 1fr; grid-auto-rows:210px; }
  .dc-b1{ grid-column:1; grid-row:1; } .dc-b3{ grid-column:2; grid-row:1; }
  .dc-b2{ grid-column:1 / span 2; grid-row:2; } .dc-b4{ grid-column:1; grid-row:3; }
  .dc-b6{ grid-column:2; grid-row:3; } .dc-b5{ grid-column:1 / span 2; grid-row:4; }
  .dc-bento-card--feature{ min-height:240px; }
}
@media (max-width:575px){
  .dc-hero{ padding:120px 0 56px; }
  .dc-h1{ font-size:2.25rem; }
  .dc-hub{ height:400px; }
  .dc-hub-card{ width:290px; }
  .dc-hub-stat{ width:190px; right:0; bottom:8px; }
  .dc-chip--c{ display:none; }
  .dc-bento{ grid-template-columns:1fr; grid-auto-rows:auto; gap:16px; }
  .dc-bento-card{ grid-column:1 !important; grid-row:auto !important; min-height:200px; }
  .dc-b5{ flex-direction:column; align-items:flex-start; gap:20px; }
  .dc-b5 .dc-slider{ width:100%; }
  .dc-logos-row{ gap:26px; }
  .dc-logos-row span{ font-size:1.1rem; }
  .dc-cta{ padding:52px 22px; }
  .dc-footer-bottom{ justify-content:flex-start; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
}