:root {
  --navy: #031525;
  --navy-2: #062d4d;
  --blue: #0688ea;
  --cyan: #12c8df;
  --aqua: #36e1c1;
  --ink: #06213a;
  --muted: #687f92;
  --line: #d9eaf2;
  --surface: #fff;
  --gold: #ffd16c;
  --shadow: 0 24px 70px rgba(4, 35, 61, 0.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #f8fcfe;
  font-family: "Noto Sans Tamil", "Latha", "Vijaya", system-ui, sans-serif;
}
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(18px, 5vw, 80px);
  border-bottom: 1px solid rgba(255,255,255,.13);
  color: #fff;
  background: rgba(3, 18, 34, .88);
  backdrop-filter: blur(18px);
}
.brand, .footer-brand { display: flex; align-items: center; gap: 12px; }
.brand { min-width: 250px; color: inherit; text-decoration: none; }
.brand img, .footer-brand img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,190,220,.24)); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }
.brand small, .footer-brand span { color: #62e6ec; font: 700 11px/1.4 system-ui, sans-serif; letter-spacing: .08em; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 10px 11px; border-radius: 10px; color: #c8d9e6; text-decoration: none; font-size: 12px; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.07); }
.login-trigger {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  color: #04243f;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #61f2df, #4bd3ff);
}
.cart-button {
  position: relative;
  min-width: 70px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 900;
}
.cart-button span {
  min-width: 20px; height: 20px; display: inline-grid; place-items: center;
  margin-left: 4px; border-radius: 50%; color: #06243e; background: var(--gold);
}
.cart-button.bump { animation: bump .25s ease; }
.menu-toggle { display: none; border: 0; color: #fff; background: transparent; font-size: 22px; }

.hero {
  position: relative;
  min-height: 940px;
  padding: 148px clamp(20px,5vw,80px) 0;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2,13,27,.98) 0%, rgba(3,23,43,.92) 25%, rgba(4,37,63,.76) 44%, rgba(4,37,63,.14) 70%, rgba(3,19,36,.25) 100%),
    url("assets/hero-fisheries-vijay.png") center/cover no-repeat,
    var(--navy);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(2,12,24,.35), transparent 24%), radial-gradient(circle at 27% 35%, rgba(0,208,235,.14), transparent 34%);
}
.hero::after {
  content:""; position:absolute; z-index:0; inset:auto 0 0; height:220px;
  background: linear-gradient(180deg, transparent, rgba(3,20,37,.86) 60%, #031525);
}
.hero-inner {
  position: relative; z-index: 2; max-width: 1440px; min-height: 630px; margin: auto;
  display: grid; grid-template-columns: minmax(0,660px) 1fr; gap: clamp(30px,4vw,64px); align-items:center;
}
.hero-copy {
  padding: clamp(24px,3vw,42px);
  border: 1px solid rgba(139,234,247,.15);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(3,22,40,.84), rgba(3,26,47,.44));
  box-shadow: 0 36px 100px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}
