@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@400;500;600;700;800&family=Orbitron:wght@600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --page: #07071d;
  --ink: #f8f7ff;
  --muted: #b4b4c5;
  --blue: #38bfff;
  --purple: #7d3dff;
  --magenta: #df28f4;
  --shell: 1184px;
  font-family: Poppins, "Noto Sans Tamil", sans-serif;
  background: var(--page);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--page); }
a { color: inherit; text-decoration: none; }

.site-header {
  position: relative;
  z-index: 10;
  height: 70px;
  overflow: hidden;
  background: linear-gradient(90deg, #08071f 0%, #080a24 72%, #14283d 100%);
  border-bottom: 1px solid rgba(109, 137, 214, .28);
}
.site-header::before { content: ""; position: absolute; top: -120px; right: -40px; width: 560px; height: 260px; background: radial-gradient(ellipse, rgba(44, 192, 223, .22), transparent 70%); filter: blur(18px); pointer-events: none; }
.header-inner {
  width: min(var(--shell), calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  padding: 0 17px 0 18px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.brand { display: inline-flex; align-items: center; gap: 5px; width: max-content; }
.brand-eye { flex: 0 0 104px; width: 104px; height: 59px; position: relative; display: block; overflow: hidden; }
.brand-eye img { position: absolute; top: 0; left: 0; display: block; width: 104px; height: auto; max-width: none; transform-origin: center 54%; animation: nokku-eye-blink 5.8s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(20, 148, 255, .25)); }
.brand-words { display: flex; flex-direction: column; line-height: 1.03; white-space: nowrap; }
.brand-words strong { color: transparent; background: linear-gradient(180deg, #fff 8%, #e0e9f8 56%, #9eaec9 100%); background-clip: text; -webkit-background-clip: text; font-family: Orbitron, Poppins, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.055em; }
.brand-words strong > span { color: transparent; background: linear-gradient(180deg, #c8ffff, #24d9ff 58%, #3694ff); background-clip: text; -webkit-background-clip: text; }
.brand-words > span { margin-top: 3px; font-family: "Noto Sans Tamil", sans-serif; font-size: 15px; font-weight: 500; color: #edeafa; }
.main-nav { height: 100%; display: flex; align-items: center; justify-content: center; gap: 42px; transform: translateX(-24px); }
.main-nav a { position: relative; height: 100%; display: flex; align-items: center; color: #d0cedf; font-size: 15px; font-weight: 400; white-space: nowrap; transition: color .18s ease; }
.main-nav a:hover, .main-nav a.active { color: #f4f2ff; }
.main-nav a.active::after { content: ""; position: absolute; bottom: -1px; left: -8px; right: -8px; height: 3px; background: linear-gradient(90deg, #a62bff, #f244e7, #a72cff); box-shadow: 0 0 11px rgba(215, 44, 255, .95); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.login-button, .get-started-button { height: 41px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 400; white-space: nowrap; }
.login-button { width: 84px; border: 1px solid rgba(230, 230, 248, .9); color: #f5f4fc; background: rgba(6, 8, 25, .55); }
.login-button:hover { border-color: #48d6ff; box-shadow: 0 0 15px rgba(40, 196, 255, .2); }
.get-started-button { width: 160px; gap: 8px; color: white; background: linear-gradient(105deg, #9821ff 0%, #475fff 100%); box-shadow: 0 3px 15px rgba(91, 43, 255, .23); }
.get-started-button span { font-size: 20px; line-height: 1; font-weight: 300; }
.get-started-button:hover, .analyze-button:hover { filter: brightness(1.12); box-shadow: 0 3px 0 rgba(37, 20, 105, .72), 0 0 24px rgba(100, 63, 255, .42); }

.landing-page { position: relative; isolation: isolate; min-height: calc(100vh - 70px); overflow: hidden; padding-bottom: 50px; background: #07071d; }
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 530px;
  overflow: hidden;
  z-index: 1;
  background: radial-gradient(ellipse at 27% 72%, rgba(34, 18, 67, .18) 0, transparent 37%), radial-gradient(ellipse at 52% 59%, rgba(59, 32, 111, .14) 0, transparent 27%), linear-gradient(90deg, #050519 0%, #07071d 54%, #09112a 100%);
}
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,24,.5), transparent 46%, rgba(4,5,22,.07) 100%), linear-gradient(0deg, rgba(7,7,29,.43), transparent 22%); }
.space-stars { position: absolute; z-index: -2; inset: 0; opacity: .72; pointer-events: none; background-image: radial-gradient(1px 1px at 22px 37px, rgba(234,239,255,.8) 99%, transparent), radial-gradient(1px 1px at 91px 82px, rgba(178,202,255,.78) 99%, transparent), radial-gradient(1.5px 1.5px at 164px 13px, rgba(244,237,255,.9) 99%, transparent), radial-gradient(1px 1px at 210px 147px, rgba(183,189,255,.75) 99%, transparent), radial-gradient(1.2px 1.2px at 288px 61px, rgba(247,242,255,.78) 99%, transparent), radial-gradient(1px 1px at 344px 193px, rgba(152,175,246,.86) 99%, transparent), radial-gradient(2px 2px at 411px 102px, rgba(237,229,255,.85) 99%, transparent), radial-gradient(1px 1px at 473px 29px, rgba(174,205,255,.84) 99%, transparent), radial-gradient(1px 1px at 527px 179px, rgba(243,239,255,.8) 99%, transparent), radial-gradient(1.5px 1.5px at 602px 110px, rgba(168,185,255,.76) 99%, transparent); background-size: 420px 230px; }
.space-stars::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(1px 1px at 18px 63px, #f4f5ff 99%, transparent), radial-gradient(1px 1px at 70px 130px, #acb9ff 99%, transparent), radial-gradient(1.5px 1.5px at 126px 31px, #e5eaff 99%, transparent), radial-gradient(1px 1px at 190px 97px, #becaff 99%, transparent), radial-gradient(1px 1px at 228px 166px, #ffffff 99%, transparent); background-size: 248px 184px; }
.space-stars::after { content: ""; position: absolute; inset: 0; opacity: .58; background-image: radial-gradient(1px 1px at 70px 180px, #fff 99%, transparent), radial-gradient(1px 1px at 301px 50px, #b8ccff 99%, transparent), radial-gradient(1px 1px at 502px 210px, #e6eaff 99%, transparent), radial-gradient(1px 1px at 94px 11px, #d2c9ff 99%, transparent), radial-gradient(1.5px 1.5px at 366px 132px, #dce9ff 99%, transparent); background-size: 350px 200px; }
.earth-aura { position: absolute; z-index: -1; top: -124px; right: -172px; width: 1110px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 55% 50%, transparent 61%, rgba(23, 220, 255, .16) 66%, rgba(33, 221, 255, .38) 69%, rgba(69, 246, 255, .48) 70.5%, rgba(18, 153, 226, .26) 72%, transparent 75%); filter: blur(14px); }
.earth-globe { position: absolute; z-index: -1; top: -88px; right: -105px; width: 1040px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #061329; box-shadow: inset 17px 0 44px rgba(67, 210, 255, .33), inset -90px -70px 140px rgba(0, 2, 16, .79), 0 0 34px rgba(48, 221, 255, .35), 0 0 95px rgba(22, 172, 245, .22); }
.earth-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.earth-atmosphere { position: absolute; inset: -1px; border-radius: 50%; border: 3px solid rgba(108, 241, 255, .42); box-shadow: inset 0 0 29px rgba(99, 232, 255, .25), 0 0 22px rgba(58, 220, 255, .35); pointer-events: none; }
.earth-shadow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 34% 31%, rgba(142, 206, 255, .09), transparent 38%), radial-gradient(ellipse at 102% 56%, rgba(0, 2, 18, .78) 3%, rgba(0, 2, 18, .35) 35%, transparent 68%), radial-gradient(ellipse at 50% 110%, rgba(0, 2, 16, .8), transparent 50%); pointer-events: none; }
.earth-gloss { position: absolute; inset: -2px; border-radius: 50%; background: radial-gradient(ellipse at 80% 13%, rgba(98, 247, 255, .87) 0, rgba(63, 218, 255, .47) 1.1%, rgba(33, 184, 248, .16) 4%, transparent 12%); mix-blend-mode: screen; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; width: min(1116px, calc(100% - 64px)); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 490px minmax(0, 1fr); column-gap: 46px; }
.hero-left { padding-top: 49px; }
.eyebrow { width: 297px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #d334e7; border-radius: 999px; color: #dedbea; font-size: 10px; font-weight: 400; letter-spacing: 2.05px; white-space: nowrap; box-shadow: inset 0 0 9px rgba(191, 43, 255, .04), 0 0 7px rgba(147, 35, 245, .13); }
.eyebrow span { color: #26d5ff; }
.hero h1 { margin: 18px 0 16px; max-width: 500px; color: #fbfaff; font-size: clamp(49px, 2.92vw, 56px); font-weight: 800; line-height: .965; letter-spacing: -.052em; }
.hero h1 span { color: transparent; background: linear-gradient(95deg, #25dcf4 0%, #3382ff 50%, #a743ff 80%, #ef26de 100%); -webkit-background-clip: text; background-clip: text; }
.hero-copy { width: 515px; max-width: 100%; margin: 0; color: #b8b6c8; font-size: 14px; font-weight: 300; line-height: 1.62; letter-spacing: .005em; }
.desktop-line { display: none; }
.hero-actions { display: flex; align-items: center; gap: 19px; margin-top: 26px; }
.analyze-button, .how-button { height: 49px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 14px; font-weight: 400; white-space: nowrap; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease; }
.analyze-button { width: 246px; gap: 13px; color: #fff; background: linear-gradient(100deg, #df27ed 0%, #8039ff 54%, #319bff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(22,14,91,.28), 0 3px 0 rgba(38,18,110,.86), 0 8px 17px rgba(117,45,255,.28); }
.analyze-button span { font-size: 21px; font-weight: 300; line-height: 1; }
.how-button { width: 207px; gap: 11px; border: 1px solid #178bb7; color: #e1dfed; background: linear-gradient(180deg, rgba(12,18,47,.96), rgba(5,8,29,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 0 rgba(10,43,75,.95), 0 8px 16px rgba(0,0,0,.27); }
.analyze-button:hover, .how-button:hover { transform: translateY(-2px); }
.how-button:hover { border-color: #38d4ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 rgba(10,43,75,.95), 0 0 17px rgba(27,190,255,.24); }
.analyze-button:active, .how-button:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.28), 0 1px 0 rgba(10,30,75,.9); }
.play-circle { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; padding-left: 2px; border: 1px solid #e5e4f2; border-radius: 50%; color: #fff; font-size: 10px; }
.hero-tamil { width: 580px; max-width: 100%; margin-top: 118px; color: #f9f7ff; }
.hero-tamil h2 { margin: 0; font-family: "Noto Sans Tamil", Poppins, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.42; letter-spacing: -.02em; }
.hero-tamil p { width: min(560px, 100%); max-width: 560px; margin: 20px 0 0; padding: 15px 18px; border: 1px solid rgba(93, 174, 244, .28); border-radius: 12px; color: #f0eef8; background: linear-gradient(110deg, rgba(3,7,25,.92), rgba(4,10,32,.84) 68%, rgba(4,12,35,.72)); box-shadow: 0 12px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(5px); font-family: "Noto Sans Tamil", Poppins, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.62; }

.market-tape { position: absolute; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.market-tape canvas { display: block; width: 100%; height: 100%; }
.market-tape-home { z-index: 0; right: -2%; bottom: 0; left: -2%; height: 190px; opacity: .76; background: radial-gradient(ellipse at 50% 100%, rgba(12, 113, 194, .18), transparent 72%); }
.workflow-panel, .markets-panel { width: min(var(--shell), calc(100% - 48px)); margin-right: auto; margin-left: auto; border: 1px solid #222f6d; border-radius: 9px; background: rgba(7, 8, 31, .96); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.workflow-panel { position: relative; z-index: 3; height: 115px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 14px; }
.workflow-item { min-width: 0; position: relative; display: flex; align-items: center; gap: 24px; padding: 14px 6px 14px 20px; }
.workflow-item:nth-child(1) { gap: 30px; }
.workflow-item:nth-child(2) { gap: 26px; }
.workflow-item:nth-child(3) { gap: 14px; }
.workflow-item:nth-child(4) { gap: 17px; }
.workflow-icon { flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; filter: drop-shadow(0 0 9px rgba(194, 48, 255, .29)); transform-origin: center; animation: workflow-icon-attention 3.4s ease-in-out infinite; }
.workflow-item:nth-child(2) .workflow-icon { animation-delay: .35s; }
.workflow-item:nth-child(3) .workflow-icon { animation-delay: .7s; }
.workflow-item:nth-child(4) .workflow-icon { animation-delay: 1.05s; }
.workflow-icon svg { width: 50px; height: 50px; overflow: visible; }
.workflow-copy { min-width: 0; position: relative; z-index: 2; }
.workflow-copy h2 { margin: 0 0 4px; color: #f6f4fd; font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.workflow-copy p { max-width: 173px; margin: 0; color: #a8a6bd; font-size: 11.5px; font-weight: 300; line-height: 1.3; }
.workflow-arrow { position: absolute; z-index: 3; top: 50%; right: -3px; color: #8a4bff; font-size: 23px; font-weight: 300; animation: workflow-arrow-travel 1.65s ease-in-out infinite; }
.workflow-item:nth-child(2) .workflow-arrow { animation-delay: .22s; }
.workflow-item:nth-child(3) .workflow-arrow { animation-delay: .44s; }

.markets-panel { position: relative; z-index: 2; height: 140px; margin-top: 9px; padding: 9px 14px 12px; }
.markets-heading { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.markets-heading-left { display: flex; align-items: center; gap: 12px; }
.markets-heading svg { width: 17px; height: 17px; fill: none; stroke: #38ccff; stroke-width: 1.55; }
.markets-heading h2 { margin: 0; color: #f4f2fb; font-size: 15px; font-weight: 500; line-height: 1; }
.markets-heading > p { margin: 0; color: #9a99b0; font-size: 10.5px; font-weight: 300; }
.market-grid { height: 85px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.market-card { min-width: 0; position: relative; isolation: isolate; display: flex; align-items: center; gap: 11px; padding: 9px 12px; overflow: hidden; border: 1px solid var(--market); border-radius: 5px; background: linear-gradient(107deg, var(--market-bg) 0%, rgba(8, 8, 31, .92) 62%, rgba(8, 8, 31, .76) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.24), inset 0 0 13px var(--market-glow), 0 2px 0 color-mix(in srgb, var(--market) 58%, #080b1a), 0 7px 13px rgba(0,0,0,.32); }
.market-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(5,7,25,.08) 25%, rgba(5,7,25,.45) 74%, rgba(5,7,25,.2)); }
.market-chart { position: absolute; z-index: -2; right: 0; top: 0; width: 65%; height: 100%; opacity: .9; pointer-events: none; mask-image: linear-gradient(90deg, transparent 0%, #000 31%); }
.market-chart svg { width: 100%; height: 100%; overflow: visible; }
.market-chart path { fill: none; stroke: var(--market-chart); stroke-width: 1.3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--market-chart)); }
.market-symbol { flex: 0 0 47px; width: 47px; height: 49px; position: relative; z-index: 1; display: grid; place-items: center; border-radius: 13px; color: var(--market-strong); background: linear-gradient(145deg, var(--symbol-bg), rgba(10, 12, 35, .78)); text-shadow: 0 0 12px var(--market-strong); box-shadow: inset 0 0 15px var(--symbol-glow), 0 0 9px var(--symbol-glow); }
.market-copy { min-width: 0; position: relative; z-index: 1; }
.market-copy h3 { margin: 0 0 4px; color: #f5f3fc; font-size: 13px; font-weight: 500; line-height: 1.2; }
.market-copy p { margin: 0; color: #aaa9bc; font-size: 10.5px; font-weight: 300; line-height: 1.4; white-space: nowrap; }
.dollar-symbol, .bitcoin-symbol { font-family: Poppins, sans-serif; font-size: 35px; font-weight: 700; line-height: 1; }
.bars-symbol svg, .trend-symbol svg, .gold-symbol svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bars-symbol svg rect { fill: currentColor; stroke: none; }
.forex-card { --market: #286dea; --market-bg: rgba(13,39,97,.44); --market-glow: rgba(15,68,195,.11); --market-chart: #3578ff; --market-strong: #47a8ff; --symbol-bg: rgba(31,101,226,.38); --symbol-glow: rgba(37,122,255,.32); }
.stocks-card { --market: #a52add; --market-bg: rgba(63,19,92,.38); --market-glow: rgba(117,29,182,.1); --market-chart: #bc42ff; --market-strong: #b15cff; --symbol-bg: rgba(113,37,173,.3); --symbol-glow: rgba(157,43,227,.23); }
.stocks-card .bars-symbol { color: #ba60ff; }
.indices-card { --market: #087b68; --market-bg: rgba(6,64,57,.33); --market-glow: rgba(0,150,125,.1); --market-chart: #13d180; --market-strong: #32e9d0; --symbol-bg: rgba(5,123,120,.28); --symbol-glow: rgba(0,198,190,.24); }
.indices-card .trend-symbol svg { fill: rgba(32,223,212,.18); }
.crypto-card { --market: #a63e20; --market-bg: rgba(86,27,19,.35); --market-glow: rgba(222,61,28,.1); --market-chart: #ff4a1d; --market-strong: #ff651e; --symbol-bg: rgba(171,57,21,.31); --symbol-glow: rgba(247,71,27,.22); }
.metals-card { --market: #bd8817; --market-bg: rgba(87,61,8,.31); --market-glow: rgba(195,135,9,.11); --market-chart: #f1b217; --market-strong: #ffcd60; --symbol-bg: rgba(163,117,18,.31); --symbol-glow: rgba(243,176,24,.22); }
.gold-symbol svg { fill: currentColor; stroke: currentColor; stroke-width: 1.5; filter: drop-shadow(0 0 3px rgba(255,202,89,.65)); }

.detail-hero { position: relative; min-height: 385px; padding: 76px 24px 54px; overflow: hidden; border-bottom: 1px solid rgba(48,59,123,.55); background: radial-gradient(ellipse at 70% 52%, rgba(12,39,91,.53), transparent 53%), #060619; text-align: center; }
.detail-hero::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(1px 1px at 80px 90px, #fff 99%, transparent), radial-gradient(1px 1px at 270px 180px, #9fcaff 99%, transparent); background-size: 340px 210px; }
.detail-hero .eyebrow { margin: 0 auto; }
.detail-hero h1 { position: relative; margin: 22px 0 12px; font-size: clamp(42px, 5vw, 64px); font-weight: 800; letter-spacing: -.05em; }
.detail-hero p { position: relative; max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.7; }
.detail-hero .analyze-button { position: relative; margin-top: 23px; }
.detail-work { width: min(var(--shell), calc(100% - 48px)); margin: 24px auto; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #222f6d; border-radius: 9px; background: #080820; }
.detail-work .workflow-item { min-height: 130px; padding-left: 25px; }
.detail-work .workflow-arrow { display: none; }
.detail-markets { margin-bottom: 28px; }
.detail-language { width: min(var(--shell), calc(100% - 48px)); margin: 24px auto; padding: 38px 42px; border: 1px solid #222f6d; border-radius: 9px; background: radial-gradient(ellipse at 75% 20%, rgba(27,63,128,.2), transparent 55%), #080820; text-align: center; }
.detail-language h2 { margin: 0 0 18px; font-family: "Noto Sans Tamil", Poppins, sans-serif; font-size: 27px; line-height: 1.5; }
.detail-language p { max-width: 900px; margin: 0 auto; color: #d8d5e4; font-family: "Noto Sans Tamil", Poppins, sans-serif; font-size: 14px; line-height: 1.8; }

@media (min-width: 1400px) {
  .desktop-line { display: initial; }
}

@media (max-width: 1260px) and (min-width: 851px) {
  .hero-inner { width: calc(100% - 72px); grid-template-columns: minmax(390px, .95fr) minmax(400px, 1.05fr); gap: 32px; }
  .hero h1 { font-size: clamp(48px, 4.25vw, 54px); }
  .hero-tamil { margin-top: 120px; }
  .earth-globe { right: -220px; }
  .earth-aura { right: -285px; }
  .workflow-item { padding-left: 22px; padding-right: 20px; }
  .workflow-item:nth-child(n) { gap: 10px; }
  .workflow-copy h2 { font-size: 14px; }
  .workflow-copy p { font-size: 10px; }
  .market-card { gap: 8px; padding: 8px; }
  .market-symbol { flex-basis: 40px; width: 40px; height: 44px; }
  .market-copy h3 { font-size: 12px; }
  .market-copy p { font-size: 9px; }
}
@media (max-width: 850px) {
  .landing-page { padding-bottom: 96px; }
  .site-header { height: auto; }
  .header-inner { width: calc(100% - 36px); min-height: 68px; padding: 0; grid-template-columns: 1fr auto; grid-template-rows: 64px 44px; }
  .brand-eye { flex-basis: 68px; width: 68px; height: 39px; }
  .brand-eye img { width: 68px; }
  .brand-words strong { font-size: 18px; }
  .brand-words > span { font-size: 12px; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; gap: clamp(26px, 7vw, 52px); transform: none; }
  .main-nav a { font-size: 13px; }
  .header-actions { grid-column: 2; grid-row: 1; gap: 9px; }
  .login-button, .get-started-button { height: 37px; font-size: 12px; }
  .login-button { width: 67px; }
  .get-started-button { width: 119px; }
  .hero { height: auto; min-height: 755px; padding: 48px 0 45px; }
  .hero-inner { width: calc(100% - 44px); display: flex; flex-direction: column; gap: 34px; }
  .hero-left { position: relative; z-index: 2; padding-top: 0; }
  .hero h1 { font-size: clamp(45px, 8vw, 57px); }
  .hero-copy { width: min(530px, 100%); }
  .desktop-line { display: none; }
  .hero-tamil { position: relative; z-index: 2; width: min(570px, 100%); margin: 0 0 0 auto; }
  .hero-tamil h2 { font-size: clamp(20px, 3.5vw, 25px); }
  .hero-tamil p { font-size: 13px; }
  .earth-globe { width: 700px; top: 100px; right: -320px; opacity: .72; }
  .earth-aura { width: 760px; top: 70px; right: -360px; }
  .workflow-panel { width: calc(100% - 36px); height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .workflow-item { min-height: 104px; padding: 14px 20px; }
  .workflow-item:nth-child(n) { gap: 14px; }
  .workflow-icon { flex-basis: 50px; width: 50px; height: 50px; }
  .workflow-icon svg { width: 50px; height: 50px; }
  .workflow-item:nth-child(2) .workflow-arrow { display: grid; place-items: center; top: auto; right: 18px; bottom: -13px; width: 24px; height: 22px; animation-name: workflow-arrow-travel-down-left; }
  .workflow-item:nth-child(3) .workflow-arrow { display: block; }
  .workflow-arrow { right: -8px; }
  .markets-panel { width: calc(100% - 36px); height: auto; padding-bottom: 14px; }
  .market-grid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-card { min-height: 80px; }
  .detail-work { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .header-inner { width: calc(100% - 28px); }
  .brand { gap: 4px; }
  .brand-eye { flex-basis: 55px; width: 55px; height: 32px; }
  .brand-eye img { width: 55px; }
  .brand-words strong { font-size: 15px; }
  .brand-words > span { font-size: 10px; }
  .header-actions { gap: 6px; }
  .login-button { width: 55px; }
  .get-started-button { width: 104px; gap: 5px; }
  .main-nav { gap: 25px; }
  .main-nav a { font-size: 12px; }
  .hero { min-height: 810px; padding-top: 38px; }
  .hero-inner { width: calc(100% - 36px); gap: 28px; }
  .eyebrow { width: 274px; font-size: 9px; letter-spacing: 1.75px; }
  .hero h1 { margin-top: 18px; font-size: clamp(43px, 11.4vw, 54px); }
  .hero-copy { max-width: 440px; font-size: 12.5px; line-height: 1.62; }
  .hero-actions { align-items: stretch; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .analyze-button { width: 100%; height: 46px; }
  .how-button { width: 100%; height: 46px; }
  .hero-tamil { margin-left: 0; }
  .hero-tamil h2 { font-size: 19px; }
  .hero-tamil p { margin-top: 12px; padding: 12px 13px; font-size: 12px; }
  .earth-globe { width: 600px; top: 170px; right: -380px; opacity: .57; }
  .earth-aura { width: 660px; top: 140px; right: -420px; }
  .workflow-panel { grid-template-columns: 1fr; row-gap: 10px; }
  .workflow-item { min-height: 91px; padding: 11px 24px; }
  .workflow-item:not(:last-child) { border-bottom: 1px solid rgba(46,61,133,.35); }
  .workflow-arrow { display: none; }
  .workflow-item:not(:last-child) .workflow-arrow { display: grid; place-items: center; top: auto; right: 50%; bottom: -14px; width: 25px; height: 22px; background: #07081f; animation-name: workflow-arrow-travel-down; }
  .workflow-copy p { max-width: 245px; }
  .markets-heading { align-items: flex-start; height: auto; gap: 8px; padding: 0 2px 9px; }
  .markets-heading-left { gap: 7px; }
  .markets-heading h2 { font-size: 13px; }
  .markets-heading > p { max-width: 125px; font-size: 9px; text-align: right; }
  .market-grid { grid-template-columns: 1fr; margin-top: 4px; }
  .market-card { min-height: 76px; }
  .detail-work { grid-template-columns: 1fr; }
  .detail-work .workflow-item { min-height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes nokku-eye-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  92%, 93% { transform: scaleY(.045); }
  95%, 98% { transform: scaleY(1); }
}
@keyframes workflow-icon-attention {
  0%, 70%, 100% { transform: scale(1); opacity: 1; }
  73% { transform: scale(1.08); opacity: .74; }
  76% { transform: scale(1.02); opacity: 1; }
  79% { transform: scale(1.06); opacity: .82; }
  83% { transform: scale(1); opacity: 1; }
}
@keyframes workflow-arrow-travel {
  0%, 18%, 100% { transform: translate(0, -50%); opacity: .55; }
  52% { transform: translate(6px, -50%); opacity: 1; }
}
@keyframes workflow-arrow-travel-down {
  0%, 18%, 100% { transform: translate(50%, 0) rotate(90deg); opacity: .55; }
  52% { transform: translate(50%, 5px) rotate(90deg); opacity: 1; }
}
@keyframes workflow-arrow-travel-down-left {
  0%, 18%, 100% { transform: translate(0, 0) rotate(135deg); opacity: .55; }
  52% { transform: translate(-5px, 5px) rotate(135deg); opacity: 1; }
}

.home-markets-section { position: relative; z-index: 2; width: min(var(--shell), calc(100% - 48px)); margin: 18px auto 0; padding-bottom: 22px; }
.home-markets-section .markets-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 15px; margin-bottom: 8px; }
.home-markets-section .markets-title-row h2 { margin: 0; color: #fff; font-family: "Noto Sans Tamil", Poppins, sans-serif; font-size: 23px; font-weight: 800; line-height: 1.35; }
.home-markets-section .markets-title-row p { margin: 0; color: #f3f0f7; font-size: 19px; font-weight: 400; }
.home-markets-section .markets-title-row > span { margin-left: auto; color: #dedce9; font-family: "Noto Sans Tamil", Poppins, sans-serif; font-size: 12px; }
.home-markets-section .markets-title-row > small { color: #dedce9; font-size: 12px; }
.home-markets-section .supported-market-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.home-markets-section .supported-market { --color: #04d9eb; --soft: rgba(0, 177, 237, .16); min-width: 0; min-height: 85px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1.5px solid var(--color); border-radius: 9px; background: linear-gradient(110deg, var(--soft), rgba(2, 10, 32, .91) 84%); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -2px 4px rgba(0,0,0,.25), inset 0 0 14px color-mix(in srgb, var(--color) 14%, transparent), 0 2px 0 color-mix(in srgb, var(--color) 48%, #050916), 0 7px 13px rgba(0,0,0,.31); }
.home-markets-section .supported-market > span:last-child { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; overflow-wrap: anywhere; }
.home-markets-section .supported-market b { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.home-markets-section .supported-market small { color: #efedf5; font-family: "Noto Sans Tamil", Poppins, sans-serif; font-size: 10.5px; line-height: 1.38; white-space: normal; overflow-wrap: anywhere; }
.home-markets-section .supported-symbol { flex: 0 0 62px; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; color: #45c4ff; background: radial-gradient(circle at 35% 25%, rgba(40, 156, 255, .88), rgba(2, 69, 180, .84) 65%, #071648); box-shadow: inset 0 0 13px rgba(143, 220, 255, .28), 0 0 13px var(--soft); font-family: Poppins, sans-serif; font-size: 47px; font-weight: 700; line-height: 1; text-shadow: 0 0 13px currentColor; }
.home-markets-section .market-stocks { --color: #df28e9; --soft: rgba(177, 23, 208, .19); }
.home-markets-section .market-indices { --color: #02dadd; --soft: rgba(0, 205, 188, .15); }
.home-markets-section .market-crypto { --color: #ff721b; --soft: rgba(242, 72, 8, .18); }
.home-markets-section .market-metals { --color: #ffca21; --soft: rgba(235, 159, 5, .18); }
.home-markets-section .market-stocks .supported-symbol { color: #df61ff; background: radial-gradient(circle at 35% 25%, #c12eff, #65099a 72%, #210935); }
.home-markets-section .market-indices .supported-symbol { color: #27e7df; background: radial-gradient(circle at 35% 25%, #14c7d1, #07505d 72%, #032431); }
.home-markets-section .market-crypto .supported-symbol { color: #ff781e; background: radial-gradient(circle at 35% 25%, #ff7a11, #a62900 72%, #3c1007); }
.home-markets-section .market-metals .supported-symbol { color: #ffc52f; background: radial-gradient(circle at 35% 25%, #b28318, #60430e 72%, #261b08); }
.home-markets-section .supported-symbol svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.home-markets-section .supported-symbol.bars-symbol svg rect { fill: currentColor; stroke: none; }
.home-markets-section .supported-symbol.gold-symbol svg { fill: currentColor; stroke-width: 1.4; }

@media (max-width: 1100px) {
  .home-markets-section .supported-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-markets-section .supported-market { gap: 7px; padding: 7px; }
  .home-markets-section .supported-symbol { flex-basis: 48px; width: 48px; height: 48px; font-size: 38px; }
  .home-markets-section .supported-market small { font-size: 9px; }
}
@media (max-width: 850px) {
  .home-markets-section { width: calc(100% - 36px); }
  .home-markets-section .markets-title-row { gap: 5px 10px; }
  .home-markets-section .markets-title-row h2 { font-size: 18px; }
  .home-markets-section .markets-title-row p { font-size: 15px; }
  .home-markets-section .markets-title-row > span { margin-left: 0; font-size: 10px; }
  .home-markets-section .markets-title-row > small { font-size: 10px; }
  .home-markets-section .supported-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
}
@media (max-width: 520px) {
  .home-markets-section { margin-top: 14px; }
  .home-markets-section .supported-market-grid { grid-template-columns: 1fr; }
  .home-markets-section .supported-market { min-height: 76px; }
  .home-markets-section .supported-symbol { flex-basis: 42px; width: 42px; height: 42px; font-size: 32px; }
}