/* ============================================================
   DROPIT SOLUTIONS — clean white, soft rounded, concept-style
   (inspired by the Anfinity concept) · purple brand accent
   ============================================================ */

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

:root {
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Sora', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --bg: #ffffff;
    --bg-alt: #f6f6fb;
    --surface: #ffffff;
    --line: #ecebf3;
    --line-strong: #e1e0ec;

    --ink: #181626;          /* headings */
    --text: #54526a;         /* body */
    --mute: #8a8898;         /* secondary */
    --faint: #b4b2c2;

    --accent: #6b5fd6;
    --accent-deep: #5247bd;
    --accent-soft: #f1effc;  /* tint fill */
    --accent-line: #e3defa;  /* tint border */

    --dark: #15131f;         /* dark sections */
    --dark-2: #1c1a2a;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-full: 100px;

    --sh-xs: 0 1px 2px rgba(24,22,38,0.05);
    --sh-sm: 0 4px 14px -6px rgba(24,22,38,0.12);
    --sh-md: 0 14px 40px -16px rgba(24,22,38,0.18);
    --sh-lg: 0 30px 60px -24px rgba(24,22,38,0.22);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --maxw: 1140px;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--text); background: var(--bg); overflow-x: hidden; }

::selection { background: var(--accent-soft); color: var(--accent-deep); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: #d8d6e4; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; color: var(--ink); letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.75rem; }
.center { text-align: center; }
.accent { color: var(--accent); }

/* ============================ LOADER ============================ */
.page-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity .5s var(--ease), visibility .5s var(--ease); }
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.loader-ring { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.loader-text { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); }
.loader-text span { color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ NAVBAR ============================ */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .85rem 1rem; transition: padding .3s var(--ease); }
.navbar.scrolled { padding: .55rem 1rem; }
.nav-container {
    max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: 1rem;
    padding: .5rem .55rem .5rem 1.3rem;
    background: rgba(255,255,255,.85); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--line); border-radius: var(--r-full);
    box-shadow: 0 8px 30px -14px rgba(24,22,38,.22); transition: box-shadow .3s var(--ease);
}
.navbar.scrolled .nav-container { box-shadow: 0 12px 38px -14px rgba(24,22,38,.30); }
.nav-logo { display: flex; align-items: center; z-index: 1001; }
.nav-logo-img { height: 30px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin-left: auto; }
.nav-link { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); padding: .5rem .7rem; border-radius: var(--r-sm); transition: color .2s var(--ease); }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--accent-deep); }
.nav-cta { margin-left: .35rem; background: var(--ink); color: #fff !important; font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--r-full); padding: .62rem 1.2rem; transition: background .2s var(--ease), transform .2s var(--ease-out); }
.nav-cta:hover { background: #000; color: #fff !important; transform: translateY(-1px); }
.nav-cta.active { color: #fff !important; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; padding: 6px; }
.hamburger .bar { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }
.hamburger.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ BUTTONS ============================ */
.btn-primary, .btn-hero-primary, .btn-primary-light {
    display: inline-flex; align-items: center; gap: .5rem; padding: .72rem 1.4rem; border-radius: var(--r-full);
    font-family: var(--font-body); font-weight: 600; font-size: .875rem; color: #fff; background: var(--accent);
    cursor: pointer; border: none; box-shadow: var(--sh-sm); transition: background .25s var(--ease), transform .25s var(--ease-out), box-shadow .25s var(--ease);
}
.btn-primary i, .btn-hero-primary i, .btn-primary-light i { font-size: .8em; transition: transform .25s var(--ease-out); }
.btn-primary:hover, .btn-hero-primary:hover, .btn-primary-light:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-primary:hover i, .btn-hero-primary:hover i { transform: translateX(3px); }

.btn-ghost, .btn-hero-ghost, .btn-outline, .btn-ghost-light {
    display: inline-flex; align-items: center; gap: .5rem; padding: .72rem 1.4rem; border-radius: var(--r-full);
    font-weight: 600; font-size: .875rem; color: var(--ink); background: #fff; border: 1px solid var(--line-strong);
    cursor: pointer; transition: all .25s var(--ease-out);
}
.btn-ghost:hover, .btn-hero-ghost:hover, .btn-outline:hover, .btn-ghost-light:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--sh-sm); }

/* on dark sections */
.btn-on-dark { display: inline-flex; align-items: center; gap: .5rem; padding: .72rem 1.4rem; border-radius: var(--r-full); font-weight: 600; font-size: .875rem; color: var(--dark); background: #fff; transition: all .25s var(--ease-out); }
.btn-on-dark:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(0,0,0,.5); }
.btn-on-dark.accent-fill { background: var(--accent); color: #fff; }
.btn-on-dark.accent-fill:hover { background: var(--accent-deep); }

/* ============================ SECTION SHELL ============================ */
section { position: relative; }
.section { padding: 5.5rem 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.head { max-width: 600px; margin: 0 auto 3rem; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); padding: .32rem .8rem; border-radius: var(--r-full); background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 1.1rem; }
.head h2, .section-title { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.16; letter-spacing: -0.025em; color: var(--ink); margin-bottom: .8rem; font-weight: 700; }
.head p { font-size: .98rem; color: var(--mute); line-height: 1.7; }
.section-cta-row { text-align: center; margin-top: 2.5rem; }

/* ============================ HERO ============================ */
.hero { position: relative; padding: 9rem 0 4.5rem; overflow: hidden; background: linear-gradient(180deg, #faf9ff, #ffffff 55%); }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 2.5rem; align-items: center; }
.hero-kicker { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; }
.hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.1rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 1.2rem; font-weight: 800; }
.hero h1 .accent { color: var(--accent); }
.hero-sub { font-size: 1.05rem; color: var(--mute); max-width: 470px; margin-bottom: 1.8rem; line-height: 1.7; }

/* glossy 3D droplet hero object */
.hero-art { position: relative; display: grid; place-items: center; min-height: 420px; }
.droplet3d { width: min(420px, 90%); height: auto; animation: floatY 6.5s ease-in-out infinite; transform-origin: center; }
@keyframes floatY { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(-1.2deg); } }
.hero-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.7rem; }
.hero-proof { display: flex; align-items: center; gap: .8rem; }
.proof-avatars { display: flex; }
.proof-avatars span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-size: .75rem; color: #fff; margin-left: -8px; box-shadow: var(--sh-xs); }
.proof-avatars span:first-child { margin-left: 0; }
.pa1 { background: linear-gradient(135deg,#8b83ff,#6b5fd6); }
.pa2 { background: linear-gradient(135deg,#6b5fd6,#534ab7); }
.pa3 { background: linear-gradient(135deg,#a99fff,#7d73e6); }
.pa4 { background: var(--accent-soft); color: var(--accent-deep) !important; }
.proof-text { font-size: .82rem; color: var(--mute); line-height: 1.4; }
.proof-text strong { color: var(--ink); font-weight: 600; }

/* hero 3D droplet art */
.hero-art { position: relative; display: grid; place-items: center; min-height: 380px; }
.hero-art .glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(107,95,214,.22), transparent 65%); filter: blur(10px); }
.droplet { width: min(340px, 80%); height: auto; position: relative; z-index: 1; animation: floatY 6s ease-in-out infinite; filter: drop-shadow(0 40px 50px rgba(83,71,189,.35)); }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.float-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: var(--r-full); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); font-size: .78rem; font-weight: 600; color: var(--ink); animation: floatY 5s ease-in-out infinite; }
.float-pill i { color: var(--accent); }
.float-pill.fp1 { top: 12%; left: 2%; }
.float-pill.fp2 { top: 40%; right: 0%; animation-delay: 1.2s; }
.float-pill.fp3 { bottom: 12%; left: 8%; animation-delay: 2.2s; }

/* ============================ BRAND STRIP ============================ */
.brand-strip { padding: 2.2rem 0 .5rem; }
.brand-strip-label { text-align: center; font-size: .78rem; letter-spacing: .04em; color: var(--faint); margin-bottom: 1.3rem; }
.brand-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem 2.4rem; }
.brand-row .b { display: inline-flex; align-items: center; gap: .5rem; color: var(--mute); font-weight: 600; font-size: .92rem; opacity: .85; transition: opacity .2s, color .2s; }
.brand-row .b i { font-size: 1.5rem; }
.brand-row .b:hover { opacity: 1; color: var(--ink); }

/* ============================ FEATURE GRID ============================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.feature-item { padding: 1.9rem 1.7rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .25s var(--ease); }
.feature-grid .feature-item:nth-child(3n) { border-right: none; }
.feature-item:hover { background: var(--bg-alt); }
.feature-item.is-ai { background: linear-gradient(160deg, #f6f4ff, #fff); }
.fi-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1.1rem; margin-bottom: 1rem; }
.feature-item h3 { font-size: 1.02rem; margin-bottom: .4rem; color: var(--ink); font-weight: 600; }
.feature-item p { font-size: .86rem; color: var(--mute); line-height: 1.62; margin-bottom: .9rem; }
.fi-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--accent); transition: gap .25s; }
.fi-link i { font-size: .72em; }
.feature-item:hover .fi-link { gap: .6rem; color: var(--accent-deep); }

/* ============================ INLINE CTA BAND ============================ */
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 2.6rem; padding: 1.3rem 1.6rem; border-radius: var(--r-full); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.inline-cta p { font-size: .92rem; color: var(--text); margin: 0; }
.inline-cta p strong { color: var(--ink); }

/* ============================ WORK GRID ============================ */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.work-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease), border-color .25s; display: block; }
.work-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.work-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.work-card:hover .work-thumb img { transform: scale(1.05); }
.work-body { padding: 1.15rem 1.25rem 1.4rem; }
.work-tag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: .22rem .6rem; border-radius: var(--r-full); margin-bottom: .7rem; }
.work-body h3 { font-size: 1.02rem; color: var(--ink); margin-bottom: .35rem; font-weight: 600; }
.work-body p { font-size: .85rem; color: var(--mute); line-height: 1.55; }

