/* homly.co.in. Phone first. No content ever waits hidden for an animation: motion moves things, it never reveals them. */
:root {
  --deep:#0f3d3e; --lagoon:#1c6b64; --saffron:#e9761c; --mango:#f6b62b; --hibiscus:#e2456f; --leaf:#2f9e5b;
  --bg:#fff8ec; --bg2:#fdeed3; --ink:#17302f; --muted:#4d6361; --card:#fff; --line:rgba(15,61,62,.13); --shadow:0 10px 30px rgba(15,61,62,.10);
  --accent-text:#a84a06; --hib-text:#b52350; --lag-text:#17625b; --r:22px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0c1d1d; --bg2:#102827; --ink:#eaf4f1; --muted:#a9c0bb; --card:#132c2b; --line:rgba(255,255,255,.12); --shadow:0 10px 30px rgba(0,0,0,.35);
    --accent-text:#f7a763; --hib-text:#ff8fb0; --lag-text:#6fd6c6; }
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth } }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x:clip }
body.ml { font-family:"Noto Sans Malayalam", Inter, system-ui, sans-serif; line-height:1.75 }
body.hi { font-family:"Noto Sans Devanagari", Inter, system-ui, sans-serif; line-height:1.7 }
body.ta { font-family:"Noto Sans Tamil", Inter, system-ui, sans-serif; line-height:1.75 }
h1, h2, h3, .word, .big { font-family:"Baloo Chettan 2", Inter, system-ui, sans-serif; line-height:1.15; margin:0 }
.hi h1, .hi h2, .hi h3 { font-family:"Baloo 2", "Noto Sans Devanagari", Inter, sans-serif; line-height:1.3 }
.ta h1, .ta h2, .ta h3 { font-family:"Baloo Thambi 2", "Noto Sans Tamil", Inter, sans-serif; line-height:1.35 }
.ml h1, .ml h2, .ml h3 { line-height:1.3 }
p { margin:0 } ul, ol { margin:0; padding:0; list-style:none } img { display:block; max-width:100% }
a { color:inherit }
.wrap { width:min(1120px, 100%); margin:0 auto; padding:0 20px }
section { padding:56px 0 }
h2 { font-size:clamp(28px, 7vw, 42px); color:var(--deep); overflow-wrap:break-word }
.ml h2, .ta h2 { font-size:clamp(24px, 6.2vw, 38px) }
h1, h3, p, li, b, a { overflow-wrap:break-word }
@media (prefers-color-scheme: dark) { h2 { color:var(--ink) } }
.kick { font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--accent-text); margin-bottom:8px }
.lead { color:var(--muted); margin-top:8px }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 24px; border-radius:999px; font-weight:700; text-decoration:none; text-align:center; transition:transform .15s ease }
.btn:hover { transform:translateY(-2px) }
.btn-sun { background:var(--mango); color:#3a2500 }
.btn-line { border:2px solid rgba(255,248,236,.55); color:#fff8ec }
.btn-small { min-height:42px; padding:8px 16px; font-size:15px }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline:3px solid var(--mango); outline-offset:2px }

/* top of the page */
.hero { position:relative; overflow:hidden; background:linear-gradient(168deg, #0c3233 0%, #0f3d3e 45%, #1c6b64 100%); color:#fff8ec; padding-bottom:84px }
.phone-wrap { position:relative; justify-self:center }
.sun { position:absolute; top:-30px; right:-74px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #ffd675, var(--mango) 55%, var(--saffron)); box-shadow:0 0 90px 30px rgba(246,182,43,.28) }
.top { position:relative; z-index:3; display:flex; align-items:center; gap:10px; padding-top:14px; padding-bottom:14px }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto }
.brand img { width:42px; height:42px; border-radius:11px }
.brand span { font-family:"Baloo Chettan 2", Inter, sans-serif; font-weight:800; font-size:27px; letter-spacing:-.01em; color:#fff8ec }
.lang { position:relative }
.lang summary { list-style:none; cursor:pointer; min-height:42px; display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; font-size:15px; font-weight:600; color:#fff8ec; border:1px solid rgba(255,248,236,.35) }
.lang summary::-webkit-details-marker { display:none }
.lang summary::after { content:"▾"; font-size:12px }
.lang ul { position:absolute; right:0; top:calc(100% + 8px); min-width:150px; padding:6px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); z-index:30 }
.lang a { display:block; padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:600 }
.lang a[aria-current] { background:var(--bg2) }
.hero-grid { position:relative; z-index:2; display:grid; gap:36px; padding-top:26px }
.eyebrow { font-weight:600; color:var(--mango); margin-bottom:12px }
h1 { font-size:clamp(38px, 11.4vw, 72px); letter-spacing:-.01em; color:#fff8ec; font-weight:800 }
.ml h1 { font-size:clamp(30px, 8.6vw, 60px) } .ta h1 { font-size:clamp(28px, 8vw, 56px) } .hi h1 { font-size:clamp(34px, 10vw, 66px) }
h1 span { display:block }
h1 .hl { color:var(--mango) }
.sub { font-size:19px; margin-top:16px; color:#e4efe9 }
.ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.note { margin-top:12px; font-size:15px; color:#cfe2da }
.tiles { display:grid; gap:10px; margin-top:28px }
.tile { display:flex; align-items:baseline; gap:12px; padding:12px 16px; border-radius:16px; background:rgba(255,248,236,.09); border:1px solid rgba(255,248,236,.18) }
.tile .big { font-weight:800; font-size:27px; color:var(--mango); flex:none; min-width:92px }
.tile span { font-size:15px; color:#eef5f1 }
.phone { position:relative; width:min(250px, 72vw); padding:9px; border-radius:36px; background:#08201f; box-shadow:0 26px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) }
.phone img { width:100%; height:auto; border-radius:28px }
.waves { position:absolute; left:0; bottom:-1px; width:200%; height:86px; z-index:1 }
.w1 { fill:rgba(95,208,192,.22) } .w2 { fill:var(--bg) }

/* the family */
.fam { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-top:24px }
.fcard { --c:var(--lagoon); display:flex; flex-direction:column; gap:10px; padding:22px; background:var(--card); border:1px solid var(--line); border-top:6px solid var(--c); border-radius:var(--r); box-shadow:var(--shadow) }
.fcard.c2 { --c:var(--hibiscus) } .fcard.c3 { --c:var(--saffron) }
.fk { font-size:14px; font-weight:700; color:var(--lag-text) } .c2 .fk { color:var(--hib-text) } .c3 .fk { color:var(--accent-text) }
.word { font-weight:800; font-size:34px; letter-spacing:-.01em; color:var(--ink) }
.word i { font-style:normal; color:var(--lag-text) } .c2 .word i { color:var(--hib-text) } .c3 .word i { color:var(--accent-text) }
.fl { font-size:18px } .ft { font-size:15px; color:var(--muted) }
.go { margin-top:auto; padding-top:8px; font-weight:700; color:var(--lag-text); text-decoration:none; min-height:44px; display:inline-flex; align-items:center } .c2 .go { color:var(--hib-text) } .c3 .go { color:var(--accent-text) }
.go::after { content:" →"; white-space:pre }

/* the calculator */
.money { background:var(--bg2) }
.calc { grid-template-columns:minmax(0, 1fr); margin-top:22px; padding:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); display:grid; gap:22px }
.field { display:grid; gap:4px; font-weight:600 }
.field + .field { margin-top:14px }
.field .row { display:flex; justify-content:space-between; gap:12px; align-items:baseline }
.field output { flex:none; font-weight:800; color:var(--accent-text) }
input[type=range] { width:100%; height:32px; margin:0; accent-color:var(--saffron) }
.bar + .bar { margin-top:18px }
.bar p { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; font-weight:600 }
.bar b { font-family:"Baloo Chettan 2", Inter, sans-serif; font-weight:800; font-size:28px; line-height:1.2 }
.bar.them b { color:var(--hib-text) } .bar.us b { color:var(--lag-text) }
.bar b small { font-family:inherit; font-size:15px; font-weight:600 }
.track { height:18px; margin-top:6px; border-radius:999px; background:var(--bg2); overflow:hidden }
.track i { display:block; height:100%; border-radius:999px }
.them .track i { background:var(--hibiscus); width:100% } .us .track i { background:var(--leaf); width:3.5% }
@media (prefers-reduced-motion: no-preference) { .track i { transition:width .35s ease } }
.fine { margin-top:14px; font-size:14px; color:var(--muted) }

/* growth steps */
.steps { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-top:24px }
.step { min-width:0; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
.step header { display:flex; align-items:center; gap:12px; margin-bottom:12px }
.step .n { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; font-weight:800; color:#3a2500; background:var(--mango) }
.step h3 { min-width:0; font-size:23px; color:var(--ink); overflow-wrap:anywhere }
.ta .step h3 { font-size:20px }
.tag { display:inline-block; font-size:13px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--bg2); color:var(--lag-text); margin-bottom:8px }
.rows li { padding:9px 0; border-top:1px solid var(--line) }
.rows li:first-child { border-top:0 }
.rows span { display:block }
.rows b { display:block; font-size:15px; font-weight:700; color:var(--accent-text) }

/* the real one */
.real { display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; align-items:center }
.realtext h2 { margin-bottom:8px }
#not { margin-bottom:4px }
.site { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font-weight:700; color:var(--lag-text); overflow-wrap:anywhere }
.nots { margin-top:18px; display:grid; gap:10px }
.nots li { display:flex; gap:10px; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:14px }
.nots li::before { content:"✓"; flex:none; font-weight:800; color:var(--lag-text) }

/* steps to go live */
.how { background:var(--bg2) }
.hows { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; margin-top:22px; counter-reset:h }
.hows li { counter-increment:h; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:2px 14px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:18px }
.hows li::before { content:counter(h); grid-row:span 2; align-self:start; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; font-weight:800; color:#3a2500; background:var(--mango) }
.hows h3 { font-size:21px; color:var(--ink) } .hows p { color:var(--muted) }

/* the price */
.price { background:var(--deep); color:#fff8ec }
.price h2 { color:#fff8ec }
.pt { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; margin-top:22px }
.pt li { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; align-items:center; padding:14px 18px; border-radius:18px; background:rgba(255,248,236,.08); border:1px solid rgba(255,248,236,.18) }
.pt span { display:block; font-weight:600 }
.pt .big { grid-row:span 2; grid-column:2; font-weight:800; font-size:34px; color:var(--mango) }
.pt small { grid-column:1; font-size:15px; color:#d9e7e1 }
.pnote { margin-top:16px; color:#eef5f1 }
.plink { display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-weight:700; color:var(--mango) }

/* the aim and the start */
.aim { text-align:center }
.aim h2 { max-width:17em; margin:0 auto; font-size:clamp(28px, 7.6vw, 48px) }
.ml .aim h2, .ta .aim h2 { font-size:clamp(23px, 6.2vw, 40px) }
.aim p:last-child { margin-top:12px; color:var(--muted) }
.start { background:linear-gradient(180deg, var(--bg), var(--bg2)); text-align:center }
.picks { display:grid; gap:12px; margin:22px auto 0; max-width:560px }
.picks .btn { width:100%; min-height:60px; font-size:18px; background:var(--deep); color:#fff8ec }
.picks .btn.alt { background:var(--hibiscus); color:#fff; background:#c22a58 }
@media (prefers-color-scheme: dark) { .picks .btn { background:var(--mango); color:#3a2500 } .picks .btn.alt { background:#c22a58; color:#fff } }

footer { background:var(--deep); color:#d9e7e1; font-size:15px; padding:30px 0 34px }
footer .links { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:12px }
footer .links a { display:inline-flex; align-items:center; min-height:40px }
footer a { color:#fff8ec }
.nf { min-height:70vh; display:grid; place-items:center; text-align:center; padding:40px 20px }
.nf h1 { color:var(--deep); font-size:36px } .nf p { margin:12px 0 22px }
@media (prefers-color-scheme: dark) { .nf h1 { color:var(--ink) } }

/* wider screens */
@media (min-width: 560px) {
  .tiles { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .tile { display:block } .tile .big { display:block; min-width:0 }
  .pt { grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
@media (min-width: 760px) {
  section { padding:76px 0 }
  .fam { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .steps { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .hows { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .hows li { grid-template-columns:minmax(0, 1fr); align-content:start } .hows li::before { grid-row:auto; margin-bottom:6px }
  .calc { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px; align-items:center }
  .real { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:48px; align-items:start }
  .picks { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:720px }
}
@media (min-width: 980px) {
  .rows li { display:flex; justify-content:space-between; gap:16px; align-items:baseline }
  .rows span { min-width:0 }
  .rows b { text-align:right; flex:none; max-width:46% }
  .hero { padding-bottom:110px }
  .hero-grid { grid-template-columns:1fr 280px; align-items:center; gap:56px; padding-top:40px }
  .phone { width:280px }
  .sun { top:-44px; right:-96px; width:240px; height:240px }
}

/* motion: from visible states only */
@media (prefers-reduced-motion: no-preference) {
  .waves { animation:drift 26s linear infinite }
  .w1g { animation:drift2 19s linear infinite }
  .sun { animation:bob 9s ease-in-out infinite alternate }
  @supports (animation-timeline: view()) {
    .rise { animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 42% }
  }
}
@keyframes drift { to { transform:translateX(-50%) } }
@keyframes drift2 { from { transform:translateX(-120px) } to { transform:translateX(120px) } }
@keyframes bob { from { transform:translateY(0) } to { transform:translateY(16px) } }
@keyframes rise { from { transform:translateY(14px) } to { transform:none } }