.eyebrow, .kicker {
  width: fit-content; display: flex; align-items: center; gap: 9px; margin: 0;
  color: #038bc8; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow { padding: 10px 14px; border: 1px solid rgba(82,224,242,.2); border-radius: 99px; color:#a8f7ff; background:rgba(55,202,224,.08); }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:#45f6d0; box-shadow:0 0 0 6px rgba(69,246,208,.1); }
.hero h1 { max-width: 670px; margin: 28px 0 20px; font-size: clamp(48px,5.4vw,80px); line-height:1.11; letter-spacing:-.055em; }
.hero h1 span { display:block; color:transparent; background:linear-gradient(90deg,#4ce6f8,#53f0d1 62%,#ffdb78); background-clip:text; }
.lead { max-width:640px; margin:0; color:#c0d2df; font-size:16px; line-height:1.9; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.button {
  min-height: 48px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:0 20px; border:0; border-radius:14px; text-decoration:none; font-size:13px; font-weight:900; transition:.25s ease;
}
.button:hover { transform: translateY(-2px); }
.primary { color:#fff; background:linear-gradient(135deg,#0586ee,#04bfc4); box-shadow:0 15px 34px rgba(0,153,218,.3); }
.ghost { color:#ecfbff; border:1px solid rgba(255,255,255,.23); background:rgba(255,255,255,.08); }
.white { color:#07304e; background:#fff; }
.district-proof { margin-top:30px; }
.district-proof span, .district-proof small { display:block; }
.district-proof span { font-size:13px; font-weight:900; }
.district-proof small { margin-top:4px; color:#91aabc; font-size:11px; }
.workflow-ribbon {
  align-self:end; justify-self:end; margin-bottom:32px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; max-width:620px;
  padding:13px; border:1px solid rgba(255,255,255,.23); border-radius:18px; background:rgba(2,20,36,.65); backdrop-filter:blur(14px);
}
.workflow-ribbon span { padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.08); font-size:10px; font-weight:900; }
.workflow-ribbon b { color:#5ce8e8; }
.hero-stats {
  position: relative; z-index: 3; max-width:1280px; margin:64px auto 0; display:grid; grid-template-columns:repeat(4,1fr);
  padding:24px 30px; border:1px solid rgba(159,237,247,.18); border-radius:24px; background:rgba(3,26,45,.54); backdrop-filter:blur(20px);
}
.hero-stats article { padding:5px 28px; text-align:center; border-left:1px solid rgba(255,255,255,.11); }
.hero-stats article:first-child { border-left:0; }
.hero-stats strong, .hero-stats span { display:block; }
.hero-stats strong { color:#56e5e9; font-size:clamp(22px,2vw,30px); }
.hero-stats span { margin-top:6px; color:#9cb5c6; font-size:11px; }

.section { width:min(1320px,calc(100% - 40px)); margin:auto; }
.workflow, .finance, .trace-section { padding:110px 0; }
.section-heading { max-width:720px; }
.centered { margin:0 auto 46px; text-align:center; }
.centered .kicker { margin:auto; }
.section-heading h2, .trace-card h2, .cta h2 { margin:14px 0 15px; font-size:clamp(30px,4vw,48px); line-height:1.28; letter-spacing:-.04em; }
.section-heading > p:last-child { color:var(--muted); line-height:1.8; }
.step-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step-grid article { position:relative; min-height:270px; padding:27px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.step-number { position:absolute; top:22px; right:22px; color:#abc1ce; font:900 13px/1 system-ui,sans-serif; }
.step-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(145deg,#087ee5,#16cabf); font:900 12px/1 system-ui,sans-serif; }
.step-grid h3 { margin:24px 0 10px; font-size:18px; }
.step-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }

.market-section { padding:105px 0 120px; color:#fff; background:linear-gradient(145deg,#041b31,#073e65); }
.market-head { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:32px; }
.light { color:#66e5e8; }
.market-head .section-heading > p:last-child { color:#abc5d5; }
.search-box {
  min-width:290px; height:48px; display:flex; align-items:center; gap:8px; padding:0 15px;
  border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.08);
}
.search-box input { width:100%; border:0; outline:0; color:#fff; background:transparent; font-size:12px; }
.search-box input::placeholder { color:#a7bdcb; }
.category-row { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px; }
.category-row button { padding:10px 16px; border:1px solid rgba(255,255,255,.15); border-radius:99px; color:#c6dae6; background:rgba(255,255,255,.06); font-size:11px; font-weight:900; }
.category-row button.active { color:#052742; border-color:transparent; background:linear-gradient(135deg,#63f2e3,#48d4ff); }
.fish-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fish-card { overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:24px; color:var(--ink); background:#fff; box-shadow:0 25px 60px rgba(0,0,0,.18); }
.fish-image { position:relative; width:100%; height:240px; padding:0; overflow:hidden; border:0; background:#dff6fb; }
.fish-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.fish-image:hover img { transform:scale(1.05); }
.fish-image > span { position:absolute; left:14px; top:14px; padding:8px 10px; border-radius:99px; color:#fff; background:rgba(3,36,61,.8); font-size:10px; font-weight:900; backdrop-filter:blur(8px); }
.fish-image > i { position:absolute; inset:auto 0 0; padding:24px 14px 13px; color:#fff; background:linear-gradient(transparent,rgba(2,20,36,.9)); font-size:10px; font-style:normal; font-weight:900; text-align:right; opacity:0; transition:.25s ease; }
.fish-image:hover > i { opacity:1; }
.fish-title, .fish-price { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 18px 0; }
.fish-title h3, .fish-title small, .fish-price p { margin:0; }
.fish-title h3 { font-size:18px; }
.fish-title small { color:#72899a; font-size:10px; }
.fish-title > b { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#0ab59e; font-size:11px; }
.fish-meta { margin:12px 18px 0; padding-bottom:14px; border-bottom:1px solid var(--line); color:#7690a0; font-size:10px; }
.fish-price { padding:14px 18px 18px; }
.fish-price strong { font-size:23px; }
.fish-price span { color:#8597a4; font-size:10px; }
.fish-price button { min-height:38px; padding:0 14px; border:0; border-radius:11px; color:#fff; background:linear-gradient(135deg,#067fe1,#08bfc0); font-size:11px; font-weight:900; }
.empty-state { padding:40px; border:1px dashed rgba(255,255,255,.2); border-radius:20px; color:#b6cedb; text-align:center; }

.trace-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; padding:46px; border-radius:30px; color:#fff; background:linear-gradient(140deg,#053154,#04789a); box-shadow:var(--shadow); }
.qr-box { width:120px; height:120px; display:grid; place-items:center; border:12px solid #fff; border-radius:16px; color:#032744; background:repeating-conic-gradient(#032744 0 25%,#fff 0 50%) 50%/18px 18px; font:1000 24px/1 system-ui,sans-serif; text-shadow:0 0 5px #fff; }
.trace-card > div p:last-child { max-width:620px; color:#c5e0ea; line-height:1.8; }
.trace-card ol { min-width:210px; display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.trace-card li { display:flex; align-items:center; gap:10px; font-size:12px; }
.trace-card li b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#07304e; background:#5be4df; }

.finance { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; }
.formula { margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:13px; }
.formula span { padding:12px 14px; border-radius:12px; color:#047ca2; background:#eafaff; font-weight:900; }
.formula span:last-child { color:#078565; background:#e5fbf3; }
.finance-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.finance-cards article { padding:26px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.finance-cards article:last-child { grid-column:1/-1; }
.finance-cards small, .finance-cards strong { display:block; }
.finance-cards small { color:var(--muted); font-size:11px; }
.finance-cards strong { margin-top:10px; font-size:28px; }
.finance-cards p { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.revenue strong { color:#0687be; }
.expense strong { color:#d48422; }
.profit strong { color:#079775; }

.cta { padding:88px 20px; color:#fff; text-align:center; background:linear-gradient(135deg,#0677d5,#05a5b8 60%,#10b99d); }
.cta .kicker { margin:auto; }
.cta > p:not(.kicker) { max-width:740px; margin:0 auto 26px; color:#d2f2f5; line-height:1.7; }

footer { min-height:190px; display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:center; gap:30px; padding:42px clamp(20px,5vw,80px); color:#9eb3c1; background:#031525; font-size:11px; line-height:1.7; }
.footer-brand strong, .footer-brand span { display:block; }
.footer-brand strong { color:#fff; font-size:13px; }
.presenter { color:#e3f7fa; text-align:right; }

.modal-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; background:rgba(2,15,28,.78); backdrop-filter:blur(9px); }
.modal-backdrop[hidden] { display:none; }
.modal { position:relative; width:min(520px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:36px; border-radius:26px; background:#fff; box-shadow:0 40px 120px rgba(0,0,0,.4); }
.modal > img:not(.product-modal-image) { width:78px; height:78px; object-fit:contain; }
.modal-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border:0; border-radius:50%; color:#456477; background:#edf6f9; font-size:24px; }
.modal h2 { margin:12px 0 8px; font-size:28px; }
.modal > p { color:var(--muted); line-height:1.7; }
.role-select { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:20px 0; }
.role-select button { min-height:38px; border:1px solid var(--line); border-radius:10px; color:#587384; background:#f7fbfc; font-size:10px; font-weight:900; }
.role-select button.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,#0787e5,#08b9b5); }
.modal label { display:grid; gap:8px; color:#567184; font-size:11px; font-weight:900; }
.modal input { height:48px; padding:0 14px; border:1px solid var(--line); border-radius:12px; outline:0; }
.full { width:100%; margin:16px 0 12px; }
.modal > small { color:#8aa0ae; line-height:1.5; }
.product-modal { width:min(860px,100%); display:grid; grid-template-columns:1fr 1fr; padding:0; overflow:hidden; }
.product-modal-image { width:100%; height:100%; min-height:520px; object-fit:cover; }
.product-modal-copy { padding:42px 34px; }
.product-modal-copy > p { color:var(--muted); line-height:1.7; }
.product-facts { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.product-facts span { padding:10px; border-radius:10px; color:#637d8e; background:#eff8fa; font-size:10px; }
.product-facts b { color:#087fa4; }
.modal-buy { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.modal-buy > strong { font-size:22px; color:#087fa4; }

@keyframes bump { 50% { transform:scale(1.12); } }

@media (max-width:1100px) {
  .nav-links {
    position:fixed; top:78px; left:20px; right:20px; display:none; flex-direction:column; align-items:stretch;
    padding:14px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(3,23,41,.98);
  }
  .nav-links.open { display:flex; }
  .menu-toggle { display:block; margin-left:auto; }
  .hero-inner { grid-template-columns:minmax(0,640px) 1fr; }
  .workflow-ribbon { display:none; }
  .step-grid { grid-template-columns:repeat(2,1fr); }
  .fish-grid { grid-template-columns:repeat(2,1fr); }
  .finance { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr 1fr; }
  .presenter { grid-column:1/-1; text-align:left; }
}

@media (max-width:760px) {
  .site-header { height:68px; padding-inline:14px; }
  .brand { min-width:0; }
  .brand img { width:48px; height:48px; }
  .brand strong { max-width:165px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; }
  .cart-button { min-width:58px; }
  .nav-links { top:68px; }
  .hero {
    min-height:0; padding:104px 18px 68px;
    background:linear-gradient(90deg,rgba(2,13,27,.99),rgba(3,23,43,.89) 60%,rgba(3,23,43,.4)),url("assets/hero-fisheries-vijay.png") 68% center/cover no-repeat,#031525;
  }
  .hero-inner { grid-template-columns:1fr; min-height:620px; align-items:end; }
  .hero-copy { padding:22px; border-radius:22px; }
  .hero h1 { font-size:clamp(40px,12vw,58px); }
  .lead { font-size:13px; }
  .hero-actions .button { width:100%; }
  .hero-stats { grid-template-columns:repeat(2,1fr); margin-top:40px; padding:12px 4px; }
  .hero-stats article { padding:12px 6px; }
  .hero-stats article:nth-child(3) { border-left:0; }
  .hero-stats strong { font-size:19px; }
  .hero-stats span { font-size:8px; }
  .workflow, .finance, .trace-section { padding:76px 0; }
  .step-grid, .fish-grid, .finance-cards { grid-template-columns:1fr; }
  .market-head { align-items:stretch; flex-direction:column; }
  .search-box { min-width:0; }
  .fish-image { height:230px; }
  .trace-card { grid-template-columns:1fr; padding:28px; }
  .trace-card ol { min-width:0; }
  .finance-cards article:last-child { grid-column:auto; }
  .formula { gap:7px; }
  .formula span { font-size:12px; }
  footer { grid-template-columns:1fr; }
  .product-modal { grid-template-columns:1fr; }
  .product-modal-image { min-height:250px; max-height:300px; }
  .role-select { grid-template-columns:repeat(2,1fr); }
  .modal { padding:28px 20px; }
  .product-modal { padding:0; }
  .product-modal-copy { padding:28px 20px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}