/* ============================ DARK SECTION + WATERMARK ============================ */
.dark-section { position: relative; overflow: hidden; background: var(--dark); color: #cfcde0; padding: 5.5rem 0; }
.dark-section .container { position: relative; z-index: 2; }
.watermark { position: absolute; z-index: 1; left: 50%; top: 48%; transform: translate(-50%,-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(14rem, 34vw, 30rem); line-height: 1; color: rgba(255,255,255,0.03); letter-spacing: -0.04em; pointer-events: none; white-space: nowrap; }
.dark-section .eyebrow { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #c9c3ff; }
.dark-section .head h2, .dark-section h2 { color: #fff; }
.dark-section .head p, .dark-section .lead { color: #a9a7bd; }
.lead { max-width: 620px; margin: 0 auto 2.4rem; text-align: center; font-size: 1rem; line-height: 1.75; }
.values-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.6rem; }
.value-card { padding: 1.5rem 1.3rem; border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: border-color .25s, transform .25s var(--ease-out); }
.value-card:hover { border-color: rgba(201,195,255,.4); transform: translateY(-3px); }
.value-card .vc-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(139,131,255,.16); color: #c9c3ff; font-size: 1.05rem; margin-bottom: .9rem; }
.value-card h4 { font-size: 1rem; color: #fff; margin-bottom: .35rem; font-weight: 600; }
.value-card p { font-size: .84rem; color: #9d9bb2; line-height: 1.6; }

/* dark book-a-call / contact CTA */
.cta-dark { text-align: center; }
.cta-dark .cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta-dark .cta-mail { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-family: var(--font-mono); font-size: .85rem; color: #c9c3ff; }

/* ============================ FAQ ============================ */
.faq-list { max-width: 720px; margin: 0 auto; display: grid; gap: .6rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s; }
.faq-item[open] { border-color: var(--accent-line); box-shadow: var(--sh-xs); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--accent); transition: transform .25s var(--ease); flex-shrink: 0; font-size: .85rem; }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p { padding: 0 1.3rem 1.2rem; color: var(--mute); font-size: .88rem; line-height: 1.7; }
.faq-item a { color: var(--accent-deep); font-weight: 500; }

/* ============================ FOOTER ============================ */
.footer { padding: 3.5rem 0 1.8rem; border-top: 1px solid var(--line); background: var(--bg-alt); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.2rem; margin-bottom: 2.2rem; }
.footer-logo-img { height: 34px; margin-bottom: 1rem; }
.footer-desc { font-size: .85rem; color: var(--mute); line-height: 1.65; max-width: 300px; margin-bottom: 1rem; }
.footer-email { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .8rem; color: var(--accent-deep); margin-bottom: 1.1rem; }
.social-links { display: flex; gap: .5rem; }
.social-links a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--text); transition: all .25s var(--ease-out); }
.social-links a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.footer-col h4 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .9rem; font-weight: 600; }
.footer-col ul { list-style: none; display: grid; gap: .55rem; }
.footer-col a, .footer-col span { font-size: .85rem; color: var(--mute); transition: color .2s; }
.footer-col a:hover { color: var(--accent-deep); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer-bottom p { font-size: .78rem; color: var(--faint); }
.footer-legal { display: flex; gap: 1.3rem; }
.footer-legal a { font-size: .78rem; color: var(--mute); }
.footer-legal a:hover { color: var(--accent-deep); }

/* ============================ BACK TO TOP ============================ */
.back-to-top { position: fixed; bottom: 1.6rem; right: 1.6rem; width: 42px; height: 42px; z-index: 900; border-radius: 50%; border: none; cursor: pointer; color: #fff; background: var(--accent); box-shadow: var(--sh-md); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s var(--ease-out); }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent-deep); transform: translateY(-2px); }

/* ============================ REVEAL ============================ */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal]{opacity:1;transform:none;transition:none;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;} }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero-art { min-height: 300px; order: -1; }
    .droplet { width: 220px; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-grid .feature-item:nth-child(3n) { border-right: 1px solid var(--line); }
    .feature-grid .feature-item:nth-child(2n) { border-right: none; }
    .work-grid { grid-template-columns: repeat(2, 1fr); }
    .values-row { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .nav-menu { position: fixed; inset: 0 0 0 auto; width: min(80%, 320px); flex-direction: column; align-items: flex-start; justify-content: center; gap: .3rem; background: #fff; padding: 2rem; transform: translateX(100%); transition: transform .35s var(--ease-out); border-left: 1px solid var(--line); box-shadow: var(--sh-lg); }
    .nav-menu.active { transform: translateX(0); }
    .nav-menu li { width: 100%; }
    .nav-link { display: block; width: 100%; font-size: 1rem; padding: .7rem .9rem; }
    .nav-cta { margin-left: 0; text-align: center; margin-top: .4rem; }
    .hamburger { display: flex; }
    .section { padding: 3.8rem 0; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-grid .feature-item { border-right: none !important; }
    .work-grid { grid-template-columns: 1fr; }
    .values-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
    .footer-brand { grid-column: 1 / -1; }
    .float-pill { display: none; }
}
@media (max-width: 460px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